Marie-eve TREMBLAY GROUPE B. Rapport de synthèse : Le responsive web design, CSS3 et HTML5. Apprentissage autonome 582-FXA-06

Dimension: px
Commencer à balayer dès la page:

Download "Marie-eve TREMBLAY GROUPE B. Rapport de synthèse : Le responsive web design, CSS3 et HTML5. Apprentissage autonome 582-FXA-06"

Transcription

1 Marie-eve TREMBLAY GROUPE B Rapport de synthèse : Le responsive web design, CSS3 et HTML5 Apprentissage autonome 582-FXA-06 Département des Techniques de communication Programme des Techniques d'intégration multimédia Cégep de Sainte-Foy 25 mars 2013

2 1.INTRODUCTION DEVELOPPEMENT SYNTHESE DES TRAVAUX LA PHILOSOPHIE DU RESPONSIVE WEB DESIGN (SEMAINE 1 ET 2) Les medias queries (semaine 2 et 3) Les vieux navigateurs (semaine 4) Introduction à HTML5 et CSS3 (semaine 5) La typographie en responsive (semaine 6) Les formulaires html5 (semaine 6) Les grilles flexibles (semaine 6) Les types de navigation (semaine 7) Le jquery mobile (semaine 8) BILAN DE LA PROGRESSION DU TRAVAIL Semaine Semaine Semaine Semaine Semaine Semaine Semaine Semaine Le programme Altimaitre TECHNOLOGIES EMPLOYEES PERSPECTIVES CONCLUSION MEDIAGRAPHIE LES IMPRIMÉS WEB

3 1.INTRODUCTION 4 «Le responsive est mort! vive le responsive!» dit au Web à Québec par Étienne Lemay, cofondateur de Heliom. En fait, durant les dernières années, on a vu l'émergence du reponsive web design. Le terme était sur toutes les lèvres des artisans du web, mais aujourd'hui, ce n'est plus une mode ou un artifice, le responsive devrait être LA technique de base pour construire un site web. Accompagné du HTML5 et des nouveautés CSS3, les possibilités du web ont dépassé toutes les attentes et ne cessent de nous impressionner et d'innover. J'ai dirigé mon apprentissage vers ces pratiques qui, pour moi, étaient essentielles pour un futur développeur web. Par cet apprentissage, je voulais faire la lumière sur des points particuliers. Pour ce qui est du responsive web design, je voulais posséder le plus de matière possible, tant au niveau de la technique et de l'intégration que du côté de la philosophie du concept. Pour ce qui est du HTML5, je voulais faire l'apprentissage des nouvelles balises comme la balise Canvas et les balises de formulaires ajustées pour le mobile. Pour ce qui est des CSS3, je voulais surtout voir les effets de transition et d'animations. Par cette recherche, je visais à développer une spécialité orientée vers l'adaptation des sites de table vers les sites mobile. Connaître les bonnes pratiques du mobile, l'ergonomie, les éléments d'interface et permettre la meilleure des expériences utilisateurs possible. De plus, je voulais voir les différentes grilles, l'interactivité sur mobile et les trucs pour l'intégration HTML5 et CSS3. Mon contexte d'application est ciblé vers les entreprises modernes désireuses de diffuser leur contenu sur le web de manière adaptée et efficace. Ce sont des entreprises qui osent les nouveautés. Donc, l'application de mes nouveaux apprentissages s'adresse à eux. De nos jours, il n est plus rare de voir les entreprises développer directement dans une formule de responsive dès le départ d un projet. Donc, pour un développeur, il est de très bonnes pratiques de connaître toutes les étapes du responsive web design, mais il y a plusieurs éléments à considérer. Les risques, les contraintes et les limites du responsive sont surtout au niveau du temps de développement qui doit être ajusté à la hausse pour permettre un travail de qualité et les nombreux ajustements sur les différents navigateurs. C est un peu la même chose pour le HTML5 et les CSS3. Malgré les petites embrouilles que l on peut retrouver, leurs avantages sont beaucoup plus importants que leurs désavantages

4 et leur maintenance sur les nouveaux modèles de mobile sera plus facile et flexible 5 2.Développement Les sujets exploités pour mon apprentissage autonome sont d actualités dans le domaine du web donc, les références sont nombreuses. Je me suis vite rendu compte dans les étapes de mon apprentissage que la vraie matière de recherche se trouvait directement sur internet. Les opinions sont partagées sur les méthodes de travail face à mes sujets et internet me permettaient de trouver et comparer facilement les opinions. 2.1.Synthèse des travaux La philosophie du Responsive web design (Semaine 1 et 2) Lors d une recherche comme celle-ci, il est important de commencer par le vrai commencement, c est-àdire l idée derrière la technique, le concept, les avantages et les désavantages d une nouvelle technique. Pour bien appliquer un concept, on se doit de maîtriser son sens et son fondement. J ai donc commencé mon apprentissage par des lectures sur les valeurs du responsive web design avec le livre de Ben Frain «Le responsive web design with HTML5 and CSS3». J ai compris par mes lectures que le responsive est d intérêt et qu on se doit en tant que développeurs d instruire les gens et les clients sur le sujet et faire changer les approches face au web. Mais c est quoi le responsive en fait? Pour résumer un peu, il s agit de produire un site web dont les contenus seront gérés avec des pourcentages, la typographie en em et utiliser des bases de largueur et hauteur qui permettent au site d être construit en proportions ajusté pour toutes tailles d écran. On utilise également les medias queries dans la pratique. Il y a plus d avantages que de désavantages à développer le responsive, mais parfois, le budget et/ou le temps ne le permet pas. De nos jours, les gens sur les vieux navigateurs ne représente qu un très petit pourcentage d utilisateur ( 3% pour ie6 et environ 5% pour ie7 ) par rapport à l énorme explosion d utilisateurs sur mobile. De plus en plus de gens utilise que leur mobile pour tout leur accès sur internet alors que d autres ce procures des écrans d ordinateurs gigantesques. Les proportions d écrans sont à l extrêmes. Il est donc beaucoup plus avantageux de déboursser pour le développement du responsive que vers un fonctionnement sur les vieilles versions de navigateurs.

5 6 D après Monsieurs Frain, il existe mieux que le responsive et c est le web adapté. Si le développeur en a la chance, il devrait développer un site pour table et un site pour mobile. Avec le même contenu biensûr, mais le site mobile serait beaucoup plus adapté à la réalité de l utilisateur et de ses besoins. Il m a aussi été suggéré de lire le livre «Responsive web design» d Ethan Marcotte. Par ses nombreuses lectures et par rapport à mon contexte d utilisation, je peux en conclure que le responsive est une nouvelle aire révolutionnaire qui ne peut qu évoluer. Il faut penser à comment l utilisateur va avoir accès à son contenu et le contexte d utilisation. Le responsive est inévitable et de plus en plus les développeurs devront s adapter au principe du «mobile first» lors de la production d un site. J ai appliqué les techniques présentées par Monsieur Marcotte sur quelques structures HTML5 durant les premières semaines de mes recherches. Les conclusions furent très positives et constructives. Le responsive c est repenser sa structure constamment, c est écouter la structure du site pour l adapter à chaque moment qu elle en à besoin. C est aussi un cycle constant entre le développement et la conception. Lors de la création d une page, les éléments ont beaucoup d influences entre eux (éléments parent / éléments enfants). On doit prendre en considération les pourcentages des éléments parents, de la taille de typographie déclarée au départ, des largeurs maximum et minimum Dans le meilleur des cas, lorsque l on construit une structure en responsive, on devrait commencer avec le positionnement de boîtes dans l espace, de cette manière il est plus évident d adapter son contenu et de voir comment il pourra s adapter. En conclusion, je crois qu il est bien pratique de commencer une structure en resposonive avec papier et crayon pour calculer et noter toutes les dimensions! Les medias queries (semaine 2 et 3) Avant la recherche, j avais déjà une connaissance de base sur le sujet et fonctionnement des medias queries. C est principalement mes lectures «responsive web design with HTML5 and CSS3» de Ben Frain et «responsive web design» d Ethan Marcotte qui ont été utilisés dans l amélioration de mon apprentissage sur ce sujet. Je voulais comprendre et améliorer ma pratique des medias queries. J ai appris sur les compatibilités des medias queries et comment les optimiser. Premièrement, ils ne sont pas compatibles avec des versions antérieures à ie9. Deuxièmement, il est important de faire attention aux nombreuses feuilles de styles que l ont appele lors de la création d un site. Faire des feuilles séparées pour les medias queries est une très mauvaise pratique, car chaque feuille sera chargée au départ et sera

