A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

Jean Morais Fundamentos de Programação WEB.

Apresentações semelhantes


Apresentação em tema: "Jean Morais Fundamentos de Programação WEB."— Transcrição da apresentação:

1 Jean Morais Fundamentos de Programação WEB

2 Jean Morais -Analise de Sistemas (Graduação) -MBA Gestão Empreendedora de Negócios Fundamentos de Programação WEB 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 Ambiente Web Prof. Jean Morais 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. Fundamentos de Programação WEB 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:

4 Qual o objetivo da criação do site? Prof. Jean Morais Fundamentos de Programação WEB 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ê?

5 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. Prof. Jean Morais Usabilidade Estrutura do Design Layout e uso das Cores Hiperlink Fundamentos de Programação WEB

6 Usabilidade Prof. Jean Morais 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. Fundamentos de Programação WEB 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.

7 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). Prof. Jean Morais Fundamentos de Programação WEB 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.

8 Jean Morais Fundamentos de Programação WEB

9 Estrutura do Design Prof. Jean Morais 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. Fundamentos de Programação WEB * 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.

10 Prof. Jean Morais 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:

11 Prof. Jean Morais 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.

12 Prof. Jean Morais 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.

13 Prof. Jean Morais 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.

14 Prof. Jean Morais 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:

15 Prof. Jean Morais 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.

16 Prof. Jean Morais 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.

17 Prof. Jean Morais Introdução à Linguagem HTML HTML (HyperText Markup Language - Linguagem de Formatação de Hipertexto). Todo documento HTML apresenta elementos entre parênteses angulares ( ); 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:... 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.

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

19 Prof. Jean Morais Introdução à Linguagem HTML A seção contém informações sobre o documento. O elemento, por exemplo, define um título, que é mostrado no alto da janela do browser. Nesta página, por exemplo, está definido assim: Tutorial HTML da AES 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".

20 Prof. Jean Morais 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.

21 Prof. Jean Morais Introdução à Linguagem HTML A seção Tudo que estiver contido em será mostrado na janela principal do browser, sendo apresentado ao leitor. 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, podemos definir cores para os textos, links e para o fundo das páginas, bem como uma imagem de fundo (marca dágua):

22 Prof. Jean Morais 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)

23 Prof. Jean Morais 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.

24 Prof. Jean Morais Introdução à Linguagem HTML Cabeçalhos Há seis níveis de cabeçalhos em HTML, de a : 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

25 Prof. Jean Morais 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

26 Prof. Jean Morais Introdução à Linguagem HTML Quebra de linha Quando queremos mudar de linha, usamos o elemento. 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, podemos inserir diversas linhas em branco nos documentos. Parágrafos Para separar blocos de texto, usamos o elemento : Parágrafo 1; Parágrafo 2. que produz: Parágrafo1; Parágrafo2.

27 Prof. Jean Morais Introdução à Linguagem HTML Combinando parágrafos e quebras de linha, temos: 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. 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.

28 Prof. Jean Morais 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.

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

30 Prof. Jean Morais 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. 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.

31 Prof. Jean Morais 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

32 Prof. Jean Morais 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:

33 Prof. Jean Morais Introdução à Linguagem HTML Carro Modelo Preço Celta Life R$ Gol City R$

34 Prof. Jean Morais Introdução à Linguagem HTML Tabela de preços de carros Carro Modelo Preço Celta Life R$ Gol City R$

35 Prof. Jean Morais Introdução à Linguagem HTML Tabela de preços de carros Celta Life R$ Super R$

36 Prof. Jean Morais Introdução à Linguagem HTML Tabela de cor vermelha de fundo O atributo bgcolor da tabela está em vermelho. Célula normal Esta célula está em verde. Tem o atributo bgcolor na cor verde

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

38 Prof. Jean Morais Introdução à Linguagem HTML Animais em perigo de extinção Nome Cabeças Previsão 2010 Previsão 2020 Baleia

39 Prof. Jean Morais Introdução à Linguagem HTML Urso Pardo 50 0 Lince 10 Tigre

40 Jean Morais Fundamentos de Programação WEB

41 Prof. Jean Morais 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, que colocam números na frente dos itens da lista, e listas não ordenadas, criadas com, que colocam marcadores. Independente do tipo de lista usado, cada item deve ser precedido pelo comando. Veja exemplo de construção dos dois tipos de lista.

42 Prof. Jean Morais Introdução à Linguagem HTML Lista não ordenada Primeiro item da lista Segundo item da lista Terceiro item da lista Quarto item da lista Lista ordenada Primeiro item da lista Segundo item da lista Terceiro item da lista Quarto item da lista

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

44 Prof. Jean Morais 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, onde square coloca um quadrado, circle, um círculo e disc, uma bolinha como marcador. Exemplo de marcadores alternativos Primeiro item da lista Segundo item da lista Terceiro item da lista Primeiro item da lista Segundo item da lista Terceiro item da lista Primeiro item da lista Segundo item da lista Terceiro item da lista

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

46 Prof. Jean Morais Introdução à Linguagem HTML Para inserir som em uma página Web: Inserir video e uma página Web:

47 Prof. Jean Morais Introdução à Linguagem HTML 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.

48 Prof. Jean Morais Introdução à Linguagem HTML Barão Vermelho Barão Vermelho Contato

';
Anúncios Google