HTML5 - Estilos e Responsividade (eBook)

HTML5 ESTILOS E RESPONSIVIDADE

Pedro Coelho

FCA – Editora de Informática, Lda www.fca.pt

EDIÇÃO FCA – Editora de Informática, Lda. www.fca.pt Copyright © 2016, FCA – Editora de Informática, Lda. ISBN eBook: 978-972-722-826-3 1.ª edição eBook: abril 2016 Capa: José Manuel Ferrão – Look-Ahead Todos os nossos livros passam por um rigoroso controlo de qualidade, no entanto aconselhamos a consulta periódica do nosso site (www.fca.pt) para fazer o download de eventuais correções.

Não nos responsabilizamos por desatualizações das hiperligações presentes nesta obra, que foram verificadas à data de publicação da mesma.

Os nomes comerciais referenciados neste livro têm patente registada.

Reservados todos os direitos. Esta publicação não pode ser reproduzida, nem transmitida, no todo ou em parte, por qualquer processo eletrónico, mecânico, fotocópia, digitalização, gravação, sistema de armazenamento e disponibilização de informação, sítio Web, blogue ou outros, sem prévia autorização escrita da Editora.

ÍNDICE GERAL 0. SOBRE O LIVRO 0.1. O que posso encontrar neste livro 0.2. Requisitos 0.3. A quem se dirige este livro 0.4. Código dos exemplos 0.5. Convenções 0.6. Sobre o Autor 0.7. Organização do livro 0.8. Suporte 1. INTRODUÇÃO AO HTML E ÀS APPS MÓVEIS 2. FOLHAS DE ESTILO WEB E MOBILE: CSS3 2.1. Introdução ao CSS 2.2. Estruturação de documentos 2.3. Fontes 2.4. Links 2.5. Listas 2.6. Tabelas 2.7. Imagens 2.8. Formulários Conclusão 3. DISPOSITIVOS MÓVEIS E HTML5 3.1. Adaptação aos dispositivos e browsers 3.2. Deteção de browsers 3.3. Construindo aplicações móveis Web Conclusão

4. APLICAÇÕES MÓVEIS HTML5: CANVAS, JAVASCRIPT E JQUERY MOBILE 4.1. Canvas 4.1.1. Retângulos 4.1.2. Desenhar linhas e polígonos 4.1.3. Desenhar círculos 4.1.4. Texto 4.1.5. Imagens 4.2. JavaScript 4.2.1. Variáveis e tipos de dados 4.2.2. Tipos de dados 4.2.3. Expressões e operações 4.2.4. Comentários 4.2.5. Operações 4.2.6. Operações aritméticas 4.2.7. Operações lógicas 4.2.8. Operações com bits 4.2.9. Sintaxe curta 4.2.10. Controlo de fluxo: condicionais e ciclos 4.2.10.1. Expressões condicionais 4.2.10.2. Ciclos Ciclo while Ciclo for 4.2.11. Funções 4.2.12. Eventos 4.3. jQuery Mobile Conclusão ANEXO – PROPRIEDADES DE ESTILO DE CSS3 GLOSSÁRIO DE TERMOS – PORTUGUÊS EUROPEU/PORTUGUÊS DO BRASIL ÍNDICE REMISSIVO

COMPLEMENTOS NA WEB

0 0.1

SOBRE O LIVRO

O QUE POSSO ENCONTRAR NESTE LIVRO

Este livro foca, com algum detalhe, o desenvolvimento de aplicações móveis com HTML5, em especial a componente de estilos e interação do HTML5, abordando-se nomeadamente o CSS (versão 3) e o JavaScript. É, ainda, apresentada uma referência introdutória ao jQuery Mobile.

Explica-se também o enquadramento tecnológico atual no que respeita ao desenvolvimento de aplicações móveis, cobrindo com algum detalhe os motivos que levam alguns utilizadores a optar pelo desenvolvimento de aplicações nativas, outros por HTML5, e outros ainda por híbridas.

São também focadas as formas como se pode utilizar o design HTML responsivo para gerar conteúdos que funcionam de forma transparente em qualquer dispositivo, seja ele um smartphone, um tablet, um computador, uma televisão ou outro.

Em resumo, no final da leitura do livro, o leitor terá sistematizado (ou adquirido) os seus conhecimentos de HTML5 nas suas várias vertentes, e terá aprendido a utilizar estas tecnologias para criar e publicar sites e aplicações móveis.

0.2

REQUISITOS

Presume-se que o leitor tem conhecimento da sintaxe HTML5 básica. Não são necessários conhecimentos prévios de programação, mas a instalação e configuração dos ambientes (por exemplo, para ver os exemplos) poderá suscitar algumas dúvidas em leitores menos experimentados, razão pela qual se recomenda que o leitor tenha algumas noções de Web e o conhecimento de como funcionam os ambientes de desenvolvimento.

Segue-se, contudo, uma abordagem passo a passo para os vários temas.