6 7 comptée dans le poids du site. Les medias queries sont utile pour permettre au site d accéder à des règles de style dépendamment de la largeur de l écran de l appareil, mais il faut bien comprendre qu il n y a pas de chiffres magiques et c est seulement quand le site en a besoin qu ont appele les medias queries. On doit permettre un changement flexible et non drastique. Comme expérimentations, j ai ajouté les medias queries à mes structures faites précédemment et pensé au design que mon site aurait dépendamment du modèle d appareils. J ai tenté d ajuster les medias en conséquence de la brisure du contenu et ajuster le visuel et la structure pour le mieux. J ai testé de la vidéo en responsive avec la librairie javascript FitVids qui fut très concluante et facile d utlisation. Pour ce qui est de son utilité dans ie8, on peut faire une feuille de style spécifique mais sans responsive Les vieux navigateurs (semaine 4) Par mes lectures et expérimentations, je voulais voir à quels points les navigateurs en général sont différents et doivent comprendre des spécificités différentes. Il est donc important pour un développeur de bien connaître les outils avec lesquels ses clients et utilisateurs vont évaluer son travail. Dans mes lectures, j ai pu prendre connaissance des différentes technologies et leurs influences sur les vieux navigateurs. J en conclus, avec mon expérience, qu il est important que le contenu soit accessible et bien lisible sur tous les navigateurs et versions, mais que de nos jours, l important c est l amélioration progressive. On construit notre site de base et on ajoute des couches pour suivre les nouvelles technologies. De cette manière, notre travail est adapté pour les différents types de navigateurs. Problématiques, c est sûr que certaines options ajouter sur les nouvelles plateformes ne seront pas prises en compte par les anciennes versions, mais de plus en plus on voit les fameux prefixes et moderniz qui aide pour la constance. Durant mes lectures et expérimentations, j ai porté une attention particulière aux versions et compatibilités des navigateurs, testé mes structures sur diférents navigateurs, utilisé moderniz, mais il y a beaucoup de différences et d instabilités à ce niveau. J ai surtout testé sur Firefox, Chrome et Safari Introduction à HTML5 et CSS3 (semaine 5) Par cet apprentissage, je voulais découvrir les nouveautés liées au HTML5 surtout du côté du balisage et sémantique. Pour ce qui est des CSS3, je voulais également voir les nouvelles possibilités. Avec l aide de certains tutoriels, j ai poussé mes apprentissages sur les balisages de bases, sections et vers la balise canvas et ses possibilités. Elle se trouve à être la nouvelle fenêtre flash du HTML5. La balise est capable

7 8 de gérer son contenu en pixels. Chaque pixel du canvas possède 4 valeurs de couleurs et peut être géré. Pour cette raison, on peut faires des animations de toutes sortes, des changements de couleurs, du dessin, de la 3D et des effets multiples. J ai testé le dessin d élément dans la balise canvas, le traitement de courbe ainsi que celui des images avec changement de couleurs. De plus, j ai lu, testé et appliqué les nouvelles balises de HTML5 très perfermantes pour le référencement comme header, section, nav et aside. Malheurement, les balise HTML5 ne sont pas toutes prises en compte par les anciens navigateurs et la balise canvas n est pas particulièrement simple d utilisation et est souvent dépendante du Javascript. Pour ce qui est des CSS3, j ai testé des effets de transformation efficaces et utiles, comme des transformations de background, de duration, de déplacement et des transformation de textes. Les CSS3 permettent de faire des animations qui avant n étaient possibles qu avec du code. Malheureusement, les CSS3 ne sont pas tous pris en compte par les anciens navigateurs La typographie en responsive (semaine 6) Je voulais comprendre comment la typographie réagie dans les pages en responsive web design. Au départ, toute la base des proportions typographiques des CSS du site repose sur une caractéristique : fontsize. Tout le texte du site repose et est influencé par cette déclaration au html. En général, on déclare le site en 16px=1em, car par défaut, c est la taille de plusieurs navigateurs comme étant la norme acceptable et confortable pour la lecture sur le web. J ai donc créée une page HTML5 avec différents jeux de balises influencés par des medias queries. Au changement de taille, la taille général de la fonte est changée sur le HTML et tout est influencé. J ai inséré des balises <span> à l intérieur des mes balises textes qui affichent la taille de ma typo pour aider à comprendre. De cette manière, on voit bien comment les tailles de typographie s influencent entre elles. Problématiques : la majorité des navigateurs mettent par défaut la taille de la typographie à 16px mais il y des exceptions. Malgré le fait de déterminer la taille au départ, certain navigateur on des préférences qui malheureusement influenceront notre site Les formulaires html5 (semaine 6) Ma nouvelle trouvaille. Je voulais voir les nouvelles options que le HTML5 offre dans les balises de formulaire. Il y a de nombreuses nouvelles caractéristiques et attributs. De plus, une fois sur mobile, la majorité de ses attributs influences la présentation des choix offerts par le formulaire. Il y a possibilité de faire des petites validations directement dans les balises un peu comme les regex font avec les balises

8 9 Pattern. J ai créé un formulaire HTML5 complet que j ai testé sur mobile. Malheureusement, beaucoup de ses balises ne sont pas très stables entre mobile et table, mais je crois qu il est quand même intéressant de les utiliser vue leurs bénéfices sur les navigateurs qui les acceptent. Ils permettent une meilleure expérience utilisateur Les grilles flexibles (semaine 6) Au départ, je n étais pas convaincu par l application des grilles flexibles, mais dès sont utilisations, j ai changé d avis. J ai téléchargé «columnal» et j ai été surprise par sa qualité. J ai pu déformer la structure et l adapter à mon goût de manière à ce qu elle réagisse à mes dimensions et mes medias queries. Il y a possibilité de gérer des colonnes dans des colonnes et tout indépendamment. J ai reçu plusieurs propositions pour utiliser d autres types de grilles flexibles plus complètes et j ai bien l intention de les essayer. Aucune problématique trouvé dans l utilisation des grilles flexibles, sauf la surcharge d éléments générés par la structure. Beaucoup de fichiers télécharger au départ et non utilisés Les types de navigation (semaine 7) Pour les types de navigation, j ai trouvé un site extrêmement complet qui parle de tous les types de navigation présentement utilisées en responsive. Le responsive est un prétexte pour revoir le bon fonctionnement de sa navigation! Il nous décrit en détail les caractéristiques, les avantages et les désavantages de chaque type de navigation. Il y a deux grandes familles de naviagation, les simples qui ont un seul niveau et les complexes à plusieurs sous niveaux. Je m intéressais particulièrement aux aspects techniques des navigations en responsive et leur côté utilisabilité. J ai tenté de tester un type de navigation complexe que je trouvais très intérressant et complet, mais je ne suis pas arrivé à rendre un prototype fonctionnel. J ai plutôt testé un type de navigation simple avec toggle en javascript. J ai donc perdu un peu de temps sur des expérimentations, mais çà ma permis de voir les difficultés techniques de certains types de navigation Le jquery mobile (semaine 8) Pour moi le jquery mobile est très nouveau. De ce que j avais entendu parler, ce n était pas très au point et pas bien fonctionnel. De ce que j ai lu sur le sujet, le jquery mobile semble être un processus plus

9 10 complexe, géré comme un système MVC (modèle, vues, contrôleur) et qui peut être très utile pour la gestion des pages et de contenu pour une application. De plus, il y a possibilité d avoir accès à des bibliothèques de code et de styles qui génère énormément de choses pour le développeur. Je n ai malheureusement pas testé de manière approfondie le jquery mobile, mais il y a beaucoup de spécificité qu il faut vérifier lors de son utilisation. J ai testé quelques librairie de génération de code pour des formulaires en jquery mobile. 2.2.Bilan de la progression du travail Semaine 1 La semaine était une introduction au sujet. Plus consacrée à de la lecture que des expérimentations. Je voulais lire trois chapitres de mon fameux livre «Reponsive web design with HTML5 and CSS3» mais j ai réussi en lire deux et demi. J ai respecté les heures d apprentissage demandées, mais j étais un peu insatisfaite de l avancement de mes lectures. Étant un livre seulement en anglais et mon niveau intermédiaire, je trouvais assez difficile de bien saisir tous les propos. La comparaison entre les heures prévues et celles réellement utilisées est assez équivalente. J ai conssacré mon temps à la lecture du livre, mais j aurais aimé comparer mes lectures avec d autres lectures. J avais estimé mes apprentisages axés vers de la lecture Semaine 2 Parce que je me suis faite suggéré environ trois fois le livre d Ethan Marccotte (le précurseur du principe du responsive web design) et que j étais encore au niveau de la compréhension du sujet, j ai décidé de m attaquer au livre numérique «Responsive web design». Ce choix a fait décaler toute la structure établie dans ma planification d étape, mais d après moi, cela en valait la peine. Côté temps, je suis entré dans les délais demandés de 12 heures et j ai fait des expérimentations sur des structures de base en responsive. J étais assez satisfaite du résultat et la compréhension du livre plus facile. La comparaison des heures est assez équivalente. J ai passé un grand pourcentage de mon temps à la lecture et un petit pourcentage à des expérimentations de base.

