Mardi 09 Octobre 2007 à 06h28::CSS | JavaScript | PHP | XhtmlOutils de développements web pour windows

Attention, il n'est nullement question de présenter la meilleure suite logicielle du moment mais d'exposer les applications servant dans un cadre professionnel et donnant entière satisfaction.

Utilitaires commerciaux

Win'Design

Outils de modélisation méthode Merise d'une base de données (MCD/MLD). Après la création du schéma de la base, il est possible de générer les scripts SQL de création, puis de mises à jour. Indispensable pour tout type d'application, il permet d'éviter de nombreuses erreurs de conceptualisation en amont du projet. Il ne semble pas disposer de concurrent sérieux dans le monde du libre.

SQL Maestro for MySql

Malgré la richesse et les performances de MySQL, ce dernier souffre de la comparaison concernant sa suite logicielle pour le développement et la maintenance des bases de données.
Pour améliorer l'expérience utilisateur, il n'y a d'autre choix que de passer par un logiciel tiers. MySQL Maestro offre une interface d'administration complète pour la maintenance des bases de données :

• création, édition, extraction, supression des objets BDD
• support des triggers et des procédures
• administration des bases
• éditeur SQL...

En revanche, loin d'être ergonomique, l'interface demande un court temps d'adaptation pour exploiter pleinement les possibilités offertes par ce logiciel.

Photoshop

L'outil de retouche d'image absolument incontournable pour peu que l'on puisse se l'offrir. Idéal pour les graphistes / designers web, les développeurs souhaitant simplement intégrer des éléments dans une page web peuvent se tourner vers d'autres outils comme Gimp ou Paint Shop Pro.

SourceSafe

La solution made in Microsoft pour le développement en équipe autour d'un projet commun :

• gestion des versions
• comparez les différences entre deux scripts archivés
• interface d'accès à distance (http)

D'autres alternatives CVS (Concurrent Version System) existent mais demandent davantage d'investissement pour l'administration : Subversion, CVS (ce dernier ne semblant plus évoluer).

Zend Studio

IDE (à ne pas confondre avec les éditeurs textuels) pour le développement d'applications web PHP. Il inclut notamment la possibilité de déboguer les scripts PHP, possède une coloration syntaxique agréable (mais manquant de possibilité de personnalisation) pour les langages PHP, CSS, HTML et JavaScript. Il offre également une complétion de code bien pratique, l'affichage des erreurs de code à la volée, ainsi qu'une multitude d'outils à intérêt variable (ftp, génération de docs à la sauce PHP documentor, implémentation des CVS courants, support WSDL, ...).
Une nouvelle génération basée sur eclipse est en phase de beta test sous le nom de code Neon. La version finale est planifiée courant 2008.

Extensions Firefox

Web Developer Toolbar
Véritable couteau suisse du développement web, cette extension fournit de nombreuses aides pour le code côté client (html, css et Javascript). Il permet d'inspecter la structure et les propriétés d'une fenêtre et de son contenu.

Firebug
Au but similaire à l'extension précédente, FireBug permet d'éditer et calculer les temps de chargement de vos CSS, HTML, JavaScript, le tout en direct et dans n'importe quelle page web. Autre atout, il peut également servir pour déboguer le code javascript comme un véritable IDE (mise en pause, évaluation des expressions/variables, mesure des performances...).

YSlow
Mis à disposition par Yahoo!, ce complément ajoute à Firebug une analyse complète des performances de chargement d'une page web. Après l'analyse des performances, il dispense de précieux conseils pour les améliorer, basés sur les articles alimentés sur le site Yahoo!Developper Network.

Dom Inspector
DOM Inspector est un outil permettant d'inspecter et d'éditer le modèle de document d'une page Web (DOM). Il est possible de naviguer aisément dans la hiérarchie DOM en utilisant les deux panneaux windows qui apportent de nombreuses vues différentes du document et de ses noeuds. Essentiel pour le DOM Scripting.

Html Validator
Ajoute une validation HTML de votre page dans le navigateur, vous dispensant ainsi de soumettre votre page sur le site du W3C. La validation est par défaut réalisée avec le moteur Tidy. Seul regret, il ne tient pas compte des DTD personnalisées.

Snapper
Sans rentrer véritablement dans le cadre des outils de développement, Snapper s'avère utile lorsque vous devez remonter des captures d'écran à votre entourage. Les captures sont faîtes en direct dans la page, pour une zone que vous définissez. L'image ainsi générée est au format PNG.

Uppity
Là encore, cette extension n'a pas pour but de vous aider dans vos développements mais ajoute une fonctionnalité sympathique à firefox en permettant de remonter d'un niveau (répertoire) dans l'arborescence de la barre d'adresse.

