Prototyper un site web avec Awestruct et Boostrap

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

Download "Prototyper un site web avec Awestruct et Boostrap"

Transcription

1 Prototyper un site web avec Awestruct et Boostrap

2 On va parler de... Prototype Awestruct Bootstrap Bonus (GitHub, JSF)

3 Prototyper : pourquoi? Mettre tout le monde d'accord Avoir un support concret Aide pour rédiger les specs Montrer autre chose que des tonnes de papier au client Faire autre chose que rédiger des tonnes de papier pour le client

4 Prototyper : comment? Léger Portable Agile Rapide Dynamique Hot-deploy Responsive Réel Bon marché

5 Prototyper : comment? Application Java EE HTML pur PHP Générateur en ligne Awestruct

6 Prototyper : comment? Application Java EE : un peu lourd HTML pur PHP Générateur en ligne Awestruct

7 Prototyper : comment? Application Java EE HTML pur : copier, coller, copier, coller,... PHP Générateur en ligne Awestruct

8 Prototyper : comment? Application Java EE HTML pur PHP : sérieusement? Générateur en ligne Awestruct No comment

9 Prototyper : comment? Application Java EE HTML pur PHP Générateur en ligne : trop de limitations Awestruct

10 Prototyper : comment? Application Java EE HTML pur PHP Générateur en ligne Awestruct : essayons donc ça!

11 Awestruct Ruby (désolé...) HTML HAML Textile SASS Layout Extensions

12 Awestruct : installer $ sudo apt-get install rubygems $ sudo gem install awestruct That's it!

13 Awestruct : démarrer $ mkdir prototype $ cd prototype $ awestruct --init $ awestruct -d That's it again!

14 Awestruct : qu'avons-nous là? Configuration Extensions Layouts Génération Code

15 Awestruct : fonctionnement Templating Tout est page Import Layout Variables Profils Extensions Attributs Tags N'importe quoi

16 Awestruct : fonctionnement Scan du projet Génération des pages Extensions Génération du site

17 Awestruct : extensions & helpers Indexifier Posts Paginator Atomizer Tagger TagCloud DataDir IntenseDebate Disqus Flattr Textil Partial Google Analytics No limit!

18 Bilan intermédiaire Nous avons : Nous n'avons pas : Site léger Design Portable Responsive Dynamique Réel Hot-deploy En résumé : ça marche, mais c'est moche...

19 Bootstrap Deux fichiers CSS Design de base Design responsive Un fichier JavaScript Deux images Icônes noirs Icônes blancs Et c'est tout!

20 Bootstrap : philosophie Responsive Modulaire Simple Documenté Production ready Les classes CSS sont reines Les attributs data-* sont rois

21 Bootstrap : grille responsive Un conteneur fixe ou fluide Fixe : largeur connue Fluide : largeur 100% Une grille de 12 colonnes

22 Bootstrap : grille responsive Environnement Largeur Colonne fixe Marge fixe Colonne fluide Marge fluide Smartphone <= 480px Fluide Fluide Fluide Fluide De smartphone à tablette 481px 767px Fluide Fluide Fluide Fluide Tablette en mode paysage 768px 989px 42px 20px % % Défaut 980px 1199px 60px 20px % % Ecran large >= 1200px 70px 30px % %

23 Bootstrap : grille responsive

24 Bootstrap : classes CSS a a.btn a.btn.btn-primary a.btn.btn-primary.btn-large a.btn.btn-primary.btn-large.disabled

25 Bootstrap : classes CSS table.table table.table.table-striped table.table.tablestriped.table-bordered table.table.tablebordered

26 Bootstrap : design

27 Bootstrap : design

28 Bootstrap : design

29 Bootstrap : design

30 Bootstrap : icônes

31 Bootstrap : attributs data-* Envie d'effets modernes? Pas le temps de faire du JavaScript? Pas envie de faire du JavaScript? La flemme d'apprendre le JavaScript? Vous ne savez pas ce qu'est le JavaScript? Bootstrap à la rescousse!

32 Bootstrap : modal panel <a class= btn data-toggle= modal href= #modalpanel >Afficher</a> <div id= modalpanel class= modal > <div class= modal-header > <button class="close" data-dismiss="modal"> </button> <h3>modal header</h3> </div> <div class="modal-body"> <p>one fine body...</p> </div> </div>

33 Bootstrap : dropdown <ul class= nav > <li id= dropdown class= dropdown > <a class="dropdown-toggle" data-toggle="dropdown" href="#dropdown">dropdown<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li class="divider"></li> <li><a href="#">separated link</a></li> </ul> </li> </ul>

