2 solutions de Responsive Tables en CSS & JavaScript

Vous avez décidé de faire un site en Responsive Design pour qu’il s’adapte automatiquement à la largeur d’écran et donc fonctionne correctement sur tablettes et smartphones. Il est plein de contenu et de liens optimisés pour votre référencement.

Vous utilisez donc une grille flexible, des images flexibles et du code CSS3 Media Queries pour adapter l’emplacement des éléments dans vos pages.

Et là c’est le drame ! Vous devez afficher un tableau de données de 12 colonnes dans vos site Responsive. Comment faire ? Les tableaux, ça ne se linéarise pas très bien (pas du tout même) et en l’affichant partiellement, vous risquez de masquer tout votre contenu optimisé et de limiter votre précieux référencement.

Je vous propose donc deux solutions utilisables pour vos projets sans nuire à l’accessibilité et l’indexation des données de votre tableau.
Continuer la lecture de 2 solutions de Responsive Tables en CSS & JavaScript

Intégration HTML5 CSS3 : conseils et exemple à télécharger pour bien démarrer votre site

Récapitulons : les langages HTML et CSS sont les langages les plus connus. Tous les développeurs ont déjà regardé comment fonctionne le code HTML et les feuilles de style pour apprendre à créer un petit site web.

Au début on fait des copier coller et en bidouillant un peu le code et on arrive, sans tout comprendre, à faire fonctionner la page. Et puis on apprend que les tableaux de présentation c’est le mal et enfin on essaye de ne pas attraper la maladie de la divite aigüe.
Bref, on arrive à créer de petits sites mais on a toujours l’impression de faire du bricolage.

Vient enfin l’instant fatidique où l’on vous demande de travailler sur un gros site web d’entreprise. Un site comportant un nombre important de pages. Un site professionnel avec beaucoup de fonctionnalités métiers. Vous vous dîtes qu’il va falloir partir sur une architecture solide et arrêter le bricolage !

Côté serveur, pas de problème : vous maîtrisez votre technologie et vous savez déjà comment industrialiser votre code.
Côté client, c’est une autre affaire !
Vous avez lu pas mal d’articles expliquant comment écrire du code HTML sémantique, comment positionner vos éléments avec du CSS mais vous ne savez pas comment démarrer votre site pro. En même temps, vous avez entendu parler de framework CSS, de responsive design, de CSS orienté objet et de grille.

Pas de panique, Kiwano vous propose un tour rapide des éléments à prendre en compte si vous démarrer un gros site web.
Ensuite nous verrons comment batir une architecture HTML et CSS solide avec une bonne base HTML et un bon découpage des styles avec en cadeau une archive d’un template de base HTML5 CSS3 par Kiwano.
Enfin nous terminerons avec une liste de conseils.

html5+css3
Continuer la lecture de Intégration HTML5 CSS3 : conseils et exemple à télécharger pour bien démarrer votre site

Mensonges et vérités sur HTML 5 : ce qu’il faut savoir

Le futur sera HTML5 ! Partout on vous parle de ce nouveau standard du Web et vous envisagez de refondre votre site pour être à la mode en utilisant de l’HTML5, du CSS3 et du jQuery !

Mais HTML5 c’est quoi au juste ? HTML5 est un nouveau jeu de standards, d’objets sémantiques et de règles pour le développement de site web exploitant des nouvelles fonctionnalités dans vos navigateurs comme le mode offline, le lecteur vidéo et de nouveaux éléments pour l’interaction de vos sites.
Continuer la lecture de Mensonges et vérités sur HTML 5 : ce qu’il faut savoir

Balise Marquee : retour vers le futur !

La balise marquee, voilà un sujet qui fait sourire. Je ne sais pas pour vous, mais moi, cela me rappelle ma jeunesse et le développement de mes premiers sites Web avec Netscape Composer, bref l’age d’or de la balise blink, des gif animés et… de la fameuse balise marquee.
Mais le tag marquee me rappelle aussi et surtout les blagues des geeks intégrateurs car pourquoi nier la vérité ? Si on met de côté son charme nostalgique (vous savez bien, celui qui nous fait sourire lorsqu’on parle de notre vieux pc Amstrad) et bien la balise marquee disons le : c’est un peu la balise de la honte.
Alors pourquoi un article Kiwano à propos de cette balise ?
Continuer la lecture de Balise Marquee : retour vers le futur !

Conseils et astuces pour débutant en CSS

Quand nous donnons nos formations en HTML CSS à Marseille ou que nous intervenons en assistance ou création de site Web nous prodiguons souvent les mêmes conseils pour aider les débutants en CSS.

Voici donc, en vrac, quelques conseils et erreurs à éviter pour se perfectionner en développement CSS. Bien sûr cette liste n’est pas exhaustive et l’on compte sur vous pour nous aider à la compléter dans les commentaires.
Continuer la lecture de Conseils et astuces pour débutant en CSS

Afficher une liste HTML sous forme de tableau par CSS

Comment modifier l’affichage de vos listes HTML pour les rendre un peu plus sexy en modifiant uniquement ses feuilles de styles CSS ?

Les listes, vous le savez, sont très efficaces pour hiérarchiser les données. Elles optimisent votre référencement en simplifiant le code HTML superflu. Elles permettent d’augmenter le ratio contenu par rapport au code. C’est un bon cas pratique pour un atelier sur la séparation HTML / CSS.
Continuer la lecture de Afficher une liste HTML sous forme de tableau par CSS

CSS 3 : Résumé PDF des sélecteurs et media queries

Un petit article pour saluer l’initiative de Letstudio, studio de communication Web et Print à Marseille.

Reprenant les articles Kiwano « Savoir comment utiliser les sélecteurs CSS 2.1 et les nouveautés CSS 3 » et « Nouveautés CSS 3 : c’est quoi les Media Queries ?« , Letstudio les a résumé façon mémento pour les mettre à notre disposition.
Continuer la lecture de CSS 3 : Résumé PDF des sélecteurs et media queries

Savoir comment utiliser les sélecteurs CSS 2.1 et les nouveautés CSS 3

Les sélecteurs CSS sont certainement un des aspects les plus puissants en CSS. Ils permettent de cibler un élément spécifique du balisage HTML pour lui affecter un style. Les sélecteurs CSS sont variés, allant du simple nom d’un élément jusqu’à une expression de sélection riche d’une liste d’éléments HTML.
Cet article vous fait un rappel sur les possibilités des sélecteurs CSS et vous présente les nouveautés CSS 3 qui s’avèrent très puissantes pour éviter des id, classes ou Javascript non nécessaires.
Continuer la lecture de Savoir comment utiliser les sélecteurs CSS 2.1 et les nouveautés CSS 3

Nouveautés CSS 3 : c’est quoi les Media Queries ?

Les medias queries sont une nouveauté CSS 3 qui permet de définir des styles en fonction du média sur lequel est affiché la page web. Avec les medias queries on peut limiter l’action d’un style en fonction d’informations précises comme par exemple les propriétés width, height, et color du navigateur.

Dans un article précédent, nous vous avions parlé de la beta 4 de Firefox 3.5 et de son lot d’innovations dans un article intitulé « Nouveauté Mozilla Firefox 3.5 : raccourci nouvel onglet« .
Parmi ces améliorations nous revenons ici comme promis sur le support des Media Queries une des nouveautés CSS 3.
Continuer la lecture de Nouveautés CSS 3 : c’est quoi les Media Queries ?