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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Pour en expliquer le principe, on se limitera à deux exemples :

Pour en expliquer le principe, on se limitera à deux exemples : Les Media Queries permettent donc de cibler : Le type de média La taille de l'écran La taille de la fenêtre La résolution Le nombre de couleurs L'orientation Pour en expliquer le principe, on se limitera

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

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

À 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

Les unités de taille des polices de caractères

Les unités de taille des polices de caractères Les unités de taille des polices de caractères Deux systèmes permettent d'indiquer les dimensions des éléments en CSS : les unités de taille fixe et les unités de taille relative. C'est la propriété font-size

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

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

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

Point sur les solutions de développement d apps pour les périphériques mobiles

Point sur les solutions de développement d apps pour les périphériques mobiles Point sur les solutions de développement d apps pour les périphériques mobiles Par Hugues MEUNIER 1. INTRODUCTION a. Une notion importante : le responsive web design Nous sommes en train de vivre une nouvelle

Plus en détail

Analyse du site AMAZON.

Analyse du site AMAZON. (Mateo SEPULVEDA Groupe G) Analyse du site AMAZON. Repérage: Première impressions: Points positifs: Site bien organisé, icônes importantes bien mises en valeurs. Points négatifs: Certaine rubriques cachées,

Plus en détail

Modules Multimédia PAO (Adobe)

Modules Multimédia PAO (Adobe) Modules Multimédia PAO (Adobe) Pré-requis : Bonne maîtrise de la manipulation d'un PC (environnement Windows ou Mac) et de la navigation Internet. Disposition pour le graphisme recommandée. Mémoire visuelle,

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

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

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

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

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

Portfolio Sites internet :

Portfolio Sites internet : Portfolio Sites internet : 2010 ARA architecture www.ara-architecture.com Type : Portfolio d architecte Fonctionnalités principales : Galerie de projet d architecture, Actualités, Textes sur l agence,

Plus en détail

Introduction. Pourquoi ce livre? À qui s adresse ce livre?

Introduction. Pourquoi ce livre? À qui s adresse ce livre? Introduction Bien que récente, la solution e-commerce Magento s est imposée très rapidement, grâce à ses fonctionnalités innovantes et la qualité de son architecture. Elle est le socle de plusieurs dizaines

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

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

OBJECTIFS DE CE GUIDE... 5 QU EST-CE QU UN DOCUMENT ACCESSIBLE... 5 LA STRUCTURE D UN DOCUMENT... 6 LES TITRES ET LES SOUS-TITRES...

OBJECTIFS DE CE GUIDE... 5 QU EST-CE QU UN DOCUMENT ACCESSIBLE... 5 LA STRUCTURE D UN DOCUMENT... 6 LES TITRES ET LES SOUS-TITRES... Diffusion de l information dans Internet Guide de création de documents Word accessibles 5 novembre 2009 OBJECTIFS DE CE GUIDE... 5 QU EST-CE QU UN DOCUMENT ACCESSIBLE... 5 LA STRUCTURE D UN DOCUMENT...

Plus en détail

2 LES BASES DU HTML 19 Qu est-ce que le HTML? 20 De quand date le HTML? 20 Écrire son propre code HTML 22

2 LES BASES DU HTML 19 Qu est-ce que le HTML? 20 De quand date le HTML? 20 Écrire son propre code HTML 22 SOMMAIRE INTRODUCTION La collection Classroom in a Book TinyUrL Conditions requises Installation du programme Copie des fichiers Classroom in a Book ordre recommandé pour les leçons Démarrage instantané

Plus en détail

CADAC Données sur les arts au Canada/Canadian Arts Data www.lecadac.ca/www.thecadac.ca

CADAC Données sur les arts au Canada/Canadian Arts Data www.lecadac.ca/www.thecadac.ca CADAC Données sur les arts au Canada/Canadian Arts Data www.lecadac.ca/www.thecadac.ca Guide de démarrage Version 1.3.1 Préparé par Dapasoft Inc. TABLE DES MATIÈRES Survol...3 Configuration nécessaire...4

