Catégorie : Sites web responsive design

Les articles de ce blog qui traitent des sujets concernant la création de site web, les outils, le responsive web, le web design…

Cascade de liens pour les CSS (feuilles de styles)

Ce billet est principalement écrit comme complément de cours pour les étudiants IDEMM et pour les stagiaires qui suivent nos formations internet et plus spécifiquement notre Formation CSS (feuilles de style)…
Pendant, que je rédigeais ce billet, David Touvet proposait plusieurs billets en parallèle sur le sujet 🙂

  • J’ai déjà mentionné dans le passé CSS : on reprend tout à zéro !, une série de 15 articles qui est un tutoriel.
  • un autre cours sur les CSS.
  • Sur FractalWiki se trouve une introduction aux feuilles de style de Christophe Ducamp.
  • Tutorial CSS : introduction est en effet une bonne introduction aux feuilles de styles.
  • feuilles de style web, css, boîte, texte, positionnement, tout un programme…
  • Openweb.eu.org propose une série d’article sur les feuilles de style en cascade
  • Olivier Meunier, le génial créateur de DotClear fournit également les CSS et les standards en six mois
  • L’inévitable éducation, société et technologie possède plusieurs articles sur les CSS.
  • Le Blog Alsacréations est un incontournable ainsi que sa FAQ xHTML/CSS
  • Pompage.net : le web design puisé à la source pour les articles et les ressources
  • Stu Nicholls propose un nombre impressionnant « d’expériences » réalisées grâce aux CSS sur le site CSS demonstrations triées par rubriques : démonstrations, menus, layouts (mise en page), Box (boîtes), Mozilla (pour les navigateurs autres qu’Internet Explorer), Explorer (seulement trois propositions pour le navigateur de Microsoft) et l’opacité.
  • Un Générateur de feuille de style
  • Un autre Generator de CSS
  • Sur le site Suisse intensivstationn des modèles de structure CSS sont disponibles. Même si le site est en anglais, il reste accessible au réfractaire à la langue de Shakespeare…
  • layoutomatic est une autre solution pour la structure de vos pages.
  • Le site Accessify propose parmi ces outils un créateur de formulaire ; List-o-matic un éditeur de menu de navigation, etc.
  • css.maxdesign.com.au dont les Listamatic1 et Listamatic2: vous diront tout sur les listes et donc sur les menus.
  • Il existe même un CSS Optimiser en ligne !
  • CSS Actions and Extensions for GoLive car Golive à ce jour est toujours concurrent de Dreaweaver. Pour combien de temps encore ?
  • Centricle dans son css filters (css hacks) indique selon les plateformes si tel ou tel navigateur applique les règles.
  • Le JDN Développeurs (Journal du net) explique comment utiliser du CSS dans ses envois de mail.
  • WikiNi:CSS donne une longue liste de liens sur le sujet.

Terminons par des livres. J’ai déjà mentionné à sa sortie : CSS par Eric Meyer. Depuis, j’ai acquis CSS2 Pratique du design web de Raphaël Goetter (Alsacréations) chez Eyrolles (ISBN : 2-212-11570-9) dont je peux conseiller la lecture en préambule à celui d’Eric Meyer. Autre acquisition que je conseille : Le zen des CSS de Dave Shea , Molly E. Holzschlag toujours chez Eyrolles (ISBN : 2-212-11699-3). Il suffit d’aller sur le site Jardin Zen css: La beauté de la conception CSS pour comprendre l’intérêt du livre qui permet de découvrir 36 contributions du site avec force détails.
Beaucoup de monde plébiscite également le livre Design web : utiliser les standards : CSS et XHTML de Jeffrey Zeldman Adapté en français par Sébastien Blondeel. Eyrolles est l’éditeur (ISBN : 2-212-11548-2).

Qu'est ce que PHP selon Google ?

