Tutorial HTML5 Come creare una pagina di un singolo prodotto

Questo articolo è parte del nostro "Serie di tutorial HTML5 / CSS3" - dedicato a farti diventare un designer e / o sviluppatore migliore. Clicca qui per vedere più articoli della stessa serie.

In questo post, lavoreremo su un progetto fittizio, creando una singola pagina di prodotto per offrire iPhone 4S, e in questo progetto implementeremo anche i metodi che abbiamo discusso nei post precedenti; il

elemento e il selettore di negazione.

Iniziamo.

HTML5 Markup

Innanzitutto, dobbiamo creare un html documentare con il seguente markup:

    Apple iPhone 4 - 16 GB
 L'iPhone più sorprendente ancora.
  
   
  Il chip A5 dual-core più veloce. La fotocamera da 8 megapixel con le nuove ottiche riprende anche video HD a 1080p. E introducendo Siri. È ancora l'iPhone più sorprendente.
  caratteristiche del prodotto
  Fotocamera da 8 mega pixel con registrazione video full 1080p
 Assistente vocale Siri
 iCloud
 Stampa aerea
 Display Retina
 Geotagging di foto e video

Usiamo diversi nuovi tag dalle specifiche HTML5, come il intestazione, hgroup, figura, sezione, e uno che abbiamo discusso prima; il dettagli e sommario etichetta.

Tuttavia, non approfondiremo questi tag, non perché non siamo disposti a farlo, ma piuttosto questi sono argomenti di base che puoi trovare facilmente altrove. Quindi, se sei veramente nuovo in HTML5, ti consiglierei di leggere i seguenti riferimenti di quei tag; li hanno spiegati in modo completo:

Parliamo di Semantic
L'elemento dell'intestazione HTML5
L'elemento hgroup
Riferimento tag HTML5

Ora vediamo la prima apparizione della nostra pagina.

Bene, sembra ragionevole senza stili. In cima c'è l'intestazione, e poi arriva la sezione per l'immagine, la descrizione e infine il pulsante 'Acquista ora'. Ora, ravviviamo questa pagina.

Gli stili

Inizieremo normalizzando tutti gli stili predefiniti usando questo foglio di stile e aggiungendo uno sfondo sfumato al html etichetta.

 html height: 100%; sfondo: # f3f3f3; background: -moz-linear-gradient (in alto, # f3f3f3 0%, #ffffff 50%); background: -webkit-gradient (lineare, a sinistra in alto, a sinistra in basso, color-stop (0%, # f3f3f3), color-stop (50%, # ffffff)); background: -webkit-linear-gradient (in alto, # f3f3f3 0%, # ffffff 50%); background: -o-linear-gradient (in alto, # f3f3f3 0%, # ffffff 50%); sfondo: -ms-linear-gradient (in alto, # f3f3f3 0%, # ffffff 50%); background: linear-gradient (in alto, # f3f3f3 0%, # ffffff 50%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f3f3f3", endColorstr = "# ffffff", GradientType = 0);

Ricorda che i nostri elementi di prodotto sono tutti avvolti in a div con la classe del prodotto. Quindi, qui vorremmo centrare il wrapper e impostare la larghezza su cui fare riferimento 650 px.

 .wrapper width: 650px; margine: auto; imbottitura: 25px 0px;

La sezione dell'intestazione

Nella sezione dell'intestazione abbiamo due titoli h1 e h4, quindi diamo uno stile a questi elementi.

 h1, h4 font-family: Helvetica Neue, Arial, sans-serif; font-weight: normal; margine: 0;  h1 font-size: 24pt;  h4 font-size: 16pt; colore: #aaa;

E quindi aggiungere un po 'di spazio nella parte inferiore del intestazione con un margine.

 header margin-bottom: 20px;

Se guardi il lato destro dell'header, ci sarebbero molti spazi bianchi in quel lato.

Quindi perché non mettiamo anche il logo Apple lì.

 header margin-bottom: 20px; background: url ('... /https://assets.hongkiat.com/uploads/html5-single-product-page/apple.png') no-repeat right center;

L'immagine del prodotto

Quindi, sposta l'immagine a sinistra e imposta la larghezza massima dell'immagine su 350px.

 figura float: sinistra;  figure img max-width: 350px;

Dato che l'immagine è stata spostata a sinistra, la sezione di descrizione verrà spostata a destra e verrà impostata la larghezza su 300px.

 sezione font-family: Tahoma, Arial, sans-serif; altezza della linea: 150%; float: giusto; larghezza: 300 px; colore: # 333;

Ora vediamo il risultato finora.

Inizia a sembrare buono, ma il tag dei dettagli non funziona ancora (tranne in Chrome), quindi modifichiamo il pulsante successivo.

Il tasto