10 Semaine 3 Je me suis consacré à l expérimentation du responsive dans sa structure, sa grille, introduction d une vidéo en responsive, typographie adaptive et tentative d image adaptive. Je voulais consacrer ma semaine à plus d expériences techniques. De plus, j ai fait des lectures sur le balisage HTML5 de base et application de ses principes. J ai respecté les heures annoncées de 12 heures, mais encore une fois, je n ai pas fait assez de comparaisons sur le web entre les différents points de vues des spécialistes Semaine 4 Une semaine beaucoup plus technique encore, j ai finalement lâché mon livre qui d après moi expliquait trop longuement des principes de base et faisait trop de références sur des anciennes méthodes. Donc, exploration de nouvelles structures plus adaptées au responsive et exercices de base sur les effets de transition en CSS3. D après mon horraire, je voulais voir plus d éléments comme les couleurs, tester davantage sur les navigateurs et faire de la comparaison entre les opinions des développeurs. J ai respecté les heures prévues de 12 heures, mais je n ai pas respecté la répartition des heures. J ai fait plus d expérimentations que prévu par les heures annoncées Semaine 5 Cette semaine fut un regain d énergie. Après avoir refait la structure de ma planification pour les dernières semaines, j ai aussi fait une petite remise en question sur les aspects à voir. J ai décidé de consacrer ma semaine à l apprentissage de la grande balise canvas dans le HTML5. J ai également consacré plus de temps dans mon horaire pour les expérimentations. J ai fait des tests avec le canvas, fait des tutoriels et j ai bien respecté les heures que je m étais fixées Semaine 6 Cette semaine fut consacré au formulaire HTML5 sur mobile et table. J ai construit un grand formulaire complet et je l ai testé sur mobile à chaque étape de la production. Avec l aide d un tutoriel qui expliquait chaque balisage et sa compatibilité sur les différents navigateurs, le sujet fût clos plus rapidement que

11 prévu. Je n ai donc pas respecté toutes les heures que je m était fixé cette semaine. J ai fait moins d heures que prévue par l horraire Semaine 7 Les types de navigations en responsive web design. Sujet super intéressant et beaucoup de documentations sur internet. J ai trouvé des sites qui expliquait les types de menus et navigations en détaillant leurs avantages et désavantages en plus de diriger vers de bons exemples concrets. Jai fait un peu moins d heure que prévue au calendrier. J ai des expérimentations qui ont prit plus de temps que prévue à l horraire, donc j ai décidé de continuer les lectures et de m en tenir des tests plus simples Semaine 8 J ai occupé une partie d un samedi à m introduire au Jquery mobile. Le sujet est aussi très intéressant, mais je sentais que je m éloignais un peu de mes sujets d apprentissage. Le Jquery Mobile est géré comme une application avec gestion plus complexe avec Ajax. J ai quand même testé un petit bout de code pour monter une page très simple en Jquery mobile avec tous les liens vers les librairies mobile. Çà semblait bien fonctionner, mais je n ai pas mis le temps mentionné à mon calendrier sur le sujet Le programme Altimaitre J ai adoré participer au programme Atimaitre. Sans jugement, mon mentor (Patrick Matte de la Sépaq) m a donné des conseils, m a sugeré des sites actuels et des sujets d intérêt en lien avec mon apprentissage. J ai senti un appui, un enthousiasme et un intérêt de sa part dans mon apprentissage. 2.3.Technologies employées Au départ, je voulais me consacrer sur la lecture complète de mon premier livre «Responsive web design with HTML5 and CSS3» mais je me suis vite rendu compte que ce n était pas le meilleur moyen pour moi d apprendre sur mes sujets ciblés. J ai donc décidé d aller chercher mes informations sur les blogs, les sites de spécialistes en date récente et les tutoriels. Internet est riche en information de qualité et très à jour. La technologie avance et change si rapidement qu un livre écrit il y a un an peu être dépassé. Si

12 13 c était à refaire, je crois que je passerais plus de temps pour la comparaison des données, d opinions, d exemples et tutoriels des spécialistes. En début de session, je me suis procuré un mobile dans le but de pouvoir tout tester mes exemples sur plateforme adaptée, mais la grande difficulté avec mes sujets c est qu ils sont très modernes et instables sur plusieurs types de modèles et supports numériques. J aurais aimé tester sur plus de supports technologiques. 2.4.Perspectives La suite est grande et large pour l évolution de mes sujets. Déjà on parle de CSS4, qui fait son entrée avec de nouveaux sélecteurs et des nouvelles caractéristiques pointues. Il y a beaucoup d améliorations et d ajustements possibles pour l ensemble de mes sujets, car il y a beaucoup d instabilités sur les navigateurs, mais la suite ne peut qu être positive et plus compatible. Les navigateurs, de leur côté, évoluent rapidement et s adaptent aux nouvelles technologies. Par cet apprentissage, je voulais développer un côté critique sur ces sujets, comprendre leurs fonctionnements, permettre une rapidité technique lors de la production et être au courant des dernières technologies face à l intégration. De par ma petite expérience, je constate que ces apprentissages seront profitables sur le marché du travail. Étant des sujets d actualité et populaires dans le domaine du multimédia, les clients et professionnelles demandent de plus en plus d avoir des sites reflétant les nouvelles technologies. 3.CONCLUSION Si je remonte le temps et que je compare mes connaissances face au responsive web design, je maîtrise plus le concept, ses avantages et ses désavantages. Dans mon contexte d application (site moderne) il y réflexion à avoir sur son utilisation. Mon opinion sur le sujet est favorable, je trouve qu il est préférable de mettre du temps et de d argent sur le développement du responsive que sur la conformité pour les anciens navigateurs, mais je comprends aussi que certains clients ne considèrent pas cette optique. Développer un site en responsive demande près de 40% ou 50% plus de temps qu un site standard. Si on donne le choix au client qui ne connaît pas bien le principe du responsive, il ne voudra pas d éboursser ce temps de production, mais s il est bien informé par un développeur face aux avantages côté maintenance et adaptif, il serait des plus gagnants à long therme.

13 14 En tant que développeur, il est difficile, mais il est de notre devoir, d expliquer les biens faits à long therme du responsive et de changer les mentalités. Malheureusement, ce ne sont pas tous les développeurs qui veulent prendre ce chemin. Dans mon contexte d application et dans ma future carrière, je tiens à exprimer mon désir d appliquer cette technique et d en parler ouvertement en expliquant bien ses avantages et désavantages. J aime le principe que plusieurs entreprises modernes font leurs sites seulement en responsive peu importe la demande et cela répond bien à mon contexte d application. Mes connaissances au niveau des CSS3 et du HTML5 était de base avant mon apprentissage. Je sens que le sujet pourrait être encore plus maîtrisé, mais que dans mon contexte d application il est acceptable. Pour moi, ces nouvelles technologies sont des petits miracles qui nous permettent de faire plus avec moins. Il faut quand même garder une réserve sur l emploi des nouvelles technologies, mais d après moi si on les emploie dans une optique d amélioration progressive, tous les utilisateurs, de toutes plateformes, de tous navigateurs, de toutes générations en seront gagnants. 4.MÉDIAGRAPHIE 4.1. Les imprimés RESPONSIVE WEB DESIGN WITH HTML5 AND CSS3, Community Experience Distilled, Birmingham, CNR, FRAIN Ben, Informatique, UK, Packt Publishing Ltd, coll. Livery Street, no , RESPONSIVE WEB DESIGN, A Book Apart, New-York, MARCOTTE Ethan, Informatique, NY, Mandy Brown, coll. A Book Apart, no , Web Adaptive Images / Les images adaptives zenika, Architecture informatique / HTML5 : le mode offline Usaddict, Ressource sur l ergonomie des interfaces(le blog Usabilis)/

