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.

Aizone !

La campagne Aizone Automne / Hiver 2013 est axé sur la typographie colorée audacieuse et d’énergie positive et exubérant qui reflète la nature dynamique, vibrante de la marque. Ils ont débuté la typographie à travers la peinture de visage coloré avec des maximes d’inspiration positifs « Play Hard», «Make Your Luck », « So It Goes », « Go Go Go » et « Be Free ». Travailler avec le célèbre peintre corps Anastasia Durasova, nous avons peint le visage des modèles avec une forte graphique et audacieuse de typographie ludique géométrique.

Ce diaporama nécessite JavaScript.

Caritas Kontaktladen – Rapport annuel !

Ce diaporama nécessite JavaScript.

L’organisation humanitaire de Caritas / Steiermark en Autriche offre une aide en organisant streetwork et un spécial drop-in centre dans le domaine des drogues. Les rapports annuels normalement ne créent pas de plaisir dans la lecture. Moodley a traduit tous les faits et chiffres dans un langage visuel subtil, qui ne presque pas besoin de beaucoup de mots pour exprimer beaucoup: sur l’engagement de la Streetworkers et les gens qui travaillent dans le centre, sur les visites, les risques, les perspectives et aide à la survie. C’est un jeu d’images et le texte qui se concentre sur les êtres humains et met l’accent sur ​​les importances des services d’aide aux toxicomanes.

Dots !

Je vous propose de découvrir dans cet article « Dots«  qui est une très belle application de jeu développé par Betaworks, une société basée à New-York. Un jeu avec un style minimaliste. Son but est très simple, connectez autant de points de la même couleur, Comme vous pouvez, et ce, en utilisant uniquement des lignes verticales et horizontales. Dots dispose de trois modes de jeu différents :

  • connectez autant de points que vous pouvez en 60 secondes

  • utilisez seulement 30 mouvements

  • un nouveau mode… sans fin, sans limites !

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

Photographie : Animal eyes series by Suren Manvelyan !

Dans cet article je vous présente une série de photos qui ne laissent pas indifférent réalisé par Suren Manvelyan.  Ce sont des photos d’oeil de chevaux, de lamas, de crocodiles, pythons, de chiens et de chats

Je vous laisse découvrir !

Ce diaporama nécessite JavaScript.

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  !