Para tirar o melhor partido possível dos exemplos, o leitor deverá instalar um editor (recomenda-se o Eclipse) e abrir uma conta num ambiente de desenvolvimento cloud (sugere-se o Heroku, gratuito para baixos volumes de utilização).

0.3

A QUEM SE DIRIGE ESTE LIVRO

Este livro destina-se a quem pretenda iniciar-se no desenvolvimento de aplicações móveis, com recurso a uma tecnologia simples e acessível, como é o HTML5, ou àqueles que, já efetuando desenvolvimento de aplicações móveis nativas, pretendam rapidamente iniciar-se no desenvolvimento de aplicações HTML5, por exemplo híbridas. Destina-se, ainda, aos programadores e autores de sites Web que pretendam utilizar o HTML5 para tornar as suas páginas acessíveis por qualquer dispositivo.

0.4

CÓDIGO DOS EXEMPLOS

O livro vem acompanhado do código dos exemplos que são apresentados ao longo dos vários capítulos, com uma nomenclatura que torna simples ao leitor localizar qualquer um deles. Caso o leitor use o Eclipse, pode importar os ficheiros diretamente para os seus projetos e testar as funcionalidades descritas (de notar, no entanto, que para publicar conteúdos na Web tem que dispor de uma conta para o efeito, podendo, conforme

aconteceu nos exemplos do livro, utilizar os serviços online do Heroku (integrável diretamente com o seu Eclipse).

Todos os exemplos apresentados foram testados com um dispositivo real, com emuladores e com browsers Web, conforme os exemplos.

0.5

CONVENÇÕES

Nos exemplos listados optou-se por mostrar todo o código HTML tal como foi testado. Em situações específicas extraiu-se parte desse código para realçar algum detalhe, mas no geral a regra seguida foi a de mostrar todo o código, para possibilitar ao leitor um total enquadramento.

Utilizou-se a expressão anglo-saxónica tag para designar os elementos HTML.

0.6

SOBRE O AUTOR

Licenciado em Engenharia Eletrotécnica e de Computadores pelo Instituto Superior Técnico. Consultor e Gestor de Projetos de TI nas áreas da Web e da Internet. Com mais de 20 anos de experiência, já esteve envolvido em grandes projetos. Responsável pela implantação de Sistemas de TI (Billing, CRM, Provisioning, Plataformas de Serviços, etc.), redes de dados (TCP/IP), infraestruturas de serviço completo (ISP), serviços de Internet e aplicações complexas, e liderança dos departamentos de TI. Autor de vários livros sobre Sistemas de Informação, Internet, Web e Programação, todos editados pela FCA.

0.7

ORGANIZAÇÃO DO LIVRO

O livro foi estruturado em 4 capítulos, seguindo uma lógica de aprendizagem sequencial das várias componentes da tecnologia:

Capítulo 1: “Introdução ao HTML e às Apps Móveis” – capítulo introdutório no qual se focam os temas da utilização do HTML no âmbito mobile; Capítulo 2: “Folhas de Estilo Web e Mobile : CSS3” – aborda-se as folhas de estilo em Web e Mobile; cobertura exaustiva dos elementos disponíveis no CSS3; Capítulo 3: “Dispositivos Móveis e HTML5” – abordagem da forma como o HTML5 pode ser utilizado para dar resposta a necessidades de cobertura multidispositivo, nos mundos Web e Mobile; Capítulo 4: “Aplicações Móveis HTML5: Canvas, JavaScript e jQuery Mobile” – cobertura detalhada dos temas Canvas, JavaScript e jQuery Mobile, algumas das funcionalidades mais relevantes de que o HTML5 dispõe na construção de aplicações.

O leitor poderá encontrar, ainda, o anexo “Propriedades de estilo de CSS3”, no qual se apresenta as propriedades disponíveis no CSS3 para utilização em sites e em aplicações HTML5.

0.8

SUPORTE

Todos os exemplos foram testados com dispositivos móveis reais e emuladores, não sendo expectável que surjam problemas de compatibilidade de versões em terminais ou browsers recentes.

Para qualquer questão, problema ou dúvida, o leitor poderá contactar o autor através do e-mail pac@pedrocoelho.com.

1

INTRODUÇÃO AO HTML E ÀS APPS MÓVEIS

O HTML5 pode ser utilizado para a construção de experiências de utilização móveis, quer seja implementando sites para acesso móvel, quer seja utilizando-o para construir aplicações que correm nos dispositivos como se fossem apps (as chamadas aplicações híbridas). Neste livro vamos descrever em detalhe como se pode utilizar o HTML5, em conjunto com tecnologias associadas como os estilos (CSS) ou o JavaScript para implementar sites e aplicações móveis.

Ao construir uma página HTML, os programadores e os designers estão habituados a implementar modelos de design em que os objetos mantêm as dimensões quando o tamanho da janela se altera. Ora, num dispositivo móvel, os tamanhos de ecrã e resoluções variam bastante, pelo que é importante que o conteúdo a visualizar se adapte de alguma forma às condições de visualização.

Vamos ver um exemplo do que o HTML5 pode fazer para se adaptar às comdições físicas de um dispositivo, e como o design é importante. O primeiro exemplo consiste num design em que os elementos mantêm um tamanho fixo. Construímos a interface com HTML e formatamos a mesma com CSS, sendo que fixamos o tamanho do container nos 300 pontos (secção container). O leitor que não conheça CSS não se preocupe com a sintaxe porque vamos voltar a este tema já no próximo capítulo, nesta fase estamos somente a demonstrar o conceito.

Para poder visualizar o exemplo num dispositivo móvel, o leitor terá de ter o ficheiro HTML acessível num site na Internet. Ou, em alternativa, instalar um emulador (como o Android Virtual Device Manager) e aceder ao ficheiro em modo local ou na Internet.

A recomendação, e uma vez que o leitor que desenvolver sites móveis vai querer ver as suas criações com um dispositivo real, é para que o leitor crie uma conta num site cloud (como o Heroku, disponível em www.heroku.com) e que instale o editor Eclipse (www.eclipse.org), que pode ligar diretamente ao site e publicar com um só clique as suas páginas.

EXEMPLO 1.1 – DESIGN FIXO <!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <script src="modernizr-1.7.min.js"> </script> <style> body, #main ul, #main li, h1 { margin:0; padding:0; } body { background:#F0F0F0; } #container { font-family:Arial;

width:300px; margin:0 auto; } header, footer { display:block; } #main li{ list-style:none; height:40px; background:#12A438; margin-bottom:0.5em; line-height:40px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; } #main li a { color:white; text-decoration:none; margin-left:1em; } </style> </head> <body> <div id="container">

