Lorsque vous redimensionnez la page, ces éléments de bloc se superposent gracieusement. J'ai configuré différentes instances de requêtes multimédia dans une feuille de style externe. Cela facilite le suivi des styles lors de l'édition ultérieure de quelque chose..

 
 
 
Jake Rocheleau
 
Freelance Writer & Web Developer
  Hudson, Massachusetts, Etats-Unis  [email protected] Mon portfolio • @jakerocheleau 
 
  
 
 

Avant de passer aux CSS détaillées, je souhaite expliquer davantage l'utilisation des microdonnées. Si vous regardez bien, j'ai jeté des attributs dans de nombreux éléments avec les noms. type d'élément, articlescope, et itemprop. Celles-ci concernent toutes le projet Schmea qui espère offrir une structure de données pour le Web..

Mise en forme de microdonnées utiles

Tous les principaux moteurs de recherche, y compris Google, Yahoo !, et Bing, ont accepté Schema comme la meilleure syntaxe pour le balisage des données. En étiquetant les détails vous concernant, cela aide ces moteurs de recherche à afficher les résultats associés à votre contenu en ligne. Décomposons comment les configurer.

L'attribut itemscope est appliqué à tout conteneur contenant des informations sur un élément de schéma. Ceci est toujours suivi de l'attribut itemtype, qui dans ce scénario décrit une personne. À l'intérieur de cette enveloppe, je peux étiqueter n'importe quel contenu en utilisant itemprop ainsi que les détails figurant sur la page de documentation..

La méthode recommandée consiste à envelopper votre contenu dans une balise span au lieu de l'ajouter directement à l'élément. Lorsque vous étiquetez quelque chose comme une photo, vous devez joindre itemprop au img élément directement. Mais sinon, vous aurez un balisage beaucoup plus propre en encapsulant vos données dans des balises span.

Combien c'est trop?

Je dirais qu'il n'y a pas de limite à la quantité de détails que vous pouvez entrer. Les microdonnées sont disponibles pour aider les ordinateurs à reconnaître les personnes, les organisations, les produits et autres éléments dans un contexte en ligne. Plus vous pouvez offrir d'informations, mieux c'est.

Cela vaut la peine de garder l'esprit ouvert et de voir comment vous pouvez utiliser ces microdonnées dans certains aspects de votre propre site Web. Si vous passez 10 à 15 minutes à parcourir la documentation Schema, c'est beaucoup plus facile que vous ne le pensez. Nous pouvons regarder deux exemples solides de la démo de CV:

 
 
Ensemble de compétences
 
 
Développement
 
 
HTML5 / CSS3
 
JavaScript et jQuery
 
Backend PHP
 
Bases de données SQL
 
Wordpress
 
Pligg CMS
 
Certains Objective-C
 
 
 
 
Logiciel
 
 
Adobe Photoshop
 
Adobe Dreamweaver
 
MS Office 2007-2010
 
cPanel & phpMyAdmin
 
Xcode 4
 
 
 
 

Lors de la liste de mes différentes compétences, j'ai configuré un nouveau conteneur définissant le schéma ItemList. Il n’existait aucun type de compétences ou d’expérience à inscrire sous une personne, c’est donc une alternative sûre. La valeur ici est que Google peut comprendre chaque itemListElement est lié les uns aux autres. Dans ce cas, nous avons une liste de langues et de logiciels avec lesquels je sais travailler..

 
 
Articles récents
 
  10 méthodes de secours utiles pour CSS et Javascript • Publié dans Juillet 2012
 
  Réécriture d'URL dans WordPress: Conseils et plugins • Publié dans Juillet 2012
 
  Optimisation JPEG pour le Web - Guide ultime • Publié dans Juillet 2012
 
  9 astuces pour concevoir le bulletin HTML parfait • Publié dans Mai 2012
 
  Guide des tests A / B avec Google Website Optimizer • Publié dans Mars 2012
 
 

