introdução ao desenvolvimento para dispositivos...
Post on 21-Jan-2019
220 Views
Preview:
TRANSCRIPT
Introdução ao Desenvolvimento para Dispositivos Móveis
Victor Adriel de Jesus OliveiraINF - UFRGS
Material Extra: HTML
Introdução ao padrão HTML
• A especificação do HTML e de outros padrões abertos (como XHTML, CSS, JS) é responsabilidade do W3C
• O Consórcio World Wide Web (W3C) é uma comunidade internacional que desenvolve padrões com o objetivo de garantir o crescimento da web
2
Introdução ao padrão HTML
• HTML (HyperText Markup Language) é uma linguagem de marcação usada para a construção de páginas na web
• O HTML é baseado no conceito de Hipertexto que são conjuntos de elementos – ou nós – ligados por conexões. Estes elementos podem ser palavras, imagens, vídeos, áudio, documentos, etc
3
Introdução ao padrão HTML
• Todo documento HTML apresenta etiquetas, elementos entre os sinais ‘<’ e ‘>’
Esses elementos são os comandos de formatação da linguagem. A maioria das etiquetas tem sua correspondente de fechamento:
<etiqueta>...</etiqueta>
4
Introdução ao padrão HTML
• Para versões antigas do HTML, as etiquetas definem a formatação de uma porção de texto do documento
• Alguns elementos são chamados “vazios”, pois não marcam uma região de texto, apenas inserem algum elemento no documento:
<etiqueta/>
5
Introdução ao padrão HTML
• Uma etiqueta é formada por comandos, atributos e valores:
<img src=“../imgs/imagem.png” />
6
atributocomando valor
Introdução ao padrão HTML
• Estrutura básica:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Título</title>
</head>
<body>
texto, imagem, links, ...
</body>
</html>
7
Introdução ao padrão HTML
• Estrutura básica:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Título</title>
</head>
<body>
texto, imagem, links, ...
</body>
</html>
8
O DOCTYPE define o tipo do documento e especificação da linguagem utilizada
Introdução ao padrão HTML
• Estrutura básica:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Título</title>
</head>
<body>
texto, imagem, links, ...
</body>
</html>
9
A etiqueta <html> delimita o conteúdo do documento HTML
Introdução ao padrão HTML
• Estrutura básica:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Título</title>
</head>
<body>
texto, imagem, links, ...
</body>
</html>
10
No elemento <head> são colocados links para folhas de estilo, javascript, bibliotecas e plug-ins externos ao documento HTML. Aqui também são colocados o título do documento e metadados.
Introdução ao padrão HTML
• Estrutura básica:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Título</title>
</head>
<body>
texto, imagem, links, ...
</body>
</html>
11
O corpo do texto é delimitado pela etiqueta <body> e contém todo o conteúdo visível na tela do navegador. Ou seja, textos, imagens, vídeos e links são colocados nessa região do documento.
Versões do HTML
• Após o HTML 4.01, a W3C focou na especificação XHTML(eXtensible Hypertext Markup Language)
12
HTML 1.0 (1989)
A primeira versão do HTML. Muito limitada em termos de estilização e apresentação do conteúdo.
HTML 2.0 (1995)
Especificação suportada por mais navegadores, mas cada navegador criava suas próprias funcionalidades. Nesse período a W3C foi criada.
HTML 3.2 (1997)
Incluiu suporte a folhas de estilo CSS.
HTML 4.01(1999)
Focou em separar estilo e apresentação do conteúdo.
XHTML
• O XHTML 1.0 tornou-se uma recomendação da W3C desde 26 de janeiro de 2000
• O XHTML é uma versão mais rigorosa e limpa do HTML. Praticamente idêntica ao HTML 4.01, mas com foco na semântica do conteúdo descrito pelas etiquetas
• HTML 4: Exibir elementos
• XHTML: Descrever elementos
13
XHTML
• Dentre as novas regras para a marcação estavam:
• Elementos XHTML devem estar aninhados
• Todos os elementos devem ser fechados
• Atributos, valores e tipos das etiquetas devem ser escritos em minúsculo
• E devem conter o elemento raiz
• Nenhuma dessas mudanças foi tão radical quanto as propostas pelo HTML 5
14
HTML 5
• Enquanto o W3C focava suas atenções para a criação da segunda versão do XHTML, um grupo chamado Web Hypertext Application Technology Working Group(WHATWG) trabalhava em uma versão do HTML que trazia mais flexibilidade para a produção de websites e sistemas baseados na web
• O WHATWG inclui a AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera
15
HTML 5
• O HTML 5 é uma versão completamente nova
• Algumas de suas características:
• Mais semântica com menos código
• Mais interatividade sem a necessidade de instalação de plug-ins
• Código interoperável, que pode ser aproveitado para futuros dispositivos e que facilita a reutilização da informação
16
Estrutura HTML 5
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="estilo.css">
<title></title>
</head>
<body>
...
</body>
</html>
17
Estrutura HTML 5
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="estilo.css">
<title></title>
</head>
<body>
...
</body>
</html>
18
Cabeçalho e corpo do documento continuam sendo os principais elementos.
Estrutura HTML 5
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="estilo.css">
<title></title>
</head>
<body>
...
</body>
</html>
19
Descrever a língua principal do documento passou a ser obrigatório. Isto facilita seu processamento por motores de busca e sua interpretação por leitores de tela e outras mídias.
Estrutura HTML 5
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="estilo.css">
<title></title>
</head>
<body>
...
</body>
</html>
20
O DOCTYPE foi simplificado.
Funcionalidades do HTML 5
• Estrutura semântica
• Novos elementos foram adicionados a fim de descrever melhor os conteúdos do documento
• Nas versões anteriores, a classificação era arbitrária
21
(X)HTML HTML 5
Funcionalidades do HTML 5
• Áudio
<audio src="mus.oga" controls="true" autoplay="true" />
• Nas versões anteriores não havia um padrão para reprodução de áudio em página web. O HTML5 especifica o elemento <audio>
22
Funcionalidades do HTML 5
• Vídeo
<video src="u.ogv" width="400" height="300" />
• O uso de vídeo é semelhante ao de áudio. O HTML5 especifica o elemento <video>
23
Funcionalidades do HTML 5
• Geolocalização
• Use o método getCurrentPosition() para pegar a posição do usuário
24
Funcionalidades do HTML 5
• Formulários
• Novos tipos de input adicionam máscaras e validação de dados sem necessidade de programação adicional
Exemplo:
• Para adicionar um placeholder antes:
<input name=“srch" value="Search here" onfocus=“if (this.value=='Search here') this.value=‘’”>
• Placeholder com HTML5:
<input name="srch" placeholder="Search here">
25
HTML5 + CSS3 + JS
• Diferente das versões antigas, o HTML 5 não é visto separadamente do CSS e do Javascript
• Através de funções como Canvas e SVG, é possível desenhar na tela do navegador utilizando o código HTML 5, CSS e Javascript
26
Exemplos:http://www.hongkiat.com/blog/48-excellent-html5-demos/
Quer Aprender Mais?
• Material completo em programação com HTML e CSS:
• https://www.slideshare.net/interprete12/programao-web-com-html-e-css
• Tutoriais mais atualizados em CSS:
• https://www.w3schools.com/html/html_css.asp
• Tutoriais mais atualizados em Javascript:
• https://www.w3schools.com/html/html_scripts.asp
27
Introdução ao Desenvolvimento para Dispositivos Móveis
Victor Adriel de Jesus Oliveiravajoliveira@inf.ufrgs.br
Skype: victor.adriel
top related