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

RAPPORT DE STAGEDE. CLAIRE SAVIGNY / BTS CV option Multimedia / 2010-2011

RAPPORT DE STAGEDE. CLAIRE SAVIGNY / BTS CV option Multimedia / 2010-2011 RAPPORT DE STAGEDE CLAIRE SAVIGNY / BTS CV option Multimedia / 2010-2011 SOMMAIRE 1. DÉCOUVRIR L AGENCE SON HISTOIRE SON IDENTITÉ...6 LE PERSONNEL...8 2. MES MISSIONS LES SITES WEB...10 Homepage «SELF

Plus en détail

Rapport synthèse : HTML5, CSS3, JavaScript et Baker Framework en format Hpub. Travail présenté à Madame Julie Côté Apprentissage autonome 582-FXA-06

Rapport synthèse : HTML5, CSS3, JavaScript et Baker Framework en format Hpub. Travail présenté à Madame Julie Côté Apprentissage autonome 582-FXA-06 Audrey LEHOUX Groupe A Rapport synthèse : HTML5, CSS3, JavaScript et Baker Framework en format Hpub Travail présenté à Madame Julie Côté Apprentissage autonome 582-FXA-06 Département des Techniques de

Plus en détail

Rapport individuel Génie logiciel

Rapport individuel Génie logiciel 2012 Rapport individuel Génie logiciel Dans ce rapport sera présenté l ensemble des activités effectuées au cours du projet de création de site de covoiturage «Etucovoiturage» (http://etucovoiturage.free.fr)

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

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

UNIVERSITÉ DU QUÉBEC À MONTRÉAL. Bilan de stage du DDM4600 TRAVAIL PRÉSENTÉ À. Thérèse Besner DU COURS DDM4600. Stage de préinsertion professionnelle

UNIVERSITÉ DU QUÉBEC À MONTRÉAL. Bilan de stage du DDM4600 TRAVAIL PRÉSENTÉ À. Thérèse Besner DU COURS DDM4600. Stage de préinsertion professionnelle UNIVERSITÉ DU QUÉBEC À MONTRÉAL Bilan de stage du DDM4600 TRAVAIL PRÉSENTÉ À Thérèse Besner DU COURS DDM4600 Stage de préinsertion professionnelle PAR MÉLODIE CHAMPAGNE 17 Avril 2015 C est en terminant

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

Une expérience d achat Paradyse!

Une expérience d achat Paradyse! Une expérience d achat Paradyse! Objectif Concevoir une nouvelle version du site optimisée pour la transformation, répondant aux attentes des utilisateurs dans le respect des valeurs de marque Virgin Mobile.

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

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

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

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

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

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

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

Mode d emploi d artishoc mobile

Mode d emploi d artishoc mobile Mode d emploi d artishoc mobile Version gratuite Version 4 Mise à jour le 05/01/2011 Ce mode d emploi est à l usage exclusif des utilisateurs de l offre mobile gratuite d artishoc mobile. Il n a pas de

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

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

UN PROJET MULTIMÉDIA avec les classes 702A et 712B et le logiciel MISTRALMOVIE, au Cycle d Orientation des Grandes-Communes

UN PROJET MULTIMÉDIA avec les classes 702A et 712B et le logiciel MISTRALMOVIE, au Cycle d Orientation des Grandes-Communes UN PROJET MULTIMÉDIA avec les classes 702A et 712B et le logiciel MISTRALMOVIE, au Cycle d Orientation des Grandes-Communes Buts Mise en place d une période de révision d allemand en fin de 7e année sous

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

API08 Evaluation site internet

API08 Evaluation site internet UNIVERSITE DE TECHNOLOGIE DE COMPIEGNE API08 Evaluation site internet Fédération Française des échecs Emilien NOTARIANNI Printemps 2014 Table des matières Introduction... 2 Evaluation «subjective»... 3

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

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

Bande dessinée IMG2 Cahier du participant

Bande dessinée IMG2 Cahier du participant Bande dessinée IMG2 Cahier du participant Formation continue dans un contexte d apprentissage en ligne pour l intégration des TIC dans le domaine des arts. Bonne pratic! Description du cours Titre du cours

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

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

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

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

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

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

//////////////////////////////////////////////////////////////////// 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

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

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

Coaching, Une méthode scientifique

Coaching, Une méthode scientifique Coaching, Une méthode scientifique ROSELYNE KATTAR Tout le monde parle de coaching sans savoir exactement de quoi il s agit. Afin de clarifier cette approche selon moi, je vous propose de répondre à 3

Plus en détail

Dossier de synthèse des Périodes de Formation en Milieu Professionnel 2013-2015

Dossier de synthèse des Périodes de Formation en Milieu Professionnel 2013-2015 Dossier de synthèse des Périodes de Formation en Milieu Professionnel 2013-2015 DUPUY Vincent Sommaire Présentation du candidat Présentation de l entreprise Période 1 Période 2 Période 3 Période 4 Projet

Plus en détail

Profils. COMPÉTENCE de COMMUNICATION ÉBAUCHE. ébauche ébauche ébauche ébauche ébauche ébauche

Profils. COMPÉTENCE de COMMUNICATION ÉBAUCHE. ébauche ébauche ébauche ébauche ébauche ébauche C Profils COMPÉTENCE de COMMUNICATION ÉBAUCHE ébauche ébauche ébauche ébauche ébauche ébauche C Profils COMPÉTENCE de COMMUNICATION APERÇU La compétence de communication englobe l ensemble des aptitudes

Plus en détail

Sémiologie de l image fonctionnelle. Le phénomène de la retouche photographique. Travail présenté à. Monsieur Luc Saint-Hilaire.

Sémiologie de l image fonctionnelle. Le phénomène de la retouche photographique. Travail présenté à. Monsieur Luc Saint-Hilaire. Sémiologie de l image fonctionnelle Le phénomène de la retouche photographique Travail présenté à Monsieur Luc Saint-Hilaire Par Stéphanie Messervier Université Laval École des arts visuels Le 26 novembre

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

Guide de l étudiant Mon cours en ligne. 27 juin 2015 Institut Français d Espagne Innovation pédagogique et multimédia Institut français de Madrid

Guide de l étudiant Mon cours en ligne. 27 juin 2015 Institut Français d Espagne Innovation pédagogique et multimédia Institut français de Madrid Guide de l étudiant Mon cours en ligne 27 juin 2015 Institut Français d Espagne Innovation pédagogique et multimédia Institut français de Madrid Ce guide vous accompagnera tout au long de votre formation.

Plus en détail

Rapport de Stage Pulido Julien. BTS SIO 2ème année Option Solutions Logicielles et Applications Métiers

Rapport de Stage Pulido Julien. BTS SIO 2ème année Option Solutions Logicielles et Applications Métiers BTS SIO 2ème année Option Solutions Logicielles et Applications Métiers 19 Janvier au 6 Mars 2015 BTS SIO 2ème année Table des matières I. REMERCIEMENTS... 2 II. PRESENTATION DE L ENTREPRISE... 3 III.

Plus en détail

Via emeeting & elearning Accéder à une séance virtuelle (en direct ou en différé)

Via emeeting & elearning Accéder à une séance virtuelle (en direct ou en différé) Via emeeting & elearning Accéder à une séance virtuelle (en direct ou en différé) Via emeeting & elearning (Via) est une application web qui permet de suivre des cours à distance en temps réel. Via permet

Plus en détail

Rapport de production

Rapport de production Rapport de production Evaluation personnelle Lieu de stage : Dasmuse Maître de stage : Daniel Leivas Maître de pratique professionnel : Laeticia Pottiez Jounaid Hayani - EMU2-2014-2015 Rapport de production

Plus en détail

Rapport de Post- Campagne 1

Rapport de Post- Campagne 1 Rapport de Post- Campagne 1 Résumé - La campagne Adwords que nous avons mené pour Galerie Photo-Originale a duré 21 jours (5.05-26.05) et nous a coûté $250,18. L objectif principal est en premier de stimuler

Plus en détail

MODELE D UN RAPPORT DE STAGE DE BAC PRO ELECTROTECHNIQUE

MODELE D UN RAPPORT DE STAGE DE BAC PRO ELECTROTECHNIQUE MODELE D UN RAPPORT DE STAGE DE BAC PRO ELECTROTECHNIQUE [Prénom Nom] Rapport sur le stage effectué du [date] au [date] Dans la Société : [NOM DE LA SOCIETE : Logo de la société] à [Ville] [Intitulé du

Plus en détail

PhotoFiltre 7 : Taille des images (10-2014)

PhotoFiltre 7 : Taille des images (10-2014) PhotoFiltre 7 : Taille des images (10-2014) 1 Taille de l'image Utilisation La commande «Taille de l'image» permet de modifier les dimensions en pixels, la résolution et la taille d'impression de l image.

Plus en détail

Foire aux questions du Grand dictionnaire terminologique

Foire aux questions du Grand dictionnaire terminologique Foire aux questions du Grand dictionnaire terminologique Office québécois de la langue française Juin 2012 1 Brève description du GDT 1. Qu est-ce que le GDT? 2. Pourquoi ne puis-je obtenir une traduction

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

Lycée polyvalent Langevin-Wallon Champigny sur Marne Val de Marne

Lycée polyvalent Langevin-Wallon Champigny sur Marne Val de Marne Ministère de l éducation nationale Académie de Créteil LW JEAN-MICHEL NICOLAS CHEF DE TRAVAUX : 01 48 81 25 02 : 01 48 81 31 83 jean-michel.nicolas@ac-creteil.fr Version 2015.0 2015-08-23 Lycée polyvalent

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

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

Le trésor du pirate (4 e )

Le trésor du pirate (4 e ) Le trésor du pirate (4 e ) Cyril MICHAU Collège R. Descartes, 93 Le-Blanc-Mesnil. Niveau Concerné Quatrième. Modalité Il est possible de réaliser ce travail en salle informatique par binôme, ou bien en

Plus en détail

Des logiciels pour innover en mathématique au primaire

Des logiciels pour innover en mathématique au primaire Les dossiers Carrefour éducation Logiciels éducatifs Des logiciels pour innover en mathématique au primaire par Manon Murray Enseignante au 3e cycle du primaire à la commission scolaire Des Sommets et

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

Document d orientation GESTION DU PERSONNEL GESTION D UNE ÉQUIPE DE VENTE

Document d orientation GESTION DU PERSONNEL GESTION D UNE ÉQUIPE DE VENTE Document d orientation GESTION DU PERSONNEL GESTION D UNE ÉQUIPE DE VENTE Mise à jour: février 2015 Document d orientation Bienvenue aux cours de Gestion du personnel et Gestion d une équipe de vente Le

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

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

DETERMINER LA LARGEUR DE PAGE D'UN SITE et LES RESOLUTIONS d'ecran

DETERMINER LA LARGEUR DE PAGE D'UN SITE et LES RESOLUTIONS d'ecran DETERMINER LA LARGEUR DE PAGE D'UN SITE et LES RESOLUTIONS d'ecran dossier par Clochar SOMMAIRE 1. LES RESOLUTIONS d'ecran... 1 2. RESOLUTION de l écran et choix de la TAILLE DE LA PAGE... 2 3. AGRANDISSEMENT

Plus en détail

E-LECLERC LEVALUATION DU SITE WEB. A. Evaluation «subjective» du site web. 1. Choix du site web. 2. Présentation le site A P I 0 8 1 1 / 0 3 / 2 0 1 4

E-LECLERC LEVALUATION DU SITE WEB. A. Evaluation «subjective» du site web. 1. Choix du site web. 2. Présentation le site A P I 0 8 1 1 / 0 3 / 2 0 1 4 LEVALUATION DU SITE WEB E-LECLERC A P I 0 8 1 1 / 0 3 / 2 0 1 4 A. Evaluation «subjective» du site web 1. Choix du site web J ai choisi de réaliser l évaluation «subjective» sur le site web : www.e-leclerc.com,

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

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

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

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

J aime bien la lecture. Quand je prends Taoki, j arrive bien à lire et ma mère elle me gronde même pas! Il faut apprendre tout doucement.

J aime bien la lecture. Quand je prends Taoki, j arrive bien à lire et ma mère elle me gronde même pas! Il faut apprendre tout doucement. J aime bien la lecture. Quand je prends Taoki, j arrive bien à lire et ma mère elle me gronde même pas! Il faut apprendre tout doucement. On réfléchit, on a les mots dans sa tête, on les lit à l école

Plus en détail

Maîtriser son clavier et apprivoiser sa souris

Maîtriser son clavier et apprivoiser sa souris Maîtriser son clavier et sa souris - 13 janvier 2014 p 1 Maîtriser son clavier et apprivoiser sa souris Le but de ce petit tutoriel est de vous aider à mieux connaître votre clavier, à insérer tous les

Plus en détail

ETUDE D USAGE D ALPHALIRE

ETUDE D USAGE D ALPHALIRE ETUDE D USAGE D ALPHALIRE Festival du premier roman de Chambéry-Savoie Festival du premier roman de Chambéry, 237 carré Curial, 73 000 Chambéry Directrice : Véronique Bourlon (veroniquebourlon@festivalpremierroman.com)

Plus en détail

ADAPTATION DES INTERFACES. ROUYER Florian et BENNOUR Salah

ADAPTATION DES INTERFACES. ROUYER Florian et BENNOUR Salah ADAPTATION DES INTERFACES ROUYER Florian et BENNOUR Salah SOMMAIRE Sujet Android Ionic Comparaison Conclusion Sujet Plateforme de partage de livres Fonctionnalités : Géolocalisation Visualisation Map Visualisation

Plus en détail

PROGRAMME DE FORMATION EN LIGNE de l ADMQ

PROGRAMME DE FORMATION EN LIGNE de l ADMQ PROGRAMME DE FORMATION EN LIGNE de l ADMQ DG performant, municipalité efficiente! Vous êtes : - un gestionnaire municipal avec peu ou beaucoup d expérience - un employé municipal envisageant la direction

Plus en détail

Fiche PM300 - Préparer le planning d un projet. 1.Introduction : un outil en support...2. 2.Première étape : La création des ressources...

Fiche PM300 - Préparer le planning d un projet. 1.Introduction : un outil en support...2. 2.Première étape : La création des ressources... Fiche PM300 - Préparer le planning d un projet Table des matières 1.Introduction : un outil en support...2 2.Première étape : La création des ressources...3 3.Deuxième étape : Le canevas méthodologique

Plus en détail

Vos commentaires sur la pertinence de ce cours dans le programme

Vos commentaires sur la pertinence de ce cours dans le programme Évaluation de l enseignement COMMENTAIRES Activité : GSF-6008-S (82526) Finance corporative Enseignant : Jean-François Guimond Session : Automne 2012 Méthode d évaluation : Papier Date de l évaluation

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

Accéder à la plate-forme Via. À partir du site Internet Via de HEC. À partir du courriel d invitation

Accéder à la plate-forme Via. À partir du site Internet Via de HEC. À partir du courriel d invitation Accéder à (ou revoir) une classe virtuelle Via Via emeeting & elearning (Via), de SVI esolutions, est une application web qui permet de suivre des cours à distance en temps réel. Via permet à l enseignant

Plus en détail

SESAF UAT MODE D EMPLOI DU LOGICIEL. Système de réservation des unités d accueil temporaire www.ciad.ch/uat/ Module PARENTS

SESAF UAT MODE D EMPLOI DU LOGICIEL. Système de réservation des unités d accueil temporaire www.ciad.ch/uat/ Module PARENTS MODE D EMPLOI DU LOGICIEL SESAF UAT www.ciad.ch/uat/ Module PARENTS Service de l Enseignement Spécialisé et de l Appui à la Formation (SESAF) Rue Cité-Devant 11 1014 Lausanne Réalisé par la société AdmGest

Plus en détail

... ensuite, cliquez sur la section pour Windows http://xserver.csvdc.qc.ca/recit_csvdc_partage/ 2. Vous pouvez aussi télécharger

... ensuite, cliquez sur la section pour Windows http://xserver.csvdc.qc.ca/recit_csvdc_partage/ 2. Vous pouvez aussi télécharger Traitement d images dans un contexte pédagogique avec le logiciel... (gratuit) Sujets : 1. Installer le logiciel 2. Définir celui-ci par défaut pour vos images 3. Différents formats des fichiers d images

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

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

CROSS PLATEFORM MOBILE DEVELOPMENT (Phonegap, RhoMobile)

CROSS PLATEFORM MOBILE DEVELOPMENT (Phonegap, RhoMobile) INGENIEUR EN SCIENCES INFORMATIQUES RAPPORT D ETUDE TECHNOLOGIQUE SUR LES SOLUTIONS WEB CROSS PLATEFORM MOBILE DEVELOPMENT (Phonegap, ) Student : Jiachen NIE Parcours: IHM Subject : Adaptation des Interfaces

Plus en détail

Contexte PPE GSB CR. Analyse. Projet réalisé :

Contexte PPE GSB CR. Analyse. Projet réalisé : Contexte PPE GSB CR Le laboratoire est issu de la fusion entre le géant américain Galaxy et le conglomérat Swiss Bourdin. Cette fusion a eu pour but de moderniser l activité de visite médicale et de réaliser

Plus en détail

Pédagogie inversée 35. Pédagogie inversée

Pédagogie inversée 35. Pédagogie inversée Pédagogie inversée 35 Pédagogie inversée 36 Pédagogie inversée «Le numérique nous recentre sur les apprentissages.» Ces derniers temps, on voit (re)fleurir la pédagogie inversée ou Flip Classroom, une

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

Plateforme AnaXagora. Guide d utilisation

Plateforme AnaXagora. Guide d utilisation Table des matières 1. PRESENTATION DE LA PLATE-FORME D APPRENTISSAGE ANAXAGORA... 3 2. ARCHITECTURE FONCTIONNELLE... 4 3. L APPRENTISSAGE... 5 3.1. L ESPACE DE TRAVAIL... 5 3.1.1. Le calendrier... 5 4.

Plus en détail

Services bancaires par Internet aux entreprises. Guide pratique pour : Rapports de solde Version 8.05.22

Services bancaires par Internet aux entreprises. Guide pratique pour : Rapports de solde Version 8.05.22 Services bancaires par Internet aux entreprises Guide pratique pour : Rapports de solde Version 8.05.22 Table des matières Avez-vous besoin d aide?... 3 Exigences informatiques... 4 Navigateurs acceptés...

Plus en détail

Paris Web 2007 Utilisateurs et décideurs : comment les réconcilier? Paris Web 2007 - Myriam LORANT Utilisateurs et décideurs : à hue et à dia!

Paris Web 2007 Utilisateurs et décideurs : comment les réconcilier? Paris Web 2007 - Myriam LORANT Utilisateurs et décideurs : à hue et à dia! Paris Web 2007 Utilisateurs et décideurs : comment les réconcilier? 1 - Côté Cour : pour le décideur a) Définition du décideur Il est la personne à l'origine du projet. Il représente une entreprise, un

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

HERVIEU Valentin ODDON Agathe LU Jigang. SI28 - Projet intéractif. Initiation à la langue chinoise

HERVIEU Valentin ODDON Agathe LU Jigang. SI28 - Projet intéractif. Initiation à la langue chinoise HERVIEU Valentin ODDON Agathe LU Jigang SI28 - Projet intéractif Initiation à la langue chinoise 1 Introduction En tant que groupe franco-chinois et étudiants en génie informatique, nous avons décidé d

Plus en détail

RÉALISATION D UNE IDENTITÉ VISUELLE ET D UN SITE INTERNET POUR LA NOUVELLE CHAINE «6TER»

RÉALISATION D UNE IDENTITÉ VISUELLE ET D UN SITE INTERNET POUR LA NOUVELLE CHAINE «6TER» RÉALISATION D UNE IDENTITÉ VISUELLE ET D UN SITE INTERNET POUR LA NOUVELLE CHAINE «6TER» EXAMEN GÉNÉRAL//WEB3AN/2012 JÉRÔME BRAZ SOMMAIRE Contexte / Projet ------- p1 Roughs ------- p2 Roughs Vectorisés

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

Retour d expérience : atelier «reportage numérique» (Doc AMP n 8 - Dossier Nouvelles technologies au service de l AMP - page 10)

Retour d expérience : atelier «reportage numérique» (Doc AMP n 8 - Dossier Nouvelles technologies au service de l AMP - page 10) Retour d expérience : atelier «reportage numérique» (Doc AMP n 8 - Dossier Nouvelles technologies au service de l AMP - page 10) Interview complète d Aurore Deschamps Aurore DESCHAMPS, ancienne stagiaire

Plus en détail

RÉSUMÉ DU TRAVAIL DE DIPLÔME

RÉSUMÉ DU TRAVAIL DE DIPLÔME Filière d'informatique de gestion Travail de diplôme ÉTUDE ORACLE XE & APEX RÉSUMÉ DU TRAVAIL DE DIPLÔME AUTEUR: BRUNO DA COSTA RESPONSABLE DU PROJET: FABRICE CAMUS MANDANT: LABORATOIRE DE GÉNIE LOGICIEL

Plus en détail

Votre enfant a aimé faire partie du programme de l anglais intensif. Votre enfant parle mieux anglais qu'avant 4% 4% 100% 92% 1 élève déjà bilingue

Votre enfant a aimé faire partie du programme de l anglais intensif. Votre enfant parle mieux anglais qu'avant 4% 4% 100% 92% 1 élève déjà bilingue Votre enfant a aimé faire partie du programme de l anglais intensif Votre enfant parle mieux anglais qu'avant 10 4% 4% 92% 1 élève déjà bilingue 3 Votre enfant comprend mieux l'anglais qu'avant 4% 4% Votre

Plus en détail

Versus Etude Technologique

Versus Etude Technologique VS Versus Etude Technologique 1 VS Contents Introduction... 3 Présentation des technologies... 3 Phonegap... 3... 3 Pour quels besoins?... 4 Comment ça fonctionne? Les models... 4 Phonegap... 5... 6 Comparatif...

Plus en détail

Débuter avec Easyweb B

Débuter avec Easyweb B Débuter avec Easyweb B Sommaire :. Vous êtes utilisateur.... Connexion à Easyweb B en tant que responsable :... 5. Vous êtes gestionnaire :... 6. Vous êtes formateur :... 7 3. Création de plusieurs bureaux...

Plus en détail

Introduction @ 1. La gamme Microsoft Expression

Introduction @ 1. La gamme Microsoft Expression La gamme Microsoft Expression Microsoft propose déjà dans son catalogue des outils orientés graphisme ou destinés à la création de sites web. Avec l arrivée de Vista et plus précisément d une couche nommée

Plus en détail

En proposant une formation souvent moins onéreuse et plus

En proposant une formation souvent moins onéreuse et plus CHAPITRE UN EXEMPLES DE FORMATIONS EN LIGNE En proposant une formation souvent moins onéreuse et plus pratique que les autres méthodes, l apprentissage en ligne est aujourd hui en train de transformer

Plus en détail

27. Projet d exposé. Français 20-2. Discours analytique : Des vampires aux Bermudes. Cahier de l élève. Nom :

27. Projet d exposé. Français 20-2. Discours analytique : Des vampires aux Bermudes. Cahier de l élève. Nom : 27. Projet d exposé Discours analytique : Des vampires aux Bermudes Français 20-2 Cahier de l élève Nom : Des vampires aux Bermudes DESCRIPTION DU PROJET Tu auras l occasion de faire un exposé où tu analyseras

Plus en détail

Compte rendu : Entretiens Utilisateurs

Compte rendu : Entretiens Utilisateurs Compte rendu : Entretiens Utilisateurs Entretien 1 : Yvan Quelle est votre tranche d âge Celle de vos parents et grands-parents Yvan : < 60 ans, Mère : environ 50 ans, Grand-mère : environ 80 ans Combien

Plus en détail

MINI-MÉMOIRE DE PPP - S4

MINI-MÉMOIRE DE PPP - S4 MINI-MÉMOIRE DE PPP - S4 Par [OUAZAR ARIS-ARAB] [S4-G2] [AYME OLIVIA] TABLE DES MATIÈRES ANALYSE DE L ENTREPRISE # PRESENTATION DE L ENTREPRISE # LISTE ET DESCRIPTION DES DIFFERENTS METIERS REPRESENTES

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

Créer son questionnaire en ligne avec Google Documents

Créer son questionnaire en ligne avec Google Documents Créer son questionnaire en ligne avec Google Documents (actualisation et précision de l article paru sur http://www.marketing- etudiant.fr/actualites/collecte-donnees.php) Se connecter avec son compte

Plus en détail

ACCOMPAGNTRICE MODÉRATRICE Application du tome 1

ACCOMPAGNTRICE MODÉRATRICE Application du tome 1 ACCOMPAGNTRICE MODÉRATRICE Application du tome 1 J ai le goût de partager avec vous mes expériences de vie qui en 2003 ont créé un précédent incontestable lors de la parution de mon livre : Changez votre

Plus en détail