Share
In questo tutorial, progetteremo un sito Web per il browser Safari mobile (disponibile su iPhone e iPod Touch). Partiremo da zero in Photoshop e seguiremo, passo dopo passo, il prodotto finito con un cursore animato di immagini jQuery.
Con milioni di utenti iPhone che accedono al Web ogni giorno, è fondamentale che la tua azienda o il tuo brand siano in grado di fornire servizi mobili. utenti che utilizzano il browser Mobile Safari, con un sito Web progettato per il proprio dispositivo. Invece di lottare con caratteri piccoli, collegamenti difficili da premere e altri problemi di usabilità del sito web associati a un browser web mobile, possiamo offrire ai nostri visitatori un'esperienza interattiva di cui potranno godere.
È importante per noi fornire ai nostri utenti un'esperienza che apprezzeranno o finiremo per frustrare i nostri visitatori e, eventualmente, anche per farli abbandonare il nostro sito e non tornare più indietro. Creeremo un sito che si concentra su alcuni punti chiave. Il nostro sito dovrebbe:
Se sei su un Mac, puoi scaricare l'iPhone SDK da Developer.Apple.com. Registrati con un account gratuito e scarica l'ultima versione di iPhone SDK con il simulatore di iPhone. Un vero iPhone o ipod Touch sarà sempre la soluzione migliore ma il simulatore funziona bene per scopi di sviluppo.
Per prima cosa scarica questa texture di cemento da Flickr. Trasforma l'immagine in un documento Photoshop di dimensioni 320 px (larghezza) di 480 px (altezza). Cambia il colore di sfondo in # 1D1D1D. Cambia lo stile del livello sulla texture in "Moltiplicare" e aggiungi una maschera sfumatura da bianca a nera.
Fai clic con il tasto destro su un livello e appiattisci l'immagine. Copia e incolla in una nuova finestra in modo che possiamo trasformarla in un'immagine ripetuta. Vai a Filtro> Altro> Offset. Impostare il valore Orizzontale su +162. Usa lo strumento di guarigione per ripulire l'area del problema. Salva l'immagine come jpg imposta la qualità al 60%.
Apri un altro documento Photoshop e impostalo su 195px (larghezza) di 75px (altezza). Crea due livelli ciascuno con una linea tracciata con lo strumento linea. Separa le linee di un pixel. La linea superiore dovrebbe essere bianca, quella inferiore un grigio scuro. Esportare l'immagine come abbiamo fatto nel passaggio precedente. Entrambe le immagini dovrebbero essere salvate in una cartella chiamata "images"
Ora è il momento di codificare la homepage. Aggiungeremo il codice di base e lo modificheremo nel passaggio successivo. Salva questo come index.html. Il seguente codice ci fornirà l'html di base della homepage e il collegamento a un foglio di stile che creeremo.
Sito mobile Lorum Ipsum Lorum ipsum
- Casa
- Di
- Contatto
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed fa eiusmod tempor incididunt ut labore et dolore magna aliqua.
leggi di più…Copyright 2009
Home | Informazioni su | Contatto
Aggiungiamo un po 'di stile creando un nuovo file chiamato styles.css. Il seguente codice ci darà lo stile per il codice html della homepage.
Accentsconagua
html, corpo, div, span, oggetto, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, indirizzo, codice, img, piccolo, forte, dl, dt, dd, ol, ul, li, fieldset, form, label margin: 0; padding: 0; confine: 0; contorni: 0; dimensione carattere: 100%; vertical-align: baseline; sfondo: trasparente; / * Main Styles * / body background: # 1d1d1d url ('images / background.jpg') repeat-x; colore: #FFF; font-family: "Arial", sans-serif; altezza della linea: 20px; dimensione del font: 13px; -webkit-text-size-adjust: nessuno; p padding: 10px 5px; h1 color: # b5b5b5; font-size: 26px; margine: 10px 5px; h1 span color: # d5ac55; h2 color: # d5ac55; font-size: 18px; font-weight: normal; margin-top: 10px; padding-left: 5px; # hidden display: none; .show display: inline; #readmore height: 30px; # readmore-button background: # 000; colore: # d5ac55; blocco di visualizzazione; float: giusto; imbottitura: 5px 7px; allineamento del testo: centro; decorazione del testo: nessuna; larghezza: 76 px; / * Stili di menu * / #menu ul border-bottom: 1px solid #FFF; altezza: 23 px; stile elenco: nessuno; margine: 0 5px; #menu ul li float: left; margin-right: 30px; #menu ul li a color: #FFF; decorazione del testo: nessuna; text-transform: maiuscolo; #menu ul li.selected border-bottom: 3px solid #FFF; / * Sideshow Styles * / #slideshow border: 1px solid # 786334; border-bottom: 1px solid # 22201d; margin-bottom: 20px; margin-top: 10px; #slideshow ul li height: 174px; stile elenco: nessuno; larghezza: 316px; #controls position: absolute; margin-top: -40px; stile elenco: nessuno; #controls li background: rgb (0,0,0); sfondo: rgba (0,0,0,0,9); border: 2px solid # 202020; border-bottom: 1px solid # 797979; fluttuare: a sinistra; allineamento del testo: centro; #controls li a display: block; colore: #FFF; altezza: 20px; imbottitura: 7px; decorazione del testo: nessuna; larghezza: 20px; / * Stili piè di pagina * / #footer background: # 000; altezza: 40px; margin-top: 10px; #footer p # copyright float: right; larghezza: 100 px; #footer p # sitemap width: 200px; #footer a color: #FFF; decorazione del testo: nessuna; Salva l'immagine del camion dei pompieri in una cartella denominata "imageslider" all'interno della cartella "images". Salva l'immagine come img1.jpg. Questa sarà l'immagine visualizzata nel cursore dell'immagine.
Scarica Easy Slider 1.7 jQuery Slider e copia la cartella "js" nella stessa cartella del nostro file index.html. Copia il seguente codice nei tuoi head tag sul file index.html.
Avrai ora una homepage funzionante.
Per rimuovere la barra degli indirizzi, sostituire il tag del corpo con il seguente:
E aggiungi il seguente metatag alla tua testa per gestire i problemi di ridimensionamento dello zoom e del testo.
Copia la pagina index.html per creare la pagina relativa. Rimuovi il codice specifico per il cursore jQuery. Aggiungi il seguente sotto il pulsante Leggi altro per creare la "barra laterale".
riguardo a me
p 123.456.7890 e [email protected] a 123 Qualcuno ST
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed fa eiusmod tempor incididunt ut labore et dolore magna aliqua.
social media
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non sunt in culpa qui officia deserunt mollit anim id est laborum.
- cinguettio
- Youtube
- Screenr
- Il mio spazio
Salvare l'immagine seguente nella cartella delle immagini. Chiamalo cat.jpg.
Ora è il momento di aggiungere un po 'di stile agli elementi all'interno della barra laterale. Dovremo farlo con alcuni CSS. Aggiungi quanto segue al tuo file styles.css.
/ * Stili della sidebar * / #sidebar background: -webkit-gradient (lineare, sinistra in alto, in basso a sinistra, color-stop (0.0, # e1d9ce), color-stop (0.1, # e6e6e6)); colore: # 000; margin-top: 10px; imbottitura: 0px 5px 5px 5px; #sidebar p.fade background: url ('images / fade.jpg') repeat-x; #sidebar h2 color: # 000; font-size: 18px; font-weight: normal; imbottitura: 7px 0; #sidebar img border: 1px solid #FFF; margine: 5px 10px; .contactinfo border-bottom: 3px punteggiato # 656565; blocco di visualizzazione; colore: # 2f2f2f; font-size: 20px; margin-left: 10px; .contactinfo a display: block; sfondo: # 646363; colore: # efaa19; float: giusto; decorazione del testo: nessuna; # social-links list-style: square; imbottitura: 10px 0 10px 20px; larghezza: 95%; # social-links li float: right; larghezza: 33%; # social-links li a background: # 646363; colore: # efaa19; imbottitura: 2px 4px; decorazione del testo: nessuna; . chiaro chiaro: entrambi; 
Copia la pagina relativa e nominala contact.html. Aggiungi il seguente codice alla testa del tuo html. È il codice per estendere la mappa di google utilizzando la loro API. Avrai bisogno di una chiave API di Google Maps se stai per utilizzarla su un server live. È possibile utilizzare un servizio online per produrre il codice se non si è disposti a compilarlo da soli.
Aggiungi semplicemente il codice seguente in cui desideri visualizzare la tua mappa.
Sentiti libero di aggiornare il tuo menu per adattarlo a ciascuna pagina spostando la classe "selezionata" sulla voce di elenco appropriata.
Per ulteriori ricerche, non esitare a consultare l'articolo di Engage Interactive e il tutorial di Nettuts +.
