Apostila Programador Web v3.0 Prof. Alexandre Unterstell

Transcrição

1 1 Apostila Programador Web v3.0 Prof. Alexandre Unterstell Antes de começar desenvolver um site na internet é importante que conheçamos alguns fatores importantes que contribuirão para que o resultado final seja sucesso de público e crítica. Pontos a serem analisados: Tamanho de tela, resolução do monitor e adaptações. Existem diversas resoluções de vídeo, a home page deve ser do tamanho da área do browser, sem necessitar de barras de rolagem. Leve em conta a largura de 780 pixels para que não seja necessária a barra de rolagem horizontal. Tempo de carregamento da página. Procure manter as páginas (incluídas imagens) do seu site abaixo de 800 Kbytes Considere que para uma conexão Banda Larga, com velocidade de 1Mbps, a velocidade estimada para download é de 100Kb/segundo Layout das páginas. A página inicial deve responder facilmente sobre o que se trata o site, o que esse site oferece (produtos, serviços, entretenimento) e o que o usuário pode fazer nele (encontrar informações, realizar compras, entrar em contato, etc.). Quanto mais claro e direto, maior a chance de o usuário permanecer no site. È importante o restante do site mantém o padrão de design do site original Design O design de um site não é importante apenas para garantir um bom visual, mas deve ser utilizado também para auxiliar no controle da navegação através de técnicas aplicadas com a finalidade de dar maior ou menor foco no conteúdo, de acordo com as necessidades, proporcionando equilíbrio e harmonia. Diversos aspectos são importantes para um design bem feito e um deles é estar coerente com a identidade visual da empresa, de forma a contribuir para o fortalecimento da marca. Conteúdo A principal parte de um site com certeza está no conteúdo. Não importa se você tem um ótimo design, se o conteúdo deixa a desejar. Ao mesmo tempo que o conteúdo deve ser claro e objetivo para manter a atenção do usuário, deve ser completo e suficiente para que possa repassar toda a informação necessária. Navegabilidade / Usabilidade Mantenha em mente que o usuário conta com um número muito grande de fontes de informação e não irá perder muito tempo em um site difícil de navegar. Facilite para o seu público procurando manter no máximo três níveis para todo o conteúdo. O site pode ser acessado por diversos navegadores em suas enumeras versões, há necessidade de plug-ins? Acessibilidade. Seu site deve ser fácil de acessar e navegar para o diverso público existente na web, incluído pessoas com diversas deficiências e especifidades.

2 Dicas Importantes: - Sempre crie um diretório em seu computador e salve todos os arquivos que vai usar (imagens e páginas), nesta pasta. - Se o arquivo que você estiver salvando for a sua página inicial deve-se obrigatoriamente salvá-lo como index e tudo em letra minúscula, sem espaços e sem acento. Os outros arquivos que estarão pendurados na home-page podem ser salvos com o nome de sua preferência, mas também devem estar em letras minúsculas, sem espaços e sem acento! - Formato de Imagens: Qualidade das cores das imagens apresentadas no site estão intimamente ligadas ao formato de imagem escolhido. As imagens devem ter o tamanho mínimo possível em Kb, Confira a diferença entre alguns formatos JPG:> É o formato ideal para imagens com grande número de cores como fotografias. Podem apresentar até 16,7 milhoes de cores. GIF:> O Gif possui um esquema de compressão eficaz especialmente em imagens ou gráficos que usam até 256 cores. Esse formato é usado para logotipos e banners. Os arquivos gifs aceitam cor transparente e animação. PNG:> pode apresentar até 16,7 milhões de cores, animação e transparência, porem gera um arquivo de tamanho maior SWF:> Arquivo do Flash, ideal para apresentações multimídia com interação. - O site deve possuir uma barra de navegação que funciona como uma espécie de menu com links para as seções principais. - Cuidado com as fontes pouco convencionais; para visualizar a sua página com a fonte que você escolheu, o usuário deve possuir esta mesma fonte instalada no computador dele. Existem basicamente dois tipos de fontes: as com serifa e as sem serifa. As fontes serifadas geralmente se perdem na resolução dos monitores, tornando-se inadequada a sua utilização. O texto sem serifa não perde resolução e tem mais potencial de velocidade de leitura: 2 HTML Para desenvolver um site na internet o primeiro conceito é do HTML - HyperText Markup Language ou Linguagem de Marcação Hipertexto, Essa linguagem é bastante simples e tem como finalidade básica formatar o texto exibido e criar ligações entre as páginas da Web, criando assim documentos com o conceito de hipertexto. O documento em HTML é um arquivo texto comum que pode ser escrito através de qualquer editor de textos tem a terminação.htm ou.html. Como é uma linguagem interpretada, a partir do momento em que se salvou o arquivo HTML o mesmo já pode ser aberto por qualquer navegador, que é o único software que pode determinar se o documento foi escrito dentro dos padrões da linguagem. Uma página HTML é composta basicamente de títulos, textos, parágrafos, imagens e links, responsáveis pela chamada de outras páginas para a tela. Todos esses elementos são posicionados na página por meio de comandos específicos da linguagem. Observe que a construção de páginas exigir o uso de marcadores chamados de TAGS. Obs: Recomenda-se o uso de letras minúsculas para as tags e os atributos devem estar em aspas duplas, ex: <body bgcolor= blue >

