Linguagem de Estruturação e Apresentação de Conteúdos

Transcrição

1 UNIVERSIDADE TECNOLOGICA FEDERAL DO PARANA MINISTERIO DA EDUCAÇÃO Câmpus Santa Helena Curso de Bacharelado em Ciência da Computação Linguagem de Estruturação e Apresentação de Conteúdos Prof. Me. Arlete Beuren 1 LINGUAGENS DE MARCAÇÃO 2 1

2 Linguagens de Marcação 1969 surgiu a primeira forma de linguagem de marcação de texto, na IBM (International Business Machines) a GML (Generalized Markup Language); Permitia a formatação e o relacionamento de documentos estruturados em capítulos, listas, tabelas e outros elementos de texto

3 Linguagens de Marcação 1978 a ANSI (American National Standards Institute) criou o comitê para o estudo da padronização de linguagens para processamento de textos; Dois anos depois, o comitê publica a versão oficial da linguagem GML chamada de SGML (Standard Generalized Markup Language) a ISO (International Organization for Standardization) a pedido da ANSI inicia o processo de reconhecimento do padrão SGML como norma internacional (1986 norma nº 8879). 5 Linguagens de Marcação 1990 os padrões já existentes foram combinados por Tim Berners-Lee para o lançamento em 1992 da linguagem HTML 1.0 (HyperText Markup Language); HTML 1.0 HTML + HTML 2.0 HTML 3.0 HTML 4.0 HTML 4.01 HTML 5 XHTML 6 3

4 Primeira pagina HTML com uso de navegadores. 7 Versões da HTML (HyperText Markup Language) 1992 HTML 1.0: apresentação de textos (Tim Berners-Lee ); Mosaic 1994 HTML+/HTML 2.0: títulos, parágrafos, listas, tabelas e figuras. Problemas pela complexidade que apresentava em relação a tecnologia da época (Dave Raggett); Netscape HTML 3.0: Raggett propôs a padronização W3C (World Wide Web Consortium) para esta versão do HTML; outros navegadores 8 4

5 9 10 5

6 11 Versões da HTML (HyperText Markup Language) 1996 W3C apresenta o uso do CSS (Cascading Style Sheets); 1997 HTML 4.0: a W3C apresenta oficialmente a HTML 4.0 com a possibilidade de usar CSS; 1999 HTML 4.01: passa a ser aceita como padrão internacional, segundo a norma ISO/IEC 15445; Mozilla 12 6

7 13 Versões da HTML (HyperText Markup Language) Características da HTML: Possui uma estrutura estática; A principal característica desse tipo de programação são as tags as marcações para inserção de algum tipo de objeto ou característica de um objeto através de comandos 1998 XML (extensible Markup Language): criada pela W3C a fim de dinamizar o desenvolvimento dos documentos HTML; 1999 união da HTML 4.01 e XML; 2000 XHTML; 2007 HTML 5.0 foi proposta a W3C pela fundação Mozilla, Apple e Opera. Basicamente a junção dos recursos das linguagens de marcação HTML 4.01, XML e XHTML; Chrome 2012 HTML 5.0: em uso mais efetivo nos navegadores Google Chrome, Firefox e Safari. 14 7

8 15 HTML 5 o HTML5 é o sucessor do HTML O HTML 5, por sua vez, é uma tentativa de padronizar a maneira como os navegadores interpretam as informações recebidas cada um as interpreta de maneira distinta, o que pode resultar em distorções na visualização; A principal mudança que talvez seja percebida pelos usuários é a de não precisar instalar diversos plugins para assistir a vídeos em diferentes formatos (dependendo do site eles são exibidos em Flash, QuickTime, Windows Media Player, etc.), assim como para exibir outros elementos da página que dependeriam dos mesmos plugins; o HTML 5 não veio para eliminar o Flash. 16 8

9 HTML 5 Para os desenvolvedores: o HTML 5 deixa algumas tarefas mais simples e oferece outras maneiras de fazer as mesmas coisas. Para os usuários: Melhor organização das informações, em geral. A adoção do HTML5 permite principalmente propor publicidade e aplicações mais interativas e acessíveis a partir dos navegadores móveis. 17 HTML 5 O HTML 5 trouxe novas tags para deixar o código semanticamente mais organizado; Ao invés de usar a tag DIV para demarcar as diversas áreas da página, agora temos tags específicas para isso: section, header, footer, article, aside, nav e outras. 18 9

10 O que é Semântica? Uma consulta a um dicionário da língua portuguesa retornará uma definição parecida com a transcrita abaixo: Semântica é a parte da linguística que estuda os significados das palavras. Isto traduzido para a Web ganha a seguinte interpretação: Código semântico e aquele que usa os elementos da linguagem de marcação em conformidade com o seu (dos elementos) significado. Por exemplo: elementos H e seus 6 níveis destinam-se a marcar cabeçalhos, elementos P devem ser usados para marcar parágrafos. 19 HTML 5 O HTML5 tem a função de agrupar as informações de acordo com a sua relevância tanto para o usuário, quanto para os mecanismos de busca. este processo vai exigir que seja realizado um estudo sobre a importância e a hierarquia das informações e como elas devem ser exibidas no site, por isso o desenvolvedor deve ampliar seu leque para conhecer o gigante mundo da arquitetura de informação para websites. Além disso, conhecer um pouco melhor o conteúdo do site, auxiliará na construção da semântica do código e numa comunicação mais direta com os mecanismos de busca

