Web Design Responsivo
Aprenda a criar sites que se adaptam automaticamente a qualquer dispositivo, desde desktops até telefones celulares
Descrição do livro
Este livro foi escrito para pessoas envolvidas na criação de sites tanto na área de design quanto na de desenvolvimento e programação, que desejam criar interfaces usáveis e acessíveis em qualquer dispositivo independentemente de suas características, isto é, que se adaptem às mais variadas resoluções de tela.
O objetivo do livro é fornecer informações detalhadas das técnicas do design responsivo, estudando seus princípios e detalhando os métodos e as tecnologias aplicáveis. Explicações teóricas em linguagem corrente e clara, dispensando, sempre que possível, o jargão técnico avançado, são acompanhadas de exemplos práticos detalhados passo a passo e complementados por arquivo HTML para consulta.
Os conceitos e o entendimento das técnicas de desenvolvimento de interfaces responsivas são uma poderosa ferramenta de apoio na criação de sites mais acessíveis, enriquecendo a experiência do usuário. Profissionais da área de design, familiarizados com as técnicas aqui descritas, contarão com uma valiosa fonte de conhecimento e conceitos a empregar no planejamento das funcionalidades para incrementar suas criações, tornando-as universais.
Ver menos ▲Sumário
Sumário
- Agradecimentos
- Colaboradores
- Isenção de responsabilidade
- Sobre o autor
- Introdução
- Introdução ao Design Responsivo
- 1.1 Breve visão histórica de layouts Web
- 1.2 Design responsivo entra em cena
- 1.2.1 Etimologia responsiva
- 1.3 Princípios do design responsivo
- 1.3.1 Introdução ao RWD
- 1.3.2 Ingredientes do RWD
- 1.3.3 Pilares do RWD
- 1.3.4 Mitos do RWD
- 1.3.5 Conceito mobile first
- 1.4 Web Design Adaptivo
- 1.5 RWD segundo Horácio Pastor Soares
- 1.5.1 Objetivos semelhantes, experiências diferentes
- 1.5.2 Desktop x Mobile
- 1.5.3 Limitações podem ser boas para o negócio
- 1.5.4 Mobile First
- 1.5.5 Pesquisa, concepção participativa, validação e mensuração
- 1.5.6 Design Responsivo e o mobile first
- HTML5 e CSS3
- 2.1 Introdução
- 2.1.1 Performance
- 2.1.2 Multimídia
- 2.1.3 Acessibilidade
- 2.1.4 Acesso a funcionalidades nativas
- 2.1.5 Formulários
- 2.2 HTML5
- 2.2.1 Estrutura e sintaxe
- 2.2.2 Elementos da HTML5
- 2.3 CSS
- 2.3.1 Medidas CSS
- 2.3.2 Propriedades CSS
- Media Queries
- 3.1 Introdução
- 3.2 Anatomia da media query
- 3.3 Funcionalidades de mídia
- 3.4 Fundamentos de media queries
- 3.4.1 Breakpoints
- 3.4.2 Exemplos
- 3.4.3 Orientações gerais
- 3.5 Exemplo prático
- 3.5.1 Marcação HTML
- 3.5.2 Estilização nativa e CSS reset
- 3.5.3 Estilização inicial de margens, espaçamentos e fontes
- 3.5.4 Navegação mobile first
- 3.5.5 Media queries
- 3.6 Suporte
- Imagens flexíveis
- 4.1 Imagens flexíveis
- 4.1.1 Introdução
- 4.1.2 Retina display
- 4.1.3 Otimização de imagens
- 4.1.4 Técnicas para inserção de imagens flexíveis
- Mídias flexíveis
- 5.1 Vídeos flexíveis
- 5.1.1 Elemento video da HTML5
- 5.1.2 Vídeos do YouTube
- 5.1.3 Vídeos do Vimeo
- 5.2 Mapas do Google
- 5.3 Conclusões
- Acessibilidade na web e design responsivo
- 6.1 Introdução
- 6.2 Recomendações para desenvolver conteúdo acessível na web
- 6.2.1 Não utilize somente a cor para transmitir uma informação
- 6.2.2 Imagens acessíveis
- 6.2.3 Formulários acessíveis
- 6.2.4 Utilização de mouse para interação e navegação
- 6.2.5 Título da página ausente ou inapropriado
- 6.2.6 Idioma da página
- 6.2.7 Abrindo novas janelas
- 6.2.8 Recarregamento automático de páginas
- 6.2.9 Respeite a semântica
- 6.2.10 Utilize cabeçalhos de forma adequada
- 6.2.11 Utilize landmarks
- 6.2.12 Simplifique suas tabelas
- 6.2.13 Valide a marcação HTML
- 6.2.14 Validação de acessibilidade
- 6.3 Dicas importantes
- 6.4 Conclusão
- Transformando layout existente em responsivo
- 7.1 Introdução
- 7.2 Transformando pixel em porcentagem
- 7.2.1 Introdução
- 7.2.2 De fixo para responsivo
- 7.2.3 Polyfill para box-sizing
- 7.3 iMasters, de fixo para responsivo
- 7.3.1 Layout existente
- 7.3.2 Etapas de transformação do layout fixo em responsivo
- Criando um layout responsivo
- 8.1 Apresentação do layout
- 8.2 Componentes do layout
- 8.3 Criação da página responsiva
- 8.3.1 Primeira etapa: Estrutura e template da página
- 8.3.2 Segunda etapa: Topo
- 8.3.3 Terceira etapa: Navegação
- 8.3.4 Quarta etapa: Caixa de busca
- 8.3.5 Quinta etapa: Slide show
- 8.3.6 Sexta etapa: Área de notícias
- 8.3.7 Sétima etapa: Área de informações
- 8.3.8 Oitava etapa: Área do rodapé
- 8.3.9 Nona etapa: Breakpoints
- 8.4 Considerações finais
- Media queries na visão de Almir Filho
- 9.1 Introdução
- 9.2 Media types
- 9.2.1 Media types suportados
- 9.3 Media features
- 9.3.1 Definição de media features
- 9.3.2 Prefixos min- e max-
- 9.4 Composição de uma media query
- 9.4.1 Combinação de media queries
- 9.4.2 Modificadores not e only
- 9.5 Media features suportadas
- 9.5.1 Características de dimensões de tela
- 9.5.2 Características de qualidade de exibição
- 9.5.3 Características de cores
- 9.6 API JavaScript
- 9.7 Futuro das media queries
- 9.7.1 luminosity
- 9.7.2 script
- 9.7.3 pointer
- 9.7.4 hover
- 9.7.5 updates
- 9.7.6 overflow-block
- 9.7.7 overflow-inline
- Elementos da HTML5
- Atributos da HTML5
- Referências bibliográficas
- Índice remissivo
Livros relacionados
Opinião dos leitores
Gerson G
Bom livro.
Everton V
Mais uma boa obra escrita pelo Maujor. Minha única reclamação são os capítulos iniciais que agregam pouco ao aprendizado. A leitura começa a "esquentar" quando é abordado a media query.
Luiz C de A D
Excelente. Isto para mim já não é surpresa pois virou rotina. Os livros do Maujor, por mais que saibamos da sua capacidade, seu conhecimento e organização, sempre conseguem colocar um "plus" a mais e nos surpreender. Estou trabalhando com este livro desde que o recebi. Aliás, parabéns também para a Novatec, sempre enviando imediatamente e entregando antes do prazo prometido. Permito-me colocar um slogan: "Maujor e Novatec, a parceria da excelência."
Rudnei M
Excelente livro, um dos melhores do Maujor.