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

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

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

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

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

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

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

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

Sommaire. 1/ Grille. 2/ Specs globales. 3/ Specs HP. 4/ Specs Questions. 5/ Specs Offre. 6/ Specs Faq. 7/ Comportements interactifs

Sommaire. 1/ Grille. 2/ Specs globales. 3/ Specs HP. 4/ Specs Questions. 5/ Specs Offre. 6/ Specs Faq. 7/ Comportements interactifs Sommaire 1/ Grille 2/ Specs globales 3/ Specs HP 4/ Specs Questions 5/ Specs Offre 6/ Specs Faq 7/ Comportements interactifs 1/ Grille et breakpoints Desktop :

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

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

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

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

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

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

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

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

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

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

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

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

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

Plus en détail

Responsive Web Design. La Rochelle, Avril 2014

Responsive Web Design. La Rochelle, Avril 2014 Responsive Web Design La Rochelle, Avril 2014 Mohamed Belmokhtar Université de La Rochelle Germain Souquet Université de La Rochelle Sommaire Qu est-ce que le responsive web design? Les différentes approches

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

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

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

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

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

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

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

Google Documents permet d élaborer un questionnaire, de le diffuser sur le net pour ensuite le dépouiller.

Google Documents permet d élaborer un questionnaire, de le diffuser sur le net pour ensuite le dépouiller. Google Documents Google Documents permet d élaborer un questionnaire, de le diffuser sur le net pour ensuite le dépouiller. Phase préliminaire: Pensez à identifier le public que vous souhaitez cibler Pensez

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

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

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

TP 5 Les CMS, la forme et le fond Internet et Outils (IO2)

TP 5 Les CMS, la forme et le fond Internet et Outils (IO2) TP 5 Les CMS, la forme et le fond Internet et Outils (IO2) Un site, tel que vous avez appris à en programmer jusqu à maintenant, contenant un ensemble de pages HTML embellies de quelques feuilles de styles,

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

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

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

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

Mais pourquoi le dev' saccage mon intégration? Atelier technique CSS Paris Web 2011 par Romy Duhem-Verdière http://romy.tetue.

Mais pourquoi le dev' saccage mon intégration? Atelier technique CSS Paris Web 2011 par Romy Duhem-Verdière http://romy.tetue. Mais pourquoi le dev' saccage mon intégration? Atelier technique CSS Paris Web 2011 par Romy Duhem-Verdière http://romy.tetue.net/857 Intégrateur de STPo - Robot de Gordon Bennett 2 L'intégrateur XHML,

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

Enregistrement de votre Géorando Maxi Liberté

Enregistrement de votre Géorando Maxi Liberté Enregistrement de votre Géorando Maxi Liberté Le logiciel Géorando Maxi Liberté nécessite un enregistrement sur le site Internet www.cartes-numeriques.ign.fr pour vous permettre dans un premier temps de

Plus en détail

CLARISWORKS 5. ÉTAPE 1 Créer un document. Lancer l application. (Windows 95 ou 98) Créer un document en utilisant le traitement de texte

CLARISWORKS 5. ÉTAPE 1 Créer un document. Lancer l application. (Windows 95 ou 98) Créer un document en utilisant le traitement de texte ÉTAPE 1 Créer un document Lancer l application Mettre l ordinateur en route. Double cliquer sur l icône ClarisWorks 5 qui se trouve sur le bureau ou cliquer sur Démarrer Programmes ClarisWorks5 Vous arrivez

Plus en détail

Découvrir Drupal. Les meilleurs thèmes et modules Drupal (présenta5on démo)

Découvrir Drupal. Les meilleurs thèmes et modules Drupal (présenta5on démo) Découvrir Drupal Les meilleurs thèmes et modules Drupal (présenta5on démo) Tour d horizon des principales fonc5onnalités de Drupal au travers de la présenta5on de quelques- uns de ses principaux modules

Plus en détail

PRISE EN MAIN D UN TABLEUR. Version OPEN OFFICE

PRISE EN MAIN D UN TABLEUR. Version OPEN OFFICE PRISE EN MAIN D UN TABLEUR Version OPEN OFFICE Prise en main d un tableur page 2 1. L utilisation de la souris Pour faire fonctionner un tableur, on utilise le clavier mais aussi la souris. Rappelons,

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

Scolasite.net, le créateur de site web au service des enseignants. Guide d'administration du site Internet. Page 1