11 HTML 5 Infelizmente muitos desenvolvedores limitam-se a conhecer apenas o uso de DIV s em substituição às tabelas, afim de resolver problemas de diagramação de imagens e textos, bem como ignoram qualquer estrutura hierárquica que a informação exibida possa ter no site, e com o HTML5; Isso não poderá mais ser ignorado assim como as incompatibilidades entre browers, também devem diminuir. 21 Vantagens do HTML 5.0 Criar um site em HTML5 é ter a certeza que ele está atualizado e vai se comportar da melhor maneira possível; Não importa o dispositivo que esteja acessando, navegador ou sistema operacional; Ele é feito ciente dessas variedades

12 Vantagens do HTML 5.0 HTML5 - Programação Gráfica e de Jogos Facilidade na criação de aplicações gráficas, e até mesmo de jogos; HTML5 - Simples, Direto e Robusto 1. o tipo de documento (doctype), onde no antigo HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" " - Agora somente: <!DOCTYPE html> 2. E no CSS, era assim: <link type="text/css" rel="stylesheet" href="estilo.css"> - Agora: <link rel="stylesheet" href="estilo.css"> 3. E a meta tag charset, símbolos e caracteres especiais, como os de acentuação da língua portuguesa: <meta http-equiv="content-type" content="text/html; charset=utf-8"> - Agora : <meta charset="utf-8"> 23 Validação W3C para otimização de web sites Há 1001 formas de criar um website e muitas vezes o resultado visto é o mesmo; Mas muitas vezes varia o resultado de acordo com o navegador utilizado e pode correr risco de não estar compatível com futuros navegadores; Por isso as máquinas de busca exigem um código limpo. Somente com uma página válida teremos sucesso na nosso otimização de sites (SEO). Isto começa na declaração certa do tipo de documento HTML ou XHTML

13 Validação W3C para otimização de web sites Para descobrir se o website está de acordo com as normas w3c e assim completamente legível pelos buscadores e visitantes, uma validação deve ser feita; Para isto acesse: e digite o endereço da página a validar no campo Adress e clique em Check. Validação w3c mostrando erros Os erros devem ser corrigidos até a validação apresentar This document was successfully checked, assim teremos um site limpo, visto pelos sistemas de pesquisa e assim um sucesso na otimização de web sites; Após a validação sucedia terá a opção de copiar e colar um código fonte em nosso web site, mostrando o selo da W3C, dizendo que o website é de acordo com as normas de 25 programação. SEO SEO é a sigla para Search Engine Optimization, um processo que através de uma série de técnicas busca conseguir as melhores colocações possíveis na busca das páginas de resposta dos grande buscadores como o Google, Yahoo e Bing

14 Importante!!! Validadores apenas encontram erros de sintaxe, de acordo com uma especificação; Validadores não reconhecem se o código é bem estruturado; Validadores não reconhecem a semântica. Devemos compreender e aplicar conceitos como semântica, acessibilidade e SEO, nenhum validador poderá resolver isso por você. 27 Atividade 2 a. Segundo o SEO pesquise sobre o processo/cuidado adequado no desenvolvimento de websites. Como o processo SEO funciona

15 Tecnologias que usaremos inicialmente: HTML 5: semântica; CSS 3: formatação; Javascript. Ferramentas de trabalho: Notepad++; Google Chrome; 29 AO TRABALHO??? 30 15

16 Exemplo 1 <!DOCTYPE HTML> <html lang="pt-br"> <head> <meta charset="utf-8"> <title>primeiro Exemplo em HTML 5</title> </head> <body> </body> </html> 31 Configurar: No Notepad++ Linguagem H HTML Formatar UTF

17 CSS - Cascading Style Sheets O CSS formata a informação entregue pelo HTML; Essa informação pode ser qualquer coisa: imagem, texto, vídeo, áudio ou qualquer outro elemento criado; A sintaxe do CSS é simples: seletor { propriedade: valor; } O seletor representa uma estrutura. Essa estrutura é usada como uma condição para determinar quais elementos de um grupo de elementos serão formatados; Os seletores são a alma do CSS. 33 CSS - Cascading Style Sheets Agrupar elementos separados por vírgula para que herdem a mesma formatação; Exemplo de seletor agrupado: strong, em, span { } color: red; 34 17

18 CSS - Cascading Style Sheets Imagine um título (h1) seguido de um parágrafo (p); Usando seletores complexos: h1 + p { } color:red; 35 Atividades práticas; 36 18