UNIFENAS

HTMLPadrões Web e Tecnologia de Cliente

Alfenas2013

1

Leandro Goulart

Matheus William

Rodrigo Goulart

HTMLPadrões Web e Tecnologia de Cliente

ALFENAS – MG

2013

2

SUMÁRIO

1 INTRODUÇÃO..............................................................................................................3

2 OBJETIVOS...................................................................................................................3

2.1 OBJETIVOS GERAIS................................................................................................3

2.2 OBJETIVOS ESPECÍFICOS......................................................................................3

2.2.1 DIFERENCIAR O HTML DE VERSÕES ATÉ O HMTL5...................................3

2.2.2 APROFUNDAR SOBRE CSS.................................................................................3

2.2.3 APRIMORAR SOBRE JAVASCRIPT....................................................................3

2.2.3 CRIAR TABELAS E FORMULÁRIOS..................................................................3

3 LEVANTAMENTO BIBLIOGRÁFICO.......................................................................4

4 REFERENCIAL TEÓRICO...........................................................................................6

4.1 HTML..........................................................................................................................6

4.2 CSS..............................................................................................................................7

4.3 JAVASCRIPT.............................................................................................................8

4.4 HMTL5........................................................................................................................9

5 MATERIAL E MÉTODOS..........................................................................................12

6 PLANO DE EXECUÇÃO............................................................................................13

7 RECURSOS..................................................................................................................14

8 PLANO DE TRABALHO............................................................................................15

REFERÊNCIAS..............................................................................................................16

ANEXOS.........................................................................................................................17

3

1. INTRODUÇÃO

O ponto principal do trabalho será sobre HTML, na qual é uma linguagem de marcação. Não é uma linguagem de programação onde se pode construir um algoritmo, mas uma linguagem declarativa que serve para organizar informações em um arquivo de texto que será visualizado em um browser. A web também abrange vários tipos de tecnologias padrões web:HTML, HTML5, XML, XHTML, JAVA SCRIPT e CSS. Onde também dará ênfase em CSS, HTM5 e a diferença entre HTM4 E HTML5.

2. OBJETIVOS

2.1 Objetivos Gerais:

Aprofundamento sobre novas tags e comandos no mundo HTML.

2.2 Objetivos Específicos:

2.2.1 Diferenciar o HTML de versões até o HTML5;

2.2.2 Aprofundar sobre CSS;

2.2.3 Aprimorar sobre javascript;

2.2.4 Criar tabelas e formulários.

4

3. LEVANTAMENTO BIBLIOGRÁFICO

Livros

Autor (es): Maurício Samy Silva

Título: Construindo sites com CSS e (X)HTML

Edição: 1 edição Local: São Paulo

Editora: Novatec Ano: 2007

Autor (es): Silvio Ferreira

Título: Guia prático de HTML 5

Edição: 1 edição Local: São Paulo

Editora: Universo dos livros Ano: 2013

Autor (es): David Flanagam

Título: Javascript: O Guia Definitivo

Edição: 4ª Edição Local: São Paulo

Editora: Laser House Ano: 2002

Autor (es): Luiz Gustavo Amaral

Título: Cascading Style Sheets (CSS)

Edição: 3ª Edição Local: São Paulo

Editora:  Novatec Ano: 2009

Autor (es): Renata Hiromi Minami Miyagusku

Título: Desvendando os recursos do CSS

Edição: 3ª Edição Local: São Paulo

Editora:  Digerati Editorial Ano: 2007

5

Sites

Autor (es): Luiz Antonio Mello

Título do artigo: A Onda Maldita: como nasceu a Fluminense FM

Endereço eletrônico:

http://www.actech.com.br/aondamaldita/ creditos.html

Data de acesso: 13 out. 1997

Autor (es): Eduardo Bertolucci

Título do artigo: Trabalho de HTML, CSS e JAVASCRIPT

Endereço eletrônico:

http://www.slideshare.net/ed.be/trabalho-de-html-css-e-javascript-eduardo-bertolucci-unopar-2010

Data de acesso: 15 setembro 2011

Autor (es): Georgieva Tsveti

Título do artigo: 10 diferenças entre HTML4 e HTML5