Un autre bon exemple est la liste d'articles située tout en bas. Il existe une configuration de schéma pour les articles et les articles de blog, tous liés au contenu trouvé en ligne. J'ai indiqué l'URL de l'article et la date de publication, ce qui est plus que suffisant pour ces robots d'exploration de moteurs de recherche..

Rappelez-vous que les microdonnées concernent uniquement le formatage du contenu devant être organisé par ordinateur. Ce curriculum vitae d'une seule page est l'exemple parfait pour définir les traits concernant une personne spécifique. Celles-ci ne seront pas utiles sur tous les sites Web, mais c'est une méthodologie intéressante pour comprendre.

Styles CSS relatifs

Dans cette dernière section, examinons comment styler cette page Web dans son ensemble. Vers le haut de notre feuille de style, je définis des réinitialisations initiales et des propriétés d'élément de base. Ceux-ci comprennent les en-têtes, les éléments de liste et les effets de survol du lien d'ancrage..

* marge: 0; rembourrage: 0;  html height: 101%;  body background: # f2f2f2 url ('https://assets.hongkiat.com/uploads/responsive-resume/bg-tile.png'); taille de police: 62,5%; rembourrage en bas: 65px;  h1 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; couleur: # 454545; taille de police: 3.6em; marge inférieure: 6px;  h2 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; couleur: # 484848; taille de police: 2.5em; marge inférieure: 10px; texte-décoration: souligné;  h3 font-family: "Trébuchet MS", Verdana, Arial, sans-serif; couleur: # 777; poids de la police: normal; taille de police: 1.8em; marge inférieure: 10px;  h4 font-family: "Trébuchet MS", Verdana, Arial, sans-serif; couleur: # 656565; poids de police: gras; taille de police: 1.75em; marge inférieure: 4 px;  p font-family: "Balthazar", "Droid Serif", Times New Roman, serif; couleur: # 565656; taille de police: 1.8em; hauteur de ligne: 1.4em; marge inférieure: 15 px; padding-left: 35px;  petit font-family: "Balthazar", serif; couleur: # 656565; taille de police: 1.6em; bloc de visualisation; marge inférieure: 6px;  ul display: block; style de liste: aucun;  ul li padding-left: 45px; type de style de liste: aucun; alignement vertical: en haut; background: url ('https://assets.hongkiat.com/uploads/responsive-resume/bullet.png') 25px 5px no-repeat; marge inférieure: 5px; famille de polices: "Balthazar", serif; couleur: # 666; taille de police: 1.6em; hauteur de ligne: 2.3em;  img border: 0; largeur maximale: 100%;  a color: # 5582d6; texte-décoration: aucun;  a: hover text-decoration: underline;  

Rien d’intéressant à part certaines piles de polices personnalisées. J'ai aussi attrapé une icône de balle unique au lieu d'utiliser la valeur par défaut “disque”. Vous pouvez essayer de chercher dans un répertoire comme Icon Finder lorsque vous essayez de localiser un modèle similaire..

/ ** @group core layout ** / #w margin: 0px 50px; rembourrage: 20px 40px; rembourrage en haut: 35px; background: #fff; largeur minimale: 260 px; largeur maximale: 900px; border-bottom-right-radius: 8px; bordure-bas-gauche-rayon: 8px; -webkit-border-bas-rayon-gauche: 8px; -webkit-border-bas-rayon-droit: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px;  en-tête largeur: 100%;  / ** @group personal settings ** / #info float: left; marge inférieure: 12px;  #photo float: right;  #photo img -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 2px 4px rgba (0, 0, 0, 0,2); -moz-box-shadow: 0 2px 4px rgba (0, 0, 0, 0,2); boîte-ombre: 0 2px 4px rgba (0, 0, 0, 0,2); couleur d'arrière-plan: #fff; bordure: 1px solide #ccc; rembourrage: 5px;  

Seules quelques zones de bloc importantes sur la page nécessitent votre attention. Bien sûr, la division wrapper est configurée avec des marges et un rembourrage supplémentaires. De plus, la largeur maximale est limitée à 900 pixels, car toute taille plus importante donne l'impression que la page comporte trop d'espaces. J'ai également utilisé des coins arrondis au bas de la page pour un effet plus lisse sur les yeux..