14 Responsive webdesign : adapter un site à toutes les résolutions 15 Graphisme & Interactivité / 10 petits conseils en responsive design Les vendredis Webdesign/ Font-size, responsive et accessibilité : Le bon, La brute et la truand Les intégristes / le web c est pas juste en 72dpi! PXtoEM.com / conversion made simple alsacreations / Introduction à Canvas Scriptol / Canvas dans HTML5 MSDN / Utilisation de Canvas pour transformer des photos couleur en photo noir et blanc Site du zéro / Tutoriels Ben Joffe HTML5 Doctor / HTML5 Element index html5doctor.com/element-index/#output Luke W / web form innovations on mobile devices lukew.com/ff/entry.asp?1000 SimpleWeb.fr / À propos des formulaires mobiles narratifs simpleweb.fr/2010/03/23/formulaires-mobiles-et-narratifs New HTML5 Input and Attributes coreservlets.com/html5-tutorial/input-types.html Where to start

15 16 JSFIDDLE jsfiddle.net/leaverou/zwvny Stephanie Rieger Hongkiat.com /How to create a responsive navigation TechRepublic / Create navigation bars responsive web design techniques Webdesign tuts+/big Menus, small screens : responsive, multi-level navigation Responsive navigation patterns

Olivier Bédard Groupe A. Rapport synthèse : Responsive web design. Travail présenté à monsieur Michel Rouleau Apprentissage autonome 582-FXA-06

Olivier Bédard Groupe A. Rapport synthèse : Responsive web design. Travail présenté à monsieur Michel Rouleau Apprentissage autonome 582-FXA-06 Olivier Bédard Groupe A Rapport synthèse : Responsive web design Travail présenté à monsieur Michel Rouleau Apprentissage autonome 582-FXA-06 Département des Techniques de communication Programme des Techniques

Plus en détail

Devenez un véritable développeur web en 3 mois!

Devenez un véritable développeur web en 3 mois! Devenez un véritable développeur web en 3 mois! L objectif de la 3W Academy est de former des petits groupes d élèves au développement de sites web dynamiques ainsi qu à la création d applications web

Plus en détail

Webmaster / Webdesigner / Wordpress

Webmaster / Webdesigner / Wordpress Webmaster / Webdesigner / Wordpress Pré-requis : Projet professionnel. Bonne maîtrise de l'ordinateur. Bases en infographie et / ou traitement de texte fortement recommandées. Objectifs : Concevoir un

Plus en détail

Introduction à HTML5, CSS3 et au responsive web design

Introduction à HTML5, CSS3 et au responsive web design 1 Introduction à HTML5, CSS3 et au responsive web design Jusqu à une période récente, les sites web étaient conçus avec une largeur fixe de l ordre de 960 pixels, en espérant que les visiteurs en tirent

Plus en détail

HTML5 et CSS3 pour des sites Responsive Web Design

HTML5 et CSS3 pour des sites Responsive Web Design Chapitre 1 : Introduction A. Le design Web aujourd'hui 11 B. Le Responsive Web Design 11 C. Les approches dans la conception 12 D. Le lâcher-prise 12 E. Les objectifs du livre 13 F. Les outils de l intégrateur

Plus en détail

Département de graphisme Session 2012-03. Plan de cours 570-HAX-06 Introduction aux logiciels multimédias. Programme 570.HAO

Département de graphisme Session 2012-03. Plan de cours 570-HAX-06 Introduction aux logiciels multimédias. Programme 570.HAO Cégep de Sherbrooke Département de graphisme Session 2012-03 Plan de cours 570-HAX-06 Introduction aux logiciels multimédias Programme 570.HAO Pondération : 3-3-2 Unités : 2,66 Groupes : 5305 et 5306 Cours

Plus en détail

Bootstrap 3 pour l'intégrateur web CSS et Responsive Web Design

Bootstrap 3 pour l'intégrateur web CSS et Responsive Web Design Chapitre 1 : Introduction A. Le développement des sites Web 14 B. Les fonctionnalités de Bootstrap 14 C. La compatibilité avec les navigateurs 15 D. Télécharger les exemples 15 Chapitre 2 : Installer Bootstrap

Plus en détail

RESPONSIVE WEB DESIGN

RESPONSIVE WEB DESIGN RESPONSIVE WEB DESIGN Une approche pour concevoir des sites Web adaptatifs et une occasion d'inciter les étudiants à consulter des cours responsives Ivan MADJAROV Arnaud FÉVRIER Comment consulte-t-on le

Plus en détail

INTEGRATEUR DEVELOPPEUR

INTEGRATEUR DEVELOPPEUR www.emweb.fr INTEGRATEUR DEVELOPPEUR FORMATION ELIGIBLE AU DIF/CIF DURÉE : 700 h de formation PRE REQUIS Avoir un esprit logique Etre motivé(e)! OBJECTIF A l issue de cette formation, vous serez capable

Plus en détail

Présentation du Framework BootstrapTwitter

Présentation du Framework BootstrapTwitter COUARD Kévin HELVIG-LARBRET Blandine Présentation du Framework BootstrapTwitter IUT Nice-Sophia LP-SIL IDSE Octobre 2012 Sommaire I. INTRODUCTION... 3 Définition d'un framework... 3 A propos de BootstrapTwitter...

Plus en détail

Apprenez les langages HTML5, CSS3 et JavaScript pour créer votre premier site web

Apprenez les langages HTML5, CSS3 et JavaScript pour créer votre premier site web Le Web 1. Qu est-ce que le Web? 7 1.1 Côté serveur : HTTP, FTP, langages, SQL 7 1.2 Côté client : HTML, CSS, JavaScript 10 2. Les langages et leur utilité 10 2.1 HTML 10 2.2 CSS 13 2.3 JavaScript 16 2.4

Plus en détail

//////////////////////////////////////////////////////////////////// Développement Web

//////////////////////////////////////////////////////////////////// Développement Web ////////////////////// Développement Web / INTRODUCTION Développement Web Le développement, également appelé programmation, désigne l'action de composer des programmes sous forme d'algorithme (codage).

Plus en détail

Guide Ultra-book / 2012

Guide Ultra-book / 2012 Guide Ultra-book / 2012 Avant de commencer Le logiciel Ultra-book est optimisé pour les derniers navigateurs web standards : Firefox 10 ou 11 Chrome 18 Safari 5 Vous trouverez ces navigateurs en téléchargement

Plus en détail

Programme HTML5 / CSS3 Professionnel

Programme HTML5 / CSS3 Professionnel Programme HTML5 / CSS3 Professionnel Déclaration d'activité enregistrée sous le n 52 44 06789 44 auprès du Préfet de région des Pays de la Loire. Format du cours :Plate-forme d apprentissage numérique

Plus en détail

HTML5, CSS3 et JavaScript

HTML5, CSS3 et JavaScript Marion LIVET Groupe A HTML5, CSS3 et JavaScript Travail présenté à madame Audrey Morneau Apprentissage autonome 582-FXA-06 Département des Techniques de communication Programme des Techniques d'intégration

Plus en détail

Rapport synthèse Le web mobile avec HTML 5, CSS3 et jquery. Travail présenté à madame Audrey Morneau Apprentissage Autonome 582-FXA-06

Rapport synthèse Le web mobile avec HTML 5, CSS3 et jquery. Travail présenté à madame Audrey Morneau Apprentissage Autonome 582-FXA-06 Catherine ROUSSEL Groupe 01 Rapport synthèse Le web mobile avec HTML 5, CSS3 et jquery. Travail présenté à madame Audrey Morneau Apprentissage Autonome 582-FXA-06 Département des Techniques de communication

Plus en détail

Site Internet du CERCLE (version 1) CAHIER DES CHARGES

Site Internet du CERCLE (version 1) CAHIER DES CHARGES Site Internet du CERCLE (version 1) CAHIER DES CHARGES 1. Moyens préconisés Nature des contenus ACCUEIL Actualités vidéo INFOS PRATIQUES images RESSOURCES Catalogue de ressources images fichiers PDF à

Plus en détail

Intégrateur Web HTML5 CSS3