Endereço eletrônico:

http://rodrigozandonadiwebdesign.blogspot.com.br/2011/09/10-diferencas-entre-html4-e-html5.html

Data de acesso: 14 setembro 2011

6

4. REFERENCIAL TEÓRICO

4.1 HTML

HTML é a abreviatura para Hipertext Markup Language, ou, Linguagem de

Marcação de Hipertexto. É um padão de codificação para Web Sites, baseados em

marcações padronizadas pela W3C. Não é uma linguagem complexa e torna-se fácil de

entender mesmo para quem nunca teve nenhum tipo de contacto com linguagens de

programação.

Para criar uma página ou documento HTML não são necessários recursos

sofistificados. Basta um editor de textos simples como o Bloco de Notas do Windows,

por exemplo. Existem, no mercado, softwares para edição de HTML mais sofisticados,

porém, estes são empregados por desenvolvedores mais avançados que não trabalham

exclusivamente com HTML, mas também com outras tecnologias para a Web.

Um documento HTML é composto por marcações chamadas tags. Cada tag

é padronizada e representa um elemento na página. A grande maioria das tags são

representadas com marcadores de início e fim, dentro dos sinais de maior ou menor (< >

). Cada tag tem suas própias propriedades que podem vir padronizadas ou podem ser

modificadas.

A tag que identifica o início de um documento HTML é <HTML> (sem

distinção de letras maiúsculas e minúsculas). Assim, todo documento HTML deve ter

em sua primeira esta marcação. Consequentemente, o final do documento HTML deve

ter a marcação </HTML>. Tudo que vem entre o início e o fim da tag HTML faz parte

de um documento que será interpretado pelo browser cliente.

7

4.2 CSS

CSS é validado em padrões ou então recomendações formais. Só com códigos validos pode-se garantir que navegadores ou leitores de tela que se baseiam em padrões interceptam de maneira correta.

Assim os códigos são validados, e também é um dos requisitos mínimos de acessibilidade. (IHC2010)

CSS foi conduzida individualmente nos dias 24 e 25 de abril de 2010. No caso de validação de códigos CSS, são validados em versão 2.1, que ainda é melhor suporte para navegadores atuais. (IHC2010)

De acordo com Renata Hiromi (2007) O CSS surgiu como uma solução as deficiências e limitação que a linguagem HTML começou a apresentar já há algum tempo.

A principal função do CSS é extrair formatação de uma página do código HTML, separando-a do conteúdo propriamente dito.

Além de aumentar o nível de organização isso indica que elas podem definir, de antemão, a formatação de todos os elementos de uma ou várias páginas.

Com isso, torna-se muito mais fácil manter um padrão de fontes, cores e estilos, na medida em que será mais prático modificar tais atributos.

“Utilizando um arquivo CSS externo a sua página, é possível possuir vários arquivos em extensão CSS, e quanto desejar alterar algum layout da página, basta a chamada do arquivo CSS.”

De acordo com Ana Laura Gomes (2010) O CSS não é uma linguagem de marcação. Ele é uma sequência de declaração de propriedades e seus valores para a manipulação de forma com o conteúdo de uma página web será exibido.

“A formatação CSS pode ser aplicada de três formas distintas:

Através de um vínculo com um arquivo CSS; Através de um bloco de formatação dentro da própria página HTML; Através de aplicação de formatação na tag HTML.”

Onde sua estrutura de formatação segue o seguinte modelo:

Seletor {formatação 1; formatação 2; formatação 3; formatação n}, onde o seletor refere-se a

uma tag HTML. (Apostila Tec.Internet 2013)

8

4.3 JAVA SCRIPT

JavaScript é uma linguagem de programação leve, baseada em objetos, específica para

a criação de aplicações Internet. Os comandos do Javascript podem ser escritos

diretamente em uma página HTML e em qualquer editor de textos simples. O núcleo da

linguagem Javascript se parece com outras linguagens, como C, C++ e Java.

Construções de programação são usados, como if, o operador == e o laço while. O

Javascript é interpretado pelo browser. Possui um número reduzido de tipos de variáveis

(numéricas, booleanas e strings) e ainda pode manusear alguns objetos do browser. É

