Jean Morais jean@objetivosorocaba.br jean@aessorocaba.br

1. Fundamentos de Programação WEB Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br

2. Fundamentos de Programação WEB • Jean Morais • Analise de Sistemas (Graduação) • MBA Gestão Empreendedora de Negócios Coordenador e Professor do Curso técnico “Objetivo” Coordenador de informática – área pedagógica Recursos, auditório, audiovisual Professor da AES, Sistemas de Informação e Tecnológicos.

3. Fundamentos de Programação WEB Ambiente Web A criação de site para web requer uma análise precisa da visão e das necessidades que o cliente deseja passar. Deve-se criar um layout onde o visitante possa se localizar com relação à exposição do conteúdo, o qual possua um agradável visual para transmitir uma visão profissional de todo o site. Seu papel principal é transmitir a sua importância perante o mundo físico e mostrar os serviços oferecidos. Para se criar um site de boa qualidade e que num futuro próximo possa trazer um retorno satisfatório, o profissional deve dedicar-se inteiramente ao projeto, dando vida às suas idéias e exercitando bastante a sua criatividade. A idéia deverá ajudar a responder algumas questões como: Prof. Jean Morais

4. Fundamentos de Programação WEB • Qual o objetivo da criação do site? • Qual o público alvo que o site pretende alcançar? • O serviço que será oferecido pelo site terá público alvo? Por quê? • O site poderá atrair pessoas diferentes? Quais? Quais as áreas de interesse? • Quais as tecnologias que serão utilizadas para o desenvolvimento do projeto? • Quais as informações que serão utilizadas? E com que freqüência? • Será necessário obter dados do cliente? O que será preciso e porquê? • Quem hospedará e dará manutenção ao site? • Qual o planejamento para a divulgação do site? • Qual o planejamento para daqui a no mínimo 5 anos? O que se esperará e porquê? Prof. Jean Morais

5. Fundamentos de Programação WEB Depois da análise das questões, o resultado será um grande esboço com as informações necessárias ao projeto. Com a idéia estabelecida, é hora de definir o caminho que o site tomará, identificando as suas funcionalidades e como o usuário poderá interagir com ele. Usabilidade Estrutura do Design Layout e uso das Cores Hiperlink Prof. Jean Morais

6. Fundamentos de Programação WEB Usabilidade Usabilidade define-se coloquialmente como a facilidade de utilização, seja de um site na web, seja de uma aplicação de informática ou qualquer outro sistema que interaja com o utilizador. As principais etapas que compõem a projeção e o desenvolvimento de um site são: o design da página, o design do conteúdo e o design do site. Sem ter esses conhecimentos aprofundados o profissional pode passar uma visão errada, ou mesmo, prejudicar a imagem verdadeira que o site deveria transmitir. Para resolver esse tipo de questionamento, abordaremos alguns critérios de usabilidade com a maior simplicidade possível. O design da página, o design do conteúdo e design do site serão desmembrados em vários outros fatores, os quais obedecidos resultaram numa maior satisfação por parte do usuário. Prof. Jean Morais

7. Fundamentos de Programação WEB • O design da página consiste no visual de um site na web. É onde analisamos todos os aspectos envolvendo a estrutura do design para o site (se o design comportará a página inteira, o uso de recursos visíveis a qualquer plataforma, qualquer área de tela, se é necessário o uso de novas tecnologias, etc). • O design do conteúdo consiste na preparação do material escrito que vai ser inserido na página e como ele será exposto ao público. Deve-se fazer uma análise do conteúdo, da escrita, das cores e formas que podem ajudar ao leitor à melhor compreensão, e se é necessário o uso de animação ou qualquer outro atrativo inovador. • O design do site consiste na arte gráfica de todo o site e analisa os critérios de navegação e as diferenças de design entre a homepage e as páginas interiores. No ponto de vista da usabilidade, o design do site oferece mais desafios e geralmente também é mais importante do que o design da página. Prof. Jean Morais

8. Fundamentos de Programação WEB Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br

