• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
jQuery Mobile - Desenvolvimento para dispositivos móveis
 

jQuery Mobile - Desenvolvimento para dispositivos móveis

on

  • 1,355 views

Palestra ministrada no Encontro de Tecnologia 2012 da Universidade Simonsen.

Palestra ministrada no Encontro de Tecnologia 2012 da Universidade Simonsen.

Statistics

Views

Total Views
1,355
Views on SlideShare
1,355
Embed Views
0

Actions

Likes
0
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    jQuery Mobile - Desenvolvimento para dispositivos móveis jQuery Mobile - Desenvolvimento para dispositivos móveis Presentation Transcript

    • jQuery MobileDesenvolvendo para dispositivos móveis
    • Pablo Garrido ???
    • O que é jQuery Mobile? Version 1.2.0 Final Touch-Optimized Web Framework for Smartphones & Tablets
    • Suporte
    • Por que mobile ? `
    • 6 bilhões depessoas nomundo possuemtelefone
    • + 1 bilhãoutilizamsmartphones
    • Por quê ?
    • Multidispositivo
    • Multiplataforma
    • Atualizações “real-time”
    • ????
    • E o melhor… Aplicações MOBILE não precisam ser testadas no Internet Explorer
    • Números 42,23% Fonte: http://trends.builtwith.com/javascript
    • HTML5 Doctype <!DOCTYPE html>
    • Data attribute reference data-role=“”
    • Structure<div data-role="page"> <div data-role="header”> Header </div> <div data-role="content"> Content </div> <div data-role="footer”> Footer </div></div>
    • SmartphonesUI Elements
    • Toolbar - Headers<div data-role="header"> <h1>PabloGP.com</h1></div> http://jquerymobile.com/demos/1.2.0/docs/toolbars/index.html
    • Buttons<a href="index.html" data-role="button">Link button</a><a href="index.html" data-role="button" data-icon="delete">Delete</a> http://jquerymobile.com/demos/1.2.0/docs/buttons/index.html
    • Input - Textarea<input type="text" name="name" id="basic" value=”" /><textarea name="textarea" id="textarea"></textarea> http://jquerymobile.com/demos/1.2.0/docs/forms/textinputs/
    • Slider<input type="range" name="slider-step" id="slider-step"value=”60" min="0" max="500" step="50" /> http://jquerymobile.com/demos/1.2.0/docs/forms/slider/
    • Listview<ul data-role="listview"> <li><a href="acura.html">Acura</a></li> <li><a href="audi.html">Audi</a></li> <li><a href="bmw.html">BMW</a></li> <li><a href="bmw.html">Cadillac</a></li> <li><a href="bmw.html”>Chrysler</a></li> <li><a href="bmw.html">Dogde</a></li></ul> http://jquerymobile.com/demos/1.2.0/docs/forms/slider/
    • data-theme=“” http://jquerymobile.com/test/docs/content/content-themes.html
    • data-transitional=“” http://jquerymobile.com/demos/1.2.0/docs/pages/page-transitions.html
    • ãonaassa
    • Mobile Page Structure<!DOCTYPE html><html><head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script></head><body> ...content goes here...</body></html> http://jquerymobile.com/test/docs/pages/page-anatomy.html
    • index.html<body> <div data-role="page"> <div data-role="header"> <h1>Pablo Garrido</h1> </div> <div data-role="content" class="contet"> <p>It is a long established fact that a reader will be distracted by the readable content of apage when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, asopposed to using Content here, content here, making it look like readable English.</p> <br /> <ul data-role="listview"> <li><a href="index.html" data-transitional="slide"title="Home">Home</a></li> <li><a href="sobre.html" data-transitional="flow" title="">Sobre</a></li> <li><a href="contato.html" data-transitional="flip" title="">Contato</a></li> </ul> <br /> </div> <div data-role="footer"> <h3>PabloGP.com<br /> contato@pablogp.com<br /><br /> All Rights reserved </h3> </div> </div>
    • sobre.html<body> <div data-role="page"> <div data-role="header"> <a href="index.html" data-icon="home">Voltar</a> <h1>Sobre</h1> </div> <div data-role="content" class="contet"> <p>It is a long established fact that a reader will be distracted by the readable content of apage when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, asopposed to using Content here, content here, making it look like readable English.It is a long established fact that a reader will bedistracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-lessnormal distribution of letters, as opposed to using Content here, content here, making it look like readable English.</p><br /><br /> <ul data-role="listview"> <li><a href="index.html" data-transitional="slide"title="Home">Home</a></li> <li><a href="sobre.html" data-transitional="flow" title="">Sobre</a></li> <li><a href="contato.html" data-transitional="flip" title="">Contato</a></li> </ul> <br /> </div> <div data-role="footer"> <h3>PabloGP.com<br /> contato@pablogp.com<br /><br /> All Rights reserved </h3> </div> </div>
    • contato.html<table> <tr> <td>Nome:</td> <td> <input required type="text" name="nome" size="30" /> </td> </tr> <tr> <td>E-mail:</td> <td> <input type="email" required name="email" size="30" /> </td> </tr> <tr> <td>Assunto:</td> <td> <select size="30" required name="assunto" id=""class="select"> <optionvalue="Projetos">Projetos</option> <optionvalue="Palestras">Palestras</option> <optionvalue="Orçamento">Orçamento</option> </select> </td> </tr> <tr> <td>Idade:</td> <td> <input type="range" required min="1" max="100" /> </td> </tr> <tr> <td></td> <td><button type="submit">Enviar</button></td> </tr>
    • ThemeRoller ThemeRoller – jquerymobile.com/themeroller/
    • Codiqa Codiqa – codiqa.com
    • jQMGallery jQuery Mobile Gallery - jqmgallery.com
    • Bibliografias http://www.jqmovel.com.br/ http://shop.oreilly.com/product/0636920020585.do
    • Quando utilizar ? Pequenas aplicações Aplicação não exige funcionalidades nativas do dispositivo (acelerômetro, câmera, contatos, notificações, gps e etc) Quando precisar de algo rápido, bom e barato (principalmente)
    • “Os verdadeiros artistas criam coisas reais e que serão usadas” Steve JobsObrigado !! @devpablogp www.pablogp.com contato@pablogp.com github.com/devpablogp