Scolasite.net, le créateur de site web au service des enseignants. Guide d'administration du site Internet. Page 1 Guide d'administration du site Internet Page 1 Scolasite permet de créer rapidement un site Internet, sans connaissances techniques particulières. Spécialement destiné aux établissements scolaires, son

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

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

Guide de démarrage rapide. (pour la version 5.0.)

Guide de démarrage rapide. (pour la version 5.0.) Guide de démarrage rapide (pour la version 5.0.) 2 Table des matières Introduction Réglages de l application MyTalk Mobile 1. MODIFICATION 2. DEMARRER 3. AFFICHER 4. SYNTHETISEUR VOCAL 5. NOMBRE DE MOTS

Plus en détail

LibreDA : JavaScript pour un logiciel administratif

LibreDA : JavaScript pour un logiciel administratif LibreDA : JavaScript pour un logiciel administratif Le retour de JavaScript Louis Martin Martin Simoneau 2 avril 2015 1 Objectifs 2 Le fureteur 3 JavaScript 4 Écosystème de développement 5 NoSQL 6 Exemples

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

Atelier Travailler vos photos Mars 2015

Atelier Travailler vos photos Mars 2015 Accéder aux photos enregistrées sur votre ordinateur. Cliquer sur le bouton démarrer puis cliquer sur Images dans la colonne de droite. Vous êtes dans le dossier Images. Cliquer ici pour modifier l apparence

Plus en détail

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN

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

Plus en détail

Solution de Mobilité SAP SUP & AFARIA. Meltz Jérôme

Solution de Mobilité SAP SUP & AFARIA. Meltz Jérôme Solution de Mobilité SAP SUP & AFARIA Meltz Jérôme 01 Agenda PRÉSENTATION D AUGUSTA REEVES Augusta Reeves Création en 1998 Société de service d Intégration SAP fondé en 1998 CA 2011 : 14,8 M Effectif :

Plus en détail

Guide 2015 site web classique L édition de site

Guide 2015 site web classique L édition de site Guide 2015 site web classique L édition de site L interface d édition Navigation... 03 Langue... 04 Thèmes... 05 Options... 06 Aperçu... 07 Paramètres de page... 08 Partage sur les médias sociaux... 09

Plus en détail

Tapez le titre de la page «BASTIA ville méditerranéenne», puis allez deux fois à la ligne à l aide de la touche Entrée.

Tapez le titre de la page «BASTIA ville méditerranéenne», puis allez deux fois à la ligne à l aide de la touche Entrée. Créer un site Internet à l aide du logiciel NVU Le logiciel NVU, permet l édition Wysiwyg (What You See, Is What You Get, ce que vous voyez, est ce que vous obtenez ) d un site internet. Vous rédigez le

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

Le WEB: présentation

Le WEB: présentation Le WEB: présentation Introduction: définition(s), historique... Principes d'utilisation:. le système Hypertexte. le fonctionnement pratique Naviguer sur le Web, les bases. les principales fonctions d'un

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

Utiliser le service de messagerie électronique de Google : gmail (1)

Utiliser le service de messagerie électronique de Google : gmail (1) Utiliser le service de messagerie électronique de Google : gmail (1) 1. Créer un compte 2 2. Ouvrir sa boîte de messagerie électronique 3 3. Comprendre la boîte de réception (1) 4 3.1. Lire un message

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

Débuter avec WordPress 1/5

Débuter avec WordPress 1/5 Débuter avec WordPress 1/5 Penser son future site internet Avant de commencer la construction d un site, pour gagner du temps, essayé de penser comment se présentera ce site, voir même de l esquisser sur

Plus en détail

Zen, SASS, responsive design

Zen, SASS, responsive design , SASS, responsive design Felip Manyer i Ballester Res Telæ 21 mai 2013 Felip Manyer i Ballester, SASS, responsive design 1/36 Plan 1 Créer un thème sous Drupal Généralités Concepts à mettre en œuvre Typologie

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

Préface 3. Conventions typographiques... 3 Feedback... 4. Introduction 5. Se familiariser avec l'interface de SiteBuilder 6. Créer un site Web 8

Préface 3. Conventions typographiques... 3 Feedback... 4. Introduction 5. Se familiariser avec l'interface de SiteBuilder 6. Créer un site Web 8 Parallels Panel Table des matières Préface 3 Conventions typographiques... 3 Feedback... 4 Introduction 5 Se familiariser avec l'interface de SiteBuilder 6 Créer un site Web 8 Editer un site Web 9 Utiliser