9. Fundamentos de Programação WEB Estrutura do Design O design se torna um fator imprescindível para se alcançar o sucesso, pois é através dele que se faz com que o usuário se interesse pelos serviços prestados. Existem três fatores que devem ser observados durante o desenvolvimento de um site: a simplicidade, o conteúdo e a velocidade. • * A simplicidade significa que o design deve ser simples, organizado e com cores suaves, usando com moderação figuras e sons. Isso manterá a página clara e objetiva, tornando-a agradável visualmente. • * O conteúdo é a palavra chave para que o usuário fique satisfeito durante a visita ao site, por isso o ideal é manter um conteúdo útil e de fácil localização. Prof. Jean Morais

10. Fundamentos de Programação WEB • * Com relação à velocidade de navegação, é importante frisar que um grande erro é perder tempo utilizando as tecnologias do mercado para a criação de efeitos mirabolantes, pois freqüentemente o uso desses efeitos tornam o site pesado, e isso dificulta muito a navegação, conseqüentemente, o afastamento por parte do usuário. Para ser um bom designer é preciso ter algumas qualidades primordiais, como: um bom senso de observação, um bom conhecimento de cores, de alinhamento, de proporção, de contraste, de legibilidade, de usabilidade, de unidade, de impacto e de harmonia entre os elementos. Existem alguns princípios básicos de design para a melhor maneira de colocar as informações na página web: Prof. Jean Morais

11. Fundamentos de Programação WEB • * Proximidade:Segundo o princípio de proximidade, itens relacionados entre si devem ser agrupados e aproximados uns dos outros, para que sejam vistos como um conjunto coeso e não como um emaranhado de partes sem ligação. Quando elementos similares são agrupados em uma unidade, a página fica mais organizada. É possível saber por onde começar a leitura e onde terminá-la. • * Alinhamento:Segundo o princípio de alinhamento, nada deve ser colocado arbitrariamente em uma página. Cada item deve ter uma conexão visual nas páginas. Prof. Jean Morais

12. Fundamentos de Programação WEB • * Repetição:O princípio de repetição afirma que algum aspecto do design deve repetir-se no material inteiro. Mesmo que o documento tenha apenas uma página, a repetição dos elementos ajuda a organizar as informações. • * Contraste:O contraste é uma das maneiras mais eficazes de acrescentar algum atrativo visual a uma página, criando uma hierarquia organizacional entre diferentes elementos. “Cria-se o contraste quando dois elementos são diferentes. Se eles diferirem um pouco e não muito, não acontecerá o contraste e sim um conflito. Prof. Jean Morais

13. Fundamentos de Programação WEB Os princípios de design estão inter-relacionados e raramente apenas um deles será utilizado. Para garantir aos textos uma melhor legibilidade, há algumas regras básicas que devem ser obedecidas por todos os Websites: * Usar cores com alto contraste entre o texto e o fundo. * Usar fundos de cores lisas ou padrões de fundo extremamente sutis. * Usar fontes de tamanhos suficientes para que as pessoas possam ler os textos, mesmo que não tenham uma visão perfeita. * Fazer com que o texto fique imóvel. Mover, piscar ou dar um zoom no texto dificulta ainda mais a leitura do que palavras estáticas. Prof. Jean Morais

14. Fundamentos de Programação WEB Hiperlink Outra etapa durante o design da página é a definição das palavras ou itens que serão os "links" procurados pelos usuários. Os "links" são a parte mais importante do hipertexto , pois, conectam as páginas e permitem que os usuários visitem sites novos e interessantes. Apenas os termos que contém as informações mais importantes devem ser transformados em "links" de hipertexto. Um "link" de hipertexto tem fundamentalmente duas pontas: a página de partida e a página de destino. Os "links" devem seguir dois princípios: Prof. Jean Morais