<header> <h1> Titulo </h1> </header> <nav id="main"> <ul> <li><a href="#">Nome</a></li> <li><a href="#">Morada</a></li> <li><a href="#">Telefone</a></li> <li><a href="#">Email</a></li> <li><a href="#">Ajuda</a></li> </ul> </nav> </div> </body> </html> Visualizando a sua pรกgina com um smartphone ou tablet, ou com o Virtual Device Manager, o leitor verรก uma interface normal:

FIGURA 1.1 – Visualização de interface de design fixo

Se, no entanto, rodar o dispositivo colocando-o na horizontal (no emulador isto simula-se com as teclas Ctrl-F11) o design já não parece tão atrativo, por ter muito espaço em branco:

FIGURA 1.2 – Visualização de interface de design fixo rodada

Em interfaces móveis utiliza-se o chamado design fluido, ou responsivo, em que os elementos se “mexem” e adaptam, respondendo à mudança das condições do ecrã. Neste exemplo, fizemos uma alteração muito simples, fixando as margens laterais ao nível do CSS na secção container. O resultado ao nível da experiência para o utilizador resulta contudo bastante mais interessante.

EXEMPLO 1.2 – DESIGN FLUIDO <!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <script src="modernizr-1.7.min.js"> </script>

<style> body, #main ul, #main li, h1 { margin:0; padding:0; } body { background:#F0F0F0; } #container { font-family:Arial; margin:0 10px; } header, footer { display:block; } #main li{ list-style:none; height:40px; background:#12A438; margin-bottom:0.5em; line-height:40px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; } #main li a {

color:white; text-decoration:none; margin-left:1em; } </style> </head> <body> <div id="container"> <header> <h1> Titulo </h1> </header> <nav id="main"> <ul> <li><a href="#">Nome</a></li> <li><a href="#">Morada</a></li> <li><a href="#">Telefone</a></li> <li><a href="#">Email</a></li> <li><a href="#">Ajuda</a></li> </ul> </nav> </div> </body> </html> A visualização do exemplo com o dispositivo na vertical não vem trazer uma diferença muito assinalável ao nível da experiência de visualização da interface:

FIGURA 1.3 – Visualização de interface de design fluido

No entanto, ao rodar o dispositivo a interface adapta-se às novas condições do ecrã, e os elementos alargam-se para ocupar todo o espaço disponível.

FIGURA 1.4 – Visualização de interface de design fluido rodado

Mais do que ser mais agradável à vista num dispositivo pequeno, este é o comportamento que os utilizadores vão estar à espera quando utilizam os seus dispositivos móveis, pelo que o design deve ser sempre feito de forma o mais adaptativa possível.

As razões para isto ser assim nos dispositivos móveis (smartphones e tablets) são basicamente duas: os dispositivos móveis são visualizados em modo vertical e horizontal (mudando de um para o outro simplesmente rodando o dispositivo, pelo que todos os utilizadores o fazem) e o espaço disponível nestes dispositivos é inferior às grandes resoluções que temos nos computadores fixos e mesmo portáteis, pelo que todo o espaço é importante.