Live HTTP Headers
Pour les développeurs avancés souhaitant obtenir un aperçu du contexte HTTP. Tous les entêtes envoyés par le serveur sont affichés dans le panneau latéral de firefox.

Linkification
Utile lorsque vous surfez sur le web, cette extension va convertir les liens textuels d'une page en liens hypertextes. Comme de nombreux forums ou blogs ne traduisent pas les liens automatiquement, Linkification vous évitera de faire un copier-coller des urls dans votre barre d'adresse.

Autres utilitaires

Notepad2
Remplaçant sans commune mesure du notepad classique de Windows, très léger et supportant de nombreuses colorations syntaxiques. Une autre alternative avec Notepad++, qui se distingue par une gestion d'onglets, permettant d'ouvrir plusieurs document dans une même interface.

Compare It!
Comparez deux fichiers, fusionnez les ou appliquez les transformations directement dans l'interface. Tout simplement le meilleur des comparateurs évalués à ce jour.

ColorPix
ColorPix est un petit utilitaire permettant de saisir la couleur du pixel où se situe le pointeur de votre souris. Le code couleur ainsi récupéré est disponible aux formats RGB, hexadécimal, CMYK et HSB. Dans le même esprit existe cette extension FireFox : ColorZilla.

Filezilla
Le client FTP léger, complet et gratuit de la fondation Mozilla. Facile d'accès, il supporte tous les protocoles standards (FTP, FTP/SSL, TSK, SFTP...), est disponible dans de nombreux langages et gère la fonction "resume" de votre serveur. Honnêtement, il serait dommage de chercher une solution commerciale. Notez qu'il existe également son penchant serveur.

FastStone Image Viewer
Visionneuse d'image, conversion et édition dans tous les formats majeurs, incluant le BMP, JPEG, JPEG 2000, GIF, PNG, PCX, TIFF... Encore une fois, l'un des tous meilleurs de sa catégorie, et qui plus est gratuit pour une utilisation privée.

KeePass Password Safe
KeePass est un manager gratuit de mot de passe. Il vous aide à répertorier tous vos couples identifiant/mot de passe dans une unique interface sécurisée. Désormais, le seul mot de passe à retenir reste celui permettant d'accéder au manager ;).

Note : la majorité des captures d'écran ci-dessus sont en provenance des sites officiels.

Lien permanent | Commentaires (0) | Stumble It!

Dimanche 30 Septembre 2007 à 09h32::CSS | JavaScriptCentrer verticalement un élément

Lorsque les CSS n'étaient pas encore utilisés pour le design des pages Web, centrer un élément verticalement dans une page était d'une grande simplicité. Toute la mise en page étant basée sur l'imbrication de tableau, il suffisait d'appliquer l'attribut valign="middle" sur une balise de type cellule td/th pour un alignement vertical centré.

Avec les CSS, cette propriété existe, mais n'est applicable qu'aux éléments disposant de la propriété dysplay:table-cell. Le centrage horizontal ne pose quant à lui jamais de problème. Pour un élément de type inline, un simple attribut text-align:center suffit, tandis que les éléments de type block peuvent être centrés en utilisant l'attribut margin:auto.

Il est donc contrariant de ne pas disposer d'une propriété vertical-align:center sur tout élément de type block, comme une simple balise div, p, form etc...

Toutefois, il existe une astuce simple, jouant sur la hauteur de ligne. Par exemple, pour centrer verticalement le texte contenu dans la balise div suivante :

<div style="height:50px">Mon titre</div>

Il suffit d'attribuer une hauteur de ligne ayant la même valeur que la hauteur de son élément parent :

<div style="height:50px; line-height:50px">Mon titre</div>

Malheureusement, cette technique ne fonctionne qu'avec un contenu sans retour chariot. Reste alors le choix du positionnement au pixel près en ayant au préalable déclaré le positionnement de l'élément en mode relatif ou absolu. Mais, dans le cadre d'un contenu dynamique, la certitude d'obtenir un alignement vertical parfaitement centrée n'est pas assurée.

Viens alors en dernier recours la solution javascript :

/**
 * Centre verticalement un élément rapport à son conteneur
 * Si dynVar est une chaine, la fonction considère que c'est l'identifiant de l'élément parent
 * qui est passé en paramètre. La centrage se fera en fonction de la hauteur de ce dernier.
 * Si dynVar est un entier, la hauteur de référence est imposée.
 * 
 * Basé sur la fonction setFooter() trouvée ici : http://pompage.net/pompe/pieds/
 * 
 * @param   string||integer dynVar
 * @param   string          idElem
 */