Plus en détail

ASTER et ses modules

ASTER et ses modules ASTER et ses modules Sommaire Caractéristiques du site internet Rubriques et pages... page 3 Actualités... page 3 Agenda... page 4 Sons... page 4 Documents à télécharger... page 4 Liens... page 4 Albums

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

Préface. 2013 Pearson France Développement d'applications Windows 8 avec C# et XAML Jeremy Likness

Préface. 2013 Pearson France Développement d'applications Windows 8 avec C# et XAML Jeremy Likness Les prémices d informations sur Windows 8 sont apparus début 2011. Les spéculations sont allées bon train sur Internet lorsque les développeurs ont commencé à s interroger sur la nouvelle plateforme. Les

Plus en détail

RESUME DE CARRIERE. Alice JULIENNE. 23 ans Nationalité Française Développeur Web Front-End. Compétences

RESUME DE CARRIERE. Alice JULIENNE. 23 ans Nationalité Française Développeur Web Front-End. Compétences RESUME DE CARRIERE Alice JULIENNE 23 ans Nationalité Française Développeur Web Front-End Compétences Systèmes Langages Windows (XP, 98) Macintosh OS X HTML, XHTML, CSS, XML, PHP, SQL, Javascript, J-Querry

Plus en détail

WordPress : Guide à l édition

WordPress : Guide à l édition WordPress : Guide à l édition WordPress : Guide à l édition... 1 Présentation... 2 1. Accès au site... 2 2. Le tableau de bord... 2 3. Editez les contenus... 4 Quelle est la différence entre les pages

Plus en détail

Rapport de stage de graphiste chez Key Business Solutions Sàrl. Mathieu Schaller Concepteur en multimédia

Rapport de stage de graphiste chez Key Business Solutions Sàrl. Mathieu Schaller Concepteur en multimédia Rapport de stage de graphiste chez Key Business Solutions Sàrl Mathieu Schaller Concepteur en multimédia Key Business Solutions Sàrl est une entreprise de communication visuelle, de publicité et de marketing.

Plus en détail

SITE I NTERNET. Conception d un site Web

SITE I NTERNET. Conception d un site Web SITE I NTERNET Conception d un site Web Conception de votre site Web Préambule Ce document a pour but de donner une méthode de travail afin de réaliser dans les meilleures conditions un site internet.

Plus en détail

Comment faire un site Internet de classe rapidement?

Comment faire un site Internet de classe rapidement? Document numérique disponible à : http://www.aepq.ca/congres/salon-de-linformatique Comment faire un site Internet de classe rapidement? Élaboré pour le 33e congrès de l AÉPQ 15 et 16 novembre 2013 - Lévis

Plus en détail

COURADEAU Delphine 77 rue Desaix 37000 TOURS. Dossier de Synthèse de Pratique Professionnelle

COURADEAU Delphine 77 rue Desaix 37000 TOURS. Dossier de Synthèse de Pratique Professionnelle COURADEAU Delphine 77 rue Desaix 37000 TOURS Dossier de Synthèse de Pratique Professionnelle Table des critères A : Titre professionnel visé 1 B1 : Diplômes, titres ou certificats précédemment obtenus

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

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

10, rue Brulée 67000 STRASBOURG - Tél. : 06.48.03.53.12 - gs@sg-web.fr - http://www.sg-web.fr

10, rue Brulée 67000 STRASBOURG - Tél. : 06.48.03.53.12 - gs@sg-web.fr - http://www.sg-web.fr 10, rue Brulée 67000 STRASBOURG - Tél. : 06.48.03.53.12 - gs@sg-web.fr - http://www.sg-web.fr GRÉGORYSTOOS - SOMMAIRE Sommaire 1. Présentation générale & Formation 2. Parcours professionel - 2013 : Alsacréations

