Projeto de Pesquisa Certo
-
Upload
rodrigo-goulart -
Category
Documents
-
view
221 -
download
0
description
Transcript of Projeto de Pesquisa Certo
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)