Lorsque j’ai trouvé sur le site d’éducation, société et technologie la page qu »est ce que PHP ?, je me suis dis… Tiens, pourquoi pas un billet sur le sujet…
Par acquis de conscience, je jette un coup d’oeil sur Google… avec comme mots clefs : qu »est ce que PHP, résultat : environ 1 000 réponses… dont 31 où l’expression est dans le titre…
Par curiosité, j’ai visité les pages obtenues, cela vous évitera de chercher longuement et de tout ouvrir 😉
Quelques pages n’existe plus bien entendu… et certaines sont identiques (normal, lorsque l’on rencontre les manuels…)
Voici la liste et un bref commentaire sur les pages qui possédent dans leur titre selon Google l’expression : qu »est ce que PHP. Toutes ne sont pas intéressantes, loin de là.

  • par exemple, esseclive (groupe Essec) a du oublier de terminer sa page Qu’est-ce que PHP ? ! En voici le contenu sans liens. Qu´est-ce que PHP ? PHP, Apache, MySQL… Mots barbares réservés aux ingés ou réalités modernes et culture générale ? PHP Apache MySQL
  • Un seul blog propose l’expression, celui de david Touvet qu’est-ce que PHP? qui propose un lien vers une introduction au langage. Ce lien est d’ailleur en partie reproduit sur le site canadien Qu’est-ce que PHP ?
    • Naissance du PHP
    • Principe du PHP
    • Positionnement face aux autres langages
    • Intégration et syntaxe de PHP
    • Utiliser PHP sur son ordinateur
    • Quel outil pour faire du PHP ?
    • Notions essentielles !
    • le carnet d’adresse du débutant
  • Le site qui m’a permis cette petite recherche éducation, société et technologie est plus synthètique :
    • Historique
    • Description
    • pour plus d’informations, il renvoie vers Wikipédia
  • Encore plus bref, phpHeaven en 9 lignes présente le PHP
  • le portail PHP fait dans le minimalisme. La réponse à Qu’est-ce que PHP fait 5 lignes.
  • une mention spéciale, pour la page du site de Lille 3, plus exactement du grappa Qu’est-ce que PHP?. J’vais pas en dire de mal, c’est l’université ou je suis PAST 😉
  • Ensuite, nous retrouvons les documentations ou manuels qui reproduisent en partie 3.2.1 ou 3.1.1 ou même 5.1 selon les versions un chapitre qui s’appelle : Qu’est ce que PHP?
    • PHP 3
    • PHP 4.0
    • PHP 4.1
    • La FAQ du « Portail francais PHP et MySQL » Nexen

reprend le texte de la préface du manuel…

Conclusions : si vous cherchez à savoir rapidement ce qu’est PHP, selon votre niveau d’exigence, j’exclue les manuels qui s’adressent à des personnes qui veulent faire du PHP, 5-6 sites seulement sur la trentaine de page au titre aléchant correspond.
Je viens juste d’effectuer une recherche sur « c’est quoi PHP » et curieusement, personne quasiment n’a utilisé ce titre… Ah, si j’avais su !

un site dans tous ses états

Qui n’a pas un jour désiré voir comment son site apparaissait dans l’un des grands navigateurs existant :

  • MSIE 6.0 sur Windows 98
  • Galeon sur Linux
  • Epiphany sur Linux
  • Safari 2.0 sur Mac OS X
  • Opera 7.54 sur Linux
  • Konqueror 3.3 sur Linux
  • Mozilla 1.7.8 sur Linux
  • Firefox 1.0.4 sur Linux Debian

pour un écran 800×600 et pour un 1024×768.

J’ai trouvé le lien dont vous avez besoin sur le blog Just Blog IT. En fait, Browsershots réalise cela très bien pour vous…

prononcez n-view et pas Nvu

Nvu se pose en concurrent de Dreamweaver ou Golive comme solution gratuite et facile à mettre en place. Ce gestionnaire de fichiers Web, éditeur de pages graphiques WYSIWYG et éditeur de code comblera la plupart des utilisateurs. Basé sur Gecko, le coeur de Mozilla Firefox, il fait le bonheur des adeptes des normes et standards et des amateurs d’open-source.
Néophytes, ne pas s’absternir, car de nombreux tutoriels traitent de ce logiciel sur le net. Pour les plus confirmés, des extensions du logiciel permettent d’adapter les fonctions du logiciel à leurs besoins.
Nvu (prononcez n-view) arrive en version 0.9. Il est disponible, en français, pour Linux, Mac OS X et Windows depuis la page de Mozilla en français.