Plus en détail

Media queries : gérer différentes zones de visualisation

Media queries : gérer différentes zones de visualisation 2 Media queries : gérer différentes zones de visualisation Comme nous l avons vu au chapitre précédent, les CSS3 sont constituées de modules. Media queries est simplement l un d eux. Ce module permet d

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

La simplicité au service de votre activité commerciale

La simplicité au service de votre activité commerciale SOLOS DEVIS-FACTURES www.cegidstore.com/tpe La simplicité au service de votre activité commerciale Solution de Devis Factures, en mode SaaS*, simple qui s adresse aux créateurs, solos et petites structures

Plus en détail

Notes pour l utilisation d Expression Web

Notes pour l utilisation d Expression Web EICW Formation Webmaster Notes pour l utilisation d Expression Web G. Barmarin 2008-2009 1 /21 Table des matières 1 Introduction... 3 2 Installer Expression Web... 4 3 Explorer et personnaliser l interface

Plus en détail

Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites. Quelles solutions peuvent être employées?

Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites. Quelles solutions peuvent être employées? Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites Quelles solutions peuvent être employées? Présentation d une des solutions Conclusion Aujourd hui le web est

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

Responsive Design. Technologies du web. Stéphane Bouvry, 2014

Responsive Design. Technologies du web. Stéphane Bouvry, 2014 Responsive Design Technologies du web Stéphane Bouvry, 2014 1. Objectif Utilisation de CSS pour la mise en page 2. Diapos Le responsive design : http://goo.gl/dmh8is 3. Grille fluide Dans cette partie,

Plus en détail

FORMATION WEBMASTER AVANCEE :

FORMATION WEBMASTER AVANCEE : FORMATION WEBMASTER AVANCEE : OBJECTIF : 300 HEU RE S - 4 MOIS Apprendre à créer des sites internet par diverses méthodes en apprenant les bases des différents langages que constituent la création de site

Plus en détail

Avanquest Software présente la nouvelle gamme WebEasy 8

Avanquest Software présente la nouvelle gamme WebEasy 8 La Garenne Colombes, le 22 Juin 2009 Avanquest Software présente la nouvelle gamme WebEasy 8 Des logiciels pour créer simplement des sites internet de qualité professionnelle sans aucune connaissance en

Plus en détail

RÉALISATION D UN SITE DE RENCONTRE

RÉALISATION D UN SITE DE RENCONTRE RÉALISATION D UN SITE DE RENCONTRE Par Mathieu COUPE, Charlène DOUDOU et Stéphanie RANDRIANARIMANA Sous la coordination des professeurs d ISN du lycée Aristide Briand : Jérôme CANTALOUBE, Laurent BERNARD

Plus en détail

145A, avenue de Port Royal, Bonaventure (Québec) G0C 1E0 Sans frais : 1 888 765 4636 www.solutioninfomedia.com

145A, avenue de Port Royal, Bonaventure (Québec) G0C 1E0 Sans frais : 1 888 765 4636 www.solutioninfomedia.com Guide de l utilisateur CMS 1 Navigation dans le CMS... 2 1.1 Menu principal... 2 1.2 Modules tableau... 3 1.3 Modules formulaire... 5 1.4 Navigation dans le site Web en mode édition... 6 2 Utilisation

Plus en détail

Présentation de Firefox

Présentation de Firefox Présentation de Firefox A l ouverture la fenêtre ressemble a ceci. (A noter qu ici j ai ouvert la page d accueil GOOGLE) Firefox présente toutes les fonctionnalités de base d un navigateur comme Internet

Plus en détail

Comment bloquer les publicités sur : Chrome, Firefox, IE, Opera et Safari!

Comment bloquer les publicités sur : Chrome, Firefox, IE, Opera et Safari! Comment bloquer les publicités sur : Chrome, Firefox, IE, Opera et Safari! Author : soufiane Bonjour, Aujourd'hui, la plupart des sites web utilisent différents types de publicité, afin de monétiser leur