3 Para entender melhor a Linguagem HTML, usaremos o Notepad +++, mas poderíamos usar qualquer editor de texto como Bloco de Notas, a única exigência e colocar a extensão htm ou html na hora de salvar o arquivo. 3 ESTRUTURA BÁSICA (HTML 5), DOCTYPE E CHARSETS A estrutura básica do HTML é sendo a mesma das versões anteriores da linguagem, há apenas uma excessão na escrita do Doctype. Segue abaixo como a estrutura básica pode ser seguida: Salve esse arquivo como exe01.htm (ATENÇÃO ESSE É O NOME DO ARQUIVO, ELE DEVE TER A EXTENSÃO HTM OU HTML, para que o Sistema Operacional, interprete que deve abrir o arquivo no navegador padrão) Tags estudadas: <!DOCTYPE html!> <html> <head> O Doctype deve ser a primeira linha de código do documento antes da tag HTML. O Doctype não é uma tag do HTML, mas uma instrução para que o browser tenha informações sobre qual versão de código a marcação foi escrita. O código HTML é uma série de elementos em árvore onde alguns elementos são filhos de outros e assim por diante. O elemento principal dessa grande árvore é sempre a tag HTML. <html lang= pt-br > O atributo LANG é necessário para que os user-agents saibam qual a linguagem principal do documento Marca o início e do fim do cabeçalho onde são inseridas tags utilizadas para indexação do documento HTML (<title>, <meta>, <script>, <link> e,base>) <meta charset= utf-8 > É uma metatag responsável por chavear qual tabela de caracteres a página está utilizando Obs: existem importante metatags que serão analisadas posteriormente. <title> <body> Utilizada para definir o título da página, que é um dos principais conteúdos indexados pelas ferramentas de buscas e é o primeiro elemento processado por leitores de tela. Marca o início e o fim do do corpo da página

4 4 Exe02.htm: <! xx --> <hn> <hr> <p> <br> Insere comentários nas páginas Marca um título. Sendo que n representa um valor que pode ser de 1 a 6, o tamanho muda de forma decrescente, ou seja, o número 1 é o maior tamanho do título. Insere uma linha horizontal Marca um parágrafo e acrescenta uma linha em branco. Insere uma quebra de linha <b> <i> <u> Negrito itálico e sublinhado (sublinhado deve usar CSS) É importante estruturar as páginas de seu site com as tags de cabeçalho, onde a H1 é a mais importante (e maior), e H6 é a menos importante, na hierarquia. Isso é tão útil, que até o Google usa as headings em seu complexo sistema de rankeamento dos resultados de busca, pois ele entende que as keywords em tags H1 e H2 são muito importantes e refletem um resumo do conteúdo do artigo. No HTML5, existe um elemento que tem por função agrupar essas tags de cabeçalho, que é a tag hgroup, especialmente voltada para as headings.

