Faire des mises en pages avancées a toujours été une gageure en CSS. Nous avons utiliser les tableaux, puis des dizaines de div, et tout un tas d'astuces et de bidouilles plus ou moins élégantes. Heureusement les choses changent enfin ! Flexbox est maintenant bien rependue pour agencez nos blocs en ligne ou en colonne, mais il manquait une norme pour réaliser des mises en pages complexes. C'est l'objectif de CSS Grid qui commence à arriver dans nos navigateurs. Découvrons la syntaxe et les possibilités de cette spécification en cours de standardisation au W3C
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...Raphaël Goetter
Parmi l'ensemble des nouveautés apportés par CSS3, arrêtons-nous un instant sur trois modules qui feront sans nul doute parler beaucoup à l'avenir : les Media Queries et le Web mobile, le nouveau positionnement fluide sous forme de grilles et les animations d'éléments.
Découvrons ce qui se cache sous le capot de ces technologies et voyons ce qu'elles peuvent apporter sur des navigateurs récents tels qu'Internet Explorer 9 et 10.
KNACSS est une feuille de style CSS minimaliste, responsive et extensible pour débuter une intégration HTML / CSS --> http://knacss.com/
KNACSS est né d'un constat que nous faisons quotidiennement dans notre agence web :
- La plupart des frameworks CSS sont de grosses usines à gaz que l'on n'exploite très partiellement (environ 10% à 20% au mieux)
- Ils nécessitent quasi systématiquement qu'on redéfinisse à sa sauce la moitié des styles
- Ils ne sont pas négligeables en terme de poids de fichiers
KNACSS n'est pas non-plus un "reset" CSS classique tels que ceux que l'on trouve chez Eric Meyer, Yahoo UI ou Normalizr, que l'on estime trop agressifs et qui nécessitent que l'on redéfinisse chaque élément par la suite. Il se charge du minimum pour éviter les différences d'affichage flagrantes.
Chez Alsacréations, et par expérience, on préfère de loin un socle de base minimaliste qui convienne tel quel à tous les nouveaux projets, mais qui puisse être progressivement enrichi. C'est le cas de KNACSS.
Parce qu’un jour CSS nous promet de ne plus avoir à nous torturer avec des bidouilles de positionnement, des bugs d’affichage, des hacks, des flottants mal employés, des position: absolute tordues, des position: relative ou des clear: both sortis de nulle part, du centrage vertical intuitif, toussa.
Un jour vous pourrez dire : j’y étais, c’était le bon vieux temps.
Mais pas encore.
On y parlera de diverses spécifications (en plein brouillon ou non) telles que : inline-block, CSS table, multicolonnes, flexbox, grid layout, float : position, regions, exclusions, CSS4, etc.
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)Raphaël Goetter
Votre site web s'affiche mal sur terminal mobile ? Vous n'avez pas forcément les ressources et les moyens de vous offrir une version dédiée ou une application native ?
Ou plus simplement, vous être pressé et voulez "arranger les choses" en attendant mieux.
Voici quelques outils et pistes à suivre pour réaliser une adaptation mobile d'un site existant via meta viewport et CSS3 media queries.
Présentation jouée lors du W3Cafe du 29 Juin 2012: http://france.w3cafe.org/w3cafe-paris/w3cafe-standards-web-du-29-06-12/article/programme autour des nouveautés HTML5/CSS3 dans IE10 et le modèle de développement HTML5 Metro dans Windows 8
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...Raphaël Goetter
Parmi l'ensemble des nouveautés apportés par CSS3, arrêtons-nous un instant sur trois modules qui feront sans nul doute parler beaucoup à l'avenir : les Media Queries et le Web mobile, le nouveau positionnement fluide sous forme de grilles et les animations d'éléments.
Découvrons ce qui se cache sous le capot de ces technologies et voyons ce qu'elles peuvent apporter sur des navigateurs récents tels qu'Internet Explorer 9 et 10.
KNACSS est une feuille de style CSS minimaliste, responsive et extensible pour débuter une intégration HTML / CSS --> http://knacss.com/
KNACSS est né d'un constat que nous faisons quotidiennement dans notre agence web :
- La plupart des frameworks CSS sont de grosses usines à gaz que l'on n'exploite très partiellement (environ 10% à 20% au mieux)
- Ils nécessitent quasi systématiquement qu'on redéfinisse à sa sauce la moitié des styles
- Ils ne sont pas négligeables en terme de poids de fichiers
KNACSS n'est pas non-plus un "reset" CSS classique tels que ceux que l'on trouve chez Eric Meyer, Yahoo UI ou Normalizr, que l'on estime trop agressifs et qui nécessitent que l'on redéfinisse chaque élément par la suite. Il se charge du minimum pour éviter les différences d'affichage flagrantes.
Chez Alsacréations, et par expérience, on préfère de loin un socle de base minimaliste qui convienne tel quel à tous les nouveaux projets, mais qui puisse être progressivement enrichi. C'est le cas de KNACSS.
Parce qu’un jour CSS nous promet de ne plus avoir à nous torturer avec des bidouilles de positionnement, des bugs d’affichage, des hacks, des flottants mal employés, des position: absolute tordues, des position: relative ou des clear: both sortis de nulle part, du centrage vertical intuitif, toussa.
Un jour vous pourrez dire : j’y étais, c’était le bon vieux temps.
Mais pas encore.
On y parlera de diverses spécifications (en plein brouillon ou non) telles que : inline-block, CSS table, multicolonnes, flexbox, grid layout, float : position, regions, exclusions, CSS4, etc.
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)Raphaël Goetter
Votre site web s'affiche mal sur terminal mobile ? Vous n'avez pas forcément les ressources et les moyens de vous offrir une version dédiée ou une application native ?
Ou plus simplement, vous être pressé et voulez "arranger les choses" en attendant mieux.
Voici quelques outils et pistes à suivre pour réaliser une adaptation mobile d'un site existant via meta viewport et CSS3 media queries.
Présentation jouée lors du W3Cafe du 29 Juin 2012: http://france.w3cafe.org/w3cafe-paris/w3cafe-standards-web-du-29-06-12/article/programme autour des nouveautés HTML5/CSS3 dans IE10 et le modèle de développement HTML5 Metro dans Windows 8
Les préprocesseurs CSS, c'est chouette ! Mais aujourd'hui, avec l'évolution des standards, est-il toujours aussi pertinent de les utiliser de manière systématique au sein de nos projets web ? Sont-il si bénéfiques ? Ou, au contraire sont-il à l'origine de mauvaises pratiques ? Bref... CSS natif fait-il mieux ?
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...VISEO
Il n’existe à ce jour plus une seule application Web qui n’utilise pas « CSS », ces fichiers qui permettent de styliser son application. Aujourd’hui, « CSS3 » nous permet d’écrire des applications du plus en plus attrayantes mais n’est pas encore idéal puisque nous constatons des manques comme par exemple la définition de constantes de couleurs, chose appréciable pour les sites en marque blanche. Notons également la difficulté pour factoriser et maintenir ce code.
Une lueur d’espoir est apparue, grâce à « Less ». C’est un framework qui non seulement nous facilite l’écriture de nos fichiers CSS, mais nous aide également à les maintenir et à mieux les structurer, tout en ayant des outils que nous pouvons utiliser dans nos usines logiciels.
Je suis un développeur Web, et je n’ai pas peur de dire que désormais, j’aime le CSS !
Formation en développement Web ( Front End) en utilisant le Framework Bootstrap 4.
Cette formation est en partenariat avec ANETI: Agence Nationale pour l'Emploi et le Travail Indépendant sous le programme Forsti.
Pour plus d'information :
Formateur : Dagbouj Hatem
Mail: dagboujhatem@gmail.com
XQuery est un langage de requête informatique permettant non seulement d'extr...YassineJada
XQuery est un langage de requête informatique permettant non seulement d'extraire des informations d'un document XML, ou d'une collection de documents XML, mais également d'effectuer des calculs complexes à partir des informations extraites et de reconstruire de nouveaux documents ou fragments XML.
jQuery est une bibliothèque JavaScript libre qui porte sur l'interaction entre JavaScript (comprenant Ajax) et HTML, et a pour but
de simplifier des commandes communes de JavaScript. La première version date de janvier 2006.
Le framework contient notamment les fonctionnalités suivantes :
- Parcours et modification du DOM
- Selecteurs CSS 1 à 3
- Événements
- Effets et animations
- Manipulations des feuilles de style en cascade
- Ajax
- Plugins
- Fonctions utilitaires
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et AnimationsMicrosoft
Parmi l'ensemble des nouveautés apportés par CSS3, arrêtons-nous un instant sur trois modules qui feront sans nul doute parler beaucoup à l'avenir : les Media Queries et le Web mobile, le nouveau positionnement fluide sous forme de grilles et les animations d'éléments. Découvrons ce qui se cache sous le capot de ces technologies et voyons ce qu'elles peuvent apporter sur des navigateurs récents tels qu'Internet Explorer 9 et 10.
L’histoire de la fluidification du dialogue entre designers et développeurs au Guardian : comment nous avons facilité l’amélioration continue à grande vitesse d’un site responsive à grande échelle.
Pour atteindre une ubiquité de langage entre les interactions humaine et notre code, nous avons utilisé le pré-processeur CSS Sass et des techniques qui s'apparentent au Domain Driven Design (Design Orienté Domaine).
Présentation donnée à la conférence Blend Web Mix (http://www.blendwebmix.com/) le jeudi 30 octobre 2014 à Lyon.
C'est une mise à jour d'une présentation précédemment donnée en Français à la Kiwi Party (http://kiwiparty.fr/) le vendredi 13 juin 2014 : http://www.slideshare.net/kaelig/kiwi-party
Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013Mehdi Kabab
Ce n’est un secret pour personne : le travail d’intégrateur web peut rapidement tourner au cauchemar. Entre le support des navigateurs obsolètes, les problématiques de performance, la génération de sprites CSS et la prise en charge des nouveaux périphériques mobiles, l’intégrateur doit jongler entre de multiples langages et connaître une liste interminable de hacks à appliquer pour satisfaire tout ce petit monde. Que diriez-vous de vous simplifier la vie avec CSS grâce à Sass/Compass ?
Veille HTML5/CSS3 sur Twitter: @fgribreau
Ceci est le support de ma conférence @EPSI_Nantes sur HTML5/CSS3.
Si vous remarquez une information incorrecte n'hésitez pas à me le faire savoir ;)
Développer pour une version d'un navigateur c'est facile. Développer pour plusieurs navigateurs aux capacités parfois franchement différentes, c'est une autre histoire. Plutôt que de pester toute la journée nous verrons comment il est possible de minimiser les effets de bords, voir de trouver ça plaisant. Mobile, Desktop, site web, applications web, bonne pratiques, outils d'aides à la production, bibliothèques JavaScript indispensables, stratégie de test... nous passerons en revu tout tout ce qu'il faut savoir et ce qui permet de coder pour tous les navigateurs (presque) sans douleurs.
Les préprocesseurs CSS, c'est chouette ! Mais aujourd'hui, avec l'évolution des standards, est-il toujours aussi pertinent de les utiliser de manière systématique au sein de nos projets web ? Sont-il si bénéfiques ? Ou, au contraire sont-il à l'origine de mauvaises pratiques ? Bref... CSS natif fait-il mieux ?
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...VISEO
Il n’existe à ce jour plus une seule application Web qui n’utilise pas « CSS », ces fichiers qui permettent de styliser son application. Aujourd’hui, « CSS3 » nous permet d’écrire des applications du plus en plus attrayantes mais n’est pas encore idéal puisque nous constatons des manques comme par exemple la définition de constantes de couleurs, chose appréciable pour les sites en marque blanche. Notons également la difficulté pour factoriser et maintenir ce code.
Une lueur d’espoir est apparue, grâce à « Less ». C’est un framework qui non seulement nous facilite l’écriture de nos fichiers CSS, mais nous aide également à les maintenir et à mieux les structurer, tout en ayant des outils que nous pouvons utiliser dans nos usines logiciels.
Je suis un développeur Web, et je n’ai pas peur de dire que désormais, j’aime le CSS !
Formation en développement Web ( Front End) en utilisant le Framework Bootstrap 4.
Cette formation est en partenariat avec ANETI: Agence Nationale pour l'Emploi et le Travail Indépendant sous le programme Forsti.
Pour plus d'information :
Formateur : Dagbouj Hatem
Mail: dagboujhatem@gmail.com
XQuery est un langage de requête informatique permettant non seulement d'extr...YassineJada
XQuery est un langage de requête informatique permettant non seulement d'extraire des informations d'un document XML, ou d'une collection de documents XML, mais également d'effectuer des calculs complexes à partir des informations extraites et de reconstruire de nouveaux documents ou fragments XML.
jQuery est une bibliothèque JavaScript libre qui porte sur l'interaction entre JavaScript (comprenant Ajax) et HTML, et a pour but
de simplifier des commandes communes de JavaScript. La première version date de janvier 2006.
Le framework contient notamment les fonctionnalités suivantes :
- Parcours et modification du DOM
- Selecteurs CSS 1 à 3
- Événements
- Effets et animations
- Manipulations des feuilles de style en cascade
- Ajax
- Plugins
- Fonctions utilitaires
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et AnimationsMicrosoft
Parmi l'ensemble des nouveautés apportés par CSS3, arrêtons-nous un instant sur trois modules qui feront sans nul doute parler beaucoup à l'avenir : les Media Queries et le Web mobile, le nouveau positionnement fluide sous forme de grilles et les animations d'éléments. Découvrons ce qui se cache sous le capot de ces technologies et voyons ce qu'elles peuvent apporter sur des navigateurs récents tels qu'Internet Explorer 9 et 10.
L’histoire de la fluidification du dialogue entre designers et développeurs au Guardian : comment nous avons facilité l’amélioration continue à grande vitesse d’un site responsive à grande échelle.
Pour atteindre une ubiquité de langage entre les interactions humaine et notre code, nous avons utilisé le pré-processeur CSS Sass et des techniques qui s'apparentent au Domain Driven Design (Design Orienté Domaine).
Présentation donnée à la conférence Blend Web Mix (http://www.blendwebmix.com/) le jeudi 30 octobre 2014 à Lyon.
C'est une mise à jour d'une présentation précédemment donnée en Français à la Kiwi Party (http://kiwiparty.fr/) le vendredi 13 juin 2014 : http://www.slideshare.net/kaelig/kiwi-party
Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013Mehdi Kabab
Ce n’est un secret pour personne : le travail d’intégrateur web peut rapidement tourner au cauchemar. Entre le support des navigateurs obsolètes, les problématiques de performance, la génération de sprites CSS et la prise en charge des nouveaux périphériques mobiles, l’intégrateur doit jongler entre de multiples langages et connaître une liste interminable de hacks à appliquer pour satisfaire tout ce petit monde. Que diriez-vous de vous simplifier la vie avec CSS grâce à Sass/Compass ?
Veille HTML5/CSS3 sur Twitter: @fgribreau
Ceci est le support de ma conférence @EPSI_Nantes sur HTML5/CSS3.
Si vous remarquez une information incorrecte n'hésitez pas à me le faire savoir ;)
Développer pour une version d'un navigateur c'est facile. Développer pour plusieurs navigateurs aux capacités parfois franchement différentes, c'est une autre histoire. Plutôt que de pester toute la journée nous verrons comment il est possible de minimiser les effets de bords, voir de trouver ça plaisant. Mobile, Desktop, site web, applications web, bonne pratiques, outils d'aides à la production, bibliothèques JavaScript indispensables, stratégie de test... nous passerons en revu tout tout ce qu'il faut savoir et ce qui permet de coder pour tous les navigateurs (presque) sans douleurs.
18. Qu’est ce qu’il se passe lorsqu’on n’a plus de place ?
Comment je gère les tailles des colonnes ?
Quid du colspan et rowspan ?
Laquelle de ces solutions je prends ?
Quels sont les effets de bords ?
Etc.
40. fr : fraction de l’espace restant
min-content : taille de l'élément le plus petit
max-content : taille de l'élément le plus grand
fit-content : équivalent de “auto”
Nouvelles unités
(uniquement pour Grid Layout)
43. justify-xxx : Sens principal Horizontal
align-xxx : Sens secondaire Vertical
44. xxx-self : Aligne un bloc dans son parent
xxx-items : Alignement par défaut des blocs dans la grille
xxx-content : Alignement de la grille dans son parent
45. center : aligne le bloc au milieu de l'axe
start : aligne le bloc au début de l'axe (gauche ou haut)
end : aligne le bloc à la fin de l'axe (droite ou bas)
59. Implémentation dans Firefox (et nouvelles syntaxe dans Edge ?)
Sous-grilles imbriquées avec syntaxe simplifiée
Répéter des configuration de Cellules
Cellules nomées
69. Syntaxe de base super simple (une fois les alignements compris…)
Syntaxe avancée très puissante
Un seul conteneur global
Facile de ré-agencer les blocs
Nouvelles unités de tailles super pratiques