34 Boostrap : résumé Classes CSS JavaScript et data-* Grille responsive Modal panel Boutons Dropdown Tables Onglet Listes Tooltip Formulaires Boutons (split, radio,...) Labels Spy bar Badges Collapse Miniatures Carousel Barres de chargement Typehead

35 Bootstrap : aller plus loin Réalisez votre propre thème visuel Générateur en ligne A la main Utilisez SASS ou LESS

36 Bonus JSF (Java Server Faces) Support des attributs data-* : ticket 1090 de la spec RichFaces Sandbox : premiers composants JSF basés sur Bootstrap is evil! GitHub username.github.com gh-pages branch Script.sh to deploy and push

37 Ressources Awestruct Bootstrap Site officiel Site officiel Site Arquillian Gallerie de sites Référence HAML Gallerie de design

38 Questions?

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

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

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

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

Bootstrap 3 INTRODUCTION. À l origine, projet interne lancé au sein de l entreprise Twitter

Bootstrap 3 INTRODUCTION. À l origine, projet interne lancé au sein de l entreprise Twitter INTRODUCTION À l origine, projet interne lancé au sein de l entreprise Twitter Août 2011 Bootstrap V1, Janvier 2012 Bootstrap V2, Août 2013 Bootstrap V3 Bootstrap est un frameworks HTML/CSS Bibliothèque

Plus en détail

Nouveautés joomla 3 1/14

Nouveautés joomla 3 1/14 Nouveautés joomla 3 1/14 Table des matières 1 Responsive... 1 2 Bootstrap... 1 3 LESS CSS intégré... 1 4. JUI (pour les développeurs d'extensions)... 1 5. Le Mambo days vs le Génial UX... 2 6. 7 étapes

Plus en détail

Module Criteo Tags et Flux pour Magento

Module Criteo Tags et Flux pour Magento Module Criteo Tags et Flux pour Ma Module Criteo Tags et Flux pour Ma Documentation Auteur : Web In Color Date : 23 décembre 2014 Version : 1.3.1 Compatibilité : Ma 1.5.x 1.9.x Nom du document : wic_criteo_fr.pdf

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

Programme de Formation

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

Plus en détail

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

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

Plus en détail

Présentation de Muse

Présentation de Muse Présentation de Muse J. ROMAGNY 1. CONSEILS... 4 2. INTERFACE... 5 A. CREATION DE SITE... 5 960 Grid System avec Muse... 6 B. PLAN DU SITE... 7 C. CONCEPTION (EDITION DES «MASTER PAGES» ET PAGES)... 8

Plus en détail

Utilisation de l éditeur.

Utilisation de l éditeur. Utilisation de l éditeur. Préambule...2 Configuration du navigateur...3 Débloquez les pop-up...5 Mise en évidence du texte...6 Mise en évidence du texte...6 Mise en page du texte...7 Utilisation de tableaux....7

Plus en détail

Les templates. Chapitre 7. 1. Principes et généralités

Les templates. Chapitre 7. 1. Principes et généralités 351 Chapitre 7 Les templates 1. Principes et généralités Les templates Nous utilisons le mot anglais de template, car il est communément utilisé, répandu, et compris dans ce contexte par les professionnels.

Plus en détail

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 jquery Mobile La bibliothèque JavaScript pour le Web mobile É r i c S a r r i o n Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 1 Installation de jquery Mobile

Plus en détail

Projet Covoiturage TP 1

Projet Covoiturage TP 1 Projet Covoiturage TP 1 Description du thème Ce TP est le premier d une série mettant en œuvre le développement mobile en utilisant la bibliothèque jquery Mobile. Propriétés Description Intitulé long Formation

Plus en détail

Introduction à Dreamweaver CS4

Introduction à Dreamweaver CS4 Introduction à Dreamweaver CS4 Adobe Dreamweaver (anciennement Macromedia Dreamweaver) est un éditeur de site web de type «tel écrit tel écran» (cette formule remplaçant désormais dans la terminologie

Plus en détail

ÉDITEUR MANUAL D UTILISATION :

ÉDITEUR MANUAL D UTILISATION : MANUAL D UTILISATION : ÉDITEUR Système «drag & drop» :... 2 1. Gestionnaire de contenus... 3 2. Éditeur du style... 5 3. Ajouter des éléments... 6 4. Annuler/Rétablir... 13 5. Enregistrer... 13 Quand nous

Plus en détail

cbox VOS FICHIERS DEVIENNENT MOBILES! POUR ORDINATEURS DE BUREAU ET PORTABLES WINDOWS ÉDITION PROFESSIONNELLE MANUEL D UTILISATION

cbox VOS FICHIERS DEVIENNENT MOBILES! POUR ORDINATEURS DE BUREAU ET PORTABLES WINDOWS ÉDITION PROFESSIONNELLE MANUEL D UTILISATION cbox VOS FICHIERS DEVIENNENT MOBILES! POUR ORDINATEURS DE BUREAU ET PORTABLES WINDOWS ÉDITION PROFESSIONNELLE MANUEL D UTILISATION Introduction L application cbox peut-être installée facilement sur votre

Plus en détail

Tutoriel Ionic framework

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

Plus en détail

Module M1105 5. Frameworks web

Module M1105 5. Frameworks web Module M1105 5. Frameworks web Sébastien THON DUT Informatique 1ère année IUT d'aix-marseille Université, site d Arles Département Informatique Version 1.0 du 15/09/2015 2 INTRODUCTION On a vu comment

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

GUIDE CONFIGURATION. KBox sous Windows

GUIDE CONFIGURATION. KBox sous Windows GUIDE CONFIGURATION KBox sous Windows TABLE DES MATIERES 2. INTRODUCTION... 2 3. INSTALLATION... 3 TELECHARGEMENT DE L EXECUTABLE... 3 INSTALLATION DE KBOX... 3 4. CONFIGURATION DE LA KBOX... 7 EDITION

Plus en détail

Logiciel : GLPI Version : 0.72.4 SYNCRHONISATION DE GLPI AVEC ACTIVE DIRECTORY. Auteur : Claude SANTERO Config. : Windows 2003.

Logiciel : GLPI Version : 0.72.4 SYNCRHONISATION DE GLPI AVEC ACTIVE DIRECTORY. Auteur : Claude SANTERO Config. : Windows 2003. Ce document est libre de droit, merci simplement de respecter son auteur. Toutes remarques ou commentaires seront les bienvenues. ATTENTION : La mise à jour par script entre GLPI et Active Directory ne

Plus en détail

Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2014/2015)

Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2014/2015) Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2014/2015) Conception de Sites Web Dynamiques : TD 2 HTML5 statique, feuille de style CSS, Mise en page, Framework Bootstrap http://www.labri.fr/perso/preuter/cswd2015

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