15. Fundamentos de Programação WEB * A retórica da partida. Os usuários têm que enxergar claramente que devem sair do contexto atual e o que se ganhará na outra ponta do "link". * A retórica da chegada. A página de chegada deve situar claramente os usuários no novo contexto e oferecer valor relativo ao seu ponto de origem. * A pergunta de navegação mais importante é provavelmente “Onde Estou?”, pois se o usuário não souber onde está, também não terá a capacidade de interpretar o  significado do "link" que acabou de seguir. Prof. Jean Morais

16. Fundamentos de Programação WEB A navegação pelo site depende muito da disposição dos "links". Os "links" têm que estar dispostos de maneira fácil e bem compreensível. Recomenda-se fazer uso de cores que se destaquem para os "links" que ainda não foram visitados e uma cor mais suave para os "links" visitados. Quando os usuários percebem quais os "links" que já foram visitados por eles, começam a aprender a estrutura do site, o que impede que eles visitem a mesma página duas vezes por engano. Prof. Jean Morais

17. Introdução à Linguagem HTML HTML (HyperText Markup Language - Linguagem de Formatação de Hipertexto). Todo documento HTML apresenta elementos entre parênteses angulares (< e >); esses elementos são as etiquetas (tags) de HTML, que são os comandos de formatação da linguagem. A maioria das etiquetas tem sua correspondente de fechamento: <etiqueta>...</etiqueta> Isso é necessário porque as etiquetas servem para definir a formatação de uma porção de texto, e assim marcamos onde começa e termina o texto com a formatação especificada por ela. Prof. Jean Morais

18. Introdução à Linguagem HTML Documento básico e seus componentes. A estrutura de um documento HTML apresenta os seguintes componentes: HTML> <HEAD><TITLE>Titulo do Documento</TITLE></HEAD> <BODY> texto, imagem, links, ... </BODY> </HTML> Prof. Jean Morais

19. Introdução à Linguagem HTML A seção <HEAD> <HEAD> contém informações sobre o documento. O elemento <TITLE>, por exemplo, define um título, que é mostrado no alto da janela do browser. Nesta página, por exemplo, está definido assim: <HEAD> <TITLE> Tutorial HTML da AES </TITLE> </HEAD> </HTML> Todo documento WWW deve ter um título; esse título é referenciado em buscas pela rede, dando uma identidade ao documento. Note que o título da página se tornou a âncora de atalho para ela. Por isso é sugerido que os títulos dos documentos sejam sugestivos, evitando-se títulos genéricos como "Introdução". Prof. Jean Morais

20. Introdução à Linguagem HTML O título também é bastante significativo para a listagem de uma página nos resultados de pesquisas nos catálogos da Internet. Prof. Jean Morais

21. Introdução à Linguagem HTML A seção <BODY> Tudo que estiver contido em <BODY> será mostrado na janela principal do browser, sendo apresentado ao leitor. <BODY> pode conter cabeçalhos, parágrafos, listas, tabelas, links para outros documentos, imagens, formulários, animações, vídeos, sons e scripts embutidos. Através de atributos de <BODY>, podemos definir cores para os textos, links e para o fundo das páginas, bem como uma imagem de fundo (marca d’água): <BODY BGCOLOR="#rrggbb“> <FONT COLOR="#rrggbb" LINK="#rrggbb" ALINK="#rrggbb" VLINK="#rrggbb" BACKGROUND="URL"> Prof. Jean Morais

22. Introdução à Linguagem HTML onde: • BGCOLOR • cor de fundo (quando não é indicada, o browser irá mostrar uma cor padrão, geralmente o cinza ou branco; alguns editores poderão estabelecer o branco para o fundo da página) • FONT • cor dos textos da página (padrão: preto) • LINK • cor dos links (padrão: azul) • ALINK • cor dos links, quando acionados (padrão: vermelho) • VLINK • cor dos links, depois de visitados (padrão: azul escuro ou roxo) Prof. Jean Morais

23. Introdução à Linguagem HTML BACKGROUND • indica o URL da imagem a ser replicada no fundo da página, como uma marca d’água. • Para efeitos de design, é possível fixar a imagem de fundo, para que ela não se mova junto com o texto ao se rolar a página. Esse efeito não é padrão e funciona no Internet Explorer. Prof. Jean Morais

