Le petit journal du web — Octobre 2012

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Le petit journal du web — Octobre 2012

A la «Une» ce mois-ci, un jeu de plateau à imprimer à la maison pour apprendre les bases de HTML5, suivi par des liens tous plus intéressants les uns que les autres. La suite présente des trucs, des astuces et autres ressources à garder sous le tapis de souris pour les ressortir au moment opportun. Pour ma part, je garde les fruits de la veille dans mon panier Diigo. Bref, au menu de ce petit journal de l’intégrateur web : de la documentation sur les langages du web, une astuce pour surcharger des styles en ligne, un topo complet sur les couleurs hexadécimales, du Responsive, du jQuery Mobile, de la validation HTML, etc. !

1. cHTeMeLe : HTML5 sur un plateau

HTeMeLe est le premier jeu de plateau certifié HTML5

cHTeMeLe est un jeu de plateau (un vrai), créé par Olivier Chambon et Pascal Mabille. Il est conçu pour apprendre HTML5 en s’amusant. Pour jouer, il suffit de télécharger le jeu (cartes, plateaux, règles) et d’imprimer tout ce beau monde. cHTeMeLe est disponible sous licence Creative Commons (CC BY NC) ; il est donc possible de télécharger le jeu, de l’imprimer, d’y jouer, voire même d’étendre le jeu en créant de nouvelles cartes.

Le jeu est constitué de :

  • 112 cartes,
  • 5 plateaux « navigateur » (un par joueur),
  • Pions marqueurs de points,
  • Règles du jeu.

→ Lire cHTeMeLe – le jeu de plateau certifié HTML5 – dispo en pré-commande sur Ulule

2. Documentation web

Web Platform — Le W3C propose une documentation de référence sur les langages du web pour les travailleurs du web. L’idée est de rassembler collectivement les différentes documentations sur un seul site pour faciliter les recherches.

A vos Markup, prêt, partez !

3. Surcharge CSS

Des styles en ligne vous empêchent de faire ce que vous voulez avec vos CSS ? L’article Override Inline Styles with CSS donne une astuce pour surcharger des styles en ligne.

Ainsi, pour surcharger :

<div style="background: red;">
    The inline styles for this div should make it red.
</div>
Il suffit d’utilser le sélecteur d’attribut [style] avec la propriété !important.
div[style] {
    background: yellow !important;
}
→ Lire CSS Specificity (Traduction française : Comprendre le poids des règles CSS).

4. Media Queries

CSS Media Queries Test — Cette page page donne le résumé des caractéristiques de votre configuration au regard des Media Queries. Un QR code (ou l’URL courte m.ad.ag) permet de tester la configuration de votre mobile. Via @goetter.

→ Lire aussi 9 Valuable CSS Tricks for Responsive Design.

5. La semaine du musée Responsive

Responsive Museum Week — Remixez les sites des grands musées du 15 au 24 octobre 2012 pour les rendre modernes, responsives, mobiles ! Il vous suffit de modifier la feuille de styles CSS du site d’un musée pour le rendre lisible sur mobile, tablette, etc. Une projet initié par Geoffrey Dorne et Julien Dorra.

→ Voir aussi Tu t’es fait avoir par une saucisse (via @cahnory).

6. Frameworks CSS à emporter !

KNACSS — Feuille de style CSS minimaliste, responsive et extensible pour débuter une intégration HTML / CSS par Raphaël Goetter.

RÖCSSTI — Ce clin d’oeil à KNACSS de Nicolas Hoffmann est une bonne base de départ, incluant quelques éléments d’accessibilité, comme les liens d’évitements, sans oublier des petites astuces sympathiques qui améliorent la conception et l’utilisation d’un site.

7. De toutes les couleurs

The Code Side Of Color — Smashing Magazine nous ouvre les porte de la compréhension du système hexadécimal de la représentation des couleurs et donne quelques astuces pour mieux les utiliser.

8. Animation CSS3

Animate.css — Feuille de style pleine d’animations CSS3 pour attirer l’attention des visiteurs ou simplement égayer votre site web à l’approche de Noël !

9. Validation

Simply Testable — Gagnez du temps et de l’énergie en testant d’un seul coup votre site web : validation HTML, URL non-accessibles, etc.

10. jQuery Mobile

jQuery Mobile par l’exemple — Nicolas Hoffmann nous propose d’approfondir l’utilisation de jQuery Mobile à traverd le cas pratique de la Kiwi Partÿ édition 2012.

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



7 commentaires pour “Le petit journal du web — Octobre 2012”

  1. Sentulebonson dit :

    Et bah , il y a de quoi faire avec tout ça.. merci!

  2. Kami dit :

    Bonsoir Très riche comme d’habitude. Vous facilitez bien la vie des intégrateurs et des pros du web en général. Merci :)

  3. sont publiés dit :

    des astuces et autres ressources à garder sous le tapis nike air yeezy de souris pour les ressortir au moment opportun

  4. un commentaire dit :

    des astuces et autres ressources à garder sous air jordan femme le tapis de souris pour les ressortir au moment opportun

  5. Bonjour, à la question peut-on mettre le nombre d’or à toutes les sauces,Baskets Air Max 90,souris pour les ressortir au moment opportun.

  6. wiizme dit :

    Vous facilitez bien la vie des intégrateurs et des pros du web en général.www.wiizme.fr le tapis de souris pour les ressortir au moment opportun

  7. Vous facilitez bien la vie des http://www.citedessciences.fr intégrateurs et des pros du web en général. Vous facilitez bien la vie des intégrateurs et des pros du web en général.

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site