Please enable JavaScript.
Coggle requires JavaScript to display documents.
Aula 1 - Introdução ao web design - Coggle Diagram
Aula 1 - Introdução ao web design
Tema 1 - Começos da web e do web design
Cronologia
1969: Arpanet (Advanced Research Projects Agency)
1989: Web, de autoria de Tim Berners-Lee, do CERN
Já tinha HTML, servidores e URLs
1993: Mosaic, o primeiro navegador
Depois virou Netscape Navigator, Mozilla e Firefox
1994: W3C: World Wide Web Consortium
1994: primeiros banners publicitários, na Hotwired
1995: AltaVista, o primeiro buscador
1995: JavaScript e PHP
1995: RealPlayer
1996: CSS
1996: Flash
Anos 2000: Web 2.0, Ajax
2007: iPhone
Mudanças no web design
Web design
Geocities, Microsoft FrontPage
Macromedia Dreamweaver e Fireworks
Layouts em tabelas
Layout em Photoshop
Mudanças nos dispositivos
Resoluções de tela com pouca variação
Limitações na escolha de fontes
WAP
Web 2.0 e Ajax
Melhorias no acesso móvel
Tema 2 - Funcionamento da web: clientes e servidores
As partes de uma URL
www.site.com/home.html
Protocolo de comunicação: http ou https
Nome do site e tipo de domínio: site.com
Nome da página: home.html
Cliente e servidor, passo a passo
A URL é buscada em um servidor DNS (Domain Name System)
Liga o nome ao IP (Internet Protocol)
Estabelece uma conexão TCP (Transmission Control Protocol)
Pede o arquivo
Envia os pacotes de dados
Sites estáticos e dinâmicos
Estático
Não passa por modificações (fáceis, ao
menos)
Dinâmico
Admite modificações no conteúdo, seja do lado do cliente ou do lado do servidor
Tema 3 - Trabalhando com web design
Mudanças no trabalho
Antigamente
Mais ligado ao design gráfico
Layouts usando tabelas, Photoshop, Fireworks, Dreamweaver, Flash
Funções
Arquiteta(o) da informação
UX/UI designer
Desenvolvedor(a) front-end
Desenvolvedor(a) back-end
Desenvolvedor(a) fullstack
Habilidades
Design: uso de tipografia, cores, layout, grids
Experiência de usuário e usabilidade
Linguagens de estruturação e marcação (HTML, XML, CSS)
Noções de programação (JavaScript, React, PHP, Python, Django, Angular JS etc.)
Conhecimentos de sistemas de informação e de serviços on-line
Ferramentas
De desenho (Sketch, Illustrator, Photoshop)
De prototipagem (Figma, Adobe XD)
De código (editores de texto)
De versionamento (git)
Tema 4 - Padrões e HTML
Padrões
W3C
Arquivos de texto "crus"
HTML: linguagem de marcação
Diz o que cada elemento “é” (semântica)
Tema 5 - Web semântica, estilos CSS e
acessibilidade
Onde vai o CSS?
Inline
No HTML
Em um arquivo separado
Acessibillidade
Separação de estilos
Use as tags semanticamente
Faça com que o site seja compreensível mesmo sem os estilos