Plus en détail

AniPaint 3.1.3 mac : un tutoriel

AniPaint 3.1.3 mac : un tutoriel Objectifs du cours : -Apprendre à transposer une situation d apprentissage simple, à l aide de l informatique, à l écran -Apprendre à mettre en scène des dessins, des images, du son et du texte -Envisager

Plus en détail

Les grandes facettes du développement Web Nicolas Thouvenin - Stéphane Gully

Les grandes facettes du développement Web Nicolas Thouvenin - Stéphane Gully Les grandes facettes du développement Web Qui sommes nous? Nicolas Thouvenin Stéphane Gully Projets Web depuis 2000 LAMP, NodeJS HTML, CSS, jquery

Plus en détail

Echosgraphik. Ce document sert uniquement à vous donner une vision sur ma manière de travailler et d appréhender un projet

Echosgraphik. Ce document sert uniquement à vous donner une vision sur ma manière de travailler et d appréhender un projet Echosgraphik Ce document sert uniquement à vous donner une vision sur ma manière de travailler et d appréhender un projet Présentation I. Echosgraphik Protocoles de travail I. Développement du site II.

Plus en détail

Création de maquette web

Création de maquette web Création de maquette web avec Fireworks Il faut travailler en 72dpi et en pixels, en RVB Fireworks étant un logiciel dédié à la création de maquettes pour le web il ne propose que les pixels pour le texte

Plus en détail

ERGO web. Augmentez votre e-business grâce à une conception Web de qualité taillée sur mesure, ergonomique, innovante et créative.

ERGO web. Augmentez votre e-business grâce à une conception Web de qualité taillée sur mesure, ergonomique, innovante et créative. ERGO web Augmentez votre e-business grâce à une conception Web de qualité taillée sur mesure, ergonomique, innovante et créative. Notre philosophie Créativité, Ergonomie et Innovation sont les trois mots

Plus en détail

Manuel utilisateur. Mini-site régions. Drupal est un système de gestion de contenu (abrégé CMS en anglais) libre et open source.

Manuel utilisateur. Mini-site régions. Drupal est un système de gestion de contenu (abrégé CMS en anglais) libre et open source. Manuel utilisateur Mini-site régions Version 07/2012 Drupal est un système de gestion de contenu (abrégé CMS en anglais) libre et open source. Un CMS est un logiciel qui permet de gérer le contenu d un

Plus en détail

Introduction à PHP. Chapitre 1. Difficulté :

Introduction à PHP. Chapitre 1. Difficulté : Chapitre 1 Introduction à PHP Difficulté : C e qui fait le succès du Web aujourd hui, c est à la fois sa simplicité et sa facilité d accès. Un internaute lambda n a pas besoin de savoir «comment ça fonctionne

Plus en détail

Projet en nouvelles technologies de l information et de la communication

Projet en nouvelles technologies de l information et de la communication Projet en nouvelles technologies de l information et de la communication Site Web universitaire du Prof. Jacques Moeschler. Nono Steeve Semestre de printemps 2013 Sous la direction du Prof Luka Nerima

Plus en détail

Soyez accessible. Manuel d utilisation du CMS

Soyez accessible. Manuel d utilisation du CMS Soyez accessible. Manuel d utilisation du CMS Nameo : mode d emploi Nameo est une agence web basée en Alsace, à Strasbourg. Son champ d action : création ou refonte de sites internet, stratégie et mise

Plus en détail

WEB design. Pierre Chassany Comstone.ch vocables.com

WEB design. Pierre Chassany Comstone.ch vocables.com WEB design Pierre Chassany Comstone.ch vocables.com graphisme Méthodologie(s) «Nomadisme» Responsive web design Techno tendances design 2 graphisme La direction artistique pour le web n est pas une démarche