Per gli stili dei pulsanti, riproduciamo quello di Apple.com Store. Ed ecco tutta la sintassi che devi inserire nel tuo foglio di stile per il pulsante.

 pulsante background: # 36a9ea; sfondo: -moz-linear-gradient (in alto, # 36a9ea 0%, # 127fd2 100%); background: -webkit-gradient (lineare, a sinistra in alto, a sinistra in basso, color-stop (0%, # 36a9ea), color-stop (100%, # 127fd2)); background: -webkit-linear-gradient (in alto, # 36a9ea 0%, # 127fd2 100%); sfondo: -o-linear-gradient (in alto, # 36a9ea 0%, # 127fd2 100%); sfondo: -ms-linear-gradient (in alto, # 36a9ea 0%, # 127fd2 100%); sfondo: gradiente lineare (in alto, # 36a9ea 0%, # 127fd2 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 36a9ea", endColorstr = "# 127fd2", GradientType = 0); border: 1px solid # 00599d; colore: #fff; imbottitura: 8px 20px; -webkit-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0px 1px 1px 0px rgba (0, 0, 0, .1), inserto 0px 1px 0px 0px rgba (250, 250, 250, .3); box-shadow: 0px 1px 1px 0px rgba (0, 0, 0, .1), riquadro 0px 1px 0px 0px rgba (250, 250, 250, .3); text-shadow: 0px 1px 1px # 156cc4; filtro: ombretto (colore = # 156cc4, offx = 0, offy = 1); font-size: 10pt; pulsante: hover background: # 2f90d5; sfondo: -moz-linear-gradient (in alto, # 2f90d5 0%, # 0351b7 100%); background: -webkit-gradient (lineare, a sinistra in alto, a sinistra in basso, color-stop (0%, # 2f90d5), color-stop (100%, # 0351b7)); background: -webkit-linear-gradient (in alto, # 2f90d5 0%, # 0351b7 100%); background: -o-linear-gradient (in alto, # 2f90d5 0%, # 0351b7 100%); sfondo: -ms-linear-gradient (in alto, # 2f90d5 0%, # 0351b7 100%); sfondo: gradiente lineare (in alto, # 2f90d5 0%, # 0351b7 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 2f90d5", endColorstr = "# 0351b7", GradientType = 0); pulsante: attivo background: # 127fd2; -webkit-box-shadow: inset 0px 2px 1px 0px rgba (0, 47, 117, .5), 0px 1px 1px 0px rgba (0, 0, 0, 0); box-shadow: inset 0px 2px 1px 0px rgba (0, 47, 117, .5), 0px 1px 1px 0px rgba (0, 0, 0, 0);

Ora il pulsante dovrebbe apparire migliore.

Problema in Internet Explorer

Come al solito IE (Internet Explorer) causa sempre qualche problema; se lo apri in qualsiasi IE inferiore a 9, la pagina rimarrà senza stile.

Questo perché Internet Explorer non riconosce i nuovi elementi (sezione, intestazione, ecc.) quindi gli stili che abbiamo specificato non si applicano. Quindi, nel prossimo passo lavoreremo per risolvere questo problema.

Test del supporto del browser

Nel nostro post precedente, abbiamo affrontato il supporto del browser per l'elemento details usando questo polyfill; in modo che possa funzionare nei browser non supportati. Tuttavia, questa volta proveremo diversi modi di farlo con Modernizr.

Dal suo sito ufficiale, "Modernizr è una libreria JavaScript open source che ti aiuta a costruire la prossima generazione di HTML5 e CSS3-siti web alimentati". Tecnicamente, Modernizr testerà il supporto del browser per alcuni nuovi elementi e funzionalità. Se il supporto non viene fornito, dobbiamo quindi fornire un fallback, sia fornendo stili diversi che fornendo polyfills. In questo caso, useremo Modernizr per aiutarci a testare i dettagli e l'elemento di riepilogo.

Vai a Modernizr e procedi alla sua pagina di download.
Nella pagina di download, Modernizr offre alcune opzioni per configurare la libreria, quindi devi solo selezionare alcune funzionalità che ti servono davvero per il tuo sito web. In questo caso, abbiamo bisogno di:
- HTML5Shiv 3.4
- Aggiungi classi CSS, questa funzione inserirà automaticamente le classi nel tag html.
- il Modernizr.load,
- vai alla finestra dei componenti aggiuntivi della comunità e seleziona elem-details,
- Nella sezione Estensibilità, selezionare Modernizr.addTest.
Genera e scarica il file.
Collegalo al tuo html e ricarica la pagina in Internet Explorer. La pagina dovrebbe ora essere stata disegnata in quanto Internet Explorer ora può riconoscere i tag.

E, se si visualizza l'elemento source o inspect, la classe no-details è stata inserita nel tag html; indicando che il browser in cui stiamo visualizzando l'anteprima della pagina; al momento non supporta l'elemento dei dettagli. @@@@ [Non riesco a capire questa frase. ]

Possiamo quindi creare un fallback usando questa classe come hook, che faremo nel prossimo passo.

