Approccio al Web Design

Le vostre creatività migliori

Moderatori: Gattinara, ModiMaccanici

faxus
Pro-Expert 
Pro-Expert 
Avatar utente
Iscritto il: lun, 02 giu 2014 15:12
Messaggi: 26207
Località: Due Sicilie
Contatta:

Top

Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: lun, 01 set 2014 21:37

TheMacGuru ha scritto:Io darei un occhiata a:...
... Occhio alle vulnerabilita di WordPress:...
Io credo che BootStrap sia un po' fuori dalla portata tranquilla che chiedeva Fenix.

Le vulnerabilità di Wordpress vengono costantemente pacciate.
Anche l'ultima, di pochi giorni fa, che rendeva passibili di attacchi WP e Drupal è stata pacciata dopo poche ore.

È ovvio che ogni CMS contenga delle vulnerabilità, ma con un po' di accortezza, aggiornando costantemente e usando delle protezioni i rischi vengono ridotti a livelli insignificanti
Zen
Unix Expert
Unix Expert
Avatar utente
Iscritto il: sab, 14 gen 2012 01:24
Messaggi: 2435
Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: lun, 01 set 2014 21:49

Bootstrap è fantastico per tirare su una webapp in poco tempo, ma rende il codice una schifezza illeggibile e rompe il pattern che dice di separare il significato della pagina (html) dalla sua rappresentazione (CSS).
Inoltre, richiede uno studio quasi a sé.
404
Maccanico attivo
Maccanico attivo
Iscritto il: ven, 25 lug 2014 19:40
Messaggi: 450
Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: lun, 01 set 2014 22:47

Zen ha scritto:Bootstrap è fantastico per tirare su una webapp in poco tempo, ma rende il codice una schifezza illeggibile e rompe il pattern che dice di separare il significato della pagina (html) dalla sua rappresentazione (CSS).
Inoltre, richiede uno studio quasi a sé.
Esistono 2 versioni di Bootstrap, normalmente nei siti in produzione si usa la versione compressa, o minificata (minify), effettivamente quasi impossibile da leggere con strumenti come Firebug.

Per quanto possa apprezzare molto Bootstrap, secondo me esistono validissime alternative come Foundation, secondo me molto più maturo e solido come framework.

Ma che sia Boostrap o altri, si tratta sempre di strumenti dedicati agli sviluppatori. Bootstrap sicuramente aiuta il progettista, per esempio chi costruisce templates per lavoro, magari anche piuttosto complessi, ma usare Boostrap per costruirsi il primo sito può diventare una vera impresa se non si hanno buone basi, oltre tutto alla meglio se ne userà meno del 20%, quindi tutto il resto è "inutile" zavorra.
A meno che la costruzione del sito fa parte di un iter di studio, ma in questo caso va da se che è quasi obbligo conoscerli un po' tutti.
Zen
Unix Expert
Unix Expert
Avatar utente
Iscritto il: sab, 14 gen 2012 01:24
Messaggi: 2435
Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: lun, 01 set 2014 22:50

Esistono 2 versioni di Bootstrap, normalmente nei siti in produzione si usa la versione compressa, o minificata (minify), effettivamente quasi impossibile da leggere con strumenti come Firebug.
Ma io parlavo che rendeva illeggibile l'html :D, lo riempie di classi non semantiche.
404
Maccanico attivo
Maccanico attivo
Iscritto il: ven, 25 lug 2014 19:40
Messaggi: 450
Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: mar, 02 set 2014 08:02

Zen ha scritto:lo riempie di classi non semantiche.
Sono d'accordo, ma non è Bootstrap che crea classi non semantiche ma il suo uso non corretto.
Compilando, per esempio con LESS, si includono le classi CSS nel foglio di stile invece che nel codice HTML.
Zen
Unix Expert
Unix Expert
Avatar utente
Iscritto il: sab, 14 gen 2012 01:24
Messaggi: 2435
Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: mar, 02 set 2014 09:45