Plus en détail

Rapport de stage. Création d un site web. Stage du 20/01/2013 au 21/02/2013

Rapport de stage. Création d un site web. Stage du 20/01/2013 au 21/02/2013 Rapport de stage Création d un site web Stage du 20/01/2013 au 21/02/2013 Auteur : Antoine Luczak Tuteur professionnel : M. Tison Tuteur scolaire : Mme Girondon Année scolaire : 2013/2014 1 Table des matières

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

Mode d emploi du site Internet «Mediawiki»

Mode d emploi du site Internet «Mediawiki» Mode d emploi du site Internet «Mediawiki» École Libre du Soleil Levant La technologie MediaWiki a été choisie pour sa flexibilité et une simplicité d utilisation ne demandant que de connaître quelques

Plus en détail

CONFÉRENCE WEB 2.0. UPDATE ASBL Michaël Barchy 23 janvier 2013

CONFÉRENCE WEB 2.0. UPDATE ASBL Michaël Barchy 23 janvier 2013 CONFÉRENCE WEB 2.0 UPDATE ASBL Michaël Barchy 23 janvier 2013 POINTS ABORDÉS Qu est-ce que le Web 2.0? Introduction Différents aspects du Web 2.0 Aspects techniques Syndication et agrégation de contenu

Plus en détail

LANGAGUE JAVA. Public Développeurs souhaitant étendre leur panel de langages de programmation

LANGAGUE JAVA. Public Développeurs souhaitant étendre leur panel de langages de programmation ING 01 LANGAGUE JAVA Durée : 21 heures 1090 HT / jour Dates : à définir en 2012 Concevoir et développer des programmes en langage Java Comprendre le fonctionnement de la machine virtuelle S approprier

Plus en détail

CFcs. Catalogue des formations ... ... centre de formation catherine souami PAO... Mise en page. Web... Graphisme... Photo