Intégrateur Web HTML5 CSS3

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

Plus en détail

FORMATION WEBMASTER 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

ADOBE DREAMWEAVER. contact@mandyben.com www.mandyben-formation.com

ADOBE DREAMWEAVER. contact@mandyben.com www.mandyben-formation.com ADOBE DREAMWEAVER Public : Webmasters, créateur de sites Internet, maquettistes, infographistes, responsables communication, chefs de projet. Pré-requis : Bonne connaissance de l environnement Mac ou Windows).

Plus en détail

Créer son site web. Avec la distribution e-change http://www.plateforme-echange.org/ Benoît Mamet Cédric Morin

Créer son site web. Avec la distribution e-change http://www.plateforme-echange.org/ Benoît Mamet Cédric Morin Créer son site web Avec la distribution e-change http://www.plateforme-echange.org/ Benoît Mamet Cédric Morin 1 Personnaliser l'apparence du site Avec la distribution e-change 2 La version rapide 3 Choisir

Plus en détail

TP N 4. Par défaut, la page d accueil affiche les 10 derniers articles publiés.

TP N 4. Par défaut, la page d accueil affiche les 10 derniers articles publiés. TP N 4 Page d accueil Wordpress Ojectif Gérer du texte avec des images Accueil par défaut Par défaut, la page d accueil affiche les 10 derniers articles publiés. Nous souhaitons une page d accueil avec

Plus en détail

AdOps Spécifications techniques publicitaires

AdOps Spécifications techniques publicitaires AdOps Spécifications techniques publicitaires Matériel publicitaire HTML5 (Desktop) Les spécifications suivantes doivent être respectées pour la fourniture de matériel publicitaire HTML. Si vous utilisez

Plus en détail

Documentation Numérique. U"liser un framework, Bootstrap

Documentation Numérique. Uliser un framework, Bootstrap Documentation Numérique U"liser un framework, Bootstrap 1 Un framework, c est quoi? «un ensemble de composants structurés qui sert à créer les fonda"ons et à organiser le code informa"que pour faciliter

