Tag Archives: CSS

Logo PhoneGap

PhoneGap: first overview

Posted in HTML et CSS | 1 Comment

PhoneGap is a platform for building mobile application using Web technologies: HTML, CSS and Javascript. Mobile platforms like Android, iPhone or Blackberry are not ready yet to manage such application, that is why PhoneGap is filling in the gap by providing a plugin system to use native call through Javascript.
This is very interesting platform because there is a global movement between Web technologies interacting with mobile, smartphone, … You know: HTML5, CSS3, Boot 2 Gecko (see also: B2G Wiki), Apache Cordova, SOCIETIES project, …


Continue reading

logo-php

Futurs articles sur le thème du développement Web

Posted in Informations | Leave a comment

Le Web et le développement de sites Web est toujours un de mes passes-temps (le tout reste d’avoir du temps), voici donc quelques sujets que j’aimerai aborder sur ce blog dans un futur proche. On verra ce qu’on peut faire :-)

  • PHP
    • Doctrine, une librairie permettant de gérer sa base de données comme si l’on avait affaire à des objets. Un ORM quoi ! Elle a l’air très puissante et très utile mais je n’ai pas encore réussi à la prendre en main. Utilisé sous Synfony.
    • Twig, un moteur de template particulièrement efficace et facile à prendre en main. Utilisé sous Synfony.
    • Un exemple de structure MVC (avec des controller et des actions, un petit peu à la mode de Struts), l’idée étant de comprendre ce que font des frameworks comme Zend et Synfony.
  • HTML/CSS
    • Quelques tips HTML5
    • LESS, COMPASS et autre « améliorateur » du développement des CSS

Booster ses CSS

Posted in HTML et CSS | 2 Comments