24. Introdução à Linguagem HTML Cabeçalhos • Há seis níveis de cabeçalhos em HTML, de <H1> a <H6>: • <H1>Este é um cabeçalho de nível 1</H1> • <H2>Este é um cabeçalho de nível 2</H2><H3>Este é um cabeçalho de nível 3</H3> • <H4>Este é um cabeçalho de nível 4</H4><H5>Este é um cabeçalho de nível 5</H5> • <H6>Este é um cabeçalho de nível 6</H6> Prof. Jean Morais

25. Introdução à Linguagem HTML Esses cabeçalhos são mostrados da seguinte forma: • Este é um cabeçalho de nível 1 • Este é um cabeçalho de nível 2 • Este é um cabeçalho de nível 3 • Este é um cabeçalho de nível 4 • Este é um cabeçalho de nível 5 • Este é um cabeçalho de nível 6 Prof. Jean Morais

26. Introdução à Linguagem HTML Quebra de linha • Quando queremos mudar de linha, usamos o elemento <BR>. Isso só é necessário quando queremos uma quebra de linha em determinado ponto, pois os browsers já quebram as linhas automaticamente para apresentar os textos. • Com sucessivos <BR>, podemos inserir diversas linhas em branco nos documentos. • Parágrafos • Para separar blocos de texto, usamos o elemento <P>: • Parágrafo 1; <P> Parágrafo 2. • que produz: • Parágrafo1; • Parágrafo2. Prof. Jean Morais

27. Introdução à Linguagem HTML Combinando parágrafos e quebras de linha, temos: • Parágrafo 1; <br> linha 1 do parágrafo 1, <br>linha 2 do parágrafo 1. <P>Parágrafo 2; <br> linha 1 do parágrafo 2, <br> linha 2 do parágrafo 2. • O resultado da marcação acima é: • Parágrafo 1; linha 1 do parágrafo 1, linha 2 do parágrafo 1. • Parágrafo 2; linha 1 do parágrafo 2, linha 2 do parágrafo 2. Prof. Jean Morais

28. Introdução à Linguagem HTML Tabelas • Uma tabela é um conjunto de células organizadas dentro das quais podemos alojar distintos conteúdos. • Uma tabela nos permite organizar e distribuir os espaços da melhor forma. Pode nos ajudar a gerar textos em colunas como os jornais, prefixar os tamanhos ocupados por distintas seções da página ou colocar de uma maneira simples uma legenda a uma imagem. • Pode ser que a princípio seja um pouco complicado trabalhar com estas estruturas mas, se desejamos criar uma página de qualidade, mais cedo ou mais tarde teremos que nos ver com elas e nos dar conta das possibilidades que nos oferecem. Prof. Jean Morais

29. Introdução à Linguagem HTML Tabelas • Para começar, nada mais simples do que pelo princípio: as tabelas são definidas pelas etiquetas <table> e </table> • Dentro dessas duas etiquetas colocaremos todas as outras etiquetas, textos e imagens que darão forma e conteúdo à tabela. • As tabelas são descritas por linhas da esquerda para direita. Cada uma destas linhas é definida por outra etiqueta e seu fechamento: <tr> e </tr> • Ainda assim, dentro de cada linha, haverá diferentes células. Cada uma dessas células será definida por outro par de etiquetas:<td> e </td>. Dentro desta etiqueta será onde colocaremos nosso conteúdo. Prof. Jean Morais

30. Introdução à Linguagem HTML Além dos atributos específicos de cada célula ou linha, as tabelas podem ser adicionalmente formatadas a partir dos atributos que nos oferece a própria etiqueta <table>. A seguir, mostramos aqueles que nos podem parecer à principio mais importantes: Align Alinha horizontalmente a tabela em relação ao seu entorno. Background Permite-nos colocar um fundo para a tabela desde um link a uma imagem. Bgcolor Dá cor de fundo à tabela. Border Define o número de pixels da borda principal. Bordercolor Define a cor da borda. Cellpadding Define, em pixels, o espaço entre as bordas da célula e o conteúdo da mesma. Prof. Jean Morais