Il fallback

In questo passo forniremo simili dettagli funzionalità degli elementi per altri browser (escluso Chrome). Nel post precedente, questo passaggio è stato eseguito automaticamente utilizzando questo script, ma questa volta lo creeremo da soli.

Nota: Basta rivedere un po 'dal nostro post precedente; l'elemento dettagli è attualmente supportato solo nel browser Chrome.

Quindi, iniziamo a lavorare sul CSS prima.

Sul tag di riepilogo, cambiamo la sua modalità cursore sul puntatore, quindi l'utente noterà che è cliccabile.

 riepilogo cursore: puntatore; font-size: 12pt; contorni: 0;

Per dare più spazi nella parte superiore e inferiore dell'elemento dettagli con un margine.

 dettagli margine: 20px 0px;

Per impostazione predefinita, il tag di riepilogo avrà una freccia. Ma qui vorremmo sostituirlo con un'icona più-meno.

Nota: Prima di procedere, in precedenza ho scaricato le icone da questa raccolta di Fugue, li ho scaricati e li ho salvati in un unico file.

Aggiungiamo uno pseudo-elemento precedente e alleghiamo l'icona come sfondo. Si noti che a questo punto, la posizione dello sfondo è in alto che mostrerà l'icona più.

 dettagli> riassunto: prima larghezza: 16px; altezza: 16px; display: blocco in linea; contenuto: "! important; background: url ('... /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png') centro senza ripetizione in alto; margin-right: 5px; position: relative; top: 2px;

Quindi, quando l'elemento dei dettagli è aperto, la posizione dello sfondo si sposterà verso il basso che mostrerà l'icona meno.

 dettagli [apri]> riepilogo: prima, details.open> riepilogo: before background: url ('... /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png' ) no-repeat centro fondo;

Il [Aperto] il segno è un selettore. In questo caso, selezionerà l'attributo open details nel browser di supporto.

Infine dovremmo nascondere la freccia che di default è mostrata in Chrome.

 dettagli> summary :: - webkit-details-marker display: none;

Quindi, vediamo il risultato in un browser per un po '.

La freccia predefinita ora è stata sostituita con la nostra icona e, se la vedi in Chrome, avrai già un effetto di attivazione quando fai clic su di essa; l'icona cambierà di conseguenza. Ma, negli altri browser, non accadrà nulla. Quindi, nel prossimo passaggio proveremo a replicare l'effetto con jQuery.

L'effetto di commutazione con jQuery

Prima di iniziare con la parte di jQuery, vorrei ringraziare Ian Devlin per l'ispirazione, la sceneggiatura qui sotto è in realtà una leggera modifica del suo.

Va bene, creiamo una variabile per memorizzare il tag di riepilogo.

 var summary = $ ('sommario dettagli');

Quindi avvolgiamo tutti gli elementi fratelli del sommario con a div.

summary.siblings (). wrapAll ('
');

E nascondi quel div quando l'elemento details non ha la classe open.

$ ('dettagli: non (.open) sommario'). fratelli ('div'). hide ();

Quando si fa clic sul riepilogo, vogliamo che venga mostrato il div nascosto, e il contrario, quando il div è inizialmente aperto, sarebbe nascosto.

 summary.click (function () $ (this) .siblings ('div'). toggle (); $ ('details'). toggleClass ('open'););

Per assicurarci che tali funzioni vengano eseguite solo nei browser non supportati, le racchiudiamo all'interno di questa istruzione condizionale.

 if ($ ('html'). hasClass ('no-details')) // il codice va qui

E qui sotto c'è il codice che abbiamo:

 if ($ ('html'). hasClass ('no-details')) var summary = $ ('sommario dettagli'); summary.siblings (). wrapAll ('
'); $ ('dettagli: non (.open) sommario'). fratelli ('div'). hide (); summary.click (function () $ (this) .siblings ('div'). toggle (); $ ('details'). toggleClass ('open'););

Ora proviamolo nel browser; l'effetto di attivazione dovrebbe ora funzionare su tutti i browser, personalmente ho controllato (fino a Internet Explorer 7).

dimostrazione
Scarica fonte

Suggerimenti: In alternativa è possibile modificare il .ginocchiera () con .slideToggle () per creare un effetto slide. Inoltre, se si desidera aprire inizialmente il dettaglio, è possibile aggiungere una classe aperta nell'elemento dei dettagli.

Conclusione

Abbiamo seguito tutte le fasi della creazione di una singola pagina di prodotto utilizzando HTML5, eseguendo il debug per i browser non supportati e replicando l'effetto di attivazione per l'elemento di dettaglio da soli, quindi si spera che si possa imparare molto da esso.

Tuttavia, sono consapevole del fatto che non ho spiegato tutto in dettaglio in questo post, quindi se vuoi chiarire qualcosa, sentiti libero di postare la domanda nella casella dei commenti qui sotto.