CFcs. Catalogue des formations ... ... centre de formation catherine souami PAO... Mise en page. Web... Graphisme... Photo CFcs centre de formation catherine souami Catalogue des formations PAO Web Photo Mise en page Graphisme ( CFcs Sommaire Edito Formations PAO Photoshop Illustrator InDesign Acrobat Pro Conception graphique

Plus en détail

Modèle de changement d organisation. Leanpizza.net présente. Petit Guide Rapide du jeu de cartes Modèle de Changement d Organisation

Modèle de changement d organisation. Leanpizza.net présente. Petit Guide Rapide du jeu de cartes Modèle de Changement d Organisation Guide rapide Leanpizza.net présente Petit Guide Rapide du jeu de cartes Modèle de Changement d Organisation v1.0 Rédacteur : Olivier Lafontan Traduction : Yannick Quenec hdu Date : 29 juin 2010 - Guide

Plus en détail

CAHIER DES CHARGES. Refonte du Site : ToufikOulmi.com. 28/03/2012 - Cahier des charge «TOUFIKOULMI.COM» - S.LARVET

CAHIER DES CHARGES. Refonte du Site : ToufikOulmi.com. 28/03/2012 - Cahier des charge «TOUFIKOULMI.COM» - S.LARVET CAHIER DES CHARGES Refonte du Site : ToufikOulmi.com 1/20 SOMMAIRE 1- Contexte 2- Objectifs 3- Pérennité du site 4- Résultats attendus et publics visés 5- Contraintes 6- Délais 7- Benchmark 8- Les Contenus

Plus en détail

WEBMASTER DEESWEB DEES

WEBMASTER DEESWEB DEES Diplôme Européen délivré par la Fédération Européenne des Ecoles DEES WEBMASTER Fonction Le s adresse aux titulaires d un diplôme du 1er cycle de l enseignement supérieur dans le domaine de l informatique

Plus en détail

Référentiel Général d Accessibilité pour les Administrations RGAA

Référentiel Général d Accessibilité pour les Administrations RGAA Référentiel Général d Accessibilité pour les Administrations RGAA Annexe 3 : Grilles de correspondance entre les critères de succès et les tests de conformité Page 1/21 1. Grille de correspondance des

Plus en détail

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN LES GRANDES ETAPES DE CREATION D UN WEB DESIGN PENSER LA STRUCTURE ET LE THEME DU SITE STRUCTURE ET THEME DU SITE Taille (le site sera-t-il extensible ou fixe?) Organisation Thème Couleurs Illustrations

Plus en détail

TECHNOLOGIE DE LA COMMUNICATION, MÉDIAS ET ORGANISATIONS

TECHNOLOGIE DE LA COMMUNICATION, MÉDIAS ET ORGANISATIONS TECHNOLOGIE DE LA COMMUNICATION, MÉDIAS ET ORGANISATIONS CIM404A Septembre 2013 ELISABETH DE PABLO 1 WEB PUBLISHING - créer, éditer, publier, diffuser, animer sur le web un produit [de communication] -

Plus en détail

DEC accéléré en Soins infirmiers

DEC accéléré en Soins infirmiers P O R T R A I T S D É T U D I A N T E S I M M I G R A N T E S P A R C O U R S I N S P I R A N T S Nous vous présentons des personnes immigrantes dont le parcours de vie, professionnel et scolaire est à

Plus en détail

Création d'un Portail partagé sur l'offre de formation en région Languedoc-Roussillon

Création d'un Portail partagé sur l'offre de formation en région Languedoc-Roussillon Création d'un Portail partagé sur l'offre de formation en région Languedoc-Roussillon Retours des entretiens téléphoniques 1. Présentation du contexte : Atout Métiers LR Offre de formation L association

Plus en détail

INF 1250 INTRODUCTION AUX BASES DE DONNÉES. Guide d étude

INF 1250 INTRODUCTION AUX BASES DE DONNÉES. Guide d étude INF 1250 INTRODUCTION AUX BASES DE DONNÉES Guide d étude Sous la direction de Olga Mariño Télé-université Montréal (Québec) 2011 INF 1250 Introduction aux bases de données 2 INTRODUCTION Le Guide d étude

Plus en détail

11/02/14 SITE WEB RÉACTIFS CONTEXTE ENVIRONNEMENT NAVIGATEURS PRINCIPES GÉNÉRAUX LES POINTS DE RUPTURE

11/02/14 SITE WEB RÉACTIFS CONTEXTE ENVIRONNEMENT NAVIGATEURS PRINCIPES GÉNÉRAUX LES POINTS DE RUPTURE 11/02/14 CONTEXTE SITE WEB RÉACTIFS S. LANQUETIN ENVIRONNEMENT Clavier (standard, mini, virtuel) Souris / doigt / stylet Rotation de l écran Performances CPU et GPU Capacité de stockage GPS Mobile/fixe

Plus en détail

Approche Design Méthodologie de conduite de sites web

Approche Design Méthodologie de conduite de sites web Approche Design Méthodologie de conduite de sites web Phase 02 Concevoir le site (C) Conception visuelle N. Vanassche www.nathalievanassche.be Phase 2 (C) : Conception visuelle Facilité d utilisation:

Plus en détail

SVP j ai besoin d aide!

SVP j ai besoin d aide! SVP j ai besoin d aide! Ma première connexion J ai encore oublié mon mot de passe! Je dois valider les relevés d heures de mes intérimaires Je veux retrouver d anciens relevés d heures J imprime ou j enregistre

Plus en détail

Infolettre #18 : Les graphiques avec Excel 2010

Infolettre #18 : Les graphiques avec Excel 2010 Infolettre #18 : Les graphiques avec Excel 2010 Table des matières Introduction... 1 Hourra! Le retour du double-clic... 1 Modifier le graphique... 4 Onglet Création... 4 L onglet Disposition... 7 Onglet

Plus en détail