function verticalCentering(dynVar, idElem) {
    if (document.getElementById) {
        
        if (typeof dynVar == 'string') heightParent = document.getElementById(dynVar).offsetHeight;
        else                           heightParent = dynVar;
        
        elem         =  document.getElementById(idElem);
        elemHeight   =  elem.offsetHeight;
        
        if (heightParent - elemHeight > 0) {
            elem.style.position = 'relative';
            elem.style.top = ((heightParent / 2) - (elemHeight / 2)) + 'px';
        }
        else elem.style.position = 'static';
    }
}

Ce n'est pas forcément élégant, mais ça a le mérite de fonctionner.

Lien permanent | Commentaires (0) | Stumble It!

Vendredi 28 Septembre 2007 à 06h58::CSS | JavaScriptNote sur la compatibilité des navigateurs

L'une des tâches les plus complexes pour un développeur web est d'assurer la compatibilité entre les différents navigateurs du marché. Le seul environnement fiable reste le code côté serveur, bien qu'il subsiste des situations particulières, comme le cas des entêtes MIME pour forcer le téléchargement des documents côté client. Néanmoins, ces circonstances restent rares.

Les difficultés les plus coriaces apparaissent lors du développement de code côté client. Nombre de mes collègues qui tentent le passage au développement web hurlent à l'infamie lorsqu'ils se retrouvent confrontés aux problèmes de compatibilité JavaScript. Beaucoup de raisons à cela, pour la plupart valables. JavaScript est vraiment déroutant pour un novice. Ce langage a véritablement démontré toutes ses possibilités lors de l'apparition de l'objet xmlHttpRequest. L'apparition de cette technologie a donné un véritable regain d'intérêt pour un langage qui avait sombré dans les méandres et la complexité du décédé DHTML. Quoi qu'il en soit, malgré tout son potentiel, JavaScript demeure une hérésie pour des développeurs habitués à travailler avec un langage typé, disposant d'un environnement de développement avec complétion de code et compilateur à l'appui. L'écriture de code JS demande bien plus d'humilité et de rigueur que la plupart des autres langages. Heureusement, de nombreuses extensions dédiées à FireFox aident à percevoir la majorité des erreurs courantes.

Mais la seule véritable solution reste l'apprentissage par l'erreur. Il existe bien toute une flopée de frameworks, de très haute qualité, disposant de fonctions d'abstraction pour garder une compatibilité maximum entre les navigateurs. Ces frameworks ont tout de même un inconvénient : beaucoup de temps est nécessaire à leur appréhension, et au final, au lieu d'apprendre le langage, on apprend un nouveau système, avec toutes les dépendances qui s'en suivent, dont notamment :

• les mises à jours avec compatibilité descendante,
• les découvertes de bugs (à utiliser un framework vous n'êtes pas garant de son bon fonctionnement, serez-vous capable de fouiller dans son code pour corriger l'erreur?),
• quel crédit apporter à des solutions sans garantie de longévité?

Toutes ces questions demandent considération lors de la création d'une application web, dont la maintenance vous revient. Une application web n'est pas un site traditionnel, son cycle de vie peut être d'une dizaine d'années ou plus, le choix du framework idéal demande alors beaucoup de réflexion. Ecrire ses propres objets reste le moyen le plus sûr d'être réactif en cas de découverte d'un problème, car vous avez la main mise totale sur le code.

Malheureusement, des conflits de compatibilité existent également avec la mise en page CSS. D'où l'apparition de nombreux hacks, dont la plupart peuvent être évité avec une bonne connaissance des CSS.
Le problème des hacks CSS : ils permettent seulement de corriger un bug dans l'immédiat, mais ne garantissent pas le fonctionnement avec les futures mises à jour des navigateurs. C'est en ce sens qu'ils doivent être utilisés avec parcimonie. Le passage d'IE6 à IE7 en est un bon exemple.

Un excellent moyen pour outrepasser les hacks CSS avec IE, et vous ne pouvez savoir à quel point je m'en veux de ne pas y avoir pensé moi-même tellement l'idée est simple et ingénieuse, est d'utiliser les commentaires conditionnels spécifiques à ce navigateur. Grâce à cette technique, vous commencez à déclarer vos CSS en respectant les standards, puis vous corrigez les erreurs d'affichage avec des points d'entrée spécifiques à IE.

Toutes les explications de cette idée géniale en cliquant sur ce lien : #IEroot  Targeting IE Using Conditional Comments and Just One Stylesheet.

Lien permanent | Commentaires (1) | Stumble It!