De l'aide pour les développeurs

De l'édition de code, affichage des bugs en ligne, stats, performances...Les outils du parfait développeur

Veille sur les navigateurs

Sont-ils bien dans le 'mouv' ? Comment appelle-t'on celui qui est toujours en retard ? IE, c'est pas moi qui l'ai dit...c'est la vérité d'abord !

L'intégration Vidéo et Audio

Les formats, les lecteurs...

Des solutions pour votre hébergement

Tout ce qu'il faut savoir pour être bien hébergé.

Responsive Webdesign

Aye aye sir ! Pour sûr, notre design est adaptable !

DRUPAL

un CMS comme Wordpress, Joomla...mais pas que !

Post 7 Title here

Description Post 7 here.

Post 8 Title here

Description Post 8 here.

vendredi 1 février 2013

Les applications pour la creation des sites Web et les extensions pour les développeurs


LES APPLICATIONS POUR LA CREATION DES SITES WEB

Les éditeurs de code

Un éditeur de code (ou éditeur Web) est un logiciel conçu pour faciliter la préparation et la modification de documents écrits en Hypertext markup language (HTML).

Un document HTML est le principal composant d'une page web. Il existe deux catégories d'éditeur :
Les éditeurs de texte seuls
Les éditeurs tel-tel (WYSIWYG)

Il existe une multitude de logiciels de ce type, certain sont payants, beaucoup sont gratuits. Nous en citerons une sélection parmis les plus connus.

Les éditeurs de texte

Ces éditeurs éditent directement dans différents langages (HTML, CSS, Java, PHP etc…) : le code y apparaît et y est traité comme du texte. Ils requierent donc une compétence dans ces langages. En contrepartie, ils permettent à un utilisateur compétent de s'assurer de la qualité du document produit.
Néanmoins, il existe différentes aides et assistance au développement.

Les principales fonctionnalités :
- colorisation syntaxique automatique
- Le formatage de texte en charactères gras, italiques, soulignés et colorés;
- L’alignement des textes à gauche, à droite, au centre et justifié;
- La création de liens (URLs) vers des pages Internet;
- L’insertion et la manipulation d’images;
- La création de tableau pour faciliter la disposition des textes et images.
- Vérification du code HTML, conversion en CSS, XML, XHTML (librairie TiDy)
- version gratuite d’un 'éditeur CSS comme TopStyle Lite (permet de créer facilement et avec précision des feuilles de style en cascade que vous pourrez ensuite implémenter sur votre site web. Il est compatible avec les principaux navigateurs internet et comprend un vérificateur et validateur multi-browser. Celui-ci vous alerte des entrées non-valides dans votre feuille de style et vous montre les bugs qui pourraient affecter l'affichage de votre feuille de style)
- correction orthographique
- mise en évidence des parenthèses
- Sauvegarde d’une session pour réouvrir tous les fichiers la fois suivante
- auto-completion des mots clés
- Une trentaine de langages peuvent être supportés en standard tels que Perl, C#, Java, Python, HTML, Ruby, etc…

Les principaux logiciels 

Smultron — Pour Mac. Conçu à la fois pour ne pas effrayer les débutants et satisfaire les utilisateurs avancés.
- Affichage des caractères invisibles
- Coloration syntaxique gérant beaucoup de langages informatiques
- Division de la fenêtre en deux
- Gestions des blocs
- Gestion des projets
- Indentation intelligente
- Intégration à Quick Look
- Liste des fonctions
- Mise en évidence de la ligne sélectionnée
- Multilingue
- Numérotation des lignes
- Onglets
- Recherche avancée

Notepad++ 
- Editeur de code source qui supporte plusieurs langages.
- Il utilise la même composante que SciTE (Scintilla).
- Possibilité d'auto-complétion de texte avec certains langages en proposant une liste de fonctions de base utiles. Tout est paramétrable.
- Coloration syntaxique par défaut.
- Distribué gratuitement sous licence GPL.

