Ressources n°5

Dans cet article je vous présente les erreurs HTML ET CSS fréquentes à éviter 

ERREURS HTML

OUBLIER DE FERMER UNE BALISE

Il s’agit d’une erreur extrêmement courante. Plusieurs des balises HTML ont besoin d’être fermées.

<div>Texte ici</div>

D’autres, on simplement besoin d’un «slash» à la fin de leur balise d’ouverture.

<img src="images/twitter.png" />

 

MAUVAIS DOCTYPE

Les documents HTML doivent débuter par une balise «DOCTYPE» afin de spécifier le type de document HTML que vous allez utiliser. Voici la ligne de code pour un document XHTML 1.0 standard.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

METTRE LES BALISES EN MAJUSCULES

À ne pas faire: <DIV></DIV>. Cela ne changera rien au niveau de la validation de votre code mais c’est considéré comme une mauvaise utilisation du HTML.

 

OUBLIER DE FERMER DES GUILLEMETS

Une erreur classique d’inattention…

<img src="images/monImage.jpg>

 

DÉCLARATION DE STYLES DANS LE CODE HTML

L’utilisation de style à l’intérieur de vos balises fonctionnera mais sera plus tard, difficile à éditer. Avoir des styles à plusieurs endroits différents dans votre site web est une très mauvaise idée. À ne pas faire…

<div style="background:url(../images/monImage.jpg) repeat-x; padding:10px">Mon Texte Ici</div>

 

NE PAS ENCODER LES CARACTÈRES SPÉCIAUX

Par exemple, utilisez le code &amp; pour le caractère &. Voici une liste des caractères spéciaux ainsi que leur code HTML.

 

CONFUSION ENTRE L’UTILISATION DES CLASSES ET DES ID

Les classes sont pour les items utilisés plus d’une fois dans une page. Les ID, sont pour les items appelés obligatoirement qu’une seule fois dans la même page comme les bloques header, body, wrap, footer, etc…

 

ERREURS CSS

NE PAS UTILISER LES STYLES GLOBALES

Il est important d’utiliser des styles globales pour les paragraphes (p), les titres (h1,h2,h3,h4,h5,h6), les citations (blockquote), etc… afin d’harmoniser vos styles et de réduire la quantité de code dans votre feuille de style.

 

NE PAS UTILISER DES NOMS UNIQUES POUR LES ID ET LES CLASSES

Il est impératif d’utiliser des noms uniques lorsque vous déclarez de nouvelles classes ou de nouveaux id. Également, utilisez des noms ayant une signification précise ex: #accueil-colonne-gauche.

 

NE PAS UTILISER LES «SHORTHAND CODE»

Ne pas utiliser: padding-top:5px; padding-right:10px;.. Utilisez plutôt: padding:5px 10px 0 0;

Également pour condenser votre code, utilisez color:#fff; à la place de color:#ffffff;

 

VALIDER AVEC LE W3C

Il est important de valider son code HTML et CSS avec le validateur du W3C. Cela vous aidera à trouver les erreurs dans vos documents et vous aidera à trouver la source de différents problèmes.

sources !

 

 

Publicités

Ressources n°2

Dans cet article je vous présente un site de ressource pour faire des « transitions ».  Leur code a été modifié pour permettre à plus d’un élément animatable par page. En outre, vous pouvez maintenant ajouter des transitions droites de balises HTML.

Voici ces différents liens : http://dan-silver.github.io/ElementTransitions.js/#

http://tympanus.net/codrops/2013/05/07/a-collection-of-page-transitions/

ressource2 ressource3

Ressources n° 1

Dans cet article je vous présente un site qui regroupe des ressources, des idées pour sublimer vos sites web.

« Webdesigner Trends est un blog pour suivre les tendances du webdesign et de la création web. Il présente des articles sur l’actualité du web(techniques, outils de création de sites…), mais aussi des sélections de sites web « incontournables », desphotographes et graphistes de talent, ainsi qu’une multitude de choses pratiques pour les créateurs et passionnés de sites web. »

 

Bonne découverte  !

Site : Lets Yep !

 

Dans cet article je vous présente un site « Lets Yep » qui propose plusieurs effets qui sont : scroll, one page, responsive design (s’adapte aux différentes tailles d’écrans)et la tendance du moment  Flat design*

 

 

http://letsyep.com/en/

 

* Le flat design, qui est typiquement un design « à plat », est une représentation minimaliste où théoriquement chaque élément du design à une fonction. C’est concrètement l’inverse du skeuomorphic web design.

 

Capture d’écran 2013-09-18 à 11.02.23 Capture d’écran 2013-09-18 à 11.02.37

Sites Flats Design

Dans cet article je vous présente un site qui regroupe plusieurs site dit Flats Design.

 « Le flat design, qui est typiquement un design « à plat », est une représentation minimaliste où théoriquement chaque élément du design à une fonction. C’est concrètement l’inverse du skeuomorphic web design. » 

Je vous laisse découvrir :http://fltdsgn.com/Capture d’écran 2013-09-18 à 10.57.21 Capture d’écran 2013-09-18 à 10.55.45

Ressource « couleurs » pour le web !

Dans cet article je vous présente une aide qui en réalité un site  nommé « WEB SAFE COLORS« . Ce site vous permet de trouver les codes couleurs pour le WEB.

 

websafecolors

Patternify !

Dans cet article je vous présente une de mes découvertes : « Patternify »

C’est une petite application web permettant de dessiner pixel par pixel ses propres motifs rayés afin de les utiliser dans nos feuille de style CSS, sans avoir à ouvrir Photoshop. On pourra enregistrer l’image dans un fichier, ou bien directement utilisé l’image converti en Base64, sans avoir besoin d’une image.

Patternify1 Patternify2