Uma web mais sexy com jQuery Mobile
Upcoming SlideShare
Loading in...5
×
 

Uma web mais sexy com jQuery Mobile

on

  • 6,695 views

Uma apresentação sobre jQuery Mobile e como isso corresponde ao mercado web atual. Seus aplicativos web para mobile podem ficar sexy em poucos passos!

Uma apresentação sobre jQuery Mobile e como isso corresponde ao mercado web atual. Seus aplicativos web para mobile podem ficar sexy em poucos passos!

Statistics

Views

Total Views
6,695
Views on SlideShare
6,686
Embed Views
9

Actions

Likes
0
Downloads
18
Comments
0

2 Embeds 9

http://paper.li 5
http://a0.twimg.com 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

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

Uma web mais sexy com jQuery Mobile Uma web mais sexy com jQuery Mobile Presentation Transcript

  • Sexy Web Mobile Leo Balter - 16 EDTED Créditos:jQuery Mobile Overview | http://slidesha.re/ceXBYD | Todd Parker Testing Mobile JavaScript | http://slidesha.re/a4npHB | John Resig
  • whois @LeoBalter• Pós Graduação em Engenharia de Software• Intervir• Desconferência
  • jQuery.org
  • jQuery.org jQuery
  • jQuery.org jQuery jQuery UI
  • jQuery.org jQuery jQuery UI QUnit
  • jQuery.org jQuery jQuery UI QUnit jQuery Mobile
  • jQuery.org jQuery jQuery UI QUnit jQuery Mobile +++
  • John Resig
  • John Resig
  • Richard D. Worth
  • Todd Parker
  • Por queMobile?
  • 10% da web é mobile
  • 20131.82bi de dispositivos móveis prontos para web
  • 20131.82bi de dispositivos móveis prontos para web E isso após o apocalipse em 2012!
  • Quem é o mais utilizado?
  • Quem é o mais utilizado?• Android?
  • Quem é o mais utilizado?• Android?• iPhone?
  • Quem é o mais utilizado?• Android?• iPhone?• BlackBerry?
  • Quem é o mais utilizado?• Android? Symbian OS• iPhone? (Nokia)• BlackBerry?
  • Sistemas Operacionais no Mundo
  • No Brasil é diferente? Aqui o cenário muda, mas...
  • Sistemas Operacionais no Brasil
  • Web AppsWeb App: fácil de criar, mais fácil ainda de usar.
  • Web Apps• Aplicativos Web Web App: fácil de criar, mais fácil ainda de usar.
  • Web Apps• Aplicativos Web• Não dependem de um sistema operacional Web App: fácil de criar, mais fácil ainda de usar.
  • Web Apps• Aplicativos Web• Não dependem de um sistema operacional• Arquitetados com base em HTML, CSS e JS Web App: fácil de criar, mais fácil ainda de usar.
  • Web Apps• Aplicativos Web• Não dependem de um sistema operacional• Arquitetados com base em HTML, CSS e JS• O limite é o escopo de cada browser... Web App: fácil de criar, mais fácil ainda de usar.
  • Qual a maior vantagem de ser Web e Mobile?
  • Não temos ie6 entre osbrowsers mobile! Afude!
  • Browsers Mobile mais utilizados no mundo 0 7,5 15 22,5 30 Opera 22,23% iPhone 16,8% Nokia 16,33% Android 15,34%BlackBerry 13,85%iPod Touch 5,55% NetFront 3,54% Samsung ,96% UCWEB ,76%
  • Browsers Mobile mais utilizados no Brasil
  • Browsers Mobile mais utilizados no Brasil 0 7,5 15 22,5 30 29,79% Nokia Opera 23,72% Android 12,38% Obigo 9,83% NetFront 6,8% Jasmine 4,69% iPhone 4,0% Samsung 1,63% Dolfin 1,45%Openwave Mobile Browser 1,39% iPod Touch 1,08% Bolt ,85% SonyEricsson ,6% BlackBerry ,5%
  • Opera Mobile Opera Mini
  • jQuery Mobile
  • Por que usar jQuery?
  • jQueryé fácil e popular
  • jQuery MobileNão é apenas uma biblioteca,mas um framework completo
  • jQuery MobileNão é apenas uma biblioteca,mas um framework completo• jQuery apenas trás rotinas básicas que são chamadas ordinariamente.
  • jQuery MobileNão é apenas uma biblioteca,mas um framework completo• jQuery apenas trás rotinas básicas que são chamadas ordinariamente.• jQuery Mobile cria estruturas e elementos de forma mais automatizada, assim como o jQuery UI
  • Uma forma simples,vários dispositivos
  • Design Unificado
  • Tema Customizável
  • Acessível
  • ProgressiveEnhancement
  • ProgressiveEnhancement
  • ProgressiveEnhancement
  • Marcação Semântica<label for="slider-b">Slider:</label><input type="range" name="slider" id="slider-b" value="0" min="0" max="100" />
  • Em qual Browser vai funcionar?
  • Como funciona?
  • <!DOCTYPE html>
  • http://code.jquery.com/
  • http://code.jquery.com/
  • http://code.jquery.com/
  • http://code.jquery.com/
  • http://code.jquery.com/
  • Atributo Data
  • Atributo Data
  • Atributo Data
  • Atributo Data
  • Várias páginas em um único HTML
  • Várias páginas em um único HTML
  • Várias páginas em um único HTML
  • Várias páginas em um único HTML
  • Várias páginas em um único HTML
  • Temas!http://minim.in/RM
  • Temas de páginas http://minim.in/RN
  • Temas de páginas http://minim.in/RN
  • Temas de páginas http://minim.in/RN
  • Temas de páginas http://minim.in/RN
  • Temas de páginas http://minim.in/RN
  • Temas de páginas http://minim.in/RN
  • Temas de páginas http://minim.in/RN
  • Com jQuery Mobile você cria siteslindões apenas com HTML!
  • Eventos
  • Eventos ao invés dejQuery(document).ready() utilize pageInit()
  • Touch Vs Click
  • Touch Vs Click• tap
  • Touch Vs Click• tap• taphold
  • Touch Vs Click• tap• taphold• swipe
  • Touch Vs Click• tap• taphold• swipe• swipeleft
  • Touch Vs Click• tap• taphold• swipe• swipeleft• swiperight
  • orientationchange
  • Mais elementos...
  • Quero saber mais!http://jquerymobile.com/demos/1.0rc1/
  • Mais exemploshttp://www.jqmgallery.com/
  • Quero contribuir!http://jquerymobile.com/contribute/
  • Muito pela frente!
  • Muito pela frente!
  • Muito pela frente! Obrigado! @leobalter leo@balter.com.br Slides: http://minim.in/RT Exemplos: http://minim.in/RR obrigado pelos peixes