Slide aula 1

Pronatec IFMG – Técnico em Informática
Fundamentos do Desenvolvimento WEB
Carga Horária: 30 horas
Aulas: 10 aulas de 3 horas
Site da disciplina
http://ouropreto.ifmg.edu.br/dw/
O que faz o Web Designer?
Design do site
Implementação do design
(Desenvolvedor front end)
Quanto ganha um Web Designer?
http://www.catho.com.br/vagas/?q=Web+Designer&pais_id=31&faixa_sal_id=4&f
aixa_sal_id_combinar=0&perfil_id=1&order=score&where_search=1&how_search=
2
Projeto final da disciplina
Front end de um site de comércio
eletrônico.
O que aprenderemos
Conceitos básicos
Html 5
CSS 3
JavaScript
Design responsivo
Bootstrap
Jquery
Integrações com Facebook, Twitter
Otimizações, LESS
CMS – Sistemas de gerenciamento de conteúdo
Hospedagem do site
O que é Web
Antes de falarmos sobre web ou sobre
desenvolvimento para web, precisamos falar de
internet.
Embora muitos utilizem os dois termos (web e internet)
de forma indiscriminada, eles não são sinônimos.
Quando falamos de internet, estamos nos referindo a
uma grande rede de dispositivos computadorizados de
alcance mundial, podemos entendê-la como uma
grande infraestrutura em rede.
O que se pode fazer com a internet?
●
Corrêio Eletrônico
●
Transferência de arquivo
●
Conversa em termpo real
●
Acesso remoto
●
Navegação por hipertexto
O que é Web
A web (uma derivação abreviada para a expressão World
Wide Web) é apenas uma das funcionalidades da internet
– no caso específico, navegar através do hipertexto.
O termo hipertexto (hipertext) foi criado por Theodore
Nelson, na década de 60, para denominar a forma de
escrita/leitura não linear.
Pode ser entendido como uma espécie de texto onde
alguns trechos se intercalam com referências a outros
textos.
O que é Web
O princípio de navegação pelo hipertexto foi pensado, inicialmente, por Tim
Berners-Lee, um britânico que, em meados dos anos 90, trabalhava no núcleo
de computação do CERN (Organização Europeia de Pesquisa Nuclear).
Tim Berners-Lee buscava uma forma de organizar, eletronicamente, os textos e
as pesquisas dos cientistas do CERN (e também de outras partes do mundo) de
forma que os documentos produzidos pudessem ser interligados e
compartilhados.
Ele desenvolveu um software próprio e um protocolo para recuperar
hipertextos que foi denominado de HTTP (Hypertext Transfer Protocol).
O formato do texto criado para ser transportadopelo protocolo foi chamado de
HTML (Hypertext Markup Language) e consiste de uma linguagem de
marcação pela qual é possível, por meio de comandos (tags), incluir ligações
entre textos – inclusive entre materiais publicados em diferentes locais.
O que é Web
Além disso era necessário um software que, utilizando-se do
protocolo desenvolvido, conseguisse obter os documentos
escritos em HTML, interpretá-los e exibi-los.
Por meio deste software, esperava-se que o usuário
“navegasse” pelo hipertexto, ou seja, ao encontrar no texto
uma ligação com outro material, com
um simples clique, o usuário seria direcionado para uma nova
página/conteúdo.
Diante de tal necessidade, ele criou um protótipo daquele que
viria a ser um dos softwares mais indispensáveis para quem
deseja utilizar a internet: o navegador (ou browser).
Como funciona a Web
A navegação pelo hipertexto obedece aos princípios da arquitetura
cliente-servidor.
Um documento HTML, ao qual podemos chamar de página, está
hospedado em um servidor web (web server) que, nesse caso,
desempenha o papel de aplicação servidora.
Um servidor web recebe requisições de documentos por meio de URLs e
as entrega por meio do protocolo HTTP.
Pelo lado cliente, temos o navegador ou browser cuja função principal é
submeter uma requisição no formato de uma URL e, após receber o
resultado, na forma de um documento HTML, interpretá-lo e apresentálo ao utilizador.
Como funciona a Web
Site e Páginas Web, URL
URL: Uniform Resource Locator ou localizador-padrão de recursos. A
partir de uma URL, temos todas as informações necessárias para
encontrar e para acessar uma informação na internet (protocolo
utilizado, endereço do dispositivo, caminho para o recurso e o
recurso propriamente dito).
Ex.: www.ouropreto.ifmg.edu.br/dw/slide1.pdf
Site: Um site ou website é um conjunto formado por uma ou mais
páginas web vinculadas.
Páginas web: Uma página web se constitui num documento,
codificado, através de uma linguagem de marcação que, em
conjunto com outros elementos (figuras ou vídeos por exemplo),
pode ser acessado através da internet por meio de uma URL.
O que é Web Design
O design é uma area multidisciplinar e trata de escolher a melhor forma de apresentar uma
ideia.
Dependendo da mídia ou do alvo em que se deseja trabalhar, certas técnicas de design serão
mais apropriadas do que outras.
A diagramação de um cartaz convidando a população para uma festa, certamente, será
diferente de uma chamada na televisão ou mesmo de um site de divulgação.
As mídias oferecem possibilidades diferentes que o profissional deve estar apto para explorar.
A Web abriu espaço para uma nova forma de planejamento de transmissão de ideias/objetivos
em materiais publicados em ambientes on-line: web design.
Tais técnicas consistem da estruturação adequada de informações, utilizando recursos
apropriados para veiculação em páginas web, de maneira que o usuário possa alcançar seu
objetivo de forma direta e agradável.
Design Layout e aparência
Layout (ou leiaute) é a forma pela qual os itens
estão dispostos/diagramados, em outras
palavras, refere-se ao design gráfico e a
aparência visual.
Durante o desenvolvimento de páginas para
internet o projeto de layout é uma atividade
crítica e é importante que esteja definido de
forma consistente e prioritária, pois a partir dele
o restante do trabalho será colocado em prática.
Design Layout e aparência
Em geral, a definição de um layout segue alguns
princípios básicos: hierarquia das informações,
foco/ênfase, equilíbrio, relacionamento dos elementos.
A hierarquia das informações determina qual a disposição
da informação, baseando-se em sua importância em
relação aos demais elementos visuais.
De acordo com esse princípio, precisamos definir a
informação mais importante para posicioná-la em um
lugar estratégico, porque o usuário interage de imediato
com aquilo que ele vê primeiro.
Design Layout e aparência
Estudiosos da área de web design têm experimentado
diferentes formas de organização de layouts.
Diferenças entre os usuários
Avanço tecnológico leva ao barateamento da
tecnologia e a internet não é mais exclusividade de
especialistas ou empresas.
Passa a fazer parte também do dia a dia das mais
variadas pessoas.
Além da diversidade de pessoas com acesso ao
computador, houve também uma grande variedade de
formas de acessar a rede: em casa, LAN house,
trabalho, dispositivo móvel, notebooks, entre outros.
Diferenças entre os usuários
Devido à diferença de usuários e de formas de acesso, é
necessário e importante que os recursos tecnológicos
empregados e os layouts de páginas sejam adaptados a
essas variações.
Algumas configurações podem afetar a visualização e o
uso de interfaces web.
Não é necessário que as configurações sejam decoradas,
porém é importante que tenhamos conhecimento delas
para saber aplicá-las quando necessário.
Configurações que afetam o uso de
interfaces web
Tamanho da página e resolução: quantidade de pixels
que compõem a imagem vista na tela. A qualidade dessa
imagem vai depender da relação do número de pontos por
polegada quadrada, com a configuração da tela, o
tamanho do monitor e sua resolução.
Exemplo de resolução: 1280 x 800 pixels (largura x altura)
Proporção: 16:9 (wide screen 1280 x 720)
Espaço do browser na página: o espaço ocupado pelo
browser na página do dispositivo utilizado, seja dispositivo
móvel, sejam notebooks, seja TV, sejam outros, variam de
acordo com a resolução da tela do dispositivo utilizado.
Configurações que afetam o uso de
interfaces web
Navegadores (browsers): existe uma variedade de navegadores
disponíveis para os usuários web; por isso é importante sabermos
que o mesmo conteúdo pode aparecer de maneira diferente em
cada um dos navegadores. Isso ocorre porque há uma
inconsistência entre os programas, na forma como interpretam os
estilos CSS.
Sistema operacional: o mesmo navegador pode apresentar
comportamentos diferentes em sistemas operacionais diferentes.
Velocidade de conexão e tamanho do arquivo da página em
Kb: a velocidade de conexão dos usuários varia muito, usuários não
estão dispostos a esperar. Além disso em dispositivos móveis existe
o consumo do plano de dados.
Configurações que afetam o uso de
interfaces web
Entenda como seu site é visitado:
https://analytics.google.com/
O espaço da página
O espaço da página é definido como a forma e
como os olhos do usuário a percorrem.
Estudos descrevem que a maior parte dos usuários
vê a página no sentindo diagonal, a partir do alto à
esquerda, em direção à parte inferior direita, e
depois retorna ao alto.
O espaço da página
Outros estudos mostram forma de leitura com
pequenas diferenças, porém todos concordam que
as informações mais importantes devem ser
localizadas sem que o usuário precise utilizar a
barra de rolagem.
Navegação
Segundo o Dicionário Aurélio, navegação é o ato ou efeito de
percorrer um hipertexto, determinando a sequência em que os
diversos documentos são consultados, ou percorrer páginas web,
indo de um link a outro.
A navegação pode se tornar difícil, sendo necessário dar aos
usuários suporte que vá além dos simples hyperlinks “vá para”.
As interfaces precisam responder aos usuários três perguntas
fundamentais da navegação: Onde estou? / Onde estive? / Onde
posso ir?
Ex.: www.ouropreto.ifmg.edu.br
Características da página principal
●
Identificar claramente a localização do usuário e
atividade/conteúdo mais importante do site e o que ele pode
oferecer.
●
Oferecer suporte aos usuários para encontrar o que procuram.
●
Estar permanentemente atualizada.
●
Ter mais área para navegação do que para conteúdo (portais de
notícias são exemplos de excessões).
●
Informar os assuntos de maneira concisa e direta.
●
Ser dividida em diferentes seções.
●
Ter uma seção ou menu com links para as áreas mais acessadas
pelos usuários
Características da página principal
●
Identificar claramente a localização do usuário e
atividade/conteúdo mais importante do site e o que ele pode
oferecer.
●
Oferecer suporte aos usuários para encontrar o que procuram.
●
Estar permanentemente atualizada.
●
Ter mais área para navegação do que para conteúdo (portais de
notícias são exemplos de excessões).
●
Informar os assuntos de maneira concisa e direta.
●
Ser dividida em diferentes seções.
●
Ter uma seção ou menu com links para as áreas mais acessadas
pelos usuários
Características das páginas internas
Hoje é cada vez maior o número de usuários que buscam
ir direto às páginas internas, sem necessariamente ter que
passar pela página principal.
O usuário gasta 80% a mais de tempo nessas páginas do
que na página principal.
Por isso, é importante sabermos as características que
podem contribuir para que elas o prendam por mais
tempo
Características das páginas internas
●
Apresentar em destaque o nome da página principal.
●
Mostrar, em local bem visível, a marca da empresa ou organização.
●
●
●
●
●
●
Manter o mesmo estilo das outras páginas, pelo menos das páginas da
mesma camada.
Manter o foco em aspectos mais específicos do que na página principal.
Prover o sentido de localização do usuário em relação ao resto do site e à
página principal.
Manter as informações estruturais de navegação (ferramenta de busca,
data de atualização, links relacionados, mapa do site)
Se o conteúdo for muito extenso, dividir o assunto em um resumo geral
numa página e detalhar o assunto em outra.
Prover mais informações sobre o assunto da página.
Páginas de apoio
●
Página de abertura.
●
Mapa do site.
●
Entre em contato ou “Fale conosco”.
●
Política de privacidade.
●
Perguntas frequentes.
●
Páginas de erro.
Usabilidade
Usabilidade é a capacidade de um produto ser usado por usuários
específicos para atingir objetivos específicos com eficácia,
eficiência e satisfação em um contexto específico de uso.
Esse termo é definido por diversos autores sob diferentes pontos
de vista, a ISO/IEC 9126-1991 definiu pela primeira vez o termo
usabilidade sobre qualidade de software, como:
“Um conjunto de atributos de software relacionado ao esforço
necessário para seu uso e para o julgamento individual de tal uso
por determinado conjunto de usuários.”
Usabilidade, conceitos importantes
Usuário: pessoa que interage com o produto.
Contexto de uso: – usuários, tarefas, equipamentos
(hardware, software e materiais), ambiente físico e social em
que o produto é usado.
Eficácia: precisão e totalidade com que os usuários atingem
objetivos específicos, acessando a informação correta ou
gerando os resultados esperados.
Eficiência: precisão e totalidade com que os usuários
atingem seus objetivos em relação à quantidade de recursos
gastos.
Satisfação: conforto e aceitabilidade do produto, medidos
por meio de métodos subjetivos e/ou objetivos.
Usabilidade, o que é preciso?
●
Qualidade do layout
●
Funcionalidade dos recursos interativos
●
Arquitetura da informação
●
Aderência às tecnologias e dispositivos digitais
●
●
●
●
Grau de familiaridade do usuário médio do site com o uso
da internet e suas ferramentas.
Uso de convenções já aceitas em grandes sites e portais.
Orientação visual dos percursos a seguir, dos caminhos
percorridos e pontos de chegada.
Sinalização do status de uma tarefa durante a sua
realização.
Usabilidade, o que é preciso?
●
Possibilidade de opção sobre a instalação de plug-ins e programas
no computador ou no browser do usuário para a visualização de
imagens e animações.
●
Inclusão de “links relacionados”.
●
Informação ao usuário de uma tarefa a realizar.
●
Oferta de suporte à navegação e ao uso, por meio de mensagens
claras e objetivas.
●
Inclusão de pequenos resumos próximos aos links.
●
Permissão de reversibilidade das ações.
●
●
Visibilidade informativa – a aparência de ícones, boxes, setas,
sinaliza seu uso.
Consistência do layout e das funcionalidades do programa
(padronização de telas, logotipos, cores, tipologias)
Acessibilidade
Acessibilidade na Web significa que qualquer
pessoa, utilizando qualquer tipo de tecnologia de
navegação - navegadores gráficos, textuais,
especiais para sistemas de computação móvel, etc.
- deve ser capaz de visitar e interagir com qualquer
site, compreendendo inteiramente as informações
nele apresentadas.
O acesso de pessoas com deficiência
O computador e a Internet representam um enorme passo para a inclusão
de pessoas com deficiência, promovendo autonomia e independência.
Mas como pessoas com deficiência utilizam o computador? As quatro
principais situações vivenciadas por usuários com deficiência são:
Acesso ao computador sem mouse: no caso de pessoas com
deficiência visual, dificuldade de controle dos movimentos, paralisia ou
amputação de um membro superior;
Acesso ao computador sem teclado: no caso de pessoas com
amputações, grandes limitações de movimentos ou falta de força nos
membros superiores;
Acesso ao computador sem monitor: no caso de pessoas com
cegueira;
Acesso ao computador sem áudio: no caso de pessoas com
deficiência auditiva.
Acessibilidade
Um projeto de web que desconsidere os princípios
de acessibilidade provavelmente exclui os usuários
que não possuem as tecnologias mais recentes.
É importante conhecermos algumas
recomendações importantes para a acessibilidade
dos projetos de web. Elas visam contribuir com as
ações e projetos desenvolvidos, com o intuito de
permitir a inclusão digital.
Recomendações para um projeto acessivel
Fornecer alternativas equivalentes ao conteúdo sonoro ou
visual.
Não recorrer apenas à cor.
Utilizar corretamente marcações e folhas de estilo.
Assegurar que as páginas dotadas de novas tecnologias sejam
transformadas harmoniosamente.
Projetar páginas considerando a independência de dispositivos.
Fornecer informações de contexto e orientações.
Fornecer mecanismos de navegação claros.
Assegurar a clareza e a simplicidade dos documentos, entre
outros.
O acesso de pessoas com deficiência
Modelo de Acessibilidade em Governo Eletrônico:
http://emag.governoeletronico.gov.br/
O avaliador de acessibilidade DaSilva é um site
nacional que testa, considerando num ranking de
prioridades, as condições para que um site seja
classificado como acessível. Pode-se fazer o
download da ferramenta ou usar a versão online em
http://www.dasilva.org.br/
Legibilidade
Segundo Marmion (2006) o campo de percepção
visual reduz-se à metade a uma distância de 2.5
graus do ponto de fixação do olho, quando fazemos
uma leitura.
Observe que, se o ponto de fixação fosse o número
0, eis o bloco de informação que nosso cérebro
conseguiria processar:
Legibilidade
A apresentação texto em colunas minimiza o
“escaneamento” horizontal e consequentemente
reduz o movimento dos olhos e a fadiga ocular.
Legibilidade
Segundo Jakob Nielsen (apud MARMION, 2006), 79% dos
usuários da web “escaneiam” texto. Apenas 21% leem palavra
por palavra.
Para incrementar a facilidade de leitura e tornar seu texto
“escaneável”, recomenda-se utilizar:
●
Tabelas.
●
Cabeçalhos.
●
Negrito.
●
Gráficos.
●
Marcadores (bullets).
Legibilidade
Suponhamos que devemos apresentar ao usuário uma receita, como a seguir:
Ingredientes para a massa: 6 ovos à temperatura ambiente, 7 colheres (sopa)
de açúcar, 6 colheres (sopa) de chocolate em pó, 1 xícara (chá) de farinha de
trigo, 1 colher (chá) de fermento em pó, açúcar para polvilhar. Ingredientes
para o recheio: 2 latas de leite condensado, 2 pacotes (100 g cada) de coco
ralado, 1 xícara (chá) de uva-passa. Modo de preparo da massa: Forre uma
assadeira no 3 com papel-alumínio ou papel-manteiga. Unte muito bem e
polvilhe com farinha. Reserve. Bata as claras em neve e reserve. Bata as
gemas com o açúcar até obter um creme claro e fofo. Adicione o chocolate,
a farinha e, por último, o fermento. Acrescente as claras em neve mexendo
delicadamente. Modo de preparo do recheio: Despeje o leite condensado
na fôrma preparada. Distribua por cima os demais ingredientes do recheio.
Cubra com a massa e leve ao forno médio (180oC), pré-aquecido, para assar
por cerca de 30 minutos. Desenforme ainda quente sobre um pano de prato
polvilhado com açúcar. Enrole imediatamente com o auxílio do pano de
prato. Polvilhe com açúcar, espere esfriar e leve à geladeira. Atenção: Tome
cuidado ao desenformar porque o leite condensado ainda está mole.
Legibilidade
Rocambole
Ingredientes para a massa
●
Modo de preparo da massa
●
●
●
6 ovos à temperatura ambiente
●
●
7 colheres (sopa) de açúcar
●
6 colheres (sopa) de chocolate em pó
●
1 xícara (chá) de farinha de trigo
●
1 colher (chá) de fermento em pó
2 latas de leite condensado
●
2 pacotes (100 g cada) de coco ralado
●
1 xícara (chá) de uva-passa
Adicione o chocolate, a farinha e, por último, o fermento.
Acrescente as claras em neve mexendo delicadamente.
Despeje o leite condensado na forma preparada.
●
Distribua por cima os demais ingredientes do recheio.
●
●
Bata as gemas com o açúcar até obter um creme claro e
fofo.
●
Açúcar para polvilhar
Ingredientes para o recheio
Bata as claras em neve e reserve.
Modo de preparo do recheio
●
●
Forre uma assadeira no 3 com papel-alumínio ou papelmanteiga. Unte muito bem e polvilhe com farinha e
reserve.
Cubra com a massa e leve ao forno médio (180oC), préaquecido, para assar por cerca de 30 minutos.
Desenforme ainda quente sobre um pano de prato
polvilhado com açúcar.
●
Enrole imediatamente com o auxílio do pano de prato.
●
Polvilhe com açúcar, espere esfriar e leve à geladeira.
Atenção
●
Tome cuidado ao desenformar porque o leite condensado
ainda está mole.
Fontes
A escolha da fonte a ser utilizada no projeto de um
site influencia diretamente o seu resultado final.
Existem basicamente dois tipos de fontes: as com
serifa e as sem serifa.
Fontes
Para que a fonte seja apresentada, ela deverá estar
instalada no computador do usuário.
Algumas fontes têm mais chances de estarem instaladas,
por serem mais comumente utilizadas.
Ao escolhê-las, defina uma ou mais fontes alternativas.
Evite misturar fontes serifadas e sem serifa no mesmo
texto.
Cores
RGB (Red = vermelho – Green = verde – Blue = azul): sistema utilizado
nos monitores de computador, televisões, espetáculos e data show. É
formado pelo processo aditivo, em que pigmentos e suas combinações
geram a cor branca. Cada uma dessas cores possui uma variação de 0 a
255, que geram mais ou menos 16 milhões de cores.
CMYK (Cyan = ciano – Magenta – Yellow = amarelo – Black = preto):
sistema utilizado para impressões. É gerado pela absorção de luz pelas
cores, processo denominado de subtrativos, em que a adição das três
principais cores gera a cor preta.
Escolha de cores
Escolha cores analogas para seu projeto:
Paleta de cores
https://color.adobe.com/pt/create/color-wheel/
https://www.shutterstock.com/labs/palette/
Plugin colorzila
http://www.colorzilla.com/chrome/
Desenvolvimento do design do projeto
Potoshop
Fireworks
Visio
Pencil http://pencil.evolus.vn/
Muitos outros
Ambientes de desenvolvimento
integrado (IDE)
Netbeans https://netbeans.org/downloads/
Eclipse https://eclipse.org/
Aptana http://www.aptana.com/
Muitos outros
Exercícios
A partir do conteúdo até aqui estudado, faça uma análise da interface dos sites:
www.vw.com.br
www.ford.com.br
www.honda.com.br
www.fiat.com.br
Pontos a serem analisados:
•
Tamanho de tela, resolução do monitor e adaptações.
•
Tempo de carregamento da página.
•
Layout das páginas.
•
Navegação.
•
Usabilidade.
•
Acessibilidade.
•
Legibilidade.