Intégrateur Web HTML5 CSS3 Intégrateur Web HTML5 CSS3 L objectif de la 3W Academy est de former des petits groupes d élèves à l intégration de sites internet ainsi qu à la création d applications web simples telles qu un blog ou

Plus en détail

Formation : WEbMaster

Formation : WEbMaster Formation : WEbMaster Objectif et Description : Centre Eclipse vous propose une formation complète WebMaster, vous permettant de : Utiliser dès maintenant les nouveautés du web2, ainsi alléger les besoins

Plus en détail

PROFIL. Intégrateur Web. Missions

PROFIL. Intégrateur Web. Missions L intégrateur HTML est chargé de développer la partie front office des sites internet ou encore de coder les newsletters en HTML. À partir des éléments graphiques fournis au format Photoshop, il réalise

Plus en détail

Catalogue de formation

Catalogue de formation 4 rue Jules Raimu 31 200 Toulouse http://www.creabilis.com contact@creabilis.com Tél. : 05 34 251 641 Fax : 05 34 257 956 Catalogue de formation CREABILIS S.A.R.L au capital de 7500 - R.C.S. Toulouse 441

Plus en détail

Optimiser pour les appareils mobiles

Optimiser pour les appareils mobiles chapitre 6 Optimiser pour les appareils mobiles 6.1 Créer un site adapté aux terminaux mobiles avec jquery Mobile... 217 6.2 Transformer son site mobile en application native grâce à PhoneGap:Build...

Plus en détail

INTRODUCTION CHAPITRE 1

INTRODUCTION CHAPITRE 1 CHAPITRE 1 INTRODUCTION Query, qu est-ce que c est?... 11 HTML, CSS, JavaScript, PHP : qui fait quoi?... 16 Un environnement de développement simple et gratuit... 19 Ce que vous allez apprendre... 20 9

Plus en détail

RESPONSIVE DESIGN. Gobelins 2014.2015. Isabelle Biamonti

RESPONSIVE DESIGN. Gobelins 2014.2015. Isabelle Biamonti RESPONSIVE DESIGN Gobelins 2014.2015 Isabelle Biamonti Plan Principe général Exemples Sans responsive Avec responsive Versions séparées Responsive design ou versions séparées? Comment rendre un design

Plus en détail

Rapport de Stage Christopher Chedeau 2 au 26 Juin 2009

Rapport de Stage Christopher Chedeau 2 au 26 Juin 2009 Rapport de Stage Christopher Chedeau 2 au 26 Juin 2009 «Web. De l intégration de pages statiques HTML à un CMS, à la dynamisation d un site grâce au Javascript et l utilisation de nouvelles technologies

Plus en détail

3W Academy Programme de Formation Développeur Intégrateur web Total : 400 heures

3W Academy Programme de Formation Développeur Intégrateur web Total : 400 heures 3W Academy Programme de Formation Développeur Intégrateur web Total : 400 heures Objectif global : A l issue de la formation, les stagiaires doivent être opérationnels dans la création d un site internet

Plus en détail

Chapitre 1 De la conception à la publication 15. Chapitre 2 Créer son blog en ligne 27

Chapitre 1 De la conception à la publication 15. Chapitre 2 Créer son blog en ligne 27 Chapitre 1 De la conception à la publication 15 1.1. Réussir l ergonomie générale d un site... 16 Les qualités d un bon site web... 16 Une navigation simple et efficace... 17 1.2. Créer la charte graphique...

Plus en détail

Programme de Formation

Programme de Formation Windows / PC - initiation Etre à l aise avec Windows, savoir se situer, organiser son environnement et classer ses documents Tout utilisateur désireux d être rapidement autonome dans l utilisation de l

Plus en détail

FORMATION WEBMASTER PROGRAMMEUR ERP / CRM. Déclaration d activité: Région Rhône Alpes N : 82 26 01835 26

FORMATION WEBMASTER PROGRAMMEUR ERP / CRM. Déclaration d activité: Région Rhône Alpes N : 82 26 01835 26 FORMATION WEBMASTER PROGRAMMEUR ERP / CRM Déclaration d activité: Région Rhône Alpes N : 82 26 01835 26 Préambule : La formation par TooEasy TooEasy formation c est Un centre de formation déclaré d activité

Plus en détail

Exemple de charte d intégration web

Exemple de charte d intégration web Exemple de charte d intégration web Ce document est un exemple de charte d'intégration. Il est à adapter en fonction des contraintes, des choix, des objectifs de l'équipe, la société qui l'utilise. Il

Plus en détail

A.F.L.I.M. Formation HTML5 et CSS3 - Pour des sites Responsive Web Design

A.F.L.I.M. Formation HTML5 et CSS3 - Pour des sites Responsive Web Design A.F.L.I.M. Ateliers de Formations Linguistique Informatique Multimédia Formation HTML5 et CSS3 - Pour des sites Responsive Web Design Formation : Présentation du HTML5 Bref historique du HTML5 Lignes de

Plus en détail

Travaux dirigés n 10

Travaux dirigés n 10 Travaux dirigés n 10 IMAC 1 Responsive Web Design Dans ce TD, vous verrez comment concevoir un design web qui s adaptera au terminal sur lequel il sera visualisé. Avant-propos Avec l avènement des smartphones

Plus en détail

Sorin Lucas Ricou Sander. Rapport de projet SI28

Sorin Lucas Ricou Sander. Rapport de projet SI28 Sorin Lucas Ricou Sander A14 Rapport de projet SI28 1 I. Concept Application web permettant la création d une vidéo virale type «NyanCat». L utilisateur aura à sa disposition des musiques, des fonds, des

Plus en détail

Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation.

Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation. 1 Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation. Voici un mode opératoire qui vous guidera dans l utilisation de

Plus en détail

CONCEPTEUR REALISATEUR MULTIMEDIA GOBELINS CAHIER DES CHARGES WORKSHOP HTML/JAVASCRIPT. CRM13 2 ème ANNEE

CONCEPTEUR REALISATEUR MULTIMEDIA GOBELINS CAHIER DES CHARGES WORKSHOP HTML/JAVASCRIPT. CRM13 2 ème ANNEE CONCEPTEUR REALISATEUR MULTIMEDIA GOBELINS CAHIER DES CHARGES WORKSHOP HTML/JAVASCRIPT CRM13 2 ème ANNEE OCTOBRE 2014 Objectifs : Approfondir votre pratique de l intégration HTML/CSS Apprendre à intégrer

Plus en détail

Formation WEB DESIGN. Catalogue. Immeuble Normandie II 55, rue Amiral Cécille

Formation WEB DESIGN. Catalogue. Immeuble Normandie II 55, rue Amiral Cécille Immeuble Normandie II 55, rue Amiral Cécille 7 6 1 0 0 R O U E N Tél. : 02 35 03 87 09 Fax : 02 35 03 49 29 Email : formation@art-communication.fr Site web : www.art-communication.fr Catalogue WEB DESIGN

Plus en détail

Tutoriel Ionic framework

Tutoriel Ionic framework INGÉNIEURS EN SCIENCES INFORMATIQUES ADAPTATION DES INTERFACES A L ENVIRONNEMENT Tutoriel Ionic framework Tutoriel et présentation du framework IONIC : technologie permettant la réalisation d applications

Plus en détail

Comment installer wordpress. www.bxart.be wp niveau 1

Comment installer wordpress. www.bxart.be wp niveau 1 www.bxart.be wp niveau 1 Installation Introduction Wordpress est un CMS ce qui signifie : système de gestion de contenu (Content Management System). Il y a d autres CMS mais c est de loin le plus populaire.

Plus en détail

PLAN DE COURS CONCEPT ET MULTIMÉDIA 2 570 JCW 06

PLAN DE COURS CONCEPT ET MULTIMÉDIA 2 570 JCW 06 PLAN DE COURS CONCEPT ET MULTIMÉDIA 2 570 JCW 06 Pondération du cours 2-4-3 Session Automne 2011 Compétence(s) visée(s) OOPL - OOPM Programme-hôte Graphisme Professeur Sabin Farley Département de graphisme

Plus en détail

Formation à l administration de votre site Internet

Formation à l administration de votre site Internet Rédacteur : B2F Concept Date : 01/08/2012 Destinataire : Mairie de Drumettaz Formation à l administration de votre site Internet Introduction...2 Connexion à l administration...2 Gestion de contenu...3

Plus en détail

CSS maintenables. avec Sass & Compass. 2 e éd. OUTILS ET BONNES PRATIQUES POUR L INTÉGRATEUR WEB. Kaelig Deloumeau-Prigent DESIGN

