$ 49.00

Tuto jQuery mobile : créer des sites et apps mobiles avec jQuery Mobile

$ 49.00

  • Une formation vidéo de 7h12m
  • Téléchargement immédiat et visionnage illimité
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com

Avec ces tutos consacrés à jQuery mobile 1.0.1 et 1.1 d'une durée de 7H, vous apprendrez à maîtriser la création d'applications mobiles et de sites web mobiles HTML/CSS 100% compatibles avec de nombreuses plate-formes mobiles : iOS (iPhone, iPad, iPod touch), Android (mobile et tablettes), Blackberry, Symbian...

Vous découvrirez en détail et au travers d'exemples concrets la création de pages, de formulaires, de barres de navigations, les transitions animées, ainsi que l'ensemble des composants (widgets) fournis par jQuery mobile : boutons, interrupteurs, sliders, menus déroulants, listes, toolbars, controlgroup...

De la création d'icônes personnalisées compatibles "retina" à la mise en page par grille, ces tuto jQuery mobile abordent tous les détails indispensables et souvent ignorés qu'il faut prendre en compte pour réaliser des sites/app mobiles de qualité professionnelle.

Au terme de cette formation complète jQuery mobile, vous réaliserez une maquette d'application Twitter "JQMTweet" qui n'a rien à envier à une application "native".

Tous les fichiers sources des exemples sont fournis avec les tutos.

Bande Annonce de cette formation jQuery Mobile :

Cette série de tuto vidéo traite avant tout de la partie HTML/CSS de jQuery mobile : elle s'adresse aux webdesigners et intégrateurs web, mais aussi aux développeurs web soucieux de maîtriser ce framework. Il n'est pas nécessaire de connaître la programmation Javascript ou jQuery pour suivre ces tuto, même si une toute petite dose de code vient parfois enrichir les pages.

Une seconde série de tutos "avancés" abordera de façon plus spécifique la partie développement et API de jQuery mobile.

Au programme de cette formation jQuery Mobile :

INTRODUCTION :

  • Présentation de jQuery et jQuery mobile
  • Qu'est-ce qu'une web app ?
  • Web app VS native app
  • Plateformes supportées

1) LES PAGES

    A) Première page

  • Récupération et installation de jQuery mobile
  • Création d'un template
  • Notion de "data-role" et de "viewport"
  • L'élément page : sections header, content et footer
  • B) Template multi-pages vs pages séparées

  • Avantages et inconvénients des deux types de templates
  • Navigation d'une page à l'autre : Ajax, bouton retour
  • Gestion des transitions entre pages

2) LES BOUTONS

  • Création de boutons
  • L'attribut "data-inline"
  • Stylisation des boutons : arrondi et ombre portée
  • Éléments de formulaire stylisés en boutons
  • Ajout d'icônes, positionnement des icônes dans le bouton
  • Icônes personnalisées et icônes "retina"
  • Regrouper des boutons via un "controlgroup"

3) FORMULAIRES

    A)Envoi d'un formulaire simple

  • Mise en page : data-role "fieldcontain" et balise "label"
  • Champs input et textarea
  • Invite de saisie avec "placeholder"
  • Traitement d'un formulaire avec Ajax et PHP
  • Désactiver le traitement Ajax de jQuery mobile
  • B) Balises HTML5

  • Utilisation des balises email, tel, search
  • Création d'un slider avec l'élément "range"
  • Bouton interrupteur avec le widget "toggle switch"
  • C) Boutons radio et checkboxes

  • Regrouper des éléments radio/checkboxes dans un fieldset avec "controlgroup"
  • Controlgroup horizontaux ou verticaux
  • L'attribut "checked"
  • La balise "legend"
  • D) Menus déroulants avec l'élément "select"

  • Balises "select" et "option"
  • Menus "select" natifs
  • Grouper plusieurs menus "select" avec un "controlgroup"
  • Élément "label" et accessibilité
  • Menus "select" stylisés par jQuery mobile
  • Attribut "disabled"
  • Pop-up jQuery mobile pour les menus "select"
  • Ajout d'une invite de sélection
  • Sélection multiple
  • Groupe d'options avec l'élément "optgroup"

4) LES LISTES

    A) Listes déroulantes avec le widget "listview"

  • Le data-role "listview"
  • Liste basique, liste interactive
  • Personnalisation des icones d'une liste
  • L'attribut "data-inset"
  • Organisation d'une liste avec des "list-divider"
  • Stylisation des "list-dividers"
  • Listes imbriquées : création automatique de pages
  • B) Mise en forme des items d'une "listview"

  • Hiérarchiser le contenu d'un item
  • La classe ".ui-li-aside"
  • Ajout de "count-bubbles"
  • Ajout de miniatures et d'icones
  • Ajout de "split-buttons"
  • Navigation entre pages à partir d'une liste
  • C) Ajouter un filtre de recherche à une "listview"

  • L'attribut data-filter
  • Styliser le champ de recherche
  • Personnaliser l'algorithme de recherche avec JavaScript

