Design Responsive HTML

Transcrição

1 Design Responsive HTML Prof. Me. Denise Neves IHC

2 Conteúdo da Aula Primeira Parte 1- Design Responsivo 2- Mobile First 3- Web Design Adaptativo 4- Semântica HTML5

3 Design Responsivo Etimologia responsiva Em 1960, um pesquisador americano chamado Nicholas Negroponte analisou um movimento da arquitetura pós-moderna, passando a aplicar a robótica para criar ambientes sustentáveis e adaptáveis às condições predefinidas ou desejáveis, seja ao corpo humano, às cores, à quantidade de pessoas e até mesmo às condições climáticas. Pensar em desenvolver formas e objetos adaptáveis exige uma solução que combine uma aplicação tecnológica com uma excelente qualidade final do produto.

4 Design Responsive Responsive Web Design, ou RWD, surgiu precisamente em Tudo começou com um post no blog A List Apart, onde Ethan Marcotte retrata a mudança de comportamento e crescimento de usuários mobile, sinalizando que isso já estava afetando (em 2010) empresas que queriam seus websites disponíveis para novos dispositivos. A felicidade de Ethan foi comparar esse movimento ao trabalho de arquitetura responsiva de Negroponte, em que temos de adaptar de forma inteligente o ambiente às variáveis de interação do usuário, nascido na arquitetura pós-moderna e atualmente apadrinhado na área de desenvolvimento web.

5 Design Responsivo A matéria com o título "Responsive Web Design começa citando John Allsopp : O controle que os designers têm sobre conteúdos publicados na mídia impressa e tão desejado para aplicação na web é, simplesmente, consequência das restrições que a página impressa impõe. Nós devemos nos conscientizar de que a web não impõe as restrições da mídia impressa, ela necessita de design flexível. Devemos, acima de tudo, refluxo das coisas". ( "aceitar o fluxo e o Fonte:

6 Princípios do RWD Não diz respeito simplesmente e somente à adaptação do layout ao tamanho da tela. Design capaz de "responder" às características do dispositivo ao qual é servido. Responder, nesse contexto, tem o sentido de movimentar-se expandindo e contraindo. O design responsivo ou layout responsivo expande e contrai com a finalidade de se acomodar de maneira usável e acessível à área onde é visualizado ou, mais genericamente, ao contexto onde é renderizado, seja um smartphone, um tablet, um desktop, um leitor de tela, um mecanismo de busca etc.

7 Design Responsivo Ethan, o pai do design responsivo para a web, usou o termo "ingredientes técnicos" para relacionar os três componentes, ou as três tecnologias fundamentais para desenvolvimento do design responsivo. São elas : grid fluído; imagens e mídia flexíveis; media queries.

8 Design Responsivo Grid fluído é um termo que foi popularizado e incorporado definitivamente ao jargão de desenvolvimento graças ao aparecimento dos frameworks CSS. Antes do advento desses frameworks, o termo usado era o layout com seus componentes fluídos, que continua válido. Se você preferir, siga com ele. Layout fluído é aquele cujas medidas CSS são definidas em unidades relativas, tais como porcentagens e ems, e não em medidas absolutas como pixel.

9 Design Responsivo Media queries é uma tecnologia CSS que permite ao autor servir folhas de estilos baseadas em determinadas características do dispositivo ao qual o layout será servido.

10 Design Responsivo Mídia e imagem flexíveis são aquelas capazes de contrair ou expandir suas dimensões ou ter suas dimensões alteradas por scripts em função do contexto onde são renderizadas. As mídias mais comuns presentes em layouts são: vídeos, áudio e widgets em geral.

11 Design Responsivo Pilares do RWD As tecnologias que constituem os pilares de sustentação do design responsivo são: HTML5 JavaScript para compatibilidades CSS3

12 Mobile First No dia 3 de novembro de 2009, Luke Wroblewski publicou uma matéria em ( cujo título é "Mobile First" defendendo e justificando a necessidade de se começar o projeto de um layout a partir da sua apresentação em dispositivos móveis. A matéria criou o termo mobile first, que foi rapidamente incorporado ao jargão do desenvolvimento para dispositivos móveis. Luke começa a matéria afirmando : Na maioria das vezes, a criação do layout para servir uma aplicação ou um site para dispositivos móveis só começa depois que o layout para desktop está pronto. Nessa matéria, apresento três razões para que o fluxo de criação do layout seja invertido, isto é, primeiro o layout para dispositivo móvel e a partir daí o layout para desktop.

13 Razões para projetar primeiro pensando em layout para dispositivos móveis: Mobile First Uma explosão da tecnologia mobile está em curso Layout para dispositivo móvel implica em otimização de dados e ações a serem projetadas com descarte de elementos desnecessários. Dispositivos móveis estão incorporando a cada dia mais e mais funcionalidades nativas e capacidades de criação de conteúdos ricos não exstentes na maioria dos navegadores para desktop.

14 Mobile First Tabela a seguir: Apesar de os objetivos dos usuários ao acessarem sites/sistemas nas versões desktop e mobile serem os mesmos, ou muito semelhantes, as experiências certamente são diferentes e devem ser consideradas durante a concepção de um projeto web.

15 Desktop Tela grande. Teclado-padrão. Mouse. Banda larga, custo baixo. Energia abundante. Rede consistente. Alta capacidade de processamento. Espaço de sobra no HD. Uso em casa e/ou no trabalho. Mobile Tela pequena com diferentes dimensões, mas com substancial perda de área com relação ao desktop. Teclado pequeno e sem feddback tátil nas versões touch. Sem cursor e feedback. 3G,4G, limite de banda, custo alto. tela9 Energia limitada, principalmente se os recursos como GPS estiverem ativos. Rede inconsistente. Processamento limitado. Limite de espaço de armazenamento. Uso em qualquer hora, em qualquer lugar.

16 Mobile First No tablet: Como o tamanho do tablet é naturalmente menor (de 480px à 768px), para fazermos um site responsivo, teremos de dar uma realocada no conteúdo. No monitor: Assim ficará o nosso site após a sua concepção, ou melhor, essa será a estrutura das informações que conterão no nosso site quando ele estiver terminado. Aqui imaginamos um monitor de desktop ou notebook de resolução No mobile: O modelo de site para mobile deve ser muito mais estreito que o de tablet, isso porque seus tamanhos podem variar de 320px à 480px.

17 HTML5 Navegação Mobile first : Técnica baseada exclusivamente em CSS e inicialmente proposta por Frances de Wall

18 Design Responsivo Mitos 1) Usuários utilizam dispositivos móveis apenas na rua. 2) Usuários de dispositivos móveis não precisam do conteúdo total. 3) Usuário de dispositivos móveis preferem uma experiência mais simples. 4) Existe uma internet móvel.