Compilando, per esempio con LESS, si includono le classi CSS nel foglio di stile invece che nel codice HTML.
Vero (volevo fare la stessa cosa con Sass) ma a quel punto perdi i javascript...
404
Maccanico attivo
Maccanico attivo
Iscritto il: ven, 25 lug 2014 19:40
Messaggi: 450
Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: mar, 02 set 2014 10:49

Zen ha scritto: (volevo fare la stessa cosa con Sass) ma a quel punto perdi i javascript...
In che senso perdi i javascript con sass?
Ma non conosco sass, mi sembra però che si usa una diversa tecnica con l'uso dei .json


PS

Ho dato un'occhiata a questo interessante articolo in cui l'autore dimostra la maggiore efficacia nell'uso di SASS: http://css-tricks.com/sass-vs-less/" onclick="window.open(this.href);return false;

E nello stesso sito un articolo su quanto accennavo riguardo l'uso di .json : http://css-tricks.com/making-sass-talk- ... with-json/" onclick="window.open(this.href);return false;

Sarebbe interessante un approfondimento, non si finisce mai di imparare.
Zen
Unix Expert
Unix Expert
Avatar utente
Iscritto il: sab, 14 gen 2012 01:24
Messaggi: 2435
Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: mar, 02 set 2014 12:28

In che senso perdi i javascript con sass?
Nel senso che Bootstrap comprende anche dei javascript per animazioni, menu etc. Se tu estendi le classi di Bootstrap con Sass/Less non puoi poi usare i javascript (o almeno non con la stessa semplicità).

Poi mi leggo l'articolo su JSON e Sass... sembra interessante :).
ilario_seb
Maccanico attivo
Maccanico attivo
Avatar utente
Iscritto il: dom, 19 ago 2012 23:27
Messaggi: 276
Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: mar, 02 set 2014 23:58

Mi piacerebbe dare, ai banneroni principali di ogni pagina, l'effetto parallasse, così che quando la pagina scorre l'immagine si muove di conseguenza, è una cosa fattibile o ci spingiamo troppo nell'avanzato?
Gattinara
Web&Designer Expert
Web&Designer Expert
Avatar utente
Iscritto il: gio, 11 ago 2011 15:16
Messaggi: 761
Località: Roma
Contatta:

Top

Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: mer, 03 set 2014 01:27

Con "immagine si muove di conseguenza" intendi un effetto simile a questo?