Tutoriaux et livres sur Dreamweaver

Comme ouvrage, je recommande à ceux qui débutent la lecture du Compétence Micro Dreamweaver correspondant à leur version de Dreamweaver.



La documentation de Dreamweaver MX 2004 est directement accessible sur le site de Macromédia… autrement dit les manuels en PDF. Pour les anciens manuels en version 4, 3 ou 2, vous les trouverez sur  tout pour son site.


Dreamweaver avant MX


Un bon tutorial permet d’utiliser une ancienne version de Dreamweaver (avant la version MX) ainsi que le B A – BA du logiciel.


Dreamweaver 3


Dans le site tous les ateliers, vous trouverez un tutorial correspondant à cette version.


Dreamweaver 4


Au choix, un tutorial réalisé en Flash ou un tutorial en Quicktime accompagné d’un Guide d’apprentissage (manuel de l’élève) de 4,2 Mo au format ZIP.


Dreamweaver MX


Un aide-mémoire complétera les tutoriaux sur les trois niveaux : débutants, intermédiaires et avancés.

Ajout le 2 juin 2005 : Dominic Girard propose une tutoriel pour Dreamweaver MX


Dreamweaver MX 2004


Beaucoup de ressources en effet sur FlashXpress : Portail de ressources Flash et Dreamweaver. La rubrique consacrée à Dreamweaver sur le site cyberformateur reprend les extensions de Dreamweaver dont Coursebuilder, une dizaine de présentations Quicktime pour apprendre quelque fonctionnalité de Dreamweaver ou des astuces (supprimer les marges d’une page, utiliser un pixel transparent…), des exemples de mise en page avec les tableaux et construire des tableaux avec Dreamweaver (j’en connais qui vont pousser des cris !), quelques exemples de comportements (menus déroulants, test navigateur…)


CSS


Un tutorial sur les CSS que vous enrichirez avec la lecture de l’une de mes références dans le domaine des CSS (feuilles de style) et de l’accessibilité et son blog, son forum, etc. Sans oublier les liens fournis par les contributions à un ancien billet.


Mise à jour le 28 nov : Même si vous avez commis une erreur de frappe sur formation dreamweaver, nous vous offrons la possibilité de nous trouver 🙂

ofrmation dreamweaver
fromation dreamweaver
fomration dreamweaver
foramtion dreamweaver
formtaion dreamweaver
formaiton dreamweaver
formatoin dreamweaver
formatino dreamweaver
formatio ndreamweaver
formationd reamweaver
formation rdeamweaver
formation deramweaver
formation draemweaver
formation dremaweaver
formation dreawmeaver
formation dreamewaver
formation dreamwaever
formation dreamwevaer
formation dreamweaevr
formation dreamweavre