Plus en détail

HTML 5. Page de base Meta Outils pour Firefox. Les commentaires Paragraphe et saut de ligne Listes simples et ordonnées Listes imbriquées

HTML 5. Page de base Meta Outils pour Firefox. Les commentaires Paragraphe et saut de ligne Listes simples et ordonnées Listes imbriquées HTML 5 Page de base Meta Outils pour Firefox Les commentaires Paragraphe et saut de ligne Listes simples et ordonnées Listes imbriquées Les 6 niveaux de titre Indices et exposants Les liens L arborescence

Plus en détail

Avant-Propos Sencha Touch

Avant-Propos Sencha Touch Avant-Propos Développeurs web, vous qui souhaitez vous diversifier et appréhender simplement le développement mobile, mais redoutez un apprentissage long d un langage que vous ne connaissez pas, vous allez

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

deux tâches dans le tableau et à cliquer sur l icône représentant une chaîne dans la barre d outils. 14- Délier les tâches : double cliquer sur la

deux tâches dans le tableau et à cliquer sur l icône représentant une chaîne dans la barre d outils. 14- Délier les tâches : double cliquer sur la MS Project 1- Créer un nouveau projet définir la date du déclenchement (début) ou de la fin : File New 2- Définir les détails du projet : File Properties (permet aussi de voir les détails : coûts, suivi,

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

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

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

{less} Guide de démarrage

{less} Guide de démarrage {less Guide de démarrage Pré requis L'utilisation d'un pré processeur css nécessite son installation préalable. Vous pouvez choisir de tout installer du coté du serveur ou du coté du client. Votre site

Plus en détail

JACi400 Génération & JACi400 Développement

JACi400 Génération & JACi400 Développement JACi400 Génération & JACi400 Développement Une solution pour développer rapidement des applications WebSphere pour votre iseries directement en RPG ou Cobol. "After spending time with SystemObjects and

Plus en détail

Guide d utilisation de la clé mémoire USB

Guide d utilisation de la clé mémoire USB Service des bibliothèques Guide d utilisation de la clé mémoire USB I- Préambule Politique de prêt : Le Service des bibliothèques vous permet de faire l emprunt d une clé mémoire pour une période de 48

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

DECOUVRIR. Le portail La recherche Les présentations & documents

DECOUVRIR. Le portail La recherche Les présentations & documents Slideshare DECOUVRIR Le portail La recherche Les présentations & documents J accède au portail slideshare... http://www.slideshare.net/ Téléchargement de fichiers Recherche Espace d identification Les

Plus en détail

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

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

Plus en détail

PHILA-Collector-USB-16Go Pour Windows & Android

PHILA-Collector-USB-16Go Pour Windows & Android PHILA-Collector-USB-16Go Pour Windows & Android Bon à savoir : Cette édition permet de gérer une collection de timbres sur clé USB ou sur PC. L échange de données entre la clé et le PC est possible en

Plus en détail

Réalisation d une Interface Utilisateur

Réalisation d une Interface Utilisateur Réalisation d une Interface Utilisateur Pour manipuler facilement les données enregistrées dans une base de données, il est nécessaire de cacher leur implantation technique dans les tables et d offrir

Plus en détail

MAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4

MAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4 MAILING Table des matières KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4 INSERER UNE IMAGE (OU UNE PHOTO) PAS DE COPIER / COLLER... 5 INSERER UN TABLEAU...

Plus en détail

Programmation Web. Madalina Croitoru IUT Montpellier

Programmation Web. Madalina Croitoru IUT Montpellier Programmation Web Madalina Croitoru IUT Montpellier Organisation du cours 4 semaines 4 ½ h / semaine: 2heures cours 3 ½ heures TP Notation: continue interrogation cours + rendu à la fin de chaque séance

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

Grille sommaire d'évaluation de l'accessibilité du Web (Développée par AccessibilitéWeb sous licence Creative Commons BY- NC- SA)

Grille sommaire d'évaluation de l'accessibilité du Web (Développée par AccessibilitéWeb sous licence Creative Commons BY- NC- SA) Grille sommaire d'évaluation de l'accessibilité du Web (Développée par AccessibilitéWeb sous licence Creative Commons BY- NC- SA) No. Validation Tests avec les outils Commentaires A Contenu non- textuels

Plus en détail

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

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

Plus en détail

GUIDE Instagram et Hootsuite. guide de démarrage rapide

GUIDE Instagram et Hootsuite. guide de démarrage rapide GUIDE Instagram et Hootsuite guide de démarrage rapide Instagram et Hootsuite guide de démarrage rapide Avec 300 millions d utilisateurs actifs par mois, Instagram représente un monde d opportunités pour

Plus en détail

ANGULAR JS AVEC GDE GOOGLE

ANGULAR JS AVEC GDE GOOGLE ANGULAR JS AVEC GDE GOOGLE JUIN 2015 BRINGING THE HUMAN TOUCH TO TECHNOLOGY 2015 SERIAL QUI SUIS-JE? ESTELLE USER EXPERIENCE DESIGNER BUSINESS ANALYST BRINGING THE HUMAN TOUCH TO TECHNOLOGY SERIAL.CH 2

Plus en détail

DOKEOS Author Manuel du formateur

DOKEOS Author Manuel du formateur Retrouvez-nous en ligne sur notre site dokeos.com/fr DOKEOS Author Manuel du formateur Trois raisons de choisir DOKEOS Author Facile à prendre en main, DOKEOS Author est l outil de la suite Dokeos qui

Plus en détail

Saisissez le login et le mot de passe (attention aux minuscules et majuscules) qui vous ont

Saisissez le login et le mot de passe (attention aux minuscules et majuscules) qui vous ont I Open Boutique Sommaire : I Open Boutique... 1 Onglet «Saisie des Produits»... 3 Création d'une nouvelle fiche boutique :... 3 Création d'une nouvelle fiche lieux de retraits :... 10 Création d'une nouvelle

Plus en détail

I La création d'un compte de messagerie Gmail.

I La création d'un compte de messagerie Gmail. Les outils du Cloud Computing #2 Gmail / Google Drive L'exemple des Googles Documents & Googles formulaires Un pas à pas pour faire connaissance avec les services google. I La création d'un compte de messagerie

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

Programmation Android Ce que vous devez savoir. Cours Android - F. Michel 1 / 18

Programmation Android Ce que vous devez savoir. Cours Android - F. Michel 1 / 18 Programmation Android Ce que vous devez savoir 1 / 18 Plan 1 Connaissances essentielles 2 Définition d une GUI et adaptation au contexte 3 L objet Intent 2 / 18 Connaissances essentielles Sur la plate-forme

Plus en détail

Tutoriel Technique. Plateforme de suivi des usages des ressources. Version 2 Date de conception : 03/2014 Auteur : Équipe UVED

Tutoriel Technique. Plateforme de suivi des usages des ressources. Version 2 Date de conception : 03/2014 Auteur : Équipe UVED Tutoriel Technique Plateforme de suivi des usages des ressources Version 2 Date de conception : 03/2014 Auteur : Équipe UVED 1. Connexion à la plateforme de suivi des usages Pour accéder à la plateforme

Plus en détail

NFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web

NFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web NFA016 : Introduction O. Pons, S. Rosmorduc Conservatoire National des Arts & Métiers Pour naviguer sur le Web, il faut : 1. Une connexion au réseau Réseau Connexion physique (câbles,sans fils, ) à des

Plus en détail

Le service de création de site Internet : Mode d emploi. La Création de Site Internet

Le service de création de site Internet : Mode d emploi. La Création de Site Internet Le service de création de site Internet : Mode d emploi Sommaire 1) Comment se connecter à votre interface client? 2) Comment démarrer la création de votre site Internet? 3) Comment gérer les pages de

Plus en détail

Proposition aiw pour le site internet de. Proposition all-in-web 20 avril 2014

Proposition aiw pour le site internet de. Proposition all-in-web 20 avril 2014 1 Proposition aiw pour le site internet de 2 L Espace Sorano 5500 m² dédiés aux activités culturelles, linguistiques, de développement personnel ainsi que 2 théâtres, un hall d exposition, un bar et une

Plus en détail

dmp.gouv.fr Pour en savoir plus DMP Info Service : 24h/24 7j/7

dmp.gouv.fr Pour en savoir plus DMP Info Service : 24h/24 7j/7 dmp.gouv.fr Pour en savoir plus DMP Info Service : 24h/24 7j/7 Sommaire 1 Configuration requise pour accéder au DMP... 3 2 Procédure de vérification sous Internet Explorer... 4 2.1 Vérification de la compatibilité

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