Depuis que je suis sur Twitter (vous pouvez [me suivre|http://twitter.com/30minparjour]), j’ai l’occasion de lire plus d’articles sur le Web qu’auparavant et notamment quelques uns sur les CSS. Je vous livre donc mes découvertes et réflexions du moment. !!!CSS sur une ligne Single line CSS en anglais. C’est le concept qu’il est mieux d’écrire ses CSS sur une seule ligne plutôt qu’en bloc. Par exemple en bloc : /// ul li { list-style:none; border:1px solid black; font-weight:bold; } dl dt { width:800px; } /// donnerait sur une ligne /// ul li{list-style:none; border:1px solid black; font-weight:bold;} dl dt{width:800px;} /// Le grand avantage c’est que ça réduit le poids du fichier CSS (assez significativement d’ailleurs, même si ça n’a pas grande influence sur le poids total d’une page Web), et ça évite de scroller des heures pour arriver à la fin du fichier. L’énorme inconvénient c’est que c’est moins lisible. C’est vrai, mais j’ai testé et en fait pas tant que ça. Pour ma part je pense que je vais adopter une sorte de mix : CSS sur une ligne, et CSS en bloc pour les lignes trop longue. Sans oublier de commenter les différentes parties du code, on n’est pas à 10 lignes près quand même ! !!Quelques exemples * [Single Line CSS|http://orderedlist.com/our-writing/resources/html-css/single-line-css/] * [Exemple de feuille CSS|http://designinformer.com/wp-content/themes/design-informer-v2/style.css] très propre !!!Eviter les espaces superflues Dans le même genre, histoire de grapiller quelques octets, c’est vrai que ça ne sert à rien de rajouter des espaces entre une propriété et sa valeur, une balise et l’accolade qui la suit. Bref, je suis pour d’enlever les espaces superflues ! Mais quand même, un espace entre chaque propriété quand on écrit en ligne : c’est cool pour les yeux ! !!!Enlever les les sélecteurs CSS superflues D’après [PageSpeed|http://code.google.com/intl/fr/speed/page-speed/] (un outils de Google pas mal du tout pour tester la rapidité de ses pages Web), il serait avantageux de réduire au maximum la liste des sélecteurs CSS. Prenons l’exemple suivant : /// #menu ul li{font-weight:bold;} /// Préciser l’élément @@ul@@ est en général superflue puisque pour un cas classique, il n’y aurait pas de @@li@@ en dehors d’un @@ul@@ dans @@#menu@@. Il vaudrait donc mieux écrire : /// #menu li{font-weight:bold;} /// Et je dis : ouais, ça se tient ! ça réduit la taille du fichier CSS, améliore la lecture du fichier, et il y a des chances que cela facilite le travail de l’interpréteur de CSS. Attention tout de même à ne pas tailler à l’arrache dans le CSS, certains sélecteurs sont utiles ! C’est tout pour aujourd’hui !

Plusieurs CSS sur une seule page

Posted in HTML et CSS | Leave a comment

J’ai découvert aujourd’hui comment appliquer plusieurs feuilles de styles sur une seule et même page. J’avais essayé plusieurs fois sans réel succès, pourtant cela peut être très pratique pour séparer son code. !!!Un fichier CSS sur une page /// /// Pour proposer des designs alternatifs, on emploie le mot clef @@alternate@@. /// /// C’est le premier qui sera utilisé par défaut. !!!Plusieurs fichiers CSS sur une page /// /// Mais en utilisant les titres, on peut aller plus loin. L’exemple suivant utilisera les designs ayant pour titre « compact » et le design persistant (sans titre) @@commun.css@@. Mais l’utilisateur peut sélectionner les designs « beautiful », ce qui appellera aussi le design persistant. /// /// !!!Pour aller plus loin On peut noter qu’il est possible d’utiliser une balise méta ou un header pour préciser le ou les fichiers CSS à afficher par défaut : /// /// /// /// Merci le [W3C sur Lagrange|http://www.la-grange.net/w3c/html4.01/present/styles.html#h-14.3.2] !

fylhan-ghost

Des bords arrondis, sans images, avec les CSS3

Posted in HTML et CSS | 2 Comments

Je suis actuellement en train de faire le design d’un nouveau site, et pour la première fois, je me suis amusé un petit peu avec les CSS 3. Je n’ai utilisé que des bords arrondis (border-radius), et des effets d’ombres (box-shadow), et je suis impressionné par ce que l’on peut faire en quelques lignes. Quand je pense aux transitions, aux couleurs RGBa (pour gérer la transparence facilement), les arrières-plans multiples, j’ai vraiment hâte que les navigateurs l’implémentent ! Il est déjà possible de tester un rendu temporaire en utilisant les préfixes -moz- (pour Firefox), et -webkit- (pour Safari et Google Chrome), et sans préfixe pour Opéra à partir de la version 10.5 . Pour Internet Explorer, il faut se rabattre sur les créations anciennes ou nouvelles des développeurs de Microsoft, qui, quand elles existent, ne suivent pas de standard particulier. Welcome in the real world!

Un peu d’arrondi pour la douceur

Nous allons commencer par voir comment réaliser des bords arrondis sans utiliser d’images. Et en ajoutant une petite image pour la déco quand même, on va créer la chose suivante :


Continue reading

Où trouver des idées de design XHTML/CSS ?

Posted in HTML et CSS | Leave a comment

Une chose que je remarque de plus en plus est que je la partie la plus délicate, pour moi, lors de la création d’un site Internet (et dans une moindre mesure, d’une application) est la phase de design. Parfois j’ai quelques idées en tête, mais même avec ça, je galère vraiment à trouver quelque chose de jolie… Je ne dois pas avoir la fibre artistique, le sens des couleurs, ou je ne sais. Je crois n’avoir réussi l’exploit de faire quelque chose de jolie (et encore, c’est subjectif) que pour un seul site, mon site perso [La Bnbox|http://la-bnbox.fr]. A l’époque j’ai du avoir une sorte d’inspiration, et ça a roulé comme sur des roulettes. J’étais vraiment fier, même si aujourd’hui c’est un peu passé de mode et un peu trop bleu, blanc et statique à mon goût. Mais bon, de l’eau à passer sous des ponts depuis le temps… [((/public/Divers/.bnbox_m.jpg|La Bnbox v3|C|La Bnbox v3, déc. 2009))|/public/Divers/bnbox.jpg] Une autre chose que je remarque c’est que si on me file un psd (format Photoshop) ou une image d’un design, je suis tout à fait capable de transcrire tout ça en XHTML et en CSS, en créant les images ou non. Bref, je suis plus intégrateur Web que Designer Web pour l’instant. Mais je crois que je préfère encore le développement. Bref, dans un de mes sites récents, je m’étais inspiré d’un thème du [Zen Garden|http://www.csszengarden.com/tr/francais/], un site qui pour une même page XHTML propose des tas de mise en page CSS créés par des fous fous des CSS. Les fichiers CSS du Zen Garden sont sous license Creative Commons donc utilisable à souhait, mais les images peuvent être copyrighté par leur auteur. Bref, ça m’a bien aidé, et c’est vraiment un bon plan pour trouver de l’inspiration. (je viens de remarquer que le screenshot de Enfance est assez fun, je devais avoir un peu trop programmé quand j’ai écrit l’article de test que l’on y voit, uhuh) [((/public/Divers/.zengarden_m.jpg|Zen Garden|C|Zen Garden, déc. 2009))|/public/Divers/zengarden.jpg] [((/public/Divers/.enfance_m.jpg|Enfance (mon site)|C|Enfance (mon site), déc. 2009))|/public/Divers/enfance.jpg] Mais j’ai découvert pas plus tard qu’hier une nouvelle source d’inspiration : les thèmes WordPress. Si vous vous êtes déjà amusé à regarder leur nombre, vous savez peut-être qu’à l’heure actuelle il en existe 1091 sur le site officiel (et cela ne cesse d’augmenter). Il y a dans ce petit millier de thèmes des choses très jolies, sur beaucoup de sujets, et en plus il est possible de télécharger le template pour avoir directement les images, voir mieux : les psd. J’ai trouvé 3 sites et c’était bien plus que ce que je pouvais espérer : * [Templates WordPress du site officiel|http://wordpress.org/extend/themes/] (en tapant « blog » comme recherche par exemple) * [Très beaux templates WordPress|http://www.wordpress-template.com/] * [D'autres très beaux templates|http://wordpresstemplates.name/] %%% Dans le même ordre d’idées, plusieurs sites proposent des kits graphiques (payants ou gratuits) et ils peuvent être une bonne source d’inspiration pour réussir son design. Pendant un temps j’en avais plusieurs dans mes marques pages, mais un nouvel ordinateur est passé par là et je n’ai pas encore fait le transfert. Donc, une autre fois peut-être… Tout ça pour dire qu’il existe des solutions quand on n’est pas fait pour le graphisme. Les rabats-joies diront qu’il suffit de s’y mettre, que ce n’est pas qu’une question de pré-disposition, et je terminerai ce billet en leur répondant : certes, mais pour s’y mettre, il faut avoir sacrément du temps.

Modifier un thème Dotclear

Posted in Dotclear | Leave a comment

Hier soir, (un peu tard je l’avoue) je me suis dit que le design de ce blog était bien fixe et que cela rendait assez désagréable la lecture de mes codes d’exemple. Alors j’ai utilisé la fonction d’édition de thèmes de Dotclear pour modifier un peu le CSS du design GlossyBlue que j’utilise. Je suis franchement étonné par la clarté du code CSS, je l’ai très rapidement pris en main, d’autant plus que la manière de coder (d’abord les balises d’usages body, a, hx suivi des parties principales header, page, content, footer, puis tout ce qui est relatif à de plus petites parties du design) ressemble fortement à ce que j’essai de faire lorsque je code. (avec plus ou moins de succès ^^) La système d’édition est de plus bien construit : on ouvre un fichier, il apparait dans un textarea, on le modifie, on enregistre, reste à actualiser la page ! Simple, mais efficace. Bon alors c’est vrai qu’une petite coloration syntaxique, et une numérotation des lignes seraient super chouette (éh, ils le font bien chez [Mozilla|https://bespin.mozilla.com/]), mais bon, c’est pas vraiment fait pour ça ! Bref, j’ai rendu le design GlossyBlue extensible (pour le coup j’ai de la place. Peut-être un peu trop…), et le truc qui est pas mal avec Dotclear c’est que dans la [galerie de thèmes|http://themes.dotaddict.org/galerie-dc2/], il y a aussi des [gabarits de thèmes|http://themes.dotaddict.org/galerie-dc2/page/9]. On peut donc modifier la forme de son design assez rapidement et sans se prendre la tête. Avec tout ça, il faudrait quand même que j’améliore un petit peu mon header.