Projeto Integrador. Pesquisa HTML5. Green Friday. Gestão em Tecnologia da Informação. Turma 1º B

Transcrição

1 Projeto Integrador Green Friday Pesquisa HTML5 Gestão em Tecnologia da Informação Turma 1º B

2 Versão : Equipe Cristiano Margarida Rodrigues Idealização e arquitetura Tiago Dariel Gois Marques - Teste e validação Victor Hugo Rocha Bertoldo Requisitos e Projeto Vinicius Miranda Duarte - Desenvolvimento e Analise GTI-1B

3 Nome: Victor Hugo Rocha Bertoldo turma B GTI HTML 1. Resumo O relatório é referente a Linguagem de Marcação de Hipertexto [HTML], que iremos descrever algumas formas de aparência dos documentos na web. O relatório se divide em duas partes: a primeira explicará os comandos básicos de formatação, por exemplo, as tags <FONT> e seu correspondente </FONT> - onde é definido o tamanho, cor e tipo de fonte, <P> - identifica o início de um parágrafo e insere uma quebra de parágrafo e <TABLE> e seu correspondente </TABLE> - delimita a tabela dentro da página, também a criação de cabeçalhos, parágrafos e listas. A segunda parte aborta os itens mais complexos, como ancora, sendo uma interna que consiste em navegar dentro do próprio documento, ou seja, são links que levam a outras partes do mesmo arquivo. É mais usada com arquivos extensos. E a externa que é a ligação entre uma hotword (Palavra, imagem ou área marcada como origem de uma ligação hipertexto) de um arquivo hipertexto para outro arquivo. Imagens que consiste em como inserir imagens em sua página web, e a criação de tabelas que têm a função de dividir uma determinada área em subárea (células), para a publicação de informações em linhas e colunas, usado para diagramação de páginas. Frames que consiste uma apresentação simultânea de mais de uma página web no browser. E por último a criação de formulário que consiste em um modelo para a entrada de um conjunto de dados. 2. Introdução O primeiro conceito que deve-se ter em mente ao projetar páginas Web é que HTML não foi criado para controlar a aparência dos documentos, ao contrário dos processadores de texto e programas de layout da página. Como dissemos há pouco, os tags de HTML apenas informam ao navegador o que são os elementos que estão nas páginas. Eles dizem, por exemplo, que um determinado trecho é o título principal do documento e o outro e o item da lista. A formatação do trecho é que dificulta o trabalho de programação visual na Web. Para complicar ainda mais, cada usuário pode modificar a configuração padrão de seu navegador para que o seu programa mostre o texto na fonte (tipo de caractere) que quiser. Em compensação é muito simples criar uma página básica para controlar na Internet com HTML. 3. Vantagens Um pouco sobre a linguagem: em termos simples, o HTML usa tags para estruturar as informações de um site. O HTML 5, por sua vez, é uma tentativa de padronizar a maneira

4 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 seria a de você não precisar instalar diversos plug-ins 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 plug-ins. Todavia, não se engane, o HTML 5 não veio para eliminar o Flash. Por mais que alguns dos componentes do HTML 5 sejam capazes de executar funções similares às do Flash, é preciso levar em consideração que ainda são poucos os navegadores que suportam totalmente a tecnologia. Além disso, para sequer pensar nessa possibilidade, será necessário não só a compatibilidade do navegador, mas também vídeos em formatos adequados e uma total reestruturação dos sites que queiram substituir tudo pelo HTML5. Em resumo, para os desenvolvedores, o HTML 5 deixa algumas tarefas mais simples e oferece outras maneiras de fazer as mesmas coisas. Já para os usuários, a mudança será percebida, principalmente, ao usar celulares ou outros portáteis para acessar a internet. Isso porque não haveria a necessidade de instalar plug-ins (algo nem sempre possível nos navegadores mini ) para visualizar aquilo feito com HTML Tipos de aplicação que utilizam Pode-se criar uma interface rica para aplicações de forma nativa ou utilizando HTML5 e JavaScript. Aplicações nativas podem oferecer uma experiência mais rica para os usuários, mas podem levar mais tempo e ser mais caras de desenvolver para vários sistemas operacionais. As tecnologias HTML5 e JavaScript abrirão a porta para as interfaces independentes de dispositivo. Isso significa que as interfaces com o usuário podem ser criadas utilizando bibliotecas de componentes JavaScript que renderizam componentes visuais utilizando elementos do HTML5. O HTML5 traz novas funcionalidades que suportam a mobilidade e o desenvolvimento de interfaces ricas. Este artigo apresenta frameworks e estruturas usadas para implementar o lado cliente das aplicações móveis com base em JavaScript e HTML5. A interface com o usuário e os elementos de navegação são todos componentes renderizados no navegador, enquanto os servidores de aplicações têm somente o papel de fornecer acesso aos dados JSON para a

