Sas 02 et HTML
By Mihamina Rakotomandimby on Monday 19 December 2011, 17:15 - formation - Permalink
Maquette
De manière générale, une application Web nait techniquement en tant que maquette graphique. On reçoit un fichier "psd" (qui peut s'ouvrir avec Gimp) et la tâche consiste à "transformer" ça en HTML.
Quel rapport avec le développement?
Un développeur backend doit comprendre les balises qu'il va générer, savoir quel est l'impact visuel et esthétique d'un élément qu'il va introduire dans un template statique validé.
Les interfaces web se veulent sensibles aux évènements de nos jours. Pour gérer ça, nous utilisons Javascript et jQuery. Personnaliser les modules jQuery existants et éventuellement en développer, telles sont les tâches d'un intégrateur. Pour cela il faut maîtrser un arbre HTML.
Le mobile
Avoir une déclinaison pour un terminal qui tient dans une main, ou une tablette est maintenant un must pour une structure de développement moderne. C'est aussi dans les cordes d'un intégrateur de chez nous.
Sas de formation et HTML
Le sas de formation est actuellement dans la phase d'approfondissement de l'intégration et développement mobile.
Il leur a été fourni une maquette en "psd" qu'ils vont devoir intégrer, en tenant compte des principaux navigateurs du marché.
- Quelles ont été les difficultés?
- Quelles solutions?
- Quelles nouvelles compétences ont été acquises?
Comments
Construire une page en de façon à ce que cette dernière ressemble à celle décrite par une PSD est au premier abord facile dirait-on.
Mais concrètement, on finit vite par changer d'avis, déja parce que:
1) Pour ouvrir un fichier PSD, il faut avoir recours à photoshop (surtout si l'on veut avoir accès aux calques). et sur ce point un problème se pose, si la version photoshop utilisé est plus ancienne que celle avec laquelle on a fabriqué la maquette, alors il y aura plusieurs erreurs, plus précisément, des modification involontaires vont apparaitre (changement des fonts, dégradation de la qualité d'images,...)
2) On ne peut pas utiliser les outils photoshop pour séléctionner les images sur le PSD, car il y aura un risque d'erreur lors du rendu de ce dernier.
3) Dans le cas où ce serait possible, il y a aussi le problème de taille de l'image.
Une solution est alors d'exporter les claque même car:
1) cela ne modifie pas la forme des images
2) la qualité est conservé
Aussi, pour faire cela, on a eu recours à un ficher exportLayerTo File.jsx qui se trouve être une sorte de plug ins pour permettre de résoudre ce problème.
Le hic, lors de son utilisation, c'est que le temps de rendu est extrêmement long (environ 1h 30mn).
En gros, bien qu'il y ait eu plus de problème que de résolution, cette petite pratique fut très instructive sur la façon de préparer un site avant son implémentation.
Bonjour,
On a commencé l’approfondissement de l’intégration HTML, dont le premier tâche c’est tout d’abord
Le découpage de la maquette PSD en plusieurs petits morceaux d’image, ce découpage se fait à l’aide
Du logiciel de traitement Photoshop, là on a une petite difficulté sur la sélection d’image de la maquette
En effet, on n’est pas très familier sur l’utilisation des outils du Photoshop 2 pour manipuler la maquette, là on a essayé de réinstaller le Photoshop en le changeant en CS3, là aussi un problème se pose car l’installation du CS3 exige au moins 1Go de RAM alors que la machine n’en possède que 500Mo. Finalement on a décidé d’installer le GIMP sur la machine pour traiter l’image
En bref la séance d’aujourd’hui c’est consacré a l’installation du logiciel
Aujourd'hui, nous avons commencé à transformer une maquette en PSD en HTML.
C'est un peut difficile que nous croyons. D'abord, il faut extraire tous les calques nécessaires puis les intégrés un à un dans le HTML. Beaucoup de méthodes sont proposé mais pour notre cas nous les extraient un à un puis les enregistrés en format PNG.
Nous choisissons cette méthode parce que notre script d'extraction des calque dans Photoshop CS3 prend beaucoup de temps à les extraire.
Cette pratique nous permet d'avoir un avant goût à la conversion d'une maquette PS en HTML
Aujourd'hui, on nous a donné notre premier projet d'intégration : transformation d'une maquette PSD en page HTML . Au début ,déjà , je me suis rendu compte à quel point le travail d'intégration est très complexe et relève un niveau d'ingénierie très élevé . Donc , c'est tout à fait dans les cordes d'un ingénieur qualifié .L'idée de transformer automatiquement les calques est presque impossible car ça demande énormément de temps (O(n^2)) et notre PC est limité par rapport à la puissance . La conversion en PNG se bloque sur 7.94 Mo alors qu'il y a 200 Mo de fichier donc il a fallu tout faire à la main pour qu'il y a chose faite d'aujourd'hui . Et même , lorsqu'il y a quelques images à intégrer , il est difficile voire impossible d'imiter le PSD.
J'ai reçu une leçon très importante comme quoi rien n'est négligeable dans le domaine de l'intégration et s'il y en a un ,ce n'est pas l'intégration.
La difficulté que nous avons rencontré aujourd'hui en faisant l'extraction des calques de la maquette PSD est que la machine utilisée ne supporte pas Photoshop CS3 même avec CS2, le chargement des images est très lent.
Mais avec un peu de courage et de persévérance, en tenant compte des consignes données, on a pu extraire enfin les calques du fichier PSD.
A la suite de ce travail pratique, on a pu approfondir nos connaissances concernant la maniabilité de l'outil photoshop en faisant une exportation des calques d'une maquette PSD.
Autre point important aussi est que il faut toujours utiliser l'encodage UTF-8 pour la standardisation des normes utilisées dans le développemt web.
Premièrement, nous continuerons les recherches à propos du thème HTML, en préparant l’exposé sur ce thème même. Ce n’est pas une recherche infructueuse parce que l’internet nous a proposé beaucoup de résultats.
Deuxièmement, on apprend à découper la maquette manuellement, c'est-à-dire de transformer cette maquette PSD en HTML. Nous avons attaqué des difficultés pour l’enregistrement automatique des images en utilisant le script. D’où nous avons décidé de l’extraire le calque et de l’enregistrer un à un. Après cet enregistrement, nous commençons à éditer la page Web. Nous avons obtenu aussi que le travail d’intégrateur n’est pas du tout facile comme tout le monde le croyaient.
Bonjour,
On n’a pas pu installer le Photoshop CS3 car CS2 avec CS2 on ne peut pas sélectionner les calques. Pour résoudre à ce problème, on a exporté les calques dans la maquette en procédant par : file > script > parcourir > chercher les fichiers avec l’extension .jsx .
On a décidé aussi d’utiliser le gimp pour remplacer le CS2.
Aujourd’hui donc j’ai appris à découvrir les environnements de CS2 et d’en extraire les images nécessaires à la page html.
Premièrement, nous continuerons les recherches à propos du thème HTML, en préparant l’exposé sur ce thème même. Ce n’est pas une recherche infructueuse parce que l’internet nous a proposé beaucoup de résultats.
Deuxièmement, on apprend à découper la maquette manuellement, c'est-à-dire de transformer cette maquette PSD en HTML. Nous avons attaqué des difficultés pour l’enregistrement automatique des images en utilisant le script. D’où nous avons décidé de l’extraire le calque et de l’enregistrer un à un. Après cet enregistrement, nous commençons à éditer la page Web. Nous avons obtenu aussi que le travail d’intégrateur n’est pas du tout facile comme tout le monde le croyaient.
Aujourd'hui, nous travaillons toujours sur la maquette. Après la directive et les conseils des formateurs, nous trouvons une idée et un méthode pour mieux améliorer et accélérer notre méthode de travail.
Jusqu'ici, le travail est loin d'être terminer.
Aujourd'hui , notre projet d'intégration avance d'un grand pas . Le problème de bannière est résolu de bonheur et ça nous a permis de le relancer . Je comprend mieux comment fonctionne HTML et comment il interagi avec CSS . En effet , je commence à assimiler la notion d'intégration de base . Seul soucis , la police du PSD ; Benton sans cond n'existe pas ni dans HTML ni dans CSS; en faisant des recherches sur le web , on est stupéfait de voir que c'est payant . Donc dans tout notre travail , on n'a pas utilisé ce police d’où l'incohérence avec le PSD . J'espère que ce problème sera vite résolu .
Ce matin, nous avons discuté les nouvelles du jour comme d’habitude pour enrichir notre connaissance, puis le formateur nous a donné des consignes pour corriger la 1ère version de notre travail.
Lors du développement, j’ai une petite difficulté pour la création de la mise en page avec le style CSS, mais mon collègue m’a aidé à débarrasser de ce problème. D’où notre travail s’avance petit à petit jusqu’ici.
Faire une intégration est un art. Elle nécessite beaucoup d'imagination et de savoir faire.
A propos de notre maquette, on a rencontré des problèmes sur la totalité du code. On essayait de se familiariser avec HTML et CSS. Notre code est en désordre mais on a tout de suite conscient, on le corrige pas à pas et même refaire quelques unes qui rend la page en désordre.
On a appris à structurer le code et d'organiser la page. On fait de nos mieux. J'espère que demain, on n'aura plus ce problème de désordre.
UNE METHODE POUR CODER:
Ce qui est énervant avec le HTML, c'est que lors de sa programmation, il ne génère pas d'erreur comme le ferait tout autre langage comme PHP, java, ... . De plus il n'existe pas d'outils spécifique pour palier ce petit détail, du coup, si on n'a pas trop l'habitude de coder en html, cette personne peut voir ses codes mal structurer (manque de fermeture de balise, oubli sur une certaine ligne du code, ...). Et cela m'est déja arrivé. Donc une des méthodes les plus vieilles dans le monde, c'est de
1) Mettre des commentaires sur chaque éléments principal
2) Lorsqu'on ouvre une balise, il est préférable de le fermer tout de suite, avant de mettre son contenu.
3) prendre un bon outil de développement.
Le mode quirks est un mode de fonctionnement des navigateurs Web tels qu’Internet Explorer (IE), Firefox et Opera. En gros, le mode quirks (aussi appelé mode compatibilité) signifie qu’un navigateur relativement moderne simule intentionnellement de nombreux bugs des anciens navigateurs, en particulier IE 4 et IE 5.
Le moteur de recherche commence par la balise <title>. Après, il cherche les titres de la page comme le h1, h2, h3, h3.
Dans la fabrication d’un site web, il est très important de suivre les sémantiques, c'est-à-dire qu’à chaque type de contenu correspond à une balise spécifique.
Par exemple : pour le titre numéro un, on doit mettre les balises h1.
Le SEO est un ensemble de techniques visant à favoriser la compréhension de la thématique et du contenu d'une ou de l'ensemble des pages d'un site Web. C’est à partir des liens que le moteur fait la recherche.
Pour optimiser la recherche, il faut pas mettre des mots qui se répètent.
Comme je l'ai dit, html n'a pas d'outil spécifique. donc, en cas d'erreur, il sera assez embêtant de de trouver la localisation. Il existe par contre un moyen de résoudre ce problème. C'est "LE VALIDATEUR HTML".
valider un document html est imporant, car il faut il faut que les balises suivent la norme qui a été imposé par le W3C.
L'avantage, est que ce validateur permet de localiser les erreurs à votre place. Un code html bien construit et reconnu par W3C permet d'éviter le mode "quirks" au navigateur, et donc par voie de conséquence, une interprétation de la page plus rapide.
le seul incovénient, est qu'il ne corrige pas la sémantique par la même occasion.
Durant la journée d'aujourd'hui, nous avons continuée la réalisation de l'intégration du maquette html pendant toute la matinée.
et cet après midi, on a continué sur le cours HTML durant lequel on a parlé notamment le css pries, une technique consiste à exploiter un fichier unique pour stocker de multiples images, positionnées les unes à côté des autres et on a aussi l'occasion de parler d'autres type de bases de données autre que sql telle que le Cassandra du serveur Appache.
On a parlé également du SEO ou optimisation pour le moteur de recherche c'est à dire le technique pour rendre plus pertinent la recherche sur google, et d'après tous cela j'ai rendu compte que on a beaucoup de chose a apprendre sur le domaine de l'internet puisque la technologie web évolue de jours en jours
Depuis lundi, nous travaillons toujours sur la transformation d'une maquette PSD en HTML.
Cette étape nous montre l'importance du rôle d'un intégrateur dans le développement d'un site web.
Nous avons acquis aussi beaucoup de chose sur la structure, la sémantique et le norme d'un site web pendant la séance de formation.
La connaissance de l'historique de la moteur de recherche est aussi très intéressant, il nous permet de savoir l'étape et l'évolution pour arriver jusqu'au moteur de recherche que nous utilisons aujourd'hui.
A part, nous avons su aussi que il y a aussi un technique à faire pour bien mieux positionner un site web après une recherche effectuée.
Aujourd'hui , après une mâtiné consacrée à l'intégration , le cours sur HTML a fait place . IL met en exergue les éléments essentiels d'HTML à savoir les en têtes HTML , le rôle du doc-type . Mais encore , le cours nous apprend pourquoi il est indispensable d'avoir un code correct syntaxiquement , et bien qu'il l'est syntaxiquement , il nous explique pourquoi il faut que ça le soit aussi sémantiquement , c'est à dire qu'il ne faut pas faire de l'intégration n'importe comment (les balises titre pour les titres , les tables pour des contenus tabulaires et les div pour les divisions en bloque ) . De plus , le cours d'HTML met en évidence la technique d'optimisation de moteur de recherche généralisé sur le terme technique : SEO (Search Engine Optimization ) qui consiste à adapter le code par rapport au comportement des moteurs de recherche puisque le but d'un site après que lorsqu'un utilisateur fait des recherches correspondant à la spécialité du site , ce dernier figure en pôle position du résultat . De ce fait , il faut bien choisir le titre du site , la description son URL et son nom de domaine puisque ce sont les critères fondamentales d'un moteur de recherche à l'image de Google . A propos , on a appris comment se familiariser avec google c'est à dire son utilisation afin d'en tirer un maximum de profil . Ce cours m'a permis d'accepter la réalité que je connait peu HTML et surtout que je ne suis qu'un noob mais pas un geek d'internet .
phrase du jour :"un site souvent cité est un bon site"
mots clé du jour :css sprite ,accessibilité ,WAI,mode Quirks,SEO,Data Exif
Suite aux cours d'html dispensés aujourd'hui, html est un langage à balises mais non pas un langage de programmation. Une page html comprend généralement 2 parties: l'entête(<head>) et le corps(<body>). La balise <title> est très importante dans une page web parce qu' elle s'affiche sur la barre des titres du navigateur, sur l'onglet de celui-ci et dans la page qu'un moteur de recherche affiche lorsqu'on cherche un mot-clé. Un point très important aussi est que pour que google sait que un site web existe, il suit les liens.
Le mode "quirks" est le fait qu'un navigateur devine le doctype à utiliser pour traduire une page web, lorsque le doctype s'écrit mal ou la version de celui-ci est très ancienne.
L'accessibilité est la possibilité d'accéder au contenu même dans des cas dégradés.
La transformation de la maquette PSD en HTML n’est pas terminée, d’où nous continuerons à développer et à améliorer la méthode de travail ce matin.
Le cours de formation à propos du thème HTML s'est déroulé cette après-midi. C'est à partir de cette formation que nous avons su l'importance de cours. Nous croyons au début que c'est un rappel, mais c'est du tout le contraire.
Premièrement, la connaissance sur la validité sémantique qui utilise des balises pour des textes adéquates, parce que sur le développement Web, il faut suivre toutes les indications et les consignes pour satisfaire les clients.
Ensuite, nous avons acquis aussi des divers connaissances à propos du fonctionnement de l'optimisation de le moteur de recherche (SEO ou Search Engine Optimization).Et enfin, lorsque nous avons fait des recherches sur Google, il ne faut jamais poser des questions à celui ci, mais de suggérer des réponses par des mots clé bien précis.
Aujourd'hui, pendant la matinée, nous avons consacré tous nos temps à préparer un exposé de fin de module sur le HTTP/HTTPs et le HTML.
L'exposé a déroulé très bien, tout le monde participe et s'entraide tant qu'il peut pour bien expliquer les deux thèmes.
Cet premier module est très important et à ne pas négliger car c'est la base du développement web.
Aujourd'hui , la matinée est consacrée à la préparation de l'exposé de fin de module sur le thème d' HTTP et HTML , pour ma part et le binôme auquel j’appartiens , on a prévu de détailler les grandes lignes HTTP et HTML , leur rôles et leur contribution dans le monde du web .Ainsi que préparés , vient l'instant crucial de l’exposé , suite à l'hésitation des autres binômes et poussé par l'audace et la tranquillité d'avoir bien préparé notre exposé , nous avons commencés en premier et comme prévu on a essayé de définir les éléments essentiels d'HTTP et HTTP . Les autres groupes ont eux aussi intervenu au cours de l'exposé ce qui signifie que tous ensemble , on n'a fait qu'un exposé couronné de succès par notre formateur .
En terme, HTML et HTTP travail simultanément pour le Web.
HTML pour la description des hypertexte et HTTP pour la communication entre le client web et le serveur web. Ceci est faite sur un réseau sécurisé qui utilise des système de cryptage (chiffrement asymetrique), que HTTP utilise, et les deux (Client et serveur web) se connectent sur le port 443 (Sécurisé(HTTPS)), ou sur le 80 standard HTTP.
Prenons un exemple plus concret:
On crée une site c'est à dire décrire le document via HTML par l'intermédiaire de ses balises, car il est un langage de balisage.
Après avoir fini le site et de l'avoir hébergé, on peut accéder à son contenu grâce à HTTP: on entre l'URL (Uniforme Resource Locator) dans la barre d'adresse - on ne saisie que le nom du domaine (ex: www.google.fr) - le navigateur prévoie que l'utilisateur sous entend le schéma (http://) et le port de (:80 ou :443 pour https). La résolution de nom s'effectue avant l'envoie de la requêtte.
Après avoir envoyé la requêtte, le navigateur reçoit la réponse du serveur, qui inclus la ressource demandé avec les caractéristiques exigé par le navigateur. Et là on voit la page qu'on a créé.
Ce matin, nous avons préparé l'exposé prévu pour cette après-midi portant le thème HTTP et HTML, en faisant des recherches sur internet.
Pour cette après-midi, nous commençons par le partage des nouvelles que tout le monde y participent. Après, nous avons fait l'exposer ensemble en expliquant HTTP et HTML.
Comment faire pour que ma page soit visible lorsqu'un utilisateur fait une recherche?
Une fois que ma page html est créée, validé par le validateur html, il faut contacter des gens qui font de la SEO pour s'occuper de l'optimisation des recherches sur ma page.
SEO ou Search Engine Optimization est une technique de recherche sur l'optimisation d'une page. Si vous consultez ce lien: http://www.slideshare.net/srcmontbe... vous noterez que leurs techniques d'indexation est la technique JCD. Malheureusement, dans mes recherches, aucun site n'a voulu dévoilé le secret de cette technique