19 Design Adaptativo O termo Adaptive Web Design (AWD) foi criado por Aaron Gustafson, autor do livro "Adaptive Web Design Crafting Rich Experiences with Progressive Enhancement", no qual descreve o conceito e as técnicas de criação de layout que se adaptem às características e às capacidades do dispositivo do usuário. AWD diz respeito à criação de interfaces que se adaptam às capacidades do usuário, seja na sua forma, seja nas suas funções, e o autor segue dizendo AWD é outro termo para progressive enhancement melhoria progressiva, mas que considera o modo como as funcionalidades individuais daquelas capacidades interagem entre si para determinar o comportamento do todo, uma vez que leva em conta variados níveis de marcação HTML, CSS e JavaScript bem como suporte para tecnologias assistivas.

20 Performance: Código mais leves, de carregamento mais rápido. Ex: <footer> conteúdo de rodapé ---- </footer> HTML5 Multimidia : Novas funcionalidade nativas para inserção de mídia. Acessibilidade : A natureza semântica e seus recursos de WAI-ARIA geram códigos mais acessíveis. Formulários : A criação dos novos elementos para campos de formulário. Notadamente os novos elementos do tipo input Ex: Campo tipo data faz aparecer um widget de seletor de datas. Os dispositivos móveis reconhecem o tipo de campo definido na marcação do elemento do formulário e, ao ser dado o foco ao campo, automaticamente apresentam ao usuário a interface nativa apropriada, como por exemplo seletor de datas ou o teclado numérico, ou alfanumérico.

21 Especificação mínima para design responsive: HTML5 <!doctype html> <html lang="pt-br"> <head> <meta charset="utf-8"> <title>engenharia WEB</title> <meta name="description" content= Pós-graduação do Senac"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel= stylesheet href= estilos/arquivo.css > </head> <body> Corpo da página </body> </html>

22 Elementos do html5 HTML5 Um dos objetivos da HTML5 foi o de criar uma marcação com forte enfâse na semântica. Semântica diz respeito ao uso do elemento apropriado para o conteúdo que marca, ou seja, elementos h1-h6 para títulos e subtítulos, elementos p para parágrafos, elemento li para listas e assim por diante. Novos elementos : article, header, section, footer, main, etc.

23 Estrutura da marcação HTML HTML5

24 <body id="home"> <div class="tudo"> <header> <h1>portal da Copa 2004</h1> </header> <nav> NAVEGAÇÂO </nav> <div class="busca"> BUSCA </div> <main> <section class="slideshow"> SLIDE SHOW </section> <div class="noticias"> NOTÍCIAS </div> <div class="informacoes"> INFORMAÇÕES </div> </main> <footer> RODAPE </footer> </div> <!-- /.tudo --> </body> </html>

25 Acessibilidade HTML5 Cores Imagens acessíveis : Todo elemento não textual deverá ter um texto alternativo. Formulários acessíveis : Campos de formulário são elementos não textuais, que necessitam de entrada de dados de usuários. Exemplo: <fieldset> <legend> Dados Pessoais </legend> <label for=nome>nome </label> <label type = text id= nome name= nome > </fieldset>

26 Referências Silva, M.S. WEB DESIGN RESPONSIVE. Novatec Weyl, Estelle. MOBILE HTML5. O REILLY Links: Curiosidade: