Site d’inspiration

Dans cet article je vous présente un d’site d’inspiration,  il se nomme site Capture d’écran 2014-02-17 à 16.25.06qui est une vitrines des meilleurs web et du design interactif.

 

 

 

Ressources n°6

Dans cet article, je vous présente le site  » WebAppers » de « ressources web » : http://www.webappers.com/

Vous pouvez retrouver également quelques-uns des meilleurs Javascript et Ajax composants comme les fenêtres modales, des menus, des galeries, des info-bulles, des tableaux, calendriers des plugins et beaucoup plus …

Ce diaporama nécessite JavaScript.

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 !

 

 

Ressources n°4 !

Cet article regroupe des articles d’inspiration et des ressources ! Pour vous aidez dans vos réalisation de sites web !

ressource-4-article

http://www.smashingapps.com/2013/08/15/showcase-of-fresh-and-free-jquery-plugins-and-tutorials.html

 

 

 

 

 

 

 

 

ressource-4-demo

http://tympanus.net/Tutorials/CircularNavigation/

 

 

 

 

 

 

 

 

http://designrfix.com/freebies/free-download-modern-touch-ui-kit

ressource-4-article1

Ressources n°3 !

Dans cet article je vous propose des icônes dans un style très en vogue aujourd’hui le Flat Design. Lien du site où on peut les télécharger !

flat_design_icon

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  !