CSS maintenables. avec Sass & Compass. 2 e éd. OUTILS ET BONNES PRATIQUES POUR L INTÉGRATEUR WEB. Kaelig Deloumeau-Prigent DESIGN DESIGN Préface de Christian Heilmann Kaelig Deloumeau-Prigent CSS maintenables avec Sass & Compass 2 e éd. OUTILS ET BONNES PRATIQUES POUR L INTÉGRATEUR WEB Groupe Eyrolles, 2012, 2014, ISBN : 978-2-212-13640-1

Plus en détail

UN SITE WEB RESPONSIVE EN UNE HEURE?

UN SITE WEB RESPONSIVE EN UNE HEURE? UN SITE WEB RESPONSIVE EN UNE HEURE?! O N O R H C P TO Raphaël Goetter Raphaël Goetter alsacreations.fr alsacreations.com goetter.fr knacss.com mobitest.me @goetter EN UNE HEURE, VOUS AVEZ DIT?!? R E N

Plus en détail

Créez votre premier site web De la conception à la réalisation

Créez votre premier site web De la conception à la réalisation Chapitre 1 : Introduction A. Introduction 17 Chapitre 2 : Les langages A. L objectif 21 B. L HTML 21 1. L état des lieux 21 2. Les éléments HTML 21 3. Les attributs 22 4. Les caractères 23 5. Les espaces

Plus en détail

HTML5 et CSS3 Faites évoluer le design de vos sites web (2ième édition)

HTML5 et CSS3 Faites évoluer le design de vos sites web (2ième édition) Introduction A. La création de sites Web 20 B. Les langages 20 C. Le livre 20 1. Pour les designers Web 20 2. Le contenu 20 Chapitre 1 : L évolution de l HTML et des CSS A. Rapide historique de l Internet

Plus en détail

Guide méthodologique Les grandes étapes d un projet numérique

Guide méthodologique Les grandes étapes d un projet numérique Guide méthodologique Les grandes étapes d un projet numérique V1-10 oct 2011 1 Mode d emploi Le guide méthodologique vous est proposé par l équipe du concours Web Generationet a été approuvé par une équipe

Plus en détail

À la découverte de jquery Mobile

À la découverte de jquery Mobile 1 À la découverte de jquery Mobile jquery Mobile est un ensemble de plug-ins et de widgets de jquery visant à déployer une API multiplates-formes capable de développer des applications Web mobiles. Au

Plus en détail

formations Une approche simple et personnalisée pour une meilleure acquisition de compétences en PAO

formations Une approche simple et personnalisée pour une meilleure acquisition de compétences en PAO formations Dans l exercice du graphisme depuis 1994 et passé directeur artistique en 2001, Alain Cournoyer propose des formations professionnelles en PAO appliquée, à proximité de Saint-Germain-en-Laye.

Plus en détail

Formation Responsive Web Design

Formation Responsive Web Design L institut de formation continue des professionnels du Web Formation Responsive Web Design Référence formation : Durée : Prix conseillé : RESPWD 3 jours (21 heures) 1 500 HT (hors promotion ou remise particulière)

Plus en détail

Introduction à la programmation web

Introduction à la programmation web Introduction à la programmation web Nouvelles Technologies Dr. Thé Van LUONG The-Van.Luong@heig-vd.ch HEIG-VD Switzerland 8 octobre 2015 1/34 8 octobre 2015 1 / 34 Plan 1 État de l art des langages orientés

Plus en détail

Conception Adaptative "Responsive Web Design"

Conception Adaptative Responsive Web Design Conception Adaptative "Responsive Web Design" Construire des interfaces web qui s'adaptent aux spécificités des terminaux sur lesquelles elles sont vues RWD in the wild quelques exemples : http://incredibletypes.com/

Plus en détail

Dossier de présentation - Site évènementiel autour du skateboard William Traoré - M2

Dossier de présentation - Site évènementiel autour du skateboard William Traoré - M2 Dossier de présentation - Site évènementiel autour du skateboard William Traoré - M2 Sommaire Concept Benchmark Technologie Architecture Concept Avant propos Concept Accroche Titre retenu Avant propos

Plus en détail

La mise en page web, feuille de style, cadre.

La mise en page web, feuille de style, cadre. La mise en page web, feuille de style, cadre. L importance du navigateur, son rôle est de lire le code HTML et CSS afin d afficher un résultat visuel à l écran, le problème est que les navigateurs n affichent

Plus en détail

Un Site Internet à votre mesure. www.votrecommune.fr. Un site internet gratuit sur mesure en toute indépendance

Un Site Internet à votre mesure. www.votrecommune.fr. Un site internet gratuit sur mesure en toute indépendance www.votrecommune.fr Un site internet gratuit sur mesure en toute indépendance Quelques exemples www.jouesurerdre.fr Quelques exemples www.mouzeil.fr Quelques exemples www.riaille.fr Quelques exemples www.saintherblon.fr

Plus en détail

WEBDESIGNER PROGRAMME WEBDESIGNER ARTISTE ET TECHNICIEN LUMIÈRE SUR LA FORMATION

WEBDESIGNER PROGRAMME WEBDESIGNER ARTISTE ET TECHNICIEN LUMIÈRE SUR LA FORMATION ARTISTE ET TECHNICIEN LUMIÈRE SUR LA FORMATION DURÉE 70 jours de formation Module 1 - Infographiste PAO : 4 semaines de cours intensifs + 2 semaines d atelier pédagogique Module 2 Concepteur de site internet

Plus en détail

Responsive Web Design. Responsive Design avec HTML 5.0 et CSS3

Responsive Web Design. Responsive Design avec HTML 5.0 et CSS3 Ivan MADJAROV Responsive Design avec HTML 5.0 et CSS3 HTML5 CSS3 IvMad - 2013 2 La spécification CSS3 Media Queries (requêtes de media) définit les techniques pour adapter de feuilles de styles en fonction

Plus en détail

DESS Arts, création et technologies

DESS Arts, création et technologies DESS Arts, création et technologies Faculté des arts et des sciences DESS Arts, création et technologies ART6017 - INTERNET ET WEB Trimestre HIVER 2014 PLAN DE COURS Enseignante Courriel Marjolaine Béland

Plus en détail

COURS COMPLET. Objectif général. À qui s'adresse ce cours? Avantages. Créer un site Web commercial. Durée de la formation. Matériel pédagogique

COURS COMPLET. Objectif général. À qui s'adresse ce cours? Avantages. Créer un site Web commercial. Durée de la formation. Matériel pédagogique Certificat d agrément #0054105 Page 1 de 6 COURS COMPLET Créer un site Web commercial Objectif général Être capable de créer un site Web commercial de A à Z. Durée de la formation 120 heures de formation.

Plus en détail

Optimiser les e-mails marketing Les points essentiels

Optimiser les e-mails marketing Les points essentiels Optimiser les e-mails marketing Les points essentiels Sommaire Une des clés de succès d un email marketing est la façon dont il est créé puis intégré en HTML, de telle sorte qu il puisse être routé correctement

Plus en détail

REFONTE DU SITE DE LA FEDERATION ALGERIENNE DE FOOTBALL

REFONTE DU SITE DE LA FEDERATION ALGERIENNE DE FOOTBALL REFONTE DU SITE DE LA FEDERATION ALGERIENNE DE FOOTBALL CAHIER DES CHARGES TECHNIQUE Client Fédération Algérienne de Football (FAF) Chef de projet WEBQAM Marine CHARLES Solution retenue WordPress multilingue

Plus en détail

Mémo pour la réalisation de sites Web avec e-majine

Mémo pour la réalisation de sites Web avec e-majine Mémo pour la réalisation de sites Web avec e-majine Pour accéder aux différentes interfaces d'administration e-majine (manage et webo-factory), vous avez un accès de type agence (premièrelettreduprénom.nom%agencedépartement

Plus en détail

Projet Web. Tim Burton. Refonte complète du site de Tim Burton en utilisant les dernières technologies du web : HTML 5 / CSS 3 / JavaScript...

Projet Web. Tim Burton. Refonte complète du site de Tim Burton en utilisant les dernières technologies du web : HTML 5 / CSS 3 / JavaScript... Projet Web Tim Burton Refonte complète du site de Tim Burton en utilisant les dernières technologies du web : HTML 5 / CSS 3 / JavaScript... Par Omar EDDASSER L3 ISC parcours MIAGE Sous l enseignement