Lettres voisines:
rormation dreamweaver
dormation dreamweaver
cormation dreamweaver
gormation dreamweaver
fçrmation dreamweaver
firmation dreamweaver
flrmation dreamweaver
fprmation dreamweaver
fàrmation dreamweaver
fo’mation dreamweaver
foemation dreamweaver
fofmation dreamweaver
fotmation dreamweaver
fo(mation dreamweaver
forpation dreamweaver
forlation dreamweaver
for:ation dreamweaver
forùation dreamweaver
form&tion dreamweaver
formétion dreamweaver
formztion dreamweaver
formqtion dreamweaver
forma(ion dreamweaver
formarion dreamweaver
formagion dreamweaver
formayion dreamweaver
forma-ion dreamweaver
format_on dreamweaver
formatuon dreamweaver
formatkon dreamweaver
formatoon dreamweaver
formatçon dreamweaver
formatiçn dreamweaver
formatiin dreamweaver
formatiln dreamweaver
formatipn dreamweaver
formatiàn dreamweaver
formatioj dreamweaver
formatiob dreamweaver
formatio, dreamweaver
formation ereamweaver
formation sreamweaver
formation xreamweaver
formation freamweaver
formation d’eamweaver
formation deeamweaver
formation dfeamweaver
formation dteamweaver
formation d(eamweaver
formation drzamweaver
formation drdamweaver
formation drramweaver
formation dr’amweaver
formation dre&mweaver
formation dreémweaver
formation drezmweaver
formation dreqmweaver
formation dreapweaver
formation drealweaver
formation drea:weaver
formation dreaùweaver
formation dreamseaver
formation dreamxeaver
formation dreamwzaver
formation dreamwdaver
formation dreamwraver
formation dreamw’aver
formation dreamwe&ver
formation dreamweéver
formation dreamwezver
formation dreamweqver
formation dreamweager
formation dreamweacer
formation dreamweaber
formation dreamweavzr
formation dreamweavdr
formation dreamweavrr
formation dreamweav’r
formation dreamweave’
formation dreamweavee
formation dreamweavef
formation dreamweavet
formation dreamweave(

	


	
	






	
	

		
Arrêtez d'enseigner le HTML en classe !
	


	

		
Suite au court billet dans le blog Alsacréations  et aux nombreux commentaires, je me sens terriblement concerné car je dois enseigner « la création de sites et de pages internet »… avec très peu d’heures d’enseignements. Je dois étudier Photoshop, Flash, et Dreamweaver pour la création de sites. Ça, c’est ce qui est prévu. Bref, il me reste environ 8 h de cours pour Dream, la création des sites, les obligations légales, les droits d’auteurs… et parler aussi, car j’en parle, de Html, des CSS, de l’utilisabilité, de l’accessibilité, des standards… Il est vrai que comme je les suis aussi pendant leur projet (grosso modo de décembre à mars), j’ai un peu plus de temps en réalité, ce qui me permet de leur montrer pour certain le site Alsacréations ;-).

Toutefois, je me vois mal expliquer aux étudiants que nous allons programmer directement en code… Ce ne sont pas des informaticiens pur et dur à la base et la plupart d’entre eux ne le seront jamais. Idem sur Flash. Et dans le fond, je me demande, (c’est identique pour les sociétés en formation continue, où comme centre de formations, nous avons des demandes sur Dreamweaver, parfois Golive ou même FrontPage, rarement sur les CSS mais jamais sur le Html, l’adaptabilité, la validation du code), je me demande donc, si cette guerre actuelle n’est pas un faux débat.

Je m’explique… par une histoire d’ancien combattant… Dans le milieu des années 90, les webmasters codaient « à la main ». Puis sont apparus timidement par exemple des logiciels comme Claris HomePage, PageMill puis un peu plus tard SiteMill de chez Adobe. A peu près à cette période-là, j’ai été invité à une conférence sur la création des sites Web. Les conférenciers ne juraient que par le code, le code, le code… Normal, c’était des programmeurs ! Et savez-vous vous ce qu’ils m’ont répondu lorsque je leur ai demandé ce qu’il pensait des programmes « Wysiwyg » et que la majorité du public allait utiliser ces programmes… Non ? Eh bien, ils m’ont répondu que ces programmes n’avaient aucun avenir… Depuis cette décennie, je pense que de nombreux logiciels de création de page, de gestion de sites… ont vu le jour et beaucoup de personnes crées aujourd’hui des sites : beaux, laids, valides, non valides, accessibles ou pas, utiles ou futiles, commerciaux ou associatifs…

Pour l’instant, il est vrai que j’en reste à un usage basique de Dreamweaver… (avec la création des tableaux tout en expliquant les feuilles de style) même si cela vous fait bondir. Je crois remarquer que le marché est encore aujourd’hui dominé par Dreamweaver et autres, que la validation et accessibilité (même si une loi existe) ne sont pas des critères décisifs pour demain (dans le sens futur immédiat)… Ils le seront lorsque des outils tels Dreamweaver, Golive ou d’autres généreront automatiquement ce type de code. Ce jour-là, effectivement, tout le monde se mettra au travail là-dessus de manière naturelle, pendant que les futurs geeks (ce ne devrait plus être vous !) trouveront de nouveaux objectifs qu’ils voudront imposer…

D’ailleurs au niveau du centre de formations, même si la demande est quasi-inexistante, nous avons beaucoup de difficultés pour trouver des formateurs compétents en Html/CSS, en utilisabilité, en accessibilité, en standards… Si certains sont intéressés, ils peuvent me contacter… 

De plus, pour en finir avec les étudiants, pour ma part, je pense que je leur donne des pistes. À eux aussi de les explorer.