introdução ao desenvolvimento para dispositivos...

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


• 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


• 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


• 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


• Uma etiqueta é formada por comandos, atributos e valores:

<img src=“../imgs/imagem.png” />

6

atributocomando valor


• 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





<html>

<head>


</head>

<body>


</body>

</html>

8

O DOCTYPE define o tipo do documento e especificação da linguagem utilizada





<html>

<head>


</head>

<body>


</body>

</html>

9

A etiqueta <html> delimita o conteúdo do documento HTML





<html>

<head>


</head>

<body>


</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.





<html>

<head>


</head>

<body>


</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>



<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>



<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>



<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


• Á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


• 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


• Geolocalização

• Use o método getCurrentPosition() para pegar a posição do usuário

24


• 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/

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

https://www.slideshare.net/interprete12/programao-web-com-html-e-css

https://www.w3schools.com/html/html_css.asp

https://www.w3schools.com/html/html_scripts.asp

Introdução ao Desenvolvimento para Dispositivos Móveis

Victor Adriel de Jesus [email protected]

Skype: victor.adriel

mailto:[email protected]

introdução ao desenvolvimento para dispositivos...

Documents