5) MISE EN PAGE

  • Mise en page par colonnes avec la grille de jQuery mobile
  • Les attributs "ui-grid" et "ui-block"
  • Afficher/masquer un contenu avec un bloc "collapsible"
  • Blocs "collapsible" imbriqués
  • Création d'un effet accordéon

6) BARRES DE NAVIGATION

    A) "Header bar", boutons retour et "Footer bar"

  • Ajout de boutons dans une "header bar"
  • Boutons retour : attribut "data-rel", icones, texte...
  • Configuration globale avec l'événement "mobileinit"
  • Empêcher la stylisation automatique de jQuery mobile
  • B) Création d'une "Navbar"

  • Le data-role "navbar"
  • Montrer la rubrique active avec la classe "ui-btn-active"
  • Utilisation d'une grille pour les "navbars"
  • Options de positionnement des toolbars : "fixed", "inline" et "fullscreen"
  • Empêcher l'effet "toggle" des toolbars
  • C) Navbar fixe et persistante

  • Définition d'une navbar persistante
  • Les attributs "data-position", "data-tap-toggle" et "data-id"
  • La classe ".ui-state-persist"
  • Changer la transition par défaut entre les pages
  • Compatibilité des navbars

7) BOITES DE DIALOGUE

  • Création d'une boite de dialogue : "data-rel" ou "data-role" ?
  • Ajout de boutons dans une boite de dialogue
  • Fermeture d'une boite de dialogue
  • Fermeture par programmation d'une boite de dialogue
  • Accessibilité : modifier l'attribut "title" du bouton "close"

8) PERSONNALISER L'APPARENCE DES PAGES

    A) Notions de thème et de palette

  • Thème par défaut de jQuery mobile
  • Qu'est-ce qu'une palette ?
  • Le fichier css "structure"
  • B) Utiliser les palettes par défaut de jQuery mobile

  • Palettes A, B, C...
  • L'attribut "data-theme"
  • Palettes et héritage
  • Attributs de palettes spécifiques : slider, select, listview...
  • C) Créer son propre thème avec ThemeRoller

  • Présentation de la web-app ThemeRoller
  • L'inspector : styles globaux, ajout et styles de palettes
  • Modification des dégradés, arrondis, ombres portées...
  • Application de couleurs et Adobe Kuler
  • Export de son thème et utilisation dans jQuery mobile
  • Import et modification d'un thème existant

9) SYNTHESE : APPLICATION "JQMTweet"

  • Création des pages d'une application type "Twitter" en reprenant les notions vues dans les différents chapitre de la formation

Bonne formation !

Table des matières de cette formation jQuery Mobile (durée : 7h12m)

  • Introduction
    • Introduction 00:12:55
  • Pages
    • Pages 00:19:17
    • Multipage vs Pages Séparées 00:22:54
  • Formulaires et boutons
    • Boutons 00:26:15
    • Formulaires 00:20:23
    • Éléments HTML5 00:12:39
    • Boutons radios checkboxes 00:13:05
    • Éléments select 00:24:48
  • Listes
    • Listview 00:14:15
    • Mise en forme listview 00:22:48
    • Filtre recherche 00:13:58
  • Mise en Page
    • Mise en page 00:15:46
  • Barres de Navigation
    • Headerbar 00:28:57
    • Navbar 00:25:08
    • Navbar persistance 00:14:45
  • Boite de Dialogue
    • Boites de dialogue 00:18:55
  • Personnaliser l'apparence des pages
    • Thème et palette 00:07:34
    • Utiliser palettes 00:16:59
    • Créer son thème 00:20:04
  • Synthèse
    • Créer une application de tyoe Twitter 01:21:28



Formateur : Regart.net

Regart.net a publié 9 tutoriels et obtenu une note moyenne de 4,4/5 sur 322 tutoriels vendus. Voir les autres formations de Regart.net

4,6
note moyenne

7
avis laissés
5 étoiles
5
4 étoiles
1
3 étoiles
1
2 étoiles
0
1 étoile
0
  • 5
    avis de bricou_bricou laissé le 28/05/2014
    Une excellente formation !! Merci beaucoup, vous m'avez aidé. Seulement à quand la suite ? vous l'avez évoqué plusieurs fois pendant la formation. Où ce n'est plus d'actualité ?? Pour une formation totalement accomplie il me faut la suite de ce tuto. J'èspère vivement que ça viendra.

  • 5
    avis de realiceman laissé le 01/10/2013
    J'achète beaucoup de tutos et celui ci est sans problème le meilleur . Très bien expliqué , progressif, et très pédagogue. Une seule question : A QUAND LA SUITE ???

  • 4
    avis de yanlidufour laissé le 27/12/2013
    Bonne introduction très générale. (il reste des fautes dans le texte par contre)

Autres formations qui pourraient vous intéresser

accédez à plus de 1559 tuto gratuits


non, je ne veux pas me former gratuitement