Le Blog

Le blog laboratoire de F.L.D. Studio
0

CSS ready made

Customize it Yoursef

CSS tout prêt

Tous les projets ne necessitent pas un design unique. Pour obtenir un résultat original il faut disposer d'un budget qui permettra de rémunérer différents intervenants. Ergonomes, désigners, tests utilisateurs, maquettage, prototypage, tout cela prend du temps et donc de l'argent. Pour un site "ordinaire" il peut être bon de se tourner vers les solutions proposées par les  Framwork CSS ou si on est très pressé ou que le budget est très serré,  voir les deux, s'interesser aux modèles de CSS tout fait.

De nombreux sites proposent ce type de service, avec parfois la possibilité de reserver le modèle de votre choix à votre seul usage, moyennant un prix plus conséquent. Dans tous les cas cela peut aussi servir de source d'inspiration. A l'aide de cette base rien ne nous empêche par la suite de les personnaliser.

Ressources :

Effets CSS 3

Plus besoin de JavaScript pour animer ses pages :

La liste ici : http://www.webappers.com/?s=css+effect

Ressources partielles

Catégories: Développement WEB

Tags: CSS, Ressource

Commentaires: Pas de commentaires

0

Framwork CSS

Framwork CSS Les Framwork CSS

Au début de l'apparition des premiers Framworks CSS l'acceuil qui leur fut réservés fut des plus mitigé. Du CSS prêt à l'emploi, pour quoi faire !!! Les intégrateurs se sentaient menaçés , "le framwork ne fait pas tout", "le framwork est trop lourd", "il faut apprendre des concepts imaginés par d'autres". Pour les créatifs, il n'était même pas question d'en entendre parler, personne ne veux se faire enfermer dans une grille !!!

Considéré comme une béquille pour aprentis concepteurs, un accessoire vulgaire et trivial qui bride la créativité les grilles CSS comme l'ancêtre  Blueprint  ne connurent pas les louanges de la communauté des "gens du Web". Un outil de prototypage tout au plus et on s'en tiendra la. Il en est tout autrement aujourd'hui. Pourquoi un tel revirement ?. D'abord force et de constater que la grille n'est pas une contrainte, c'est un guide. Un fil d'ariane salvateur dans le labyrinte de la conception de l'interface. Un moyen de fournir un travail de qualité, harmonieux, bien construit, équilibré, agréable à regarder et à utiliser. Surtout il est sensé fonctionner avec tous les navigateurs et la le temps gagné en tests est précieux.

Les framworks CSS ont commencés à devenir importants avec l'avénement du "Reponsive Design" lui même étant la conséquence de l'explosion de l'usage des médias de consultation du Web en mobilité. Toutes ces résolutions d'écrans auquelles il faut fournir justement un contenu harmonieux et surtout lisible. Et puis les grands noms de la professions ont commis leur propre solutions. La plus connue, celle des ingénieurs de chez Twitter avec la fameuse Bootstrap Twitter ou aujourd'hui avec Pure qui annonce le grand retour de Yahoo sur le devant de la scéne des acteurs du Net.

Il existe et existera aussi des outils de production de CSS sous forme de logiciels à installer sur son poste de travail comme le très prométeur  Adobe Edge Reflow . On peut même se demander si, à terme, le métier d'intégrateur ne va pas disparaitre ou alors se spécialiser pour ne plus fournir que quelques hack CSS sur des plateformes exotiques ou rares. L'histoire nous le dira mais il est vrai que coder à la main des milliers d'instructions pour les feuilles de styles à quelque chose d'archaique, surtout si on le compare à la facilité de création d'une interface avec un AGL pour "client lourds"

Connaitre l'art du CSS pourra être un plus mais plus necessairement une obligation, les ressources en lignes, les logiciels spécialisés et les framworks sont déjà la pour nous fournir des bases solides pour construire toute sorte de sites.

Framwork CSS

Ressources

Pour les comparer : 


BOOSTRAP TWITTER

Depuis l'apparition du  Boostrap Twitter   version 1.0 du 19 Août 2011 , celui ci à généré un tel engoument qu'il en est deviennu un véritable éco-système à lui tout seul.    Le  site bootstraphero   ressence plus de 300 ressources qui lui sont dédiés et qui permettent d'en étendre les fonctionalités. (exemple :  http://www.dangrossman.info/2012/08/20/a-date-range-picker-for-twitter-bootstrap/   , voir aussi  http://magazineduwebdesign.com/bootstrap-ressources-template-kit-ui-bouton ) Pour délivrer le CSS encore plus rapidement utiliser un CDN comme  http://www.bootstrapcdn.com/

Version 3.0 du Boostrap

Sortie le 19 Aout 2013 :   http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/


Nicolas Thomas - 365 Days


FOUNDATION


YAHOO

AUTRES

Outils

Le site http://froont.com/  permet de créer visuellement dans son navigateur les bases d'une feuille de style responsive.

Conseils pour écrire son propre CSS :  https://github.com/flexbox/CSS-Guidelines/blob/master/README.md

Appendre les bases du CSS :  http://fr.learnlayout.com/

Prototyper en local avec Boostrap ou Foundation : http://www.pingendo.com/

Catégories: Développement WEB

Tags: CSS, Framwork, Ressource, Outil, Video