Plus en détail

SITE WEB Service Client. Charte graphique et technique

SITE WEB Service Client. Charte graphique et technique Service Client Charte graphique et technique 1 Sommaire a / MISE EN FORME Introduction... 3 Les logos Veolia... 4 Police & taille - généralité... 6 Police & taille gabarits principaux... 7 Palette de couleur...

Plus en détail

FICHE D ACTIVITE N 1 : APPLICATION WEB A OUEST- INFORMATIQUE PARTIE (1/3)

FICHE D ACTIVITE N 1 : APPLICATION WEB A OUEST- INFORMATIQUE PARTIE (1/3) FICHE D ACTIVITE N 1 : APPLICATION WEB A OUEST- INFORMATIQUE PARTIE (1/3) Table des matières I. Pôle de compétences concernées... 3 II. Circonstance et contexte... 3 III. Situation professionnelle et niveau

Plus en détail

Présentation. 2010 Pearson Education France Adobe Flash Catalyst CS5 Adobe Press

Présentation. 2010 Pearson Education France Adobe Flash Catalyst CS5 Adobe Press Présentation 1 Adobe Flash Catalyst CS5 vous permet de produire du contenu totalement interactif d une grande qualité graphique pour le web ou le bureau sans écrire une seule ligne de code. Cette leçon

Plus en détail

Guide sur l accessibilité des ressources numériques pédagogiques

Guide sur l accessibilité des ressources numériques pédagogiques Guide sur l accessibilité des ressources numériques pédagogiques Quelques pistes sur la manière de rendre accessibles au plus grand nombre d étudiants les ressources diffusées sur les plateformes pédagogiques

Plus en détail

Formation au logiciel Typo3, pour les rédacteurs.

Formation au logiciel Typo3, pour les rédacteurs. 1 Formation au logiciel Typo3, pour les rédacteurs. 1 Accéder au système 2 1.1 Configuration du navigateur 2 1.2 Identification 2 2 L interface 2 2.1 Le module Web 3 2.2 Le module Media 3 2.3 Le module

Plus en détail

KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos.

KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos. KompoZer Créer un site «simple» Composition du site : _ une page d'accueil : index.html _ une page pour la théorie : theorie.html _ une page pour les photos : photos.html _ une page avec la galerie : galerie.html

Plus en détail

Formation Webmaster : Création de site Web Initiation + Approfondissement

Formation Webmaster : Création de site Web Initiation + Approfondissement Contactez notre équipe commerciale au 09.72.37.73.73 Aix en Provence - Bordeaux - Bruxelles - Geneve - Lille - Luxembourg - Lyon - Montpellier - Nantes - Nice - Paris - Rennes - Strasbourg - Toulouse Formation

Plus en détail

TECHNIQUES D INTÉGRATION MULTIMÉDIA DIFFUSION EN LIGNE (582-KGB-JQ) 1-3-2

TECHNIQUES D INTÉGRATION MULTIMÉDIA DIFFUSION EN LIGNE (582-KGB-JQ) 1-3-2 TECHNIQUES D INTÉGRATION MULTIMÉDIA DIFFUSION EN LIGNE (582-KGB-JQ) 1-3-2 Enseignant : Serge Parent Bureau : 841.3G Téléphone : 418-547-2191, poste 7134 Courriel: serge.parent@cjonquiere.qc.ca Élève 2

Plus en détail

CONECT Innovation & Entrepreneurship Plateform. Cahier des charges. Réalisé par : Haythem LABBASSI, DSI - CONECT IT