uma linguagem não-tipada, ou seja, as variáveis não precisam ter um tipo especificado.

O Javascript é “case-sensitive”, isto é, caracteres minúsculos são interpretados

diferentemente dos caracteres maiúsculos. Os comandos de Javascript podem ser

inseridos nas páginas de duas formas: pelas tags <script> </script> e como “event

handlers”, usando-se os tags de HTML: <tag EventHandler=”código em Javascript”>.

Existem os operados lógicos como == (igual), < (menor), && (e) entre outros;

matemáticos como % (obtém o resto de uma divisão), ++ (incremente um valor em uma

unidade), - subtração de valores entre outros. Também existem os controles especiais

como // (linha de comentário), /* ..*/ (bloco de comentário); \b (backspace), \t (tab)

entre outros que são usados dentro dos comandos alert(). Comandos condicionais são

comandos que condicionam a execução de uma certa tarefa à veracidade ou não de uma

determinada condição, ou enquanto determinada condição for verdadeira, eles são: if,

for e while. Eventos são fatos que ocorrem durante a execução do sistema, a partir dos

quais o programador pode definir ações a serem realizadas pelo programa. Existem

muitos eventos, como onLoad(), onUnload(), onBlur(), onSelect(), onSubmit() entre

outros. As variáveis que são criadas dentro de uma função são chamadas de variáveis

locais e podem ser referenciadas somente dentro da função. As variáveis criadas fora de

funções são chamadas de variáveis globais, podendo ser referenciadas em qualquer

parte do documento. Para escrever no documento, utilizamos o método write. As linhas

escritas desta forma podem conter textos, expressões Javascript e comandos HTML.

Alert(), confirm() e prompt() são as três formas de comunicação com o usuário através

de mensagens. Alert() utiliza-se para mostrar uma caixa de texto apenas na tela,

confirm() solicita OK ou CANCELAR juntamente com a mensagem e prompt() solicita

a digitação de dados, além de mostrar uma mensagem. Funções são conjuntos de

9

instruções que só são executadas quando houver uma chamada específica a elas. A

sintaxe geral é function NomeDaFunção (Parâmetros) {Ação}. Funções intrínsecas são

funções que já são incluídas na própia linguagem Javascript. A sintaxe geral é Result =

função (informação a ser passada). Existem também muitas funções matemáticas como

Math.abs(número), Math.sqrt(número), Math.max(número1,número2) entre muitos

outros. Um array é uma coleção de valores de dados, da mesma forma que um objeto.

Embora cada valor de dado contido em um objeto tenha um nome, cada valor de dado

em um array tem um número, ou índice. Em Javascript, você recupera um valor a partir

de um array colocando um índice entre colchetes depois do nome array.

“Javascript não tem nenhum recurso gráfico, com exceção da poderosa capacidade de

gerar HTML dinamicamente (incluindo imagens, tabelas, frames, formulários, fontes,

etc.) para o navegador exibir.” (FLANAGAM, 2002, p.27)

4.4 HTML 5

O HTML 5 é uma nova versão do HTML 4.01, que foi concebida para permitir que

programadores possam gerar códigos mais organizados, bem estruturados, com a

utilização das marcações de forma correta e separando definitivamente a marcação do

conteúdo da formatação do layout. Além de permitir a construção de websites com mais

acessibilidade.

Apartir dessa nova versão, ele é usado somente para criar as marcações e estruturar o

conteúdo do documento. O HTML 5 nasceu para ser usado de forma semântica.

E a formatação do conteúdo, ou seja, o layout? Como serão definidos as cores dos

textos, a fonte, fundos, posicionamentos dos elementos na página, uso de bordas, enfim,

como será definida toda a aparência visual da página? Tudo isso passa a ser papel

indispensável de CSS- Cascading Style Sheets ( Folhas de Estilo em Cascata), e que

pode ser chamada somente por Folhas de Estilo.

No HTML 4.01 não existia obrigatoriamente essa separação. O uso de CSS era comum,

porém, o HTML ainda era usado para definir a aparência dos elementos da página.

Vejamos alguns exemplos:

