{"id":585,"date":"2012-03-11T17:42:23","date_gmt":"2012-03-11T16:42:23","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=585"},"modified":"2023-04-01T18:00:57","modified_gmt":"2023-04-01T16:00:57","slug":"tutoriel-jquery-mobile-application-web-choix-de-restaurant","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/tutoriel-jquery-mobile-application-web-choix-de-restaurant\/","title":{"rendered":"Sur Noupe : tutoriel jQuery Mobile cr\u00e9ation d\u2019une application web de choix de restaurant"},"content":{"rendered":"
Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 13 ans. Il se peut qu'il ne soit plus \u00e0 jour.<\/div>

Noupe<\/a> m’a demand\u00e9 d’\u00e9crire pour eux au moment o\u00f9 je pr\u00e9parais mes cours pour les \u00e9tudiants du Master2 Caweb qui portaient sur la mobilit\u00e9 et jQuery Mobile. J’ai donc d\u00e9cid\u00e9 de reprendre un des exercices propos\u00e9s durant ce cours, de l’am\u00e9liorer un peu, pour le publier sous forme de tutoriel sur Noupe.<\/p>\n

\"jQuery<\/a><\/p>\n

La d\u00e9mo est une mini web-application cr\u00e9\u00e9e en utilisant jQuery Mobile<\/a> qui permet \u00e0 un utilisateur de choisir un restaurant en fonction de la ville dans laquelle il se trouve, du plat choisi et des notes d’autres utilisateurs. Le tutoriel reprend les diff\u00e9rentes \u00e9tapes du \u00ab\u00a0projet\u00a0\u00bb : de la cr\u00e9ation de maquettes ou wireframe au produit final ( HTML CSS et JavaScript uniquement pas du c\u00f4t\u00e9 serveur). Dans la premi\u00e8re partie j’y explique l’utilisation de jQuery Mobile et du HTML5 pour cr\u00e9er les diff\u00e9rentes pages, et dans une seconde partie quelques astuces CSS pour s’\u00e9loigner du look and feel de base de jQuery Mobile et donner un peu plus de personnalit\u00e9 \u00e0 la mini application.<\/p>\n

Vous pouvez jeter un coup d’oeil \u00e0 l’application finale<\/a> et \u00e9galement aller jouer avec le code\u00a0 de l’application disponible sur github<\/a>.<\/p>\n

Et enfin pour les non allergiques \u00e0 l’anglais vous pouvez aller lire le tutoriel sur Noupe :<\/p>\n

jQuery Mobile Tutorial: Creating a Restaurant Picker Web App<\/strong><\/a><\/p>\n

\n","protected":false},"excerpt":{"rendered":"

Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 13 ans. Il se peut qu’il ne soit plus \u00e0 jour.Noupe m’a demand\u00e9 d’\u00e9crire pour eux au moment o\u00f9 je pr\u00e9parais mes cours pour les \u00e9tudiants du Master2 Caweb qui portaient sur la mobilit\u00e9 et jQuery Mobile. J’ai donc d\u00e9cid\u00e9 de reprendre un des exercices propos\u00e9s durant ce cours, de l’am\u00e9liorer un peu, pour le publier sous forme de tutoriel sur Noupe. La d\u00e9mo est une mini web-application cr\u00e9\u00e9e en utilisant jQuery …<\/p>\n","protected":false},"author":3,"featured_media":586,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[224],"tags":[],"class_list":["post-585","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles-dates-pas-mis-a-jours"],"yoast_head":"\nSur Noupe : tutoriel jQuery Mobile cr\u00e9ation d\u2019une application web de choix de restaurant - par St\u00e9phanie Walter - UX Researcher & Designer<\/title>\n<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack --> <meta name=\"description\" content=\"Tutoriel jQueryMobile pour la cr\u00e9ation d'une mini webapp de choix de restaurant : du wireframe au HTML, CSS et jQuery, d\u00e9mo et code disponibles\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=_-1353.html \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sur Noupe : tutoriel jQuery Mobile cr\u00e9ation d\u2019une application web de choix de restaurant - par St\u00e9phanie Walter - UX Researcher & Designer\" \/>\n<meta property=\"og:description\" content=\"Tutoriel jQueryMobile pour la cr\u00e9ation d'une mini webapp de choix de restaurant : du wireframe au HTML, CSS et jQuery, d\u00e9mo et code disponibles\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/tutoriel-jquery-mobile-application-web-choix-de-restaurant\/\" \/>\n<meta property=\"og:site_name\" content=\"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.\" \/>\n<meta property=\"article:published_time\" content=\"2012-03-11T16:42:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-01T16:00:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2012\/03\/tuto_restaupicker_jquery_mobile.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"St\u00e9phanie Walter\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@walterstephanie\" \/>\n<meta name=\"twitter:site\" content=\"@walterstephanie\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"St\u00e9phanie Walter\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/tutoriel-jquery-mobile-application-web-choix-de-restaurant\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/tutoriel-jquery-mobile-application-web-choix-de-restaurant\/\",\"name\":\"Sur Noupe : tutoriel jQuery Mobile cr\u00e9ation d\u2019une application web de choix de restaurant - par St\u00e9phanie Walter - UX Researcher & Designer\",\"isPartOf\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/tutoriel-jquery-mobile-application-web-choix-de-restaurant\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/tutoriel-jquery-mobile-application-web-choix-de-restaurant\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/03\/tuto_restaupicker_jquery_mobile.jpg\",\"datePublished\":\"2012-03-11T16:42:23+00:00\",\"dateModified\":\"2023-04-01T16:00:57+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"Tutoriel jQueryMobile pour la cr\u00e9ation d'une mini webapp de choix de restaurant : du wireframe au HTML, CSS et jQuery, d\u00e9mo et code disponibles\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/tutoriel-jquery-mobile-application-web-choix-de-restaurant\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/tutoriel-jquery-mobile-application-web-choix-de-restaurant\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/03\/tuto_restaupicker_jquery_mobile.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/03\/tuto_restaupicker_jquery_mobile.jpg\",\"width\":700,\"height\":200},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/\",\"name\":\"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.\",\"description\":\"Je partage ici mes conseils, mes ressources et outils sur la conception centr\u00e9e utilisateur, la recherche et tests utilisateur, le design de produits, la strat\u00e9gie mobile, l'utilisabilit\u00e9 et l'accessibilit\u00e9.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/stephaniewalter.design\/fr\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\",\"name\":\"St\u00e9phanie Walter\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g\",\"caption\":\"St\u00e9phanie Walter\"},\"description\":\"UX Researcher & Product Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Web Platform and Product Design (GDE)\",\"sameAs\":[\"https:\/\/stephaniewalter.design\/\",\"https:\/\/www.linkedin.com\/in\/stephaniewalterpro\/\",\"https:\/\/x.com\/walterstephanie\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Sur Noupe : tutoriel jQuery Mobile cr\u00e9ation d\u2019une application web de choix de restaurant - par St\u00e9phanie Walter - UX Researcher & Designer","description":"Tutoriel jQueryMobile pour la cr\u00e9ation d'une mini webapp de choix de restaurant : du wireframe au HTML, CSS et jQuery, d\u00e9mo et code disponibles","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/stephaniewalter.design\/fr\/blog\/tutoriel-jquery-mobile-application-web-choix-de-restaurant\/","og_locale":"fr_FR","og_type":"article","og_title":"Sur Noupe : tutoriel jQuery Mobile cr\u00e9ation d\u2019une application web de choix de restaurant - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"Tutoriel jQueryMobile pour la cr\u00e9ation d'une mini webapp de choix de restaurant : du wireframe au HTML, CSS et jQuery, d\u00e9mo et code disponibles","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/tutoriel-jquery-mobile-application-web-choix-de-restaurant\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2012-03-11T16:42:23+00:00","article_modified_time":"2023-04-01T16:00:57+00:00","og_image":[{"width":700,"height":200,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2012\/03\/tuto_restaupicker_jquery_mobile.jpg","type":"image\/jpeg"}],"author":"St\u00e9phanie Walter","twitter_card":"summary_large_image","twitter_creator":"@walterstephanie","twitter_site":"@walterstephanie","twitter_misc":{"\u00c9crit par":"St\u00e9phanie Walter","Dur\u00e9e de lecture estim\u00e9e":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/tutoriel-jquery-mobile-application-web-choix-de-restaurant\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/tutoriel-jquery-mobile-application-web-choix-de-restaurant\/","name":"Sur Noupe : tutoriel jQuery Mobile cr\u00e9ation d\u2019une application web de choix de restaurant - par St\u00e9phanie Walter - UX Researcher & Designer","isPartOf":{"@id":"https:\/\/stephaniewalter.design\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/tutoriel-jquery-mobile-application-web-choix-de-restaurant\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/tutoriel-jquery-mobile-application-web-choix-de-restaurant\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/03\/tuto_restaupicker_jquery_mobile.jpg","datePublished":"2012-03-11T16:42:23+00:00","dateModified":"2023-04-01T16:00:57+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"Tutoriel jQueryMobile pour la cr\u00e9ation d'une mini webapp de choix de restaurant : du wireframe au HTML, CSS et jQuery, d\u00e9mo et code disponibles","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/tutoriel-jquery-mobile-application-web-choix-de-restaurant\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/tutoriel-jquery-mobile-application-web-choix-de-restaurant\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/03\/tuto_restaupicker_jquery_mobile.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/03\/tuto_restaupicker_jquery_mobile.jpg","width":700,"height":200},{"@type":"WebSite","@id":"https:\/\/stephaniewalter.design\/fr\/#website","url":"https:\/\/stephaniewalter.design\/fr\/","name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","description":"Je partage ici mes conseils, mes ressources et outils sur la conception centr\u00e9e utilisateur, la recherche et tests utilisateur, le design de produits, la strat\u00e9gie mobile, l'utilisabilit\u00e9 et l'accessibilit\u00e9.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/stephaniewalter.design\/fr\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf","name":"St\u00e9phanie Walter","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g","caption":"St\u00e9phanie Walter"},"description":"UX Researcher & Product Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Web Platform and Product Design (GDE)","sameAs":["https:\/\/stephaniewalter.design\/","https:\/\/www.linkedin.com\/in\/stephaniewalterpro\/","https:\/\/x.com\/walterstephanie"]}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/585"}],"collection":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/comments?post=585"}],"version-history":[{"count":1,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/585\/revisions"}],"predecessor-version":[{"id":8183,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/585\/revisions\/8183"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/586"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=585"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=585"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=585"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}