Si può ottenere tramite soli CSS3 (senza l'ausilio di JS ed IE9+ compatibili), ma prima di impelagarci in codice evoluto converrebbe seguitare ad applicarci sulle basi.

N. d. F.: L'effetto in questione, visto il diffusissimo abuso coevo, è solito nausearmi (a meno che non venga utilizzato in strutture singolari che ne giustifichino la presenza) ma, ripeto, sono gusti.
"Chiunque è degno di un ombrello"
Nikolàj Vsévolodovic Stavrogin

"Chiunque a quarant'anni non conosce emorroidi"
Armand Vedel
faxus
Pro-Expert 
Pro-Expert 
Avatar utente
Iscritto il: lun, 02 giu 2014 15:12
Messaggi: 26207
Località: Due Sicilie
Contatta:

Top

Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: mer, 03 set 2014 01:49

Gattinara ha scritto:... L'effetto in questione, visto il diffusissimo abuso coevo, è solito nausearmi (a meno che non venga utilizzato in strutture singolari...
LOL!

Prepara i sali... Hahaha...

Sto facendo un sito che unisce sia l'effetto immagine che si muove che gli oggetti che si muovono col mouse.
Poi l'immagine che scorre sul fondo si va a incastrare in una specie di puzzle in un'altro fondo cui si arriva...

Comunque in parte è giustificato.
Solo in parte, però, il resto è saltimbancheria e mio divertimento personale
Gattinara
Web&Designer Expert
Web&Designer Expert
Avatar utente
Iscritto il: gio, 11 ago 2011 15:16
Messaggi: 761
Località: Roma
Contatta:

Top

Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: mer, 03 set 2014 02:07

Curiosissima di occhiarlo - provvederò di essere munita di un buono Spanna per arginare l'eventuale urto Immagine
"Chiunque è degno di un ombrello"
Nikolàj Vsévolodovic Stavrogin

"Chiunque a quarant'anni non conosce emorroidi"
Armand Vedel
faxus
Pro-Expert 
Pro-Expert 
Avatar utente
Iscritto il: lun, 02 giu 2014 15:12
Messaggi: 26207
Località: Due Sicilie
Contatta:

Top

Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: mer, 03 set 2014 02:20

Ci vorrà del tempo, anche se la parte detta è quasi pronta.

Devo ancora trasferire il sito vecchio su un nuovo server, poi per quello nuovo che lo sostituirà mi mancano ancora dei testi.
E c'è un bel po' di SEO per recuperare posizioni acquisite
ilario_seb
Maccanico attivo
Maccanico attivo
Avatar utente
Iscritto il: dom, 19 ago 2012 23:27
Messaggi: 276
Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: mer, 03 set 2014 09:07

Gattinara ha scritto:Con "immagine si muove di conseguenza" intendi un effetto simile a questo?

Si può ottenere tramite soli CSS3 (senza l'ausilio di JS ed IE9+ compatibili), ma prima di impelagarci in codice evoluto converrebbe seguitare ad applicarci sulle basi.

N. d. F.: L'effetto in questione, visto il diffusissimo abuso coevo, è solito nausearmi (a meno che non venga utilizzato in strutture singolari che ne giustifichino la presenza) ma, ripeto, sono gusti.
Si, esatto intendevo quello.
Concordo, piccoli step alla volta :D
Quel sito d'esempio è bellissimo, penso non me lo scorderò mai!

Curioso di vedere il lavoro di Fax
404
Maccanico attivo
Maccanico attivo
Iscritto il: ven, 25 lug 2014 19:40
Messaggi: 450
Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: mer, 03 set 2014 09:22

ilario_seb ha scritto: Si, esatto intendevo quello.
Il link che ha inserito Gattinara non ha nessun effetto parallasse, sono immagini con posizione fixed.
Questo è un esempio di effetto parallasse, osserva il movimento delle immagini, come se ci fosse una profondità tra l'osservatore e le immagini, appunto il parallasse : http://ianlunn.co.uk/plugins/jquery-parallax/" onclick="window.open(this.href);return false;

Guarda il movimento delle scarpe da tennis mentre fai lo scroll della pagina.

ilario_seb ha scritto:Mi piacerebbe dare, ai banneroni principali di ogni pagina, l'effetto parallasse
Ciao, devi fare molta attenzione a cosa inserisci nel tuo sito visto che ti "offri" come web designer. Effetti come il parallasse danno un valore aggiunto, ma anche no, e nel tuo caso rischi un autogol, semplicemente perché saresti l'ennesimo clone di una grande quantità di templates venduti con questo ed altri effetti.

Se vuoi dimostrare le tue competenze devi averle, oppure scegli uno dei tanti script jQuery e lo implementi in un tuo prosismo lavoro nel sito di un cliente in cui l'effetto parallasse è fondamentale.

Gattinara ti ha dato le basi fondamentali per poter essere tu stesso in grado di implementare qualsiasi cosa, nel caso dell'effetto parallasse esistono diversi script, il più famoso è Stellar, a questo link trovi documentazione ed esempi: http://markdalgleish.com/projects/stellar.js/docs/" onclick="window.open(this.href);return false;

Tutto il progetto puoi scaricarlo da GitHub: https://github.com/markdalgleish/stellar.js" onclick="window.open(this.href);return false;

Implementare stellar.js, o altri script, è piuttosto semplice, ma non basta per avere lo stesso effetto di un templates commerciale, in quanto dovrai aggiungere ulteriori javascript per il controllo per esempio della posizione esatta della pagina, mouse eccetera, oltre al controllo del movimento armonico della foto su cui applichi l'effetto parallasse.
E' ovviamente tutto fattibilissimo, se cerchi su Google "parallax tutorial stellar.js", trovi tonnellate di guide, ma renderà il tuo sito parecchio "gonfio" e pesante oltre che poco crossbrowser e secondo me il sito di un web designer dev'essere accessibile e crossbrowser.
Rispondi