5 5 Exe03.htm: align Serve para alinha parágrafos e títulos Center (Centro), left (esquerda), right (direita) e justify (justificado) Para centralizar textos, podemos usar somente a tag <center> <blockquote> <hr> Adiciona uma margem de cerca de um centímetro Insere uma linha horizontal. Atributos: Size = define a altura da linha. Exemplo: <hr size=50> Width = define a largura da linha horizontal. (% ou pixels) Noshade = desenha a linha sem a sombra para dar o efeito de três dimensões. Color = define a cor, para definir a cor devemos usar o nome em inglês (Ex: White, Red, Green, Blue, Magenta, Cyan, Black, Yellow, violet, etc) ou o código em hexadecimal (veremos nos próximos exemplos. OBS: Alguns atributos (color, size, etc) servem para várias tags, como veremos nos próximos exemplos

6 6 exe04.htm <font> Modifica a formatação do texto.atributos: Size = define o tamanho da letra. Ex: <font size=5>texto</font> Face = define o estilo da letra. Ex: <font face=verdana>texto</font> Color = define a cor da letra. Ex:<font color=red>texto</font> <marquee> Cria letreiro em movimento com imagens e textos (TAG descontinuada) Behavior (Slide, alternate e behavior)especifica o movimento que será usado no letreiro.veja alguns dos movimentos: Bgcolor: Cor de fundo Direction: Direção na qual o texto irá se mover.a direção pode ter, left, right,down e up. Width: É a largura do letreiro. Height: È a altura do letreiro. Caracteres Especiais Uma página web é vista por diferentes países, que usam conjuntos de caracteres distintos. A linguagem HTML nos oferece um mecanismo pelo qual podemos estar seguros que uma série de caracteres raros serão bem vistos em todos os computadores do mundo, independentemente de seu jogo de caracteres. Vejam alguns exemplos:

7 7 espaço & e comercial & acento trema acento agudo &cute; aspas duplas esquerda aspas duplas direita travessão en travessão em reticências barra vertical < Menor < > Maior > aspas simples esquerda aspas simples direita º ordenal masculino º ª ordinal feminino ª marcador marcador triangular Veja a lista completa em: exe05.htm

8 8 <ol> Marca o início e o fim de uma lista ordenada. Recebem na primeira linha um número ou letra. Devem ser usados com tag <li>. Atributos: Start = especifica o número a partir do qual os itens começam a ser contados. Ex: <ol start=3> Type = modifica o tipo do numerador que pode ser: número, letras ou algarismo romano. Ex: 1, A, a, I, i <ul> Marca o início e o fim de uma lista não ordenada, ou seja, os itens da lista recebem símbolos na primeira linha. Devem ser usados com tag <LI>. Atributos: Type = modifica o tipo do marcador (símbolo), que pode ser: Circle = um círculo vazio, Disc = um círculo cheio, Square = um quadrado cheio Definindo O Corpo Da Página exe06.htm Cores: O código RGB numérico RGB é a sigla para Red, Green, Blue (Vermelho, Verde, Azul), que gera o padrão de cores pelo qual o monitor obtém cores com brilho. A codificação das cores está baseada na mistura cromática. Ou seja, certas quantidades dessas 3 cores são misturadas para se obter uma determinada cor.as cores podem ser codificadas em diferentes bases. Base 10: O valor de cada componente (R, G e B) deve ser um número inteiro que pode variar entre 0 e 255, gerando um código numérico, em base 10.Exemplo: A cor vermelha é representada por # : red (vermenho): 255, green (verde): 0 e blue (azul): 0. Ao se usar a notação decimal a representação da cor fica extensa. Para evitar isso convencionou-se utilizar a representação hexadecimal das tonalidades de cada cor. È importante notar que os números hexadecimais devem ser precedidos pelo caractere cerquilha também chamado "sustenido"ou "jogo da velha" (#). Deste modo cada cor pode variar de 00 a ff na representação hexadeciamal. combinando-se a intensidade das cores do RGB temos a representação da cor. Veja a tabela básica abaixo: Cor Hexadecimal Cores Claras Hexadecinal Cor Hexadecimal Branco #FFFFFF Branco-neve #F4F4F4 Cinza # Preto # Cinza-claro #C0C0C0 Amarelo #FFFF00 Azul #0000FF Azul-claro #D9FFFF Amarelo-claro #FFFFF5 Verde # Verde-claro #DEFEDA Roxo-claro #EFDFFF Vermelho #FF0000 Rosa-claro #FFD5D5

9 9 exe07.htm: <Body > Marca o início e o fim do corpo da página. Atributos: Bgcolor = define a cor do fundo da página Text = define a cor do texto padrão da página Background = permite inserir uma imagem como fundo da página Bgproperties = fixa a imagem no fundo da página quando a página é rolada, criando um efeito de marca d água. IMPORTANTE: As imagens devem estar na mesma pasta, onde estará o documento HTML, ou numa subpasta, se estiver em uma subpasta deve-se mostrar o caminho na html. EX: <body backround=imagens/parede.gif Nome da pasta Nome da imagem, que deve estar na pasta exe08.htm

10 10 <img > Insere uma imagem. Atributos Src: indica o nome da imagem a ser carregado. align=middle centraliza o base do texto com o centro da imagem align=left faz a imagem flutuar a esquerda enquanto o texto circunda imagem à direita. align=top alinha o texto no topo align=right faz a imagem flutuar a direita enquanto o texto circunda imagem à esquerda. alt= n indica o texto para ser exibido quando o navegador não exibe a imagem. Sendo que n é o título que identifique a imagem. Exemplo: <img src=fig.jp alt= Esta é uma imagem legal > exe09.htm: Como não foi definido o tamanho da tabela, ela se adapta ao tamanho do conteúdo inserido em suas células. Depois de salvo altere a seguinte linha: <table border=2> <! Aqui começa a Tabela> Por essa: <table border=1 width=600 height=50 cellpadding=5 cellspacing=5> Apesar de usarmos mais tabelas como estrutura básica dos sites. Seu uso continua muito importante.

11 11 Exe10.htm <table > <tr> <td> Marca o início e o fim de uma tabela. Atributos: Width: define a largura da tabela ou da célula Height: define a altura da tabela ou da célula Cellpadding: define a margem dentro das células Cellspacing: define o espaço entre as células Bgcolor: define a cor de fundo da tabela ou da célula Border:define a largura da broda da tabela Align: alinha o conteúdo na horizontal (left, center ou right) Valign: (alinha o conteúdo na vertical (top, bottom ou middle) Bordercolor: Define a cor da borda da tabela Marca o início e o fim de uma linha Marca o início e o fim de uma célula (linha) Também é possível colocar imagens dentro das células: Ex: <td> <img src=foto.jpg> </td>

12 12 Exe11.htm LINKS Estamos produzindo páginas de hipertextos, ou seja, textos que podem fazer ligações com outros textos, ligando páginas entre si e a WEB. Então, estes pontos nós chamamos de links ou hyperlinks, âncoras de hipertexto, todos com a mesma função, de através de um único clique sobre a frase ou imagem conduzir a algum lugar no site ou na WEB. O Tag responsável é o <A>, onde dentro deste, através de um atributo coloco a referência, ou seja, A URL (Uniform Resource Locator). Para criar um link usamos a seguinte sintaxe: SINTAXE: <A HREF= URL >Frase que aparece na página</a> Onde: <a> tag que marca o início e o fim do link href= atributo que especifica o nome da referência HTML AVANÇADO Meta tags São linhas de código HTML ou "etiquetas" que, entre outras coisas, descrevem o conteúdo do seu site para os buscadores. É nelas que você vai inserir as palavras-chave que facilitarão a vida do usuário na hora de te encontrar, por exemplo. Por meio delas, você pode também "assinar" seu site, declarando sua autoria sobre o código fonte.

13 Cada vez mais os buscadores levam em consideração a qualidade do conteúdo nos resultados de pesquisa, e por isso simplesmente adicionar meta tags no código fonte da sua página não vai melhorar o posicionamento dela. Porém, as meta tags ainda tem seu espaço se utilizadas corretamente. Como utilizar as meta tags Keywords Nesta tag você deve incluir uma quantidade de palavras que se referem ao conteúdo da página. Mantenha o limite de aproximadamente 150 caracteres. Se não utilizar as mesmas palavras, tente utilizar sinônimos. Nunca quebre uma linha de palavras-chave, porque seu trecho de código será considerado um erro e será ignorado. Sempre separe as palavras com vírgula e declare todas elas em letras minúsculas - alguns buscadores têm problemas com letras maiúsculas e podem ignorar seu site. <meta name="keywords" content="sites, web, desenvolvimento, html, design"> Description Uma ou duas frases que o buscador apresentará como um resumo do conteúdo do seu site. Procure manter um limite de aproximadamente 90 caracteres. <meta name="description" content=" Meta Tags - O que são e como utilizá-las - Um artigo para iniciantes"> content-type Especifica o tipo de conteúdo da página e o conjunto de caracteres que ele usa. É recomendável utilizar esta meta tag em todas as páginas do seu site, porque ela garante que os navegadores irão tratar seu documento da maneira mais apropriada, especialmente quando você utiliza formulários para enviar informações entre páginas. Para quem desenvolve páginas em idiomas orientais, utilizar o conjunto de caracteres apropriados é fundamental para que eles sejam exibidos corretamente. Os valores mais comuns são: <meta http-equiv="content-type" content="text/html; charset=iso "> Author Por meio das meta tags, você também pode declarar sua autoria sobre a página, "assinando" seu código fonte: <meta name="author" content="erika Sarti"> Redirecionando o visitante para outra página Alguma vez você já deve ter visitado um site que mudou de endereço e que exibe uma mensagem do tipo: Você será redirecionado para um novo site em 5 segundos. Se não quiser aguardar, clique aqui. Esse redirecionamento pode ser feito com meta tag, por meio de uma única linha: <meta http-equiv="refresh" content=" 5 ;url= Obs: O conceito de formulários em HTML será estudado juntamente com com a linguagem PHP 13 Scripts Java Script É uma linguagem interpretada, que pode ser usada junto com o HTML e permite inserir váios efeitos, permitindo que o site (ou uma mensagem de correio eletrônico) fique mais dinâmico, e uma maior interação com o leitor. O código JavaScript, não é compilado, e deve ser colocado, no código fonte, junto com os comandos da linguagem HTML. Aplicação de um efeito Script é uma sequência de comandos que deve ser colocada em uma posição determinada na página ou como um arquivo anexado. No último caso terá extensão js.

14 É importante lembrar que é preciso conhecer uma linguagem de programação para criar um script. Aqui só modificaremos alguns parâmetros e assim podermos modificar efeitos. 14 Em geral, a seqüência se inicia com <SCRIPT... > e termina com </SCRIPT> Java e JavaScript Java é uma linguagem de programação e JavaScript é uma linguagem de scripting. Pode-se criar programas reais com Java. Com JavaScript apenas cria-se efeitos que só funcionam dentro de uma página em HTML, por exemplo. Assim, pode-se admitir que JavaScript é mais uma extensão do HTML do que outra linguagem de computação. Exemplos: Java01.htm: <body> <script> alert("minha primeira mensagem!") </script> <h2> Aparece uma mensagem POP UP <h2> </body> Java02.htm: <html> <head> <script type="text/javascript"> function teste(){ var nome = window.prompt("digite seu Nome"); alert ("Ola " + nome + ", Seja BEM VINDO!! "); document.write("olá " + nome); } </script> </head> <body> <input type="button" onclick="teste();" value="clique Aqui"> </body> </html> Java03.htm: <body> <script> document.write(new Date()) </script> </body>