.O uso da tag <fonte> para definir a cor, família de fonte e tamanho dos textos.

10

.Tag <p> como atributo align para alinhar parágrafos (esquerda, direita, justificado,

centro).

Esses são apenas exemplos de HTML sendo usados para definir a aparência, visual de

elementos diversos. Com o HTML 5 isso não é mais permitido. A partir dessa versão,

tags HTML são usadas para criar marcações no conteúdo e CSS para formatar e dar

todo o visual da página web.

(Texto Retirado do Livro Guia Prático de HTML 5, editora: Universo dos Livros, Autor

Silvio Ferreira, São Paulo 2013).

O que há de novo?

O HTML 5 foi criado em prol de uma web semântica. Isso significa que teremos um

código padronizado e organizado. Para isso ser possível foram criadas diversas novas

tags enquanto outras foram excluídas.

A estruturação de páginas é o tópico que mais sofreu mudanças no HTML 5. Há agora

tags específicas para cada parte de uma página. Essas partes podem ser chamadas de

seções.

Apesar de essas tags estruturais representarem uma das principais mudanças, há muitas

novidades do HTML 5, muitas tags novas e outras que foram excluidas.

HTML 5 Semântico

A palavra semântico tem como significado “ramo da lingua linguistica que estuda o

significado das palavras”. Ao usar as tags para marcar cada tipo de elemento

(parágrafos, títulos, citações, etc) de nossa página, daremos um significado em termos

de código para tudo. Navegadores, Motores de Busca, tradutores, leitores de tela e

qualquer outro sistema de acesso a websites irão manipular essa página sem nenhum

tipo de problema, encontrando as informações necessárias com precisão. Desse modo,

construiremos um código semântico. Para facilitar a assimilação desse conceito, vamos

ver alguns pontos importantes:

I- O Conteúdo deve ser separado da apresentação visual: Como

mecanismos, usamos as tags unicamente para criar as marcações e

CSS para formatar toda a aparência visual.

11

II- Usar as marcações para cada sessão da página: O HTML 5 possui

diversas tags estruturais, como <header>, <aside>, <section>,

<article>, <nav> e <footer>. Cada tag dessa possui um significado

semântico. Quando um navegador carregar uma página com essas

marcações, ele saberá que em <header> há um cabeçalho, em

<aside> o conteúdo relacionado da página, em <nav> há um menu, e

assim sucessivamente.

III- Não construir o layout da página em tabela: esse é definitivamente

um erro grotesco. É comum encontrar páginas da web cujo layout foi

construído usando uma tabela. Tabelas devem ser usadas somente

para organizar dados tabulares, ou seja, qualquer tipo de informação

que necessita ser apresentada em linhas e colunas de forma lógica e

organizada. Quando utilizamos as tabelas para construir o layout, não

estamos construindo um código semântico.

IV- Títulos: as tags <h1> até <h6> são usadas para definir títulos, <h1>

representa o título mais relevante da página, isto é, o título principal.

Para o subtítulo usa-se <h2> e assim sucessivamente. Essas tags não

devem ser usadas unicamente para definir o tamanho dos textos. Elas

marcam títulos e, por meio de CSS, podemos configurar o tipo de

fonte, cor e até o tamanho desses títulos.

Conclusão:

Dominar a linguagem HTML é um requisito básico para quem quer produzir conteúdos

no mundo da web, tanto para fins profissionais como pessoais. Em sua versão mais

recente, o HTML 5, essa plataforma se tornou ainda mais poderosa. Por meio dela,

webdesigners e programadores ao redor do mundo têm produzido sites cada vez mais

impressionantes, através de uma linguagem mais organizada e clara.

Referências Bibliográficas:

Guia Prático de HTML 5, Silvio Ferreira, Editora: Universo dos Livros, São Paulo,

2013.

12

5. MATERIAL E MÉTODOS

O objetivo desta pesquisa foi identificar a linguagem padrão HTML e diferenciá-la do

HTML5, pois o mesmo é uma versão mais atual com uma sintaxe mais simplificada,

que está sendo utilizado por profissionais da área de desenvolvimento de websites. Com

o HTML5 algumas funções foram aprimoradas, alguns conceitos novos foram criados,