Plus en détail

cbox VOS FICHIERS DEVIENNENT MOBILES! POUR SMARTPHONES ET TABLETTES ANDROID MANUEL D UTILISATION

cbox VOS FICHIERS DEVIENNENT MOBILES! POUR SMARTPHONES ET TABLETTES ANDROID MANUEL D UTILISATION cbox VOS FICHIERS DEVIENNENT MOBILES! POUR SMARTPHONES ET TABLETTES ANDROID MANUEL D UTILISATION Introduction L application cbox peut-être installée facilement sur votre ordinateur. Une fois l installation

Plus en détail

Création d un formulaire de contact Procédure

Création d un formulaire de contact Procédure Création d un formulaire de contact Procédure Description : Cette procédure explique en détail la création d un formulaire de contact sur TYPO3. Outil Procédure CMS: TYPO3 Auteur : hemmer.ch SA Extension:

Plus en détail

PRETASHOP. Etre à l'aise avec l'utilisation d'un ordinateur et d'internet. Maitriser les bases de Microsoft Word.

PRETASHOP. Etre à l'aise avec l'utilisation d'un ordinateur et d'internet. Maitriser les bases de Microsoft Word. PRETASHOP LES OBJECTIFS : Vous verrez comment installer Joomla! localement puis sur un serveur distant, concevoir l organisation de votre site, rédiger vos premiers articles, maitriser les feuilles de

Plus en détail

Aide à l utilisation du logiciel IziSpot.Mobi

Aide à l utilisation du logiciel IziSpot.Mobi 1 Sommaire 1. Description logiciel (explication des menus)... 3 1.1. Description de la barre de menu... 3 2. Onglet configuration... 4 2.1. Gestion du logo... 4 2.1.1. Affichage du zoom... 4 2.1.2. Disposition

Plus en détail

Freeway 7. Nouvelles fonctionnalités

Freeway 7. Nouvelles fonctionnalités ! Freeway 7 Nouvelles fonctionnalités À propos de ce guide... 3 Nouvelles fonctionnalités en un coup d'oeil... 3 À propos de la conception d'un site web réactif... 3 Travailler avec les pages pour créer

Plus en détail

Initiation à la Prog. Sous Android (Session 1) med.hossam@gmail.com

Initiation à la Prog. Sous Android (Session 1) med.hossam@gmail.com Initiation à la Prog. Sous Android (Session 1) med.hossam@gmail.com Plan Statistiques Différences entre Mobile App, Mobile Site et Web App Développement pour terminaux mobiles Outils de développement pour

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

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

Auteur LARDOUX Guillaume Contact guillaume.lardoux@epitech.eu Année 2014 DEVELOPPEMENT MOBILE AVEC CORDOVA

Auteur LARDOUX Guillaume Contact guillaume.lardoux@epitech.eu Année 2014 DEVELOPPEMENT MOBILE AVEC CORDOVA Auteur LARDOUX Guillaume Contact guillaume.lardoux@epitech.eu Année 2014 DEVELOPPEMENT MOBILE AVEC CORDOVA Sommaire 1. Introduction 2. Installation 3. Fonctionnement 4. Développement 5. Démonstration 2

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

MyECP Development. let s get to it!

MyECP Development. let s get to it! MyECP Development let s get to it! Plan 1.Git et Gitlab 2.Installation du projet 3.Fonctionnement (workflow) 4.Techno & architecture du code Git et Gitlab In Git we trust Git : le travail à plusieurs Git

Plus en détail

CRÉATION D UN SITE INTERNET. Document de travail =================================== SOMMAIRE

CRÉATION D UN SITE INTERNET. Document de travail =================================== SOMMAIRE CONCEPTION RÉALISATION HÉBERGEMENT CRÉATION D UN SITE INTERNET Document de travail Aide à l établissement du cahier des charges. Ce document aborde les thèmes principaux de la mise en place d un site Internet

Plus en détail

Gestion Informatique : Fiche outils Excel 1. Sommaire

Gestion Informatique : Fiche outils Excel 1. Sommaire Gestion Informatique : Fiche outils Excel 1 Sommaire Qu'est ce qu'un tableur Page 2 Lancement d'excel Page 2 Présentation de l'écran Excel Page 2 Quitter le logiciel Page 3 Sauvegarder un classeur Page

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

Une interface moderne et multi devices avec Drupal Focus sur Omega

