Transferir como PDF, PPTX
Carregado porTersis Zonato
Curso: Web Design Responsivo
O documento discute o design responsivo de websites, incluindo ferramentas necessárias como editores de texto e navegadores, a importância de se adaptar aos dispositivos móveis, e técnicas como layouts flexíveis, imagens flexíveis e media queries para criar um layout que se adapte a telas de diferentes tamanhos.
Mais conteúdo relacionado
![[EXPOTEC 2016] Construção de sites e gestão de conteúdo com WordPress](https://cdn.slidesharecdn.com/ss_thumbnails/minicursowp-160226000405-thumbnail.jpg?width=640&height=640&fit=bounds)
Semelhante a Curso: Web Design Responsivo
Curso: Web Design Responsivo
- 1.
- 2.
- 3.
- 4. FERRAMENTAS NECESSÁRIAS • EDITORDE TEXTO: • Brackets; • Coda; • Dreamweaver; • Notepad++; • Sublime Text. • BROWSER: • Chrome; • Firefox; • Opera; • Safari; • Internet Explorer 9+; etc…
- 6.
- 7. NO PASSADO • Tínhamosconexão lenta; • Não existia acesso Wi-Fi; • Sites para dispositivos móveis eram versões simples dos sites originais; • Era preciso manter múltiplas versões de um site. http://media.smashingmagazine.com/wp-content/uploads/2013/05/picnic_with_art_direction_mini.jpg
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17. http://www.simonmarxen.dk/portfolio/?p=165 “In the Bubble”- Simon Marxen Arquitetura responsiva
- 18. –Ethan Marcotte (2010) “ResponsiveWeb Design: um único site que se adapta a qualquer dispositivo, independente do tamanho da tela e orientação.” http://alistapart.com/d/responsive-web-design/
- 19. 1. Layout flexível,baseado em grid ! 2. Imagens e mídias flexíveis ! 3. Media queries (CSS3)
- 20.
- 21.
- 22.
- 23.
- 24.
- 25. VANTAGENS • Otimização para ferramentas debusca • Centralização de conteúdo • Apenas um código-fonte para dar manutenção
- 26.
- 27.
- 28. –Aaron Gustafson (2011) “WebDesign Adaptativo é um outro termo para progressive enhancement: leva em conta vários níveis de HTML, CSS, JavaScript e tecnologia assistiva” http://blog.easy-designs.net/archives/on-adaptive-vs-responsive-web-design/
- 29.
- 30. O QUE É MOBILEFIRST?
- 31. MELHOR EXPERIÊNCIA DOUSUÁRIO! MOBILE FIRST Foco no conteúdo Priorizar o necessário Usar somente o que for preciso + + =
- 32.
- 33. MOBILE FIRST • Penserelativo, não estático ou absoluto; • Aprimoramentos CSS/JavaScript; • Evite carregar dados desnecessários; • Transições CSS (JavaScript são acelerados por hardware); • Sprites CSS/SVG; • SIMPLIFIQUE!
- 35.
- 36.
- 37. TIPOGRAFIA E ARELAÇÃO px / em
- 38. px em 12 .75 161 24 1.5 32 2 font-size: 100%;
- 39. QUAL É OSEGREDO? http://www.fantom-xp.com/wallpapers/33/Secret_service_agent.jpg
- 40. alvo ÷ contexto= resultado QUAL É O SEGREDO? http://www.fantom-xp.com/wallpapers/33/Secret_service_agent.jpg
- 41. EXERCÍCIO 1 -INÍCIO
- 42.
- 43.
- 44. VIEWPORT • width (pixel-width/device-width); •height (pixel-height/device-height); • initial-scale; • minimum-scale; • maximum-scale; • user-scalable (yes/no). ! <meta name="viewport" content="width=device-width, initial-scale=1” />
- 45.
- 46.
- 47. <link rel=”stylesheet” href=”styles.css”media=”all” /> ! <link rel=”stylesheet” href=”main.css” media=”screen” /> ! <link rel=”stylesheet” href=”print.css” media=”print” /> MEDIA QUERIES
- 48. <link rel=”stylesheet” href=”styles.css”media=”all” /> ! <link rel=”stylesheet” href=”main.css” media=”screen” /> ! <link rel=”stylesheet” href=”print.css” media=”print” /> @media screen and (min-width: 320px) and (max-width: 480px) { … } @media screen and (max-width: 1080px) { … } MEDIA QUERIES
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61. EXERCÍCIO 2 -INÍCIO
- 62.
- 63.
- 64. MARGIN E PADDING –EthanMarcotte (2010)
- 65. MARGIN E PADDING •1. Ao definir a propriedade margin de um elemento, o contexto é a largura do elemento que o contém; • 2. Ao definir a propriedade padding de um elemento, o contexto é a largura do próprio elemento. http://css-tricks.com/box-sizing/ padding conteúdo margin border
- 66. BOX-SIZING • É possívelcontrolar o tamanho com width, a borda com border e as margens externas e internas com margin e padding. Box model é como todas essas propriedades se relacionam pra determinar o tamanho final do elemento. .elemento { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } http://css-tricks.com/box-sizing/
- 67.
- 68. img, embed, object,svg, video { height: auto; max-width: 100%; } IMAGENS FLEXÍVEIS
- 69. EXERCÍCIO 3 -INÍCIO
- 70.
- 71.
- 72.
- 73. EXERCÍCIO 4 -INÍCIO
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96.
- 97.
- 98.
- 99.
- 100. Inspecione o iPhoneatravés do Safari...
- 101.
- 102.
- 103.
- 104.
- 105. • touchstart Quanto o dedotoca a superfície ! • touchmove Quanto o dedo desliza na superfície ! • touchend Quando o toque é finalizado TOUCH EVENTS
- 106. document.addEventListener(‘touchstart’, function(e) { ... }) document.addEventListener(‘touchmove’,function(e) { ... }) document.addEventListener(‘touchend’, function(e) { ... }) TOUCH EVENTS
- 107.
- 108.
- 110.
- 113.
- 114. EPSTEIN, Zach. Apple’s globaltablet market share falls to all-time low. BGR, 2013. Disponível em: <http://bgr.com/2013/07/25/ipad-market-share-q2-2013-apple-tablets/>. Acesso em: 05 set. 2013. ! MARCOTTE, Ethan. Responsive Web Design. A List Apart, 2010. Disponível em: <http:// alistapart.com/article/responsive-web-design>. Acesso em: 09 set. 2013. ! WALTERS, Tim. Understanding the “Mobile Shift”: Obsession with the Mobile Channel Obscures the Shift to Ubiquitous Computing. Digital Clarity Group, 2012. Disponível em: <http://digitalclaritygroup.com/wordpress/wp-content/uploads/2012/12/DCG-Insight- Understanding-the-Mobile-Shift-Nov-2012.pdf>. Acesso em: 03 set. 2013. REFERÊNCIAS
- 115.