CONECT Innovation & Entrepreneurship Plateform. Cahier des charges. Réalisé par : Haythem LABBASSI, DSI - CONECT IT CONECT Innovation & Entrepreneurship Plateform Cahier des charges Réalisé par : Haythem LABBASSI, DSI - CONECT IT Confédération des Entreprises Citoyennes de Tunisie Adresse : 8 rue Imem Ibn Hanbal (par

Plus en détail

www.riaq.ca de Microsoft NIVEAU 2 Initiation à une messagerie Web en ligne.

www.riaq.ca de Microsoft NIVEAU 2 Initiation à une messagerie Web en ligne. NIVEAU Initiation à une messagerie Web en ligne. de Microsoft Windows Live Mail peut vous aider à classer tout ce qui vous intéresse au même endroit sur votre PC. Ajoutez et consultez plusieurs comptes

Plus en détail

SPECIFICATIONS FONCTIONNELLES DETAILLEES VICAT. Site internet des Papeteries de Vizille. RÉFÉRENCE : 2011_OA110029 VERSION : v01.

SPECIFICATIONS FONCTIONNELLES DETAILLEES VICAT. Site internet des Papeteries de Vizille. RÉFÉRENCE : 2011_OA110029 VERSION : v01. VICAT Site internet des Papeteries de Vizille RÉFÉRENCE : 2011_OA110029 VERSION : v01.01 18/05/2012 LES INTERLOCUTEURS DU PROJET OPEN WIDE Sandrine Bouvier Tél : +33 4 26 68 29 04 Mail : sandrine.bouvier@openwide.fr

Plus en détail

CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING

CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING Durée : 3J / 21H Formateur : Consultant expert en PAO et Web-marketing. Groupe de : 4 max Formation au web marketing Objectifs : Mettre en oeuvre des

Plus en détail

Rapport de stage en Entreprise

Rapport de stage en Entreprise Rapport de stage en Entreprise Laurie GIRY Année 2014 Période du : 05/01/15 au 09/01/15 BTS SIO 2ème Année Société Atiliom, Chambly, France. Page 1 sur 39 Sommaire : 1. Implantation géographique...page

Plus en détail

Toute personne souhaitant maîtriser les techniques liées à la conception de produits multimédia et à la création de sites Web.

Toute personne souhaitant maîtriser les techniques liées à la conception de produits multimédia et à la création de sites Web. Web Designer Durée 90 jours (630 h) Public Toute personne souhaitant maîtriser les techniques liées à la conception de produits multimédia et à la création de sites Web. Objectifs La formation Web designer

Plus en détail

Pages et sites Web. Table des matières 1. Microsoft Expression Web S'orienter vers l'accessibilité...12

Pages et sites Web. Table des matières 1. Microsoft Expression Web S'orienter vers l'accessibilité...12 Pages et sites Web Table des matières 1 Microsoft Expression Web S'orienter vers l'accessibilité...12 Espace de travail Installer le logiciel...13 Lancer/quitter Microsoft Expression Web 2...13 Découvrir

Plus en détail

Éric Sarrion. JQuery 1. 7. & JQuery UI. 2 e édition. Groupe Eyrolles, 2011, 2012, ISBN : 978-2-212-13504-6

Éric Sarrion. JQuery 1. 7. & JQuery UI. 2 e édition. Groupe Eyrolles, 2011, 2012, ISBN : 978-2-212-13504-6 Éric Sarrion JQuery 1. 7 & JQuery UI 2 e édition Groupe Eyrolles, 2011, 2012, ISBN : 978-2-212-13504-6 Avant-propos Dernier né des frameworks JavaScript, jquery a immédiatement séduit les développeurs

Plus en détail

PLAN D ÉTUDES SESSION: Hiver 2014

PLAN D ÉTUDES SESSION: Hiver 2014 PLAN D ÉTUDES SESSION: Hiver 2014 RENSEIGNEMENTS GÉNÉRAUX Titre du cours Ordinateurs et multimédia Numéro 420-DN1-LP Pondération 1-2 - 3 Enseignant(s) 1 Bureau Poste téléphonique Stéphane Pelletier C-811

Plus en détail

Formation Développement d'applications mobiles multiplateformes

Formation Développement d'applications mobiles multiplateformes L institut de formation continue des professionnels du Web Formation Développement d'applications mobiles multiplateformes Référence formation : Durée : Prix conseillé : MO00015 5 jours (35 heures) 2 320

Plus en détail

SITES ET APPLICATIONS INTERNET. Cours d IHM - CSII 1ère année EPSI Bordeaux - Cours n 3

SITES ET APPLICATIONS INTERNET. Cours d IHM - CSII 1ère année EPSI Bordeaux - Cours n 3 SITES ET APPLICATIONS INTERNET Cours d IHM - CSII 1ère année EPSI Bordeaux - Cours n 3 INTERNET le réseau des réseau : un ensemble de serveur interconnectés. au départ réservé aux universitaires, il s

Plus en détail

Bureautique Initiation Excel-Powerpoint

Bureautique Initiation Excel-Powerpoint Module de Formation Personnalisée : Bureautique Initiation Excel-Powerpoint Durée : jours ouvrables Prix : Formation personnalisée en vue d obtenir les notions de base indispensables pour : Excel Office

Plus en détail

Créer son Blog! Une fois votre compte blogger ouvert, vous allez pouvoir cliquer sur «Nouveau Blog» Une nouvelle fenêtre apparaît

Créer son Blog! Une fois votre compte blogger ouvert, vous allez pouvoir cliquer sur «Nouveau Blog» Une nouvelle fenêtre apparaît Qu est-ce qu un blog? Un weblog (raccourci en blog ) est un site internet avec textes et/ou images, actualisé régulièrement, par un ou plusieurs auteurs (que l'on nomme bloggers «prononcer blogueurs»),

Plus en détail

HTML5 Quels enjeux pour la mobilité et le RIA?

HTML5 Quels enjeux pour la mobilité et le RIA? HTML5 Quels enjeux pour la mobilité et le RIA? Julien Roche Philippe Guédez Ludovic Garnier 2 Sommaire Evolution des usages du Web Applications mobiles multiplateformes Contributions d HTML5 au RIA Conclusion

Plus en détail

Développement Web Introduction générale

Développement Web Introduction générale 1 / 58 Développement Web Introduction générale Jean-Michel Richer jean-michel.richer@univ-angers.fr http://www.info.univ-angers.fr/pub/richer Juillet 2008 2 / 58 Plan Plan 1 Introduction 2 Historique et

Plus en détail

BONNES PRATIQUES AUDIENCE MOBILE

BONNES PRATIQUES AUDIENCE MOBILE BONNES PRATIQUES AUDIENCE MOBILE IDENTIFIEZ VOS MOBINAUTES Identifiez les mobinautes de votre base de contacts et leur équipement mobile. Combien de contacts consultent vos emails sur mobile? Quel(s) équipement(s)

Plus en détail

Sam Markiewicz. Digital designer / Illustrateur. Guide de démarrage

Sam Markiewicz. Digital designer / Illustrateur. Guide de démarrage Sam Markiewicz Digital designer / Illustrateur Guide de démarrage Bonjour! Et ravi de faire votre connaissance! Je suis Sam Markiewicz, je suis un designer et illustrateur freelance. Je mets à votre disposition

Plus en détail

L UTILISATION DU HTML POUR L ENVOI DE VOS COURRIELS

L UTILISATION DU HTML POUR L ENVOI DE VOS COURRIELS L UTILISATION DU HTML POUR L ENVOI DE VOS COURRIELS Courrielleur privilégie l usage des courriels HTML pour les envois marketing. En effet, le HTML permet d organiser graphiquement l information de manière

Plus en détail

Formation HTML5 / CSS3

Formation HTML5 / CSS3 Objectifs de la formation HTML 5 et CSS3 HTML est un langage qui permet de présenter des informations sur Internet. Bien qu'encore en cours de création, la version HTML 5 est un langage parfaitement utilisable.

Plus en détail

Formulaire en ligne Soho : manuel utilisateur

Formulaire en ligne Soho : manuel utilisateur t16_manuelutilisateur_v0.1.docx Page 1 / 7 Formulaire en ligne Soho : manuel utilisateur NOUVEAUTÉS TARIF 2016 EN BREF EN CAS DE PROBLÈME ACCÉDER À L APPLICATION SOHO Nouvelle adresse email de contact

Plus en détail

WORDPRESS : réaliser un site web

WORDPRESS : réaliser un site web WORDPRESS : réaliser un site web Wordpress est un système de gestion de contenu (ou CMS) libre. Il permet de créer des sites relativement complexes (blog, forum, site vitrine, site dynamique), sans qu

Plus en détail

L'Éditoriel, un outil unique de gestion de contenu éditorial, rapide, adaptable, modulable, évolutif, puissant.

L'Éditoriel, un outil unique de gestion de contenu éditorial, rapide, adaptable, modulable, évolutif, puissant. n e t - p u bl i s h i n g w e b - d e s i g n i n t e r n e t m u l t i m e d i a o n / o f f - l i n e w w w. l e p o i n t c o m. c o m e c r i r e @ l e p o i n t c o m. c o m Réussir votre implantation

Plus en détail

Optimiser le référencement naturel de son site web

Optimiser le référencement naturel de son site web Rodez, le 15 avril 2011 Les moteurs de recherche Les moteurs utilisés dans le monde Les moteurs utilisés en Europe Où clique un internaute? Référencement «payant» 35-40% des clics sur Google Référencement

Plus en détail

Le Web pour les informaticiens Les métiers. Programmation web PHP et bases de données. Les métiers rédactionnels. Les métiers des concepteurs

Le Web pour les informaticiens Les métiers. Programmation web PHP et bases de données. Les métiers rédactionnels. Les métiers des concepteurs Le Web pour les informaticiens Le Web pour les informaticiens Programmation web PHP et bases de données Les métiers La conception du site web Jean-Christophe Dubacq IUT de Villetaneuse S3 2013 PHP et bases

Plus en détail

Bachelor Jeune Entrepreneur EM Strasbourg Learning expedition Le 16 avril 2014

Bachelor Jeune Entrepreneur EM Strasbourg Learning expedition Le 16 avril 2014 Bachelor Jeune Entrepreneur EM Strasbourg Learning expedition Le 16 avril 2014 Déroulé de la journée : Présentation des participants Expression par chacun de son intention d apprentissage Circulation libre

Plus en détail

TERMES DE RÉFÉRENCE «FORMATION PROFESSIONNELLE EN PHP ET JAVA/JEE» RELATIFS A LA

TERMES DE RÉFÉRENCE «FORMATION PROFESSIONNELLE EN PHP ET JAVA/JEE» RELATIFS A LA RÉPUBLIQUE TUNISIENNE *** MINISTÈRE DE L ENSEIGNEMENT SUPÉRIEUR ET DE LA RECHERCHE SCIENTIFIQUE *** UNIVERSITÉ DE JENDOUBA TERMES DE RÉFÉRENCE RELATIFS A LA «FORMATION PROFESSIONNELLE EN PHP ET JAVA/JEE»

Plus en détail

Réalisation d'un site web. Première partie : Création des pages HTML. thierry.vaira@orange.fr

Réalisation d'un site web. Première partie : Création des pages HTML. <tv>thierry.vaira@orange.fr</tv> Réalisation d'un site web Première partie : Création des pages HTML 1 Objectifs Se familiariser avec le codage HTML Acquérir une pratique minimale Être capable de mener à bien la construction d'un site

Plus en détail

Browser War 2009. Daniel Glazman. mardi 24 novembre 2009

Browser War 2009. Daniel Glazman. mardi 24 novembre 2009 Browser War 2009 Daniel Glazman Rappelez-vous......quand écran et impression se faisaient la guerre...quand la taille de fonte par défaut sur Netscape n'était pas celle de IE...la première fois que vous

Plus en détail

Analyse d un cahier des charges Proposition de refonte de site Le Parc Zoologique de Nantes. 23.02.11 Jérémy Héno / Juliette Neveu

Analyse d un cahier des charges Proposition de refonte de site Le Parc Zoologique de Nantes. 23.02.11 Jérémy Héno / Juliette Neveu Analyse d un cahier des charges Proposition de refonte de site Le Parc Zoologique de Nantes Sommaire - Notre agence - Résumé de la demande - Analyse - Benchmark / étude de la concurrence - Proposition

Plus en détail

Sommaire. Qu est ce qu un blog? Blog / site : quelle différence? Les plateformes de blog

Sommaire. Qu est ce qu un blog? Blog / site : quelle différence? Les plateformes de blog Sommaire Qu est ce qu un blog? Blog / site : quelle différence? Les plateformes de blog Premiers pas sur Wordpress Créer un compte utilisateur Créer un blog Tableau de bord et administration Interface

Plus en détail

DROITS ET RESPONSABILITES. On a tous des droits en ligne. Respect!

DROITS ET RESPONSABILITES. On a tous des droits en ligne. Respect! Fiche atelier DROITS ET RESPONSABILITES On a tous des droits en ligne. Respect! Objectif Que peut-on faire, que doit-on faire, que devrait-on faire en ligne? En quoi suis-je protégé, responsable? Que dit

Plus en détail