Une interface moderne et multi devices avec Drupal Focus sur Omega Une interface moderne et multi devices avec Drupal Focus sur Omega Romain Jarraud Formateur / consultant Drupal Anne- Sophie Picot Chef de projets Publier du contenu aujourd hui > Plateformes de consultation

Plus en détail

WEB & DÉVELOPPEMENT LES BASES DU WEB LE LANGAGE HTML FEUILLES DE STYLES CSS HISTORIQUE D INTERNET ET DU WEB LES DIFFÉRENTS LANGAGES

WEB & DÉVELOPPEMENT LES BASES DU WEB LE LANGAGE HTML FEUILLES DE STYLES CSS HISTORIQUE D INTERNET ET DU WEB LES DIFFÉRENTS LANGAGES WEB & DÉVELOPPEMENT LES BASES DU WEB HISTORIQUE D INTERNET ET DU WEB LES DIFFÉRENTS LANGAGES LE LANGAGE HTML STRUCTURE D UNE PAGE En-tête et corps Syntaxe INSÉRER DES CONTENUS Texte : formatage (titre,

Plus en détail

Akemail Documentation

Akemail Documentation Akemail Documentation Version 1.0.0 l équipe d Akemail 07 July 2015 Table des matières 1 Documentation générale d Akemail 3 1.1 Démarrer avec Akemail......................................... 3 1.2 Gérer

Plus en détail

GOOGLE ANALYTICS. Ajout du code de suivi sur PowerBoutique. Ajout du code de suivi Google Analytics. Page 1 / 7 TUTO / GOOGLE ANALYTICS

GOOGLE ANALYTICS. Ajout du code de suivi sur PowerBoutique. Ajout du code de suivi Google Analytics. Page 1 / 7 TUTO / GOOGLE ANALYTICS Ajout du code de suivi Google Analytics Page 1 / 7 I. Création du compte sur Google Analytics 1. Connectez-vous à www.google.fr 2. Entrez «Google Analytics» dans la barre de recherche. 3. Cliquez sur le

Plus en détail

Projet de session - Ubeat

Projet de session - Ubeat Projet de session - Ubeat Le projet de session consiste à développer une application permettant de créer des listes de lectures musicales et de les partager entre amis. Le projet doit être fait en équipe

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

Item B53 : Réaliser des documents hypermédias intégrant textes, sons, images fixes et animées et liens internes et externes.

Item B53 : Réaliser des documents hypermédias intégrant textes, sons, images fixes et animées et liens internes et externes. Licence Creative Commons Jean-Philippe Verdu Réaliser la présentation de ses travaux en présentiel et en ligne Item B53 : Réaliser des documents hypermédias intégrant textes, sons, images fixes et animées

Plus en détail

Programmation Web IMAC 2015-2016. TD 8 : Formulaires. 2 décembre 2015

Programmation Web IMAC 2015-2016. TD 8 : Formulaires. 2 décembre 2015 Programmation Web IMAC 2015-2016 TD 8 : Formulaires 2 décembre 2015 Objectif: Dans ce TD, nous allons introduire les formulaires en HTML. Pour pouvoir les utiliser on abordera aussi les plug-ins jquery

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

MODE D EMPLOI WORDPRESS

MODE D EMPLOI WORDPRESS MODE D EMPLOI WORDPRESS Comment gérer votre site internet 1 Pour ce mode d emploi, nous allons prendre l exemple de la gestion du site jcebretagne.org Tout d abord, une suite d'article qui peuvent être

Plus en détail

cbox VOS FICHIERS DEVIENNENT MOBILES! POUR SMARTPHONES ET TABLETTES ios MANUEL D UTILISATION

cbox VOS FICHIERS DEVIENNENT MOBILES! POUR SMARTPHONES ET TABLETTES ios MANUEL D UTILISATION cbox VOS FICHIERS DEVIENNENT MOBILES! POUR SMARTPHONES ET TABLETTES ios MANUEL D UTILISATION Introduction L application cbox peut-être installée facilement sur votre ordinateur. Une fois l installation

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

Python. Introduction

Python. Introduction Python Introduction Utilisateur Il y a 2 catégories de personnes utilisant les machines avec des processeurs (ordinateurs, téléphones intelligents, tablettes, consoles, etc): les programmeurs les autres

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

Vous pouvez, avec vos tablettes, prendre des photos (possibilité selon vos tablettes d avoir deux prises de vues : avant/arrière).

Vous pouvez, avec vos tablettes, prendre des photos (possibilité selon vos tablettes d avoir deux prises de vues : avant/arrière). Vous pouvez, avec vos tablettes, prendre des photos (possibilité selon vos tablettes d avoir deux prises de vues : avant/arrière). PRENDRE DES PHOTOS : Appuyer sur l icône Paramètres Applications de votre

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

Le 'sub-theming' avec LESS, SASS et COMPASS

Le 'sub-theming' avec LESS, SASS et COMPASS Le 'sub-theming' avec LESS, SASS et COMPASS Par Sylvain Aubé Intégrateur Web, Whisky Echo Bravo Track : Design/Usability Niveau : débutant www.drupalcampmontreal.com À propos du présentateur twitter.com/sylvainaube

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

Java EE Applications web

Java EE Applications web Java EE Applications web Applications web Deux types d applications web: Applications orientées présentation Contenu statique: Html,xml, XVG Contenu dynamique: jsp, jsf, servlets Applications orientées

Plus en détail

MODE D EMPLOI DE CKFINDOR ET CKEDITOR AVERTISSEMENTS

MODE D EMPLOI DE CKFINDOR ET CKEDITOR AVERTISSEMENTS MODE D EMPLOI DE CKFINDOR ET CKEDITOR AVERTISSEMENTS En renommant, déplaçant ou supprimant des images déjà insérées dans des pages, ou en renommant, déplaçant ou supprimant des sous-dossiers, les images

Plus en détail

RESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite?

RESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite? RESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite? Medialibs, votre partenaire digital Quoi? Un partenaire pour une gestion globale du digital (un laboratoire R&D, éditeur de logiciels

Plus en détail

Ajouter les miniatures dans le re sultat de recherche pour SharePoint Foundation 2013

Ajouter les miniatures dans le re sultat de recherche pour SharePoint Foundation 2013 Ajouter les miniatures dans le re sultat de recherche pour SharePoint Foundation 2013 Après avoir installé SharePoint Foundation 2013, puis configuré le moteur de recherche, voyons comment personnaliser

Plus en détail

Prise en main rapide

Prise en main rapide Prise en main rapide 4 Dans cette leçon, vous découvrirez les fonctionnalités de création de page web de Dreamweaver et apprendrez à les utiliser dans l espace de travail. Vous apprendrez à : définir un

Plus en détail

Description des pratiques à adopter pour la mise à jour du layout en utilisant le gestionnaire de conception de Sharepoint 2013

Description des pratiques à adopter pour la mise à jour du layout en utilisant le gestionnaire de conception de Sharepoint 2013 Exemple d utilisation du gestionnaire de conception Description des pratiques à adopter pour la mise à jour du layout en utilisant le gestionnaire de conception de Sharepoint 2013 6, rue de l Etang, L-5326

Plus en détail

Administrer l ENT. Intégrer les Téléservices de scolarité à l ENT. Introduction. 1. Présentation des Téléservices. 7 ENT Collège et Lycée

Administrer l ENT. Intégrer les Téléservices de scolarité à l ENT. Introduction. 1. Présentation des Téléservices. 7 ENT Collège et Lycée Introduction Grâce à ce guide, vous serez capable d intégrer les téléservices des applications nationales de scolarité pour les parents et les élèves.. Présentation des Téléservices Les téléservices permettent

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

Archivage des pièces comptables

Archivage des pièces comptables SITEL Archivage des pièces comptables Documentation utilisateurs (comptables) Service informatique et télématique E-mail: hotline.sitel@unine.ch Téléphone : +41 32 718 20 10 www.unine.ch/sitel Historique

Plus en détail

WordPress Référencement naturel (SEO) Optimiser. son référencement. Daniel Roch. Préface d Olivier Andrieu

WordPress Référencement naturel (SEO) Optimiser. son référencement. Daniel Roch. Préface d Olivier Andrieu Daniel Roch Optimiser son référencement WordPress Référencement naturel (SEO) Préface d Olivier Andrieu Groupe Eyrolles, 2013, ISBN : 978-2-212-13714-9 Table des matières AVANT-PROPOS... 1 Pourquoi ce

Plus en détail

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

NEDJMA COFFRE-FORT GUIDE DE REFERENCE POUR ANDROID. Private Planet

NEDJMA COFFRE-FORT GUIDE DE REFERENCE POUR ANDROID. Private Planet NEDJMA COFFRE-FORT GUIDE DE REFERENCE POUR ANDROID Private Planet Copyright 2013 Private Planet Ltd. Private Planet est une marque déposée de Private Planet Ltd. Certaines applications ne sont pas disponibles

Plus en détail

Documentation. Application «La Carte» Version 2.2.0 (Octobre 2015) Rue du XXXI Décembre 36 CH 1207 Genève Tél. +41 22 544 24 24 Email info@sdic.

Documentation. Application «La Carte» Version 2.2.0 (Octobre 2015) Rue du XXXI Décembre 36 CH 1207 Genève Tél. +41 22 544 24 24 Email info@sdic. Documentation Application «La Carte» Version 2.2.0 (Octobre 2015) Rue du XXXI Décembre 36 CH 1207 Genève Tél. +41 22 544 24 24 Email info@sdic.ch Table des matières 1. Introduction... 4 2. Installation...

Plus en détail

OCLOUD BACKUP GUIDE DE REFERENCE POUR ANDROID

OCLOUD BACKUP GUIDE DE REFERENCE POUR ANDROID OCLOUD BACKUP GUIDE DE REFERENCE POUR ANDROID http://ocloud.pripla.com/ Copyright 2014 Private Planet Ltd. Certaines applications ne sont pas disponibles dans tous les pays. La disponibilité des applications

Plus en détail

Guide Reseller Onbile

Guide Reseller Onbile Guide Reseller Onbile Cher Revendeur, Avez-vous un doute en ce qui concerne le fonctionnement du Panneau d Administration du Plan Reseller de Onbile? Le guide Reseller Onbile est ce dont vous avez besoin!

Plus en détail

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

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

Plus en détail

Créer un formulaire de contact pour votre site gratuitement (6 méthodes)!

Créer un formulaire de contact pour votre site gratuitement (6 méthodes)! Créer un formulaire de contact pour votre site gratuitement (6 méthodes)! Author : soufiane Bonjour, Cherchez-vous depuis des jours comment insérer un formulaire de contact sur votre site web? Gratuitement

Plus en détail

ADMAIRIE. Template premium responsive pour Joomla 2.5 / 3.0. 2013 Agence Digitale tous droits de reproduction interdits sans autorisation

ADMAIRIE. Template premium responsive pour Joomla 2.5 / 3.0. 2013 Agence Digitale tous droits de reproduction interdits sans autorisation ADMAIRIE Template premium responsive pour Joomla 2.5 / 3.0 du template premium ADMAIRIE 2014 Agence Digitale tous droits de reproduction interdits sans autorisation Page n 1/24 Page n 1/8 AVANT PROPOS

Plus en détail

Guide d installation

Guide d installation Guide d installation Bonjour! Je suis Romain, votre guide durant la découverte de l installation de Nosto! Nous allons voir dans ce guide comment installer Nosto en 7 étapes clés. Nous verrons ensemble

Plus en détail

FICHE PRATIQUE N 14 CREER UN QUESTIONNAIRE E SUR

FICHE PRATIQUE N 14 CREER UN QUESTIONNAIRE E SUR Google propose à travers son service Google Drive (service de stockage et de partage de fichiers en ligne) un outil pratique permettant la création de formulaire : questionnaire de satisfaction, formulaire

Plus en détail

STAGE VOULEZ-VOUS REJOINDRE NOTRE ÉQUIPE?

STAGE VOULEZ-VOUS REJOINDRE NOTRE ÉQUIPE? VOULEZ-VOUS REJOINDRE NOTRE ÉQUIPE? STAGE JHipster (Java Hipster) est un générateur Yeoman utilisé pour créer un projet Spring Boot + AngularJS. Ce projet est développé en licence libre (Apache 2) et disponible

Plus en détail

Soon_AdvancedCache. Module Magento SOON. Rédacteur. Relecture & validation technique. Historique des révisions

Soon_AdvancedCache. Module Magento SOON. Rédacteur. Relecture & validation technique. Historique des révisions Module Magento SOON Soon_AdvancedCache Rédacteur Hervé G. Lead développeur Magento herve@agence-soon.fr AGENCE SOON 81 avenue du Bac 94210 LA VARENNE ST HILAIRE Tel : +33 (0)1 48 83 95 96 Fax : +33 (0)1

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

Vittoria Quick Cart v1.0.0 Manuel d installation et d utilisation de l extension Vittoria Quick Cart v1.0

Vittoria Quick Cart v1.0.0 Manuel d installation et d utilisation de l extension Vittoria Quick Cart v1.0 Manuel d installation et d utilisation de l extension Vittoria Quick Cart v1.0 1 Sommaire 1. A propos de ce manuel... 2 2. Mise à jour du manuel... 2 3. Installation de l extension via la clé d installation

Plus en détail

GUIDE D'UTILISATION: Comment installer la Renault Media Nav Toolbox? GUIDE D'UTILISATION: Comment créer une empreinte digitale de votre appareil sur

GUIDE D'UTILISATION: Comment installer la Renault Media Nav Toolbox? GUIDE D'UTILISATION: Comment créer une empreinte digitale de votre appareil sur GUIDE D'UTILISATION: Comment installer la Renault Media Nav Toolbox? GUIDE D'UTILISATION: Comment créer une empreinte digitale de votre appareil sur un périphérique de stockage USB? GUIDE D'UTILISATION:

Plus en détail

Tuto 2 : Configuration Virtual box, Configuration et installation du serveur XiBO

Tuto 2 : Configuration Virtual box, Configuration et installation du serveur XiBO Tuto 2 : Configuration Virtual box, Configuration et installation du serveur XiBO Dans Virtual box, la machine virtuelle xibo éteinte, sélectionner la et cliquer sur l icône configuration : Dans la fenêtre

Plus en détail

Mise en route. Contenu. Quick User Guide - Français

Mise en route. Contenu. Quick User Guide - Français Mise en route Ce guide de démarrage rapide a pour but de vous aider dans la mise en route du scanneur IRIScan TM Anywhere Wifi. Veuillez lire ce guide avant d'utiliser ce scanneur et son logiciel. Toutes

Plus en détail

Contenu. Thème «responsive» pour WordPress Installer le thème responsive (disponible aussi sur le site wordpress.org) Activer ce thème

Contenu. Thème «responsive» pour WordPress Installer le thème responsive (disponible aussi sur le site wordpress.org) Activer ce thème 1 Contenu Thème «responsive» pour WordPress... 1 Options du thème... 2 Logo et page d accueil :... 2 Réseaux sociaux... 2 Widget... 3 Widget accueil... 3 Widget supérieur... 4 Widget colophon... 4 Formulaire

Plus en détail

INSTALLATION DE LA PAIE

INSTALLATION DE LA PAIE INSTALLATION DE LA PAIE (Réseau) PREREQUIS POUR LES SYSTEMES WINDOWS VISTA HOME OU VISTA PRO Cliquez sur Démarrer Cliquez sur Panneau de configuration Cliquez sur Comptes Utilisateurs Cliquez sur Activer

Plus en détail

Site agrogembloux.be - document public COMMISSION PHOTO. Version 2015.02.23

Site agrogembloux.be - document public COMMISSION PHOTO. Version 2015.02.23 Site agrogembloux.be - document public COMMISSION PHOTO Programme pour adapter les photos au site internet et Mode d emploi pour uploader les photos sur le site Version 2015.02.23 (dernière version toujours

Plus en détail

Guide de l utilisateur pour Firefox 4 Mobile. Contact us: press@mozilla.com

Guide de l utilisateur pour Firefox 4 Mobile. Contact us: press@mozilla.com Guide de l utilisateur pour Firefox 4 Contact us: press@mozilla.com Sommaire À propos de Mozilla 1 Lancez-vous! 2 Tapez Moins, Surfez Plus! 3 Emportez votre Firefox partout avec vous 5 Personnalisez votre

Plus en détail

Création d un site web avec Nvu. Pensez à sauvegarder fréquemment dans votre espace de travail les documents que vous réalisez!

Création d un site web avec Nvu. Pensez à sauvegarder fréquemment dans votre espace de travail les documents que vous réalisez! Création d un site web avec Nvu Pensez à sauvegarder fréquemment dans votre espace de travail les documents que vous réalisez! Le but de ce TP est d utiliser le logiciel Nvu pour réaliser un site simple

Plus en détail

Les points de restauration périodiques et automatiques

Les points de restauration périodiques et automatiques Présentation du problème MAJ le 22/12/2012 On peut : Créer un point de restauration, Restaurer depuis un point de restauration Effacer les points de restauration les plus anciens pour gagner de la place

Plus en détail

BUREAU À DISTANCE. Mode d emploi

BUREAU À DISTANCE. Mode d emploi BUREAU À DISTANCE Mode d emploi 1. Accéder aux programmes... 1 2. Redimensionner la fenêtre du bureau à distance (Windows uniquement)... 1 3. Modifier la taille de la fenêtre pour chaque connexion... 1

Plus en détail