5 interface com o usuário. Como a intenção aqui é fornecer uma arquitetura de referência, o exemplo implementa apenas algumas funcionalidades básicas. Muitas abordagens para desenvolver aplicações para navegadores desktop podem ser utilizadas nas aplicações baseadas em navegadores móveis. No entanto, as aplicações móveis apresentam desafios não existentes nos navegadores para desktop. Considere por exemplo as resoluções de tela. As dimensões bem menores das telas exigem um design de interfaces diferente para otimizar a interação do usuário com a aplicação. A conectividade é outra questão fundamental. Embora as redes 3G e wi-fi sejam hoje comuns, a conectividade não pode ser considerada como sempre disponível. Felizmente, o HTML5 tem funcionalidades de cache, permitindo que recursos do site possam ser armazenados localmente e controlados de modo desconectado. Os arquivos de manifesto são arquivos textuais que definem quais recursos serão armazenados, além de diretivas que controlam os recursos que podem "pular" o cache, ou o que mostrar quando o recurso não está disponível. Atualizações e notificações de cache também podem ser controlados quando o arquivo muda, ou através de uma API JavaScript. Além disso, o HTML5 fornece um mecanismo que armazena os dados do lado do servidor localmente para operações desconectadas, e também para ganho de desempenho. Um mecanismo de armazenamento local de 5 MB baseado em chave/valor está disponível para armazenar strings ou objetos JSON transformados em strings. 3. Elementos semânticos A linguagem HTML dispõe de uma grande quantidade de tags, cada uma com uma função diferente. O conjunto de tags representa um recurso poderoso para criação de páginas interativas. O mais importante é que HTML é extremamente fácil de usar. Tudo é feito com texto simples. As tags são palavras-chave contidas entre os sinais < e > Existem dois tipos de tags. Alguns são formados aos pares, indicando o início e o fim do trecho afetado, como exemplo: <H1> e </H1>. Outros podem ser colocados individualmente, como o <P> que simplesmente insere um espaço para dividir parágrafos. Veja o que faz cada tag: <!--texto de comentário--> - identifica comentários dentro da página e servem apenas para documentação, sendo ignorado pelo browser. <A HREF> e seu correspondente </A> - estabelece um link. <B> e seu correspondente </B> - exibe o texto em negrito <BIG> e seu correspondente </BIG> - exibe o texto em um tamanho de fonte maior do que o padrão.

6 <BLINK> e seu correspondente </BLINK> - exibe o texto piscando. <BLOCKQUOTE> e seu correspondente </BLOCKQUOTE> - destaca um bloco de texto citado de outra fonte, através de uma endentação à direita. <BODY> e seu correspondente </BODY> - delimita o corpo da página, que é a parte da página que o leitor visualiza na sua tela. <BR> e seu correspondente </BR> - insere uma quebra de linha de texto. <CAPTION> e seu correspondente </CAPTION> - especifica uma legenda (título) para a tabela. A legenda é sempre centralizada em relação à tabela. <CENTER> e seu correspondente </CENTER> - centraliza na página tudo o que estiver entre os comandos. <CODE> e seu correspondente </CODE> -exibe o texto em fonte de tamanho fixo e é utilizado pra indicar trechos de códigos de programas. <FRAME> e seu correspondente </FRAME> -este recurso permite dividir uma simples janela do browser em diversas áreas, chamadas frames. Em cada frame pode ser carregada e visualizada uma página diferente. <FONT> e seu correspondente </FONT> - onde é definido o tamanho, cor e tipo de fonte. <FORM> e seu correspondente </FORM> - define o formulário para o leitor entrar com dados dentro do documento html. <HEAD> e seu correspondente </HEAD> - identifica o termo a ser definido. <HR> e seu correspondente </HR> - desenha uma linha horizontal, da largura da janela do browser, geralmente para separar as seções da página. <I> e seu correspondente </I> - exibem o texto em itálico <HTML> e seu corresponde </HTML> - deve englobar todo o conteúdo da página (estar presente no início no fim do texto) para indicar ao navegador que se trata de um documento HTML. <IMG SRC> - insere uma imagem in-line (formatos GIF ou JPG) na posição corrente da página. <LI> e seu correspondente </LI> - define o item de uma lista não-ordenada.

7 <OL> e seu correspondente </OL> - define uma lista ordenada, numerada sequencialmente pelo browser, na ordem em que os itens da lista forem encontrados.. <P> - identifica o início de um parágrafo e insere uma quebra de parágrafo. <PRE> e seu correspondente </PRE> - exibe o texto em fonte com caracteres de tamanho fixo. <TABLE> e seu correspondente </TABLE> - delimita a tabela dentro da página. <TR> e seu correspondente </TR> - define uma linha da tabela. <TD> e seu correspondente </TD> - define uma célula da linha da tabela. <TITLE> e seu correspondente </TITLE> - entre essas tags deve-se colocar o título da sua página. <UL> e seu correspondente </UL> - define uma lista não-ordenada de itens. No Internet Explorer pode-se controlar o comportamento da imagem de fundo, o background. A empresa criou um atributo para o tag <BODY> chamado BGPROPERTIES. Com a opção BGPROPERTIES=FIXED, a imagem de fundo fica fixa quando o usuário rola o texto para cima. O recurso dá a impressão da página ter uma marca d'água e de que o texto flutua sobre o fundo.