como a criação de novos níveis de formulários. Aprofundaremos também o

entendimento sobre JavaScript e CSS, que por sua vez tem a função de definir a

aparência das páginas web, deixando claro que não é uma linguagem de programação.

No levantamento bibliográfico foi explorada certa quantidade de informações que foram

estudadas, aprofundadas, avaliadas, experimentadas e explicadas de forma qualitativas

de modo a descrever o tema em questão.

Quanto aos métodos de pesquisa, foram utilizados meios dedutivos e indutivos, bem

como comparativos, monográficos e tipográficos.

Finalmente para a construção da nossa pesquisa foi utilizada livros, artigos e biblioteca

eletrônica. Devido as sua facilidade de acesso para desenvolvimento, uma vez que todos

os utilitários necessários ao projeto estão presentes de forma nativa essas ferramentas.

13

6. PLANO DE EXECUÇÃO

Atividade1º

mês2º

mês3º

mês4º

mês5º

mês6º

mês

Definição de objetivos X

Levantamento bibliográfico X

Estudos teóricos X X

Pesquisa de campo

Análise dos resultados obtidos na pesquisa de campo

X

Conclusão X

14

7. RECURSOS

Para a realização deste trabalho se fará necessário o auxílio do professor de

Metodologia Científica, da Faculdade de Ciência da Computação da UNIFENAS que

ajudará no desenvolver do trabalho. Também contaremos com a ajuda de um colega de

classe, Rubens, colaborando com ideias para o trabalho. E também não menos

importante o trabalho será realizado por quatro alunos do curso de Ciência da

Computação.

Para a realização deste trabalho serão necessários dois computadores, equipados com

placas de rede, com acesso à rede wireless da Universidade José do Rosário Vellano.

Estimam-se, também, as seguintes despesas:

- Impressão do trabalho R$ 20,00 (vinte reais)

- Painel (banner) R$ 47,00 (quarenta e sete reais)

15

8. PLANO DE TRABALHO

Inicialmente será feito um estudo teórico sobre HTML (Hipertext Markup Language) e sobre seu avanço para o HTML5. Será estudado também CSS e Java Script, uma linguagem de programação leve.

Foram feitas pesquisas, na internet sobre os respectivos itens acima que será apresentada informações para o resumo de cada assunto. Após as pesquisas os resultados serão analisados e filtrados.

Logo após de ter filtrado todas as informações necessárias, será feito um breve resumo explicando cada item da pesquisa. Através dos resumos, foram escolhidos determinados assuntos mais específicos para serem mais aprofundados. Tudo isso será realizado perante a cada etapa concluída.

16

9. Referências

AMARAL, Luiz Gustavo. Cascading Style Sheets (CSS). São Paulo: Novatec, 2009.

BERTOLUCCI, Eduardo. Trabalho de Html, CSS e JAVASCRIPT. http://www.slideshare.net/ed.be/trabalho-de-html-css-e-javascript-eduardo-bertolucci-unopar-2010, 15 de SETEMBRO de 2011.

FERREIRA, Silvio. Guia prático de HTML 5. São Paulo: Universo dos livros, 2013.

FLANAGAM, David. Javascript: O Guia Definitivo. São Paulo: Laser House , 2002.

MELLO, Luiz Antônio. A Onda Maldita: como nasceu a Fluminense FM. http://www.actech.com.br/aondamaldita/ creditos.html, 13 de Outubro de 1997.

MIYAGUSKU, Renata Hiromi Minami. Desvendando os recursos do CSS. São Paulo: Digerati Editorial, 2007.

SILVA, Maurício Samy. Construindo sites com CSS e (X)HTML. São Paulo: Novatec, 2007.

TSVETI. Georgieva. 10 Diferenças Entre o HTML4 e o HMTL5.http://rodrigozandonadiwebdesign.blogspot.com.br/2011/09/10-diferencas-entre-html4-e-html5.html. 14 de SETEMBRO de 2011.

17

10. Anexo - Tabela de Estrutura de Página do HTML5

Fonte: HTML 5: A Evolução Da WWW Para Nova Internet, 2010. Reproduzido de (www.rafaeldesigner.com.br)