31. Introdução à Linguagem HTML Cellspacing Define o espaço entre as bordas (em pixels). Height Define a altura da tabela em pixels ou porcentagem. Width Define a largura da tabela em pixels ou porcentagem. Colspan Indica que uma célula deve ocupar mais de uma linha Rowspan Indica que uma célula deve ocupar mais de uma coluna Prof. Jean Morais

32. Introdução à Linguagem HTML Criando uma tabela Às vezes podemos ter a necessidade de que uma célula de uma tabela ocupe mais de uma coluna ou linha da mesma, para isso utilizamos os atributos COLSPAN e ROWSPAN nas células da tabela. Veremos nesse artigo como utilizá-los através de alguns exemplos práticos. Digamos que nós tenhamos uma tabela simples exibindo preços de carros: Prof. Jean Morais

33. Introdução à Linguagem HTML <table border="1"> <tr> <td>Carro</td> <td>Modelo</td> <td>Preço</td> </tr> <tr> <td>Celta</td> <td>Life</td> <td>R$ 21.000</td> </tr> <tr> <td>Gol</td> <td>City</td> <td>R$ 23.000</td> </tr> </table> Prof. Jean Morais

34. Introdução à Linguagem HTML <table border="1"> <tr> <td colspan="3">Tabela de preços de carros</td> </tr> <tr> <td>Carro</td> <td>Modelo</td> <td>Preço</td> </tr> <tr> <td>Celta</td> <td>Life</td> <td>R$ 21.000</td> </tr> <tr> <td>Gol</td> <td>City</td> <td>R$ 23.000</td> </tr> </table> Prof. Jean Morais

35. Introdução à Linguagem HTML <table border="1"> <tr> <td colspan="3">Tabela de preços de carros</td> </tr> <tr> <td rowspan="3">Celta</td> </tr> <td>Life</td> <td>R$ 21.000</td> </tr> <tr> <td>Super</td> <td>R$ 23.000</td> </tr> </table> Prof. Jean Morais

36. Introdução à Linguagem HTML <table align="center" bgcolor="#cc0000" width="300" border="1"> <tr> <td>Tabela de cor vermelha de fundo</td> <td>O atributo bgcolor da tabela está em vermelho.</td> </tr> <td>Célula normal</td> <td bgcolor="009900">Esta célula está em verde. Tem o atributo bgcolor na cor verde</td> </tr> </table> Prof. Jean Morais

37. Introdução à Linguagem HTML Prof. Jean Morais

38. Introdução à Linguagem HTML <table align="center" border="1" bgcolor=dddddd> <tr> <td colspan="4" align="center" bgcolor="666666"><font color="#FFFFFF" size="4">Animais em perigo de extinção</font></td> </tr> <tr bgcolor="aaaaaa"> <td>Nome</td> <td align="center">Cabeças</td> <td align="center">Previsão 2010</td> <td align="center">Previsão 2020</td> </tr> <tr> <td>Baleia</td> <td align="center">6000</td> <td align="center">4000</td> <td align="center">1500</td> </tr> Prof. Jean Morais

39. Introdução à Linguagem HTML <tr> <td>Urso Pardo</td> <td align="center">50</td> <td rowspan="2" colspan="2" align="center" bgcolor="red">0</td> </tr> <tr> <td>Lince</td> <td align="center">10</td> </tr> <tr> <td>Tigre</td> <td align="center">300</td> <td colspan="2" align="center">210</td> </tr> </table> Prof. Jean Morais

40. Fundamentos de Programação WEB Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br

