Dans ce cours apprenez à réaliser un site HTML 5 destiné aux smartphones et tablettes.
Un cours orienté pratique pour vous guider dans la réalisation.
Tout est dans la vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Voici le gabarit HTML5 pour la Création d’un site pour smartphones et tablettes
Bonjour à tous et bienvenu sur Développement Facile.
Dans ce nouveau cours vous allez apprendre à créer un site mobile pour HTML 5, donc on rentre un peu plus dans la pratique, vous allez tout savoir pour créer votre propre site Internet à destination des Smartphones et des tablettes.
Structure d’une page HTML5
Déjà voici comment se structure une page HTML 5, donc vous avez un header ça permet de définir l’entête de votre page, c’est souvent, il y a la bannière et le slogan du site dans la balise header, nav c’est pour la navigation c’est dans cette balise là que vous mettez le menu de navigation pour l’utilisateur, section ça permet le regroupement thématique de contenu donc par exemple une section article, une section widget sur les blogs WordPress, article ça permet de créer un bloc de contenu indépendant des autres, donc ça va contenir notamment votre article, le contenu de vos tutoriels, de votre formation, adresse ça permet de donner des contacts adresse e-mail, adresse postal, téléphone et footer la balise footer c’est utilisé pour afficher le pied page de votre site dont notamment copyright, un petit menu nous contacter, à propos donc c’est votre pied page de votre site.
Voir l’exemple
On va voir ensemble un exemple de code source d’une page HTML 5 pour mobile, une page que vous allez pouvoir réutiliser dans votre développement, il y a aucun souci là-dessus vous aurez le code source en téléchargement sous cette vidéo à la fin du cours. Alors voici l’exemple de code source donc déjà j’ai mis un fichier style CSS personnalisé avec les sections typiques HTML 5, donc le header je vais vous mettre des commentaires, dans le haut de la page, pour bannière, sloggan, le sloggan du site en fait, tout simplement, ensuite vous avez ici c’est pour la navigation, le menu de navigation du site, c’est ou vous mettez ce qu’il faut, la section c’est pour le regroupement thématique de contenu, par exemple les widgets, dans une section word press, thématique de contenu, après navigation.if c’est personnaliser les listes, vous avez un séparateur, le footer donc toujours une balise HTML 5, c’est pour le pied de page donc notamment là c’est utilisé pour donner le copyright, souvent maintenant il y a un menu nous contacter, à propos dans le pied de page et après c’est des divs personnalisées et les articles ça permet de créer un bloc de contenu indépendant des autres, ça contient généralement l’article dans un bloc WordPress il est dans une balise div article, dans une balise article, le bloc de contenu comme un article par exemple. Ça c’est votre fichier CSS vous avez défini la mise en forme des balises HTML 5, ensuite il suffit de les utiliser donc la balise meta viewport que je vous ai expliqué dans un cours précédent pour définir les différentes options d’affichage sur un mobile, zoom dezoom, la largeur est ce que l’utilisateur peut agrandir ou réduire le contenu, le zoom par défaut, un c’est la taille d’affichage normale, là vous avez le header qui contient juste le slogan du site, le menu navigation avec les li que j’ai personnaliser vous avez vu dans la feuille de style CSS, un séparateur et une section avec une div, une image et du contenu, je n’ai pas mis la balise article parce que je n’en avais pas besoin ici, et le pied page donc le footer, vous avez vu c’est une architecture vraiment très simple, c’est un gabarit HTML 5, d’un site HTML 5 très simple, après bien évidemment c’est à vous de complexifier ce gabarit de faire quelque chose qui correspond vraiment à votre site mobile, donc ce sera à vous de jouer juste après. Et donc ça donne ça comme mise en page, le menu ici faudra activer les liens évidemment le header le haut de la page, le contenu de la zone contenu et là le pied de page, alors pour l’image elle ne s’affiche pas, je vais mettre tout de suite un logo qui s’affiche, le temps de trouver le logo, patientez juste quelques secondes je vais chercher un logo pour vous l’afficher.
03-logo, je recharge la page et voilà ce serait mieux dans une bannière mais bon c’est un logo, pour vous montrer l’exemple avec une section balise section ici vous mettez une image et le texte juste en dessous, bien évidemment vous pouvez redimensionner la tailler.
Votre plan d’actions !
Maintenant c’est à vous de jouer donc vous avez un exemple de gabarit HTML 5. Je vous conseille de créer le vôtre, propre gabarit HTML 5 avec le CSS pour vos pages mobiles, vous pouvez même aller beaucoup plus loin, donc vous avez une page classique je vous l’explique comme ça, une page classique vous faites un include en PHP de votre header, un include en PHP de votre footer et les éléments par exemple une zone widget vous faites un include en PHP de votre zone widget, une zone article, un include en PHP de votre zone article et dans ces fichiers PHP vous définissez les balises HTML header, footer, nav, section, article, et c’est là ou vous pouvez construire dynamiquement toujours à partir de votre même gabarit, de votre même structure de page, le contenu en fonction du clic des actions de l’utilisateur changer le contenu en direct.
Si vous avez des questions comme d’habitude posez les directement sous ce cours, moi je vous invite directement dans la deuxième vidéo, il y a un lien cliquez ici pour lancer la deuxième vidéo, dans la deuxième vidéo vous aller beaucoup plus loin dans la création de sites pour les Smartphones, les tablettes, les ordinateurs bureau, vous aurez en main tous les outils professionnels pour simplifier votre développement, pour créer des sites deux à trois fois plus rapidement donc tout est expliqué dans la deuxième vidéo donc cliquez dès maintenant sur ce lien, sur cette image moi je vous dis à tout de suite dans la deuxième vidéo.
[/ppmtoggle][/ppmaccordion]
Télécharger l’exemple de gabarit HTML 5 et sa feuille de style CSS 3
Et voici le code source commentés de ce gabarit HTML 5
Téléchargement du code source Gabarit d'un site HTML 5 pour mobile
Cliquez ici pour télécharger le code source Gabarit d'un site HTML 5 pour mobile
Montrez nous l’utilisation de ce gabarit dans vos réalisations
Utilisez la zone commentaire pour venir présenter vos sites Web pour mobile