Agenda - Dia #1

• Origem, Contexto e Evolução
• Masterclass HTML

HTML/CSS

Objectivos

Motivação

Qual a origem do HTML?

Se uma experiência no CERN fosse um acontecimento único..

Untitled Slide

Problema

• Informação organizada
• Informação actualizada
• Não baseado em "palavras-chave"
• Estrutura dinâmica
• Estrutura autonóma

Tim Berners-Lee propõe uma solução..

A solução: Hypertext

• Permite "linkar" documentos
• Navegação à medida
• Criação de uma rede de informação
• Estrutura em constante mutação
• Mais tarde poderia suportar gráficos, voz e vídeo

Browser

"Folhas de estilo" para HTML

Cascading Style Sheets

• Associar HTML a "sugestões" de apresentação
• Permite adaptar a apresentação
• Suporta elementos visuais e não visuais (e.g. div's)
• Não se impõe ao utilizador / browser
• Tem evoluído também ao longo do tempo

Fast-forward para os dias de hoje..

Vários Browsers

• Cores podem aparecer diferentes
• Fontes podem aparecer diferentes
• Render de elementos HTML
• Velocidade de navegação
• Velocidade de carregamento

Excesso de informação sobre desenvolver para a Web

Exercício

• Browser mais usado
• Tráfego mobile em Portugal
• Resolução de ecrã
• Motores de busca
• Sistema operativo

Vários Browsers 2008

Vários Browsers 2014

Tráfego mobile a crescer

24% mobile em Portugal

Resolução de ecrã a crescer

Motores de Pesquisa

Sistema Operativo

Ferramentas "Brutais"

codepen.io

JSFiddle.net

Github / Bitbucket

Chrome DevTools

Chrome DevTools

• Analisar a estrutura HTML
• Aplicar/remover estilos
• Melhorar a performance
• Analisar JavaScript
• Imagens Quebradas, etc

Chrome DevTools Demo

Front-end Frameworks

Pros

• Consistência entre projectos
• Desenvolvimento rápido
• Facilidade em começar
• Menos decisões para tomar
• Testado para vários browsers

Cons

• Preso ao look
• Bloat
• Classes pouco representativas
• Código externo
• Necessita ser actualizado

A Fragmentação da Web

Web

• 682k dispositivos diferentes
• dezenas de tamanhos de ecrã
• velocidades de acesso diferentes
• dezenas de línguas

Internet no Mundo

JavaScript

The Internet is a cobweb of different technologies cobbled together with duct tape, string and chewing gum. It's not elegantly designed in any way, because it's more of a growing organism than it is a machine constructed with intent.



-- Mattias Petter Johansson, Developer at Spotify

"Hating JavaScript is like hating the Internet."
-- Mattias Petter

Recapitulando

• Tecnologias da Web: HTML/CSS/JS
• A origem do HTML: informação organizada
• A origem do CSS: apresentação dinâmica
• A evolução da Web é orgânica
• HTML, CSS e só depois JavaScript

Referências

• A history of HTML - http://bit.ly/1p8MGU8
• Information Management: A Proposal - http://bit.ly/1wDtSRQ
• Cascading HTML style sheets http://bit.ly/1wWUP60
• The pros & cons of using a front-end framework, http://bit.ly/1reZtsx

Primeiros Passos no HTML