Share
Dans ce tutoriel, nous allons concevoir un site Web pour le navigateur Safari mobile (présent sur l'iPhone et l'iPod Touch). Nous commencerons à partir de zéro dans Photoshop et nous travaillerons pas à pas vers un produit fini doté d’un curseur d’image jQuery animé..
Avec des millions d'utilisateurs d'iPhone accédant au Web chaque jour, il est essentiel que votre entreprise ou votre marque soit en mesure de fournir des services mobiles. les utilisateurs utilisant le navigateur Mobile Safari, avec un site Web conçu pour leur appareil. Au lieu de lutter avec des polices de petite taille, des liens difficiles à presser et d'autres problèmes d'utilisation du site associés à un navigateur Web mobile, nous pouvons offrir à nos visiteurs une expérience interactive qu'ils apprécieront.
Il est important pour nous de fournir à nos utilisateurs une expérience qui leur plaira, sinon nous finirons par frustrer nos visiteurs et éventuellement leur faire quitter notre site sans jamais revenir. Nous allons créer un site qui se concentre sur quelques points clés. Notre site devrait:
Si vous utilisez un Mac, vous pouvez télécharger le kit de développement logiciel (SDK) pour iPhone à l'adresse Developer.Apple.com. Créez un compte gratuit avec eux et téléchargez la dernière version du SDK pour iPhone fournie avec le simulateur pour iPhone. Un vrai iPhone ou un ipod touch sera toujours la meilleure solution mais le simulateur fonctionne bien pour le développement.
Commencez par télécharger cette texture de ciment à partir de Flickr. Importez l'image dans un document Photoshop de 320px (largeur) par 480px (hauteur). Changez la couleur de fond en # 1D1D1D. Modifiez le style de calque de la texture sur "Multiplier" et ajoutez un masque de dégradé de blanc à noir..
Faites un clic droit sur un calque et aplatissez l'image. Copiez et collez dans une nouvelle fenêtre afin que nous puissions transformer cela en une image répétée. Allez dans Filtre> Autre> Décalage. Définissez la valeur horizontale sur +162. Utilisez l'outil de guérison pour nettoyer la zone à problèmes. Enregistrer l'image au format jpg, régler la qualité à 60%.
Ouvrez un autre document Photoshop et réglez-le sur 195px (largeur) sur 75px (hauteur). Créez deux calques chacun avec une ligne dessinée avec l'outil ligne. Séparez les lignes d'un pixel. La ligne du haut doit être blanche, la ligne du bas est gris foncé. Exportez l'image comme nous l'avons fait à l'étape précédente. Les deux images doivent être enregistrées dans un dossier nommé "images"
Il est maintenant temps de coder la page d'accueil. Nous allons ajouter le code de base et le styliser à l'étape suivante. Enregistrez ceci sous index.html. Le code suivant nous donnera le code HTML de base de la page d’accueil et un lien vers une feuille de style que nous créerons..
Lorum Ipsum Site Mobile Lorum Ipsum
- Accueil
- Sur
- Contact
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur elit adipisicing, promis de faire une incarnation temporelle, et dolore magna aliqua. Tout en un minimum de poids, l’exercice de nos exercices en cours de travail, mais il n’existe que d’excellents résultats. Duis aute irure in reprrehenderit 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 elit adipisicing, promis de faire une incarnation temporelle, et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur elit adipisicing, séduit par le temps incididant temporairement et labouré et dolore magna aliqua.
Lire la suite…Copyright 2009
Accueil | À propos | Contact
Ajoutons du style en créant un nouveau fichier nommé styles.css. Le code suivant nous donnera le style pour le code html de la page d'accueil.
Accentsconagua
html, corps, div, envergure, objet, h1, h2, h3, h4, h5, h6, p, blockquote, pre, une, adresse, code, img, petit, fort, dl, dt, dd, ol, ul, li, fieldset, form, label margin: 0; rembourrage: 0; bordure: 0; contour: 0; taille de police: 100%; alignement vertical: ligne de base; fond: transparent; / * Styles principaux * / body background: # 1d1d1d url ('images / background.jpg') repeat-x; couleur: #FFF; font-family: "Arial", sans-serif; hauteur de ligne: 20px; taille de police: 13px; -webkit-text-size-ajuster: aucun; p padding: 10px 5px; h1 color: # b5b5b5; taille de police: 26px; marge: 10px 5px; h1 span color: # d5ac55; h2 color: # d5ac55; taille de police: 18px; poids de police: normal; marge supérieure: 10 px; padding-left: 5px; #hidden display: none; .show display: inline; #readmore height: 30px; # readmore-button background: # 000; couleur: # d5ac55; bloc de visualisation; Flotter à droite; rembourrage: 5px 7px; text-align: center; texte-décoration: aucun; largeur: 76px; / * Styles de menus * / #menu ul border-bottom: 1px solid #FFF; hauteur: 23px; style de liste: aucun; marge: 0 5 px; #menu ul li float: left; marge droite: 30px; #menu ul li a color: #FFF; texte-décoration: aucun; text-transform: majuscule; #menu ul li.selected border-bottom: 3px solid #FFF; / * Styleshow Styles * / #slideshow border: 1px solid # 786334; border-bottom: 1px solide # 22201d; marge inférieure: 20 px; marge supérieure: 10 px; #slideshow ul li height: 174px; style de liste: aucun; largeur: 316px; #controls position: absolute; marge supérieure: -40px; style de liste: aucun; #controls li background: rgb (0,0,0); arrière-plan: rgba (0,0,0,0,9); bordure: solide 2px # 202020; border-bottom: 1px solide # 797979; float: gauche; text-align: center; #controls li a display: block; couleur: #FFF; hauteur: 20px; rembourrage: 7px; texte-décoration: aucun; largeur: 20px; / * Styles de pied de page * / #footer background: # 000; hauteur: 40px; marge supérieure: 10 px; #footer p # copyright float: right; largeur: 100px; #footer p # sitemap width: 200px; #footer a color: #FFF; texte-décoration: aucun; Enregistrez l'image du camion d'incendie dans un dossier appelé "imageslider" à l'intérieur du dossier "images". Enregistrez l'image sous le nom img1.jpg. Ce sera l'image affichée dans le curseur de l'image.
Téléchargez le curseur jQuery Easy Slider 1.7 et copiez le dossier "js" dans le même dossier que notre fichier index.html. Copiez le code suivant dans vos balises head dans le fichier index.html.
Vous allez maintenant avoir une page d'accueil fonctionnelle.
Pour supprimer la barre d'adresse, remplacez la balise body par la suivante:
Et ajoutez la balise méta suivante à votre tête pour gérer les problèmes de zoom et de redimensionnement du texte.
Copiez la page index.html pour créer la page à propos. Supprimez le code spécifique au curseur jQuery. Ajouter le suivre sous le bouton lire plus pour créer la "barre latérale".
À propos de moi
p 123.456.7890 e [email protected] un 123 Someplace 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 elit adipisicing, promis de faire une incarnation temporelle, et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur elit adipisicing, séduit par le temps incididant temporairement et labouré et dolore magna aliqua.
des médias sociaux
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non sunt in culpa qui officia deserunt mollit anim id est laborum.
- Gazouillement
- Youtube
- Écran
- Mon espace
Enregistrez l'image suivante dans votre dossier d'images. Nommez-le cat.jpg.
Ensuite, il est temps d'ajouter du style aux éléments à l'intérieur de la barre latérale. Nous devrons le faire avec certains CSS. Ajoutez ce qui suit à votre fichier styles.css.
/ * Styles de la barre latérale * / #sidebar background: -webkit-gradient (linéaire, gauche en haut, gauche en bas, couleur-stop (0.0, # e1d9ce), couleur-stop (0.1, # e6e6e6)); couleur: # 000; marge supérieure: 10 px; remplissage: 0px 5px 5px 5px; #sidebar p.fade background: url ('images / fade.jpg') repeat-x; #sidebar h2 color: # 000; taille de police: 18px; poids de police: normal; rembourrage: 7px 0; #sidebar img border: 1px solid #FFF; marge: 5px 10px; .contactinfo border-bottom: 3px en pointillé # 656565; bloc de visualisation; couleur: # 2f2f2f; taille de police: 20px; marge gauche: 10px; .contactinfo a display: block; arrière-plan: # 646363; couleur: # efaa19; Flotter à droite; texte-décoration: aucun; # liens-sociaux list-style: square; remplissage: 10px 0 10px 20px; largeur: 95%; # liens-sociaux li float: right; largeur: 33%; # liens sociaux li a background: # 646363; couleur: # efaa19; rembourrage: 2px 4px; texte-décoration: aucun; .clear clear: les deux; 
Copiez la page à propos et nommez-la contact.html. Ajoutez le code suivant à la tête de votre code HTML. C'est un code pour étendre la carte google en utilisant leur API. Vous aurez besoin d’une clé d’API Google Maps si vous comptez l’utiliser sur un serveur en direct. Vous pouvez utiliser un service en ligne pour produire le code si vous n'êtes pas à l'aise pour l'écrire vous-même..
Ajoutez simplement le code suivant à l'endroit où vous souhaitez que votre carte apparaisse.
N'hésitez pas à mettre à jour votre menu pour l'adapter à chaque page en déplaçant la classe "sélectionnée" vers l'élément de liste approprié.
Pour de plus amples recherches, n'hésitez pas à consulter l'article Engage Interactive ainsi que le didacticiel Nettuts +.