PSPad
- Excellent éditeur en mode code sous Windows. Beaucoup de fonctionnalités et détails pratiques. En plus, il est très léger. Il ressemble beaucoup à Notepad++
- On peut lui ajouter des extensions, disponibles sur le site officiel.
- Gratuit, mais propriétaire.
- Il intègre Tidy, ainsi que divers outils spécifiques HTML: compression du code HTML, reformattage, pipette de couleur avec insertion du code RGB, reformattage CSS, import CSV vers HTML, etc.
- La coloration syntaxique peut prendre en compte plusieurs langages dans la même page: HTML, php, Javascript...

SciTE est un éditeur contextuel, comme XEmacs : pour plusieurs langages de programmation ou types de fichiers, il supporte la coloration syntaxique de la source, l'autocomplétion des mots-clés, la navigation entre les fichiers à l'aide d'onglets, ou encore l'exécution de programmes depuis la ou les sessions d'édition avec aide au débugage. Il convient bien aux langages tels que Perl, C#, Java, Python, HTML, Ruby, etc. Une trentaine de langages sont supportés en standard, l'utilisateur pouvant ajouter le support d'un langage manquant. Il reconnait également le "mélange de langages", par exemple un source contenant du PHP, de l'HTML et des CSS
Bluefish compatible Linux, Mac et PC.
Quanta+ (permet également de créer des livrets de documentation). Pour Linux exclusivement
BBedit Pour les Apple Addict (payant) Le logiciel contient un nombre imposant de fonctionnalités : coloration syntaxique pour de nombreux langages (PHP4, C++, Java, HTML, XML, Javascript, CSS...), rechercher/remplacer sur des fichiers multiples, intégration avec des logiciels externes comme Codewarrior ou Dreamweaver, aperçu des pages PHP sur un serveur local ...
TextWrangler – Par le même éditeur de BBEdit dont il est une version allégée (et gratuite), cet éditeur autorise la manipulation de texte et l’administration de serveur Unix.
cssedit — un très bon éditeur de CSS.
Coda —Editeur de texte et de CSS qui intègre un module de transfert FTP.

LES WYSYWIG

« WYSIWYG » est l’acronyme de la locution anglaise « What you see is what you get », signifiant littéralement en français « ce que vous voyez est ce que vous obtenez » ou de façon plus concise « tel affichage, tel résultat » ou encore « tel écran, tel écrit ».

- Permet de composer visuellement le résultat voulu, typiquement pour un logiciel de mise en page, un traitement de texte ou d’image. C'est une interface « intuitive » : l’utilisateur voit directement à l’écran à quoi ressemblera le résultat final.
- Le code est généré automatiquement.
- Il propose les fonctions classiques des traitements de texte WYSIWYG.
- Ses deux principaux avantages sont la facilité d'utilisation et l'observation immédiate du rendu graphique.
- Ses deux principaux désavantages sont le manque de maîtrise sur la qualité du document HTML produit et les risques d'incompatibilité avec des navigateurs non prévus par l'éditeur (plus récents, plus anciens, ou moins courants).

Les principaux logiciels :

Dreamweaver (payant) : Un des meilleurs WYSIWYG.
C'est celui qui génère le code le plus propre en mode création, et l'auto-complétion des balises et attributs en mode code est appréciable.
Mais évidemment, le prix s'en ressent.
Si vous ne voulez pas forcément d'un logiciel professionnel, un gratuit conviendra amplement.