Commentaires: Pas de commentaires

0

Objectif Web

Objectif Web

On le sait, développer pour Internet c'est avant tout s'assurer que son site sera correctement visualisé avec le navigateur de l'internaute. On sait aussi que la palette des navigateurs et des O.S. s'est étendue, gérer le passé et preparer l'avenir s'apparente aujourd'hui à la quette du Saint Gral. 

Les navigateurs modernes permettent aux concepteurs d'enrichir leur applications avec une inter-activité qui fait ressembler les applications WEB à des applications de bureau, Google mail en est un bon exemple. Tous les moteurs de rendu ne sont pas encore au même niveau en ce qui concernent l'implémentation des nouvelles fonctionnalités mais on commence à se sentir plus à l'aise pour les utiliser; comprendre par la que l'on passe moins de temps à les faire fonctionner avec les différents navigateurs du marché.

Pendant des années, l'obsession était d'obtenir le même rendu sur tous les navigateurs. Cela demandais parfois des heures de travail acharné pour que par exemple IE6 affiche des cadres avec des bords arrondis. Beaucoup de travail pour pas grand chose finallement. Aujour'hui cette notion est dépassée, plutôt que de parler de "Gracefull disable", on évoque plutot le "Enhance enable". Partir du bas pour aller vers le haut.

A ce jour le nombre de page Web consultées à partir d'un téléphone portable est en constante augmentation et rien ne pourra arrêter ce phénoméme. On considére même que la consultation de page avec un PC sera bientôt de l'histoire ancienne. Cela continura dans le monde de l'entreprise mais le particulier (plus nombreux) utilisera plus volontier son mobile, sa tablette voir sa T.V. ou autre chose qui reste encore à inventer.

La mobilité c'est avant tout une somme de contraintes qu'il faut prendre en compte. Les écrans sont plus petits, la bande passante est plus faible, la connectivité peut même être inexistante, les touches du clavier sont plus petites que sur un clavier et nos doigts sont plus gros que le curseur d'une souris. A l'inverse sur une TV connecté la résolution est gigantesque et sur une tablette peut être 'utilisée à l'horizontale ou à la verticale.

Aujourd'hui il faut bien évaluer les contextes d'utilisation et les besoins de sa cible d'utilisateurs. Sera-t-il en mobilité ou non. Mobinaute ou Internaute, quel contenu afficher celon le média qu'il utilise. Pour cela il y a deux écoles. La première qui penssent qu'il faut doubler le site internet avec une version dédiée aux mobiles, la seconde qui précaunise un seul site pour tous les médias. Si la première est séduisante elle à cependant un impact écomique fort. Il faut développer deux sites, faire la maintenance de deux codes et faire attention à ne pas être frappé de contenu dupliqué par des moteurs de recherche bien intentionné. La tache est lourde, couteuse en temps et en budget, le process est complexe mais parfois c'est la seule solution. L'autre école précaunise l'URL unique et l'utilisation des média query pour s'en sortir. C'est bien sauf que l'on ne fait pas la distinction entre le portable et le PC est que la page délivrée est la même (en terme de ressources, pas necessairement de contenu) sur les différents médias. Ce qu'il faut comprendre c'est que sniffer des UA étant le mal, on doit aveuglement servir une page complette à l'internaute et c'est son navigateur (avec du code had-hoc) qui fera le tri que ce qu'il affiche ou pas. En terme de développement c'est plus rapide, en terme d'optimisation de la bande passante et de la fluidité de la navigation évidemment c'est très imparfait.

Le Web demain

La révolution de l'internet en mobilité à boulversé le petit monde des développeurs et des designeurs. Cette nouvelle donne à délenchée de nouveaux paradigmes concernant les méthodes de conceptions. On parle d'abandonner Photoshop pour le maquettage, après tout pourquoi pas, cela n'a jamais été un outil dédié au Web. Il faut se recentrer sur le contenu des pages, la ou avant on faisait surtout du remplissage.  

La démarche qui semble avoir les faveurs des professionnels de la profession (comme disait Godard)  c'est  le "mobile first".  Il faut d'abord résonner pour le plus petit dénominateur commun puis enrichir l'expérience utilisateur au fur est à mesure que le média d'utilisation monte en puissance et en ressources.  Cette aproche semble frappée du bon sens car on peut concevoir que consulter un site à son bureau, dans son canapé ou en mobilité occasionnent des besoins d'informations différents. Prenoms l'exemple d'un restaurant, le site complet affiche tout, les menus, les avis des clients, les horraires, le plan d'accès. En surfant dans mon canapé je m'interesse plutôt au menu et aux avis des internautes. Lorsque je suis dans la rue, sur mon portable je cherche un restaurant au alentour et je veux savoir si il y a de la place.

Le "responsive design" qui à explosé en 2012, bouleverse plus profondement qu'il n'en à l'air l'art de la conception. Au delas de quelques rêgles techniques, il déborde largement de l'adaptation de la feuille de style pour influer sur le design et le contenu de ce qui est affiché à l'internaute. Beaucoup de progrés reste à faire et beaucoup de tatonements seront encore necessaires pour arriver à délivrer le bon contenu au bon média en tenant compte des contraintes techniques, physiques et économiques.

Catégories: Humeur

Commentaires: Pas de commentaires