41. Introdução à Linguagem HTML Listas A linguagem "HTML" permite a criação de listas que podem ser usadas para enumerar fatos ou também como um menu para acessar outros documentos do seu site e de endereços da Internet.As listas são classificadas em listas ordenadas, criadas com o par de comandos <OL></OL>, que colocam números na frente dos itens da lista, e listas não ordenadas, criadas com <UL></UL>, que colocam marcadores. Independente do tipo de lista usado, cada item deve ser precedido pelo comando <LI>. Veja exemplo de construção dos dois tipos de lista. Prof. Jean Morais

42. Introdução à Linguagem HTML <h1>Lista não ordenada</h1>  <UL>    <LI> Primeiro item da lista    <LI> Segundo item da lista    <LI> Terceiro item da lista    <LI> Quarto item da lista  </UL>  <h2>Lista ordenada</h2>  <ol>    <LI> Primeiro item da lista    <LI> Segundo item da lista    <LI> Terceiro item da lista    <LI> Quarto item da lista  </OL> Prof. Jean Morais

43. Introdução à Linguagem HTML Prof. Jean Morais

44. Introdução à Linguagem HTML Se optar por usar uma lista não ordenada, poderá opcionalmente especificar três tipos diferentes de marcador. Para isso, basta acrescentar a cláusula type= square/circle/disc ao comando <UL>, onde square coloca um quadrado, circle, um círculo e disc, uma bolinha como marcador.<h2>Exemplo de marcadores alternativos</h2> <UL type=square>    <LI> Primeiro item da lista    <LI> Segundo item da lista    <LI> Terceiro item da lista  </UL>  <UL type=circle>    <LI> Primeiro item da lista    <LI> Segundo item da lista    <LI> Terceiro item da lista  </UL>  <UL type=disc>    <LI> Primeiro item da lista    <LI> Segundo item da lista    <LI> Terceiro item da lista  </UL> Prof. Jean Morais

45. Introdução à Linguagem HTML Prof. Jean Morais

46. Introdução à Linguagem HTML Para inserir som em uma página Web: <bgsound src="O tempo não pára.wma" loop=infinite hidden=true volume=50> Inserir video e uma página Web: <EMBED SRC="prod.wmv" LOOP="false" CONTROLLER="true" AUTOPLAY="true" WIDTH="400" HEIGHT="350"> Prof. Jean Morais

47. Introdução à Linguagem HTML IFRAME <IFRAME name=palco src="iframe_0.html" frameBorder=0 width=400 height=150 scrolling=auto></IFRAME> Onde: name: é o nome da janela, ele será usado caso você queira criar links que abram dentro do iframe, é o valor do target.src: é a página que será aberta dentro do iframe.frameborder: borda do frame.width e height: largura e altura do iframe, respectivamente.scrolling: barra de rolagem. Prof. Jean Morais

48. Introdução à Linguagem HTML <html> <head> <title> Barão Vermelho </title></head> <body bgcolor="C7C9CE"> <table width="100%"> <tr> <td colspan="2"> <font color="789BEA" size="6"> <center> <table> <tr> <td> <img src="barao.jpg"> </td> <td><font size="8" color="F90C0C"> Barão Vermelho </td> <td> <img src="barao.jpg"> </td> </tr> </table> </td> </tr> <tr> <td width="11%" heigth="10%"> <a href="contato.html" target="principal">Contato</a> <br> <br> <a href="contato.html" target="principal">Contato</a><br> <br> <a href="contato.html" target="principal">Contato</a> </td> <td width="100%"> <iframe src="teste.html" width="800" frameBorder="no" height="310%" SCROLLING="no"></iframe> </td> </tr> </table> </body> </html> Prof. Jean Morais

49. Introdução à Linguagem HTML Prof. Jean Morais

50. Introdução à Linguagem HTML Formulários Vamos criar uma página de formulários.O título da página será: teste de formulários.O nome do arquivo será: meu_formulario.html. Crie um novo documento no Bloco de notas e digite: <html><head><title>teste de formulário</title></head><body><form>Digite o nome: <input type="text" size="10" name="nome" maxlength="10"> Prof. Jean Morais