Nouveauté CS6 : 
- Ajout simplifié de contenu audio et video
- Importation d’animation standard avec Adobe Edge Animate
- Meilleure prise en charge Jquery mobile (creation d’applications pour terminaux mobiles)
- Meilleure prise en charge de PhoneGap  (pour créer des applications natives Android et Ios)
- Transition CSS3
- Optimisation de l’affichage en direct (utilise la derniere version du moteur de rendu webkit pour garantir une meilleure prise en charge du code HTML5

KompoZer Il remplace avantageusement Nvu (dont le développement a été arrêté à la version 1.0, en juin 2005) et apporte de nombreuses améliorations.


BlueGriffon :
- logiciel libre d'édition de pages web WYSIWYG, successeur de Mozilla Composer et Nvu. C'est un logiciel libre multiplateforme sous triple licence MPL/GPL/LGPL développé par Daniel Glazman et fondé sur la plateforme Mozilla.
- Il se démarque notamment par son support du CSS3 et du HTML5.
- Son moteur de rendu supporte la plupart des éléments HTML5 et les propriétés CSS3 compatibles avec Mozilla Firefox, même si l'éditeur génère également des règles de style pour les autres navigateurs web, lorsque cela est possible.
- Il propose de nombreuses interfaces visuelles permettant d'utiliser les propriétés CSS3 sans en connaitre la syntaxe précise, ce qui en fait un excellent compagnon pour le développeur, surtout lorsque la syntaxe des propriétés expérimentales varie selon les navigateurs.
- BlueGriffon a pris en compte les enjeux de l'Accessibilité du Web puisqu'il propose notamment l’ajout de rôles ARIA (Accessible Rich Internet Applications) aux différents éléments présents dans une page web, l'ajout d'un attribut "longdesc" (description longue) pour les images, etc.

Amaya développé conjointement par l'INRIA et le W3C, pour éditer et publier très simplement des pages contenant du texte (en HTML ou XHTML), du graphique (en SVG) et des expressions mathématiques (en MathML), le tout avec des feuilles de style CSS.

EXTENSIONS POUR LES DÉVELOPPEURS

 Après s'être imposés sur Firefox, les plugins ou modules complémentaires sont aussi rapidement venus enrichir le navigateur de Google et son Web Store. Certaines de ces extensions Chrome ont pu s'imposer en entreprise.

FIREFOX 

 Outil de débogage, validateur, gestionnaire de CSS, de couleurs... Le navigateur de la fondation Mozilla offre une multitude d'extensions pour la conception Web. En voici quelques unes : S'il fallait n'en posséder qu'une, ce serait Firebug.
Manipulation du DOM HTML, des feuilles de style CSS, et du Javascript en direct live, c'est un must. Sans compter l'onglet des requêtes réseau, l'inspection très pratique des éléments par le curseur de la souris, l'affichage en sur-impression des marges, l'exécution de code JavaScript au vol et sa console.



 Vénérable extension plébiscitée depuis les débuts de Firefox, Web Developer Toolbar regroupe en une barre d'outils la plupart des opérations facilitant l'intégration et le diagnostic d'un document: activation/désactivation/édition des CSS, du JavaScript, consultation et modification des cookies, et affichage de nombreuses informations concernant les formulaires, les images et la source ; redimensionnement de la fenêtre du navigateur, ou encore menu de validation W3C directe, il est bien difficile de résumer tout ce que permet ce best-of-all-in-one, chaque menu est à explorer.


 Fireshot permet d'effectuer des captures d'écran de sites, de les copier dans le presse-papier, de les enregistrer en image ou de les retoucher (un peu). On peut prendre en compte la partie visible uniquement (celle dans la zone d'affichage du navigateur) ou l'intégralité de la page (masquée selon la résolution de l'écran). Existe aussi pour Internet Explorer.



 Dust-Me Selectors trouve les sélecteurs CSS inutilisés dans vos feuilles de style, d'après la page consultée en cours ou un ensemble de page au cours d'une visite.

 CHROME

Accès au code source dans le navigateur, test de performance, exécution du moteur de rendu d'IE... Tour d'horizon de huit extensions du navigateur de Google utiles pour le développement.

Déclinaison pour Chrome de la célèbre extension Firefox, Firebug Lite est conçue pour naviguer visuellement au sein des différents éléments que forme une page Web (code HTML, DOM...). L'outil donne aussi la possibilité d'éditer et tester certains éléments de code (typiquement les styles CSS). Comparé à l'originale, Firefox Lite affiche quelques limitations. La Principale d'entre elles : le débogueur JavaScript n'est pas disponible dans la version pour Chrome.



Autre extension Chrome bien utile pour la phase de test d'un site Web, Window Resizer redimensionne la fenêtre du navigateur dans le but d'émuler différentes résolutions d'écran. Trois grands types de résolution sont disponibles : environnements de bureau (Desktop), ordinateurs portables (Laptop/Notebook) et terminaux mobiles (Mobile). Il est possible d'ajouter des résolutions personnalisées à la liste. Window Resizer se révélera notamment utile dans le cadre de développement de sites ou d'applications Web multiplate-forme. Sa principale alternative : Resolution Test.



SpeedTracker fournit un tableau de bord pour suivre la performance d'accès à une page Web. Il détaille les temps d'exécution par composants en temps réel : JavaScript, styles CSS, DOM, requêtes Ajax... Les indicateurs sont représentés sous forme de graphique animé. En matière de test de performance, SpeedTracker est considéré par beaucoup de développeurs comme une référence au sein de la galerie d'extensions Chrome (au même titre que Firebug sur la gestion de code).




Signé Yahoo, YSlow ne se contente pas d'analyser une page web et de fournir des statistiques, il suggère également des pistes pour améliorer les performances. Au programme des points passés au crible : le poids des images et fichiers CSS, des fichiers JavaScript, du contenu HTML, le caractère ou non imprimable de la page, la présence ou non d'un cache Ajax, d'un CDN... Les indicateurs et conseils sont très riches. YSlow est souvent comparé à Google Page Speed : cette extension Chrome proposée par Google propose certains indicateurs en plus (CSS inutilisées, images qui pourraient être plus lourdes...).



Pendule est sans doute l'une des extensions Chrome les plus complètes que nous présentons dans cette sélection. Elle permet aussi bien de visualiser le code source d'une page, et ce en ayant la possibilité d'en sélectionner qu'une partie (HTML, CSS et JavaScript). Mais aussi de visualiser le rendu final d'une page, également de manière sélective. Il est possible notamment de désactiver certains styles CSS, et de faire apparaitre à la demande les composants masqués, les données d'images, les attributs alt... L'outil permet enfin de tester l'affichage en fonction de la résolution, et de s'appuyer sur plusieurs services pour valider la conformité du code.



Centrée sur le débogage de code PHP, l'extension PHP Console génère ses codes d'erreur en se basant sur les librairies Lagger et PhpConsole. Pour les développeurs PHP, d'autres extensions Chrome, également plutôt bien notées, existent. Parmi elles figurent beaucoup d'outils gérant l'accès à la documentation technique (PHP Ninja Manual et PHP Docs-to-go notamment).



Autre extension Firefox adaptée à Chrome; Web Developer permet, à la manière de Pendule, de visualiser les différents éléments d'une page de façon sélective (HTML, images, JavaScript, CSS...). Mais aussi de réaliser des tests en fonction de résolutions différentes. Les référenceurs pourront voir l'ancre des liens, les metatags, les attributs alt des images ou les balises H1, H2, H3, etc. Web Developer pour Chrome est un moins riche que sa version pour Firefox, notamment en termes de localisation d'éléments. La désactivation du JavaScript est impossible du fait des API de Chrome.



Egalement présente sur Firefox, IE Tab est une extension bien utile pour la phase de test des projets Web. Elle permet en effet d'exécuter le moteur de rendu d'Internet Explorer directement dans Chrome. Il est même possible de choisir la version de son choix : IE6, IE7, IE8 ou IE9. Reste une restriction, IE Tab n'est pris en charge que par les versions Windows de Chrome.


Twitter Delicious Facebook Digg Stumbleupon Favorites More