Conception sensible

L'aspect le plus crucial de ce CV en ligne est peut-être la fonctionnalité responsive. J'ai cinq configurations différentes de points d'arrêt pour obtenir divers effets lors du redimensionnement de la fenêtre du navigateur..

Écran @média uniquement et (largeur maximale: 740px) h1 taille de la police: 4.5em;  h3 font-size: 2.2em;  h2 display: block; text-align: center;  #info float: none; bloc de visualisation; text-align: center;  #photo float: none; bloc de visualisation; text-align: center;  #w padding: 20px 15px;  p padding: 0;  

La première 740px est juste autour de l'endroit où l'image photo sera en conflit avec notre texte en-tête. Au lieu de laisser la photo déroulante sur le côté droit, nous effaçons les deux éléments et centrons l'ensemble de la mise en page. J'ai également augmenté la taille du texte de l'en-tête pour un impact plus solide..

Au fur et à mesure que la fenêtre devenait plus petite, j'ai retiré du rembourrage et des paragraphes. Le problème suivant que nous rencontrons après l’en-tête provient de la liste des compétences UL. Je décompose l'approche en deux colonnes et ai plutôt des éléments de liste flottant l'un à côté de l'autre.

Écran @média uniquement et (largeur maximale: 570 pixels) ul li display: inline-block; padding-left: 15px; largeur: 140px; position d'arrière-plan: -5px 0px; marge droite: 6px; hauteur de ligne: 1.7em;  # compétences-gauche, compétences-droite margin-bottom: 15px;  

Cela nécessite également de repositionner un grand nombre des propriétés de texte par défaut. Nous devons mettre à jour la hauteur de ligne et repositionner l'icône de puce de chaque élément de la liste. J'ai défini une largeur fixe pour que la grille apparaisse plus organisée jusqu'au prochain point d'arrêt.

Codage pour Smartphones

Les trois dernières requêtes médiatiques sont petites mais très importantes. Lorsque vous basculez entre les modes paysage et portrait, l'iPhone redimensionnera tous les navigateurs mobiles. C'est également le cas avec la plupart des appareils Android et des téléphones Windows Mobile..

Écran @média uniquement et (largeur maximale: 480px) ul li width: 120px;  #w margin: 0 20px;  @ Écran uniquement multimédia et (largeur maximale: 320px) #w margin: 0 10px;  / ** iPhone uniquement ** / @Media screen et (max-device-width: 480px) ul li width: 150px;  

Lorsque vous frappez pour la première fois à 480px ou moins, nous retirons un peu plus de remplissage du wrapper et redimensionnons à nouveau les éléments de la liste. Puis, à 320 pixels, j'ai supprimé une partie de la marge en dehors du document. Vous pouvez toujours voir l’arrière-plan texturé, mais ce n’est pas très important dans une fenêtre aussi verticale.

Enfin j'utilise max-device-width pour cibler l'appareil iPhone lui-même, ou tout autre écran mobile d'une largeur maximale de 480px. Dans ce cas, je souhaite mettre à jour les éléments de la liste un peu plus large pour qu'ils remplissent tout l'écran. Cela n’affectera que la liste des compétences en mode paysage car le portrait est trop maigre pour remarquer des différences..

• Démo
• Télécharger le code source

Dernières pensées

Travailler sur Internet nécessite souvent au moins un type de portefeuille en ligne. Lorsque vous pouvez créer un lien vers un résumé de page unique avec tous vos détails organisés, cela montre que vous êtes sérieux. Employeurs sérieux et clients potentiels tomberont éperdument devant un tel spectacle de professionnalisme dans le design web..

J'espère que vous pourrez retirer quelques points clés de ce tutoriel. Les pigistes, partout dans le monde, peuvent se vendre avec un petit effort technique. N'hésitez pas à télécharger mon code source de démonstration ci-dessus et à partager vos impressions sur cet article dans notre espace commentaires..