Untitled - Regart.net

Recommendations

Info

MODULE 2 CONTACT IPHONE 50 rue de paradis 75010 Paris iPhone iPad Android - Création d’applications avec jQuery mobile et PhoneGap durée du module / 5 jours tel + 33 (0)1 48 24 96 45 fax + 33 (0)1 48 24 96 46 contact@regart.net www.regart.net Outil / jQuery mobile 1.0+ PhoneGap 1.3+ Dreamweaver CS6+ iPhone/iPad Android g Applications mobiles natives en HTML/CSS/JS avec jQuery mobile et PhoneGap Objectif / Ce module permet d’apprendre à développer des applications mobiles natives pour iPhone, Android, Blackberry, Windows Phone, etc... en utilisant jQuery mobile et PhoneGap. jQuery mobile est un framework adossé à jQuery, la célèbre librairie JavaScript. jQuery mobile fournit à la fois une structure (navigations, transitions, traitement des données) et un ensemble de composants faciles à utiliser et à modifier. En s’appuyant sur des standards (CSS3, HTML5, JavaScript), jQuery mobile garantit l’interopérabilité et la longévité de vos applications : une même application est totalement multi-plateforme et ne nécessite pas le recours aux langages “natifs“ (Objective C, Java...). Votre application jQuery mobile sera ensuite convertie en application native via PhoneGap, pour une multitude de plateformes. Enfin, PhoneGap donne accès aux fonctionnalités natives des téléphones et tablettes : accéléromètre, geolocalisation, boussole, système de fichiers... Prérequis / Cette formation s’adresse à un public de développeurs web (JavaScript, HTML, CSS). Des notions de jQuery sont nécessaires.
Déroulé / Introduction • Présentation de jQuery, jQuery UI et jQuery mobile. • Notions de “fallback“ et de “responsive design“. • Plateformes supportées. • Quels usages pour jQuery mobile ? Pages • Architecture d’une page dans jQuery mobile. • Eléments d’une page : page, header, content, footer. • Notion de data-role, de viewport. • Template pour page unique VS template multi-page. • Liens entre pages : AJAX, bouton retour... • Transitions entre pages : transitions par défaut, transitions personnalisées en CSS /JS. • Gérer l’enchainement des transitions avec un écouteur. Boîtes de dialogue • Notion de boîte de dialogue. • Gérer l’ouverture et la fermeture d’une boîte de dialogue. • Transitions, historique, styles et thèmes. Architecture de l’application • Préchargement et mise en cache des pages. • Gérer les ressources occupées par le DOM. • Notion de “hash“ d’une page et son rôle dans la navigation. • Le plugin “pushState“. • La fonction $.mobile.changePage() . • L’attribut “data-url“. • Injection dynamique de pages. Ajout de code dans les pages • Placement et exécution du code dans la page. • L’événement “pagecreate“. • Changer de page en JavaScript. • Charger une page avec “loadPage()“. • L’événement “create“. • Distinction entre “création“ et “rafraichissement“ d’une page. • Scroller à une position donnée à l’intérieur d’une page avec “silentScroll()“. • Passer des paramètres entre pages. Evénements spécifiques • Evénements spécifiques de jQuery mobile : pageInit() et pageCreate() . • Evénements tactiles : tap, taphold, swipe... • Evénements souris virtuels : vmouseover, vmousedown, vmousemove... • Détecter l’orientation de l’écran avec “orientationchange“. • Evénements liés aux pages : pagebeforeload, pageload, pagebeforechange, pagechange, pageremove... L’objet $.mobile • Configuration de jQuery mobile : l’événement mobileinit. • L’objet $.mobile et ses options configurables. • Méthodes et propriétés utiles de l’objet $.mobile : change- Page(), loadPage(), path.parseURL()... Mise en forme du contenu • Styles HTML basiques par défaut. • Grilles de mise en page, multi-colonnage. • Contenu “dépliable“ : afficher/masquer un contenu. • Effet “accordéon“ sur des contenus multiples. Composant Toolbar • Types de Toolbar : “Header bar“, “Footer bar“ et “Navbar“. • Options de positionnement : “inline“, “fixed“ et “fullscreen“. • “Header bar“ : structure, style, ajout de boutons, bouton retour... • “Footer bar“ : structure, ajout de boutons, d’éléments form... • “Navbar“ : structure, ajout de boutons, d’icones... • “Navbar“ persistante dans le footer. Composant Button • Bases du composant Button : options, méthodes et événements. • Ajout d’icones : l’attribut “data-icon“ et les icones par défaut. • Positionnement des icones dans le bouton. • Icones personnalisées. • L’attribut “data-inline“. • Regrouper des boutons via “controlgroup“. © Regart.net Formation — Centre de Formation agréé Adobe [AATC] Eléments de formulaire • Conventions d’écriture : id et label. • Cacher, désactiver, aligner les éléments du formulaire. • Initialisation et rafraichissement des éléments. • Text inputs et Textareas. • Champ de recherche (“search input“). • Slider, flip switch. • Radio buttons, checkboxes, menus de sélection. • Soumission de formulaires. Composant List • Types de listes : linked list, nested list, numbered list, split button list. • Options : list dividers, count bubble, vignettes, icones, inset lists. • Mise en forme du contenu d’un item de la liste. • Filtrer une liste avec un champ de recherche. Thèmes • Thèmes et palettes. • L’application ThemeRoller. iPhone/iPad Android iPhone iPad Android - Création d’applications avec jQuery mobile et PhoneGap g Applications mobiles natives en HTML/CSS/JS avec jQuery mobile et PhoneGap Créer une application native avec PhoneGap • Présentation de PhoneGap : génération d’applications natives et accès aux API des devices (accéléromètre, géolocalisation...). • Plateformes et API supportées par PhoneGap. • Les plateformes en présence et leur écosystème. • Packager son application pour iOS, Android... Accès aux fonctionnalités natives avec PhoneGap • Informations sur l’appareil avec Device. • Evénements spécifiques à PhoneGap : deviceready, pause, resume, online, offline... • Gérer les mouvements du device avec Accelerometer. • Prendre une photo avec Camera. • Lire et enregistrer du son avec Media. • Connaître une direction avec Compass (boussole). • Notifications : alert, vibreur... • Accès aux infos de positionnement avec Geolocation. • Accès au système de fichiers avec File.
Page 2 and 3: CONTACT Les Formations / 1/2 50 rue
Page 4 and 5: CONTACT Organigramme des cycles / 1
Page 6 and 7: MODULE 1 CONTACT DREAMWEAVER 50 rue
Page 8 and 9: MODULE 2 CONTACT CSS 50 rue de para
Page 10 and 11: MODULE 3 CONTACT NEWSLETTER 50 rue
Page 12 and 13: MODULE 4 CONTACT HTML 50 rue de par
Page 14 and 15: MODULE 5 CONTACT WORDPRESS 50 rue d
Page 16 and 17: MODULE 1 CONTACT JAVASCRIPT 50 rue
Page 18 and 19: MODULE 2 CONTACT JAVASCRIPT 50 rue
Page 20 and 21: MODULE 3 CONTACT JQUERY 50 rue de p
Page 22 and 23: MODULE 4 CONTACT PHP & MYSQL 50 rue
Page 24 and 25: MODULE 5 CONTACT ZEND 50 rue de par
Page 26 and 27: MODULE 1 CONTACT FLASH 50 rue de pa
Page 38 and 39: MODULE 1 CONTACT FLEX / AIR 50 rue
Page 40 and 41: MODULE 2 CONTACT FLEX / AIR 50 rue
Page 42 and 43: MODULE 3 CONTACT FLASH CATALYST 50
Page 44 and 45: MODULE 1 CONTACT IPHONE 50 rue de p
Page 54 and 55: MODULE 1 CONTACT BLEND 50 rue de pa
Page 56 and 57: MODULE 1 CONTACT PREMIERE PRO 50 ru
Page 58 and 59: MODULE 2 CONTACT FINAL CUT PRO 50 r
Page 62 and 63: MODULE 4 CONTACT AFTER EFFECTS 50 r
Page 64 and 65: MODULE 1 CONTACT PHOTOSHOP 50 rue d
Page 66 and 67: MODULE 2 CONTACT PHOTOSHOP 50 rue d
Page 68 and 69: MODULE 3 CONTACT LIGHTROOM 50 rue d
Page 70 and 71: MODULE 4 CONTACT ILLUSTRATOR 50 rue
Page 72 and 73: MODULE 5 CONTACT INDESIGN 50 rue de
Page 80 and 81: MODULE 9 CONTACT GIMP 50 rue de par
Page 82 and 83: MODULE 10 CONTACT CINEMA 4D 50 rue
Page 84 and 85: CONTACT Direction artistique / Guyl
Page 86 and 87: CONTACT 50 rue de paradis 75010 Par

Untitled - Regart.net

Create successful ePaper yourself

Delete template?

Save as template?