Javascript, HTML5 e CSS3

Javascript
HTML5 . CSS3
Apresentação

Origem da Web
•Hipertexto
•Do Enquire à Web
•W3C

Hipertexto
Theodor H. Nelson - 1965
Forma não linear de apresentar texto em formato digital.
Contem ligações feitas através de marcas de hipertextualidade:
• Nó é uma unidade de conteúdo do documento (uma página, um parágrafo, etc).
• Elo é uma ligação entre dois nós, que pode ser uni ou bidireccional.
• Âncora é o ponto do documento onde inicia-se ou termina um elo, âncora de
origem ou de destino.

Hipertexto
Para que serve?
• esclarecer conceitos com ligações externas.
• viajar dentro do documento.
• encaminhar para documentos que complementam o texto.
• conjugar com vídeos, imagens e animações - hipermédia.

Hipertexto
Theodor Nelson - projecto Xanadu - 1967
• Primeira tentativa não implementada.
• Sistema que possuía as características conceptuais do hipertexto.
• E ainda capaz de processar versões múltiplas de um texto, e mostrar as diferenças
entre elas.

Hipertexto
• Douglas Engelbart e Augmentation Research Center (SRI) - 60's
• NLS (oN-Line System)
• Primeiro sistema que conseguiu pôr em prática:
• hipertexto + inovações tecnológicas + inovações conceptuais
• No hipertexto os limites dependem:
• criatividade literária + competência tecnológica do leitor

Do Enquire à Web
• Tim Berners-Lee - 80's
• Consultor de Engenharia de Software no CERN (European Council for Nuclear
Research) - maior centro de estudos sobre física de partículas do mundo.
• Desenvolveu o primeiro programa de armazenamento de informação baseado no
conceito de hipertexto - Enquire

Do Enquire à Web
• Tim Berners-Lee - 80's
• Consultor de Engenharia de Software no CERN (European Council for Nuclear
Research) - maior centro de estudos sobre física de partículas do mundo.
• Desenvolveu o primeiro programa de armazenamento de informação baseado no
conceito de hipertexto - Enquire.
• ENQUIRE
• Objectivo: interligar os computadores do laboratório a outras instituições de
pesquisa, e exibir documentos cientíﬁcos de forma simples.
• trabalho colaborativo + partilha dos documentos em rede.

Do Enquire à Web
• Tim Berners-Lee && Robert Cailliau - ﬁnal 90's
• publicaram uma proposta para a World Wide Web
• Tim Berners-Lee construiu
• o primeiro Web Browser WorldWideWeb + o primeiro servidor Web NeXT
Computer
• Disseminação da Web
• 1º Web apenas no CERN
• 2º Web no mundo

Do Enquire à Web
• Primeira página Web publicada @ 6 Agosto de 1991
• página de texto com explicações sobre:
• conceito de World Wide Web
• como criar um Browser
• como instalar/conﬁgurar um servidor Web
• O conceito de Web foi sendo alargado:
• sistema de partilha de informação comunidade

W3C
• W3C - Tim Berners-Lee - 1994
• World Wide Web Consortium
• Consórcio de empresas de tecnologia que promove a evolução, estandardização e a
interoperabilidade das tecnologias emergentes - directivas, especiﬁcações,
ferramentas e software.

W3C
• MIT - Laboratório de Ciências da Computação e de Inteligência Artiﬁcial (CSAIL) -
EUA
• Consórcio Europeu de Investigação em Informática e Matemática (ERCIM) - França
• Universidade de Keio - Japão
• Escritórios espalhados por todo o mundo +/- 16 regiões
• Parcerias com as comunidades Web de cada região, de modo a promover as
recomendações e certiﬁcações do W3C nos idiomas locais
• Encorajam a participação internacional nas actividades desenvolvidas pelo W3C.

W3C
• Objectivo inicial: obter o acordo de todos os developers sobre um conjunto de
princípios fundamentais, de modo a evitar problemas de compatibilidade e
interpretação.
• Actualmente: integra vários comités que estudam as tecnologias existentes para a
apresentação de conteúdo na Internet e criam padrões de recomendação para utilizar
essas tecnologias.
• Os padrões de acessibilidade criados pelo W3C ganharam bastante importância no
desenvolvimento de páginas Web, pois a intenção de derrubar as barreiras
tecnológicas tem sido crescente.

HTML5
• HTML e XHTML
• HTML4 vs. HTML5
• Porquê HTML5 e não XHTML2?
• Criar estrutura / marcação adequada às novas necessidades
• Novas funcionalidades

HTML e XHTML
• 1991
• HyperText Markup Language é uma linguagem de marcação
• Inventada por Tim Berners-Lee
• 1993
• Primeira publicação
• 1995
• HTML 2.0
• Linguagem demasiado ﬂexível
• 1999
• Com a ajuda da W3C surge a HTML 4.01
• 2000
• Surge o XHTML (eXtensible HyperText Markup Language)

HTML4 vs. HTML5
• HTML4
• Continua orientado a documentação textual (artigos cientíﬁcos)
• HTML5
• Renderização de gráﬁcos
• Controle embutido de conteúdos audio e vídeo
• Armazenamento de dados por parte do cliente
• Maior interactividade
• Não necessita de tecnologias proprietárias como Flash, Silverlight e JavaFX
• Estrutura do HTML5 vs. HTML4

Porquê HTML5 e não XHTML2?
• XHTML2
• não é uma reformulação mas sim uma nova especiﬁcação
• inteiramente baseado em XML e Markups
• a W3C anunciou a descontinuidade do XTHML 2.0
• apresentava sérios problemas ao nível da retro-compatibilidade e implementação.
• HTML5
• é uma evolução/extensão do HTML 4 e do XHTML1
• é inﬂuenciado pelo "state of the art" e pela utilização corrente dos Markups
• Misunderstanding Markup: XHTML 2/HTML 5 Comic Strip

Novas funcionalidades
• A parte interessante!
• app cache e database
• geolocation
• web workers
• canvas
• SVG
• Exemplos #1
• Exemplos #2
• Exemplo de SVG (electionAtlasGermany)

CSS
• Porquê a criação de CSS
• Vantagens do CSS3 face a versões anteriores
• CSS3 e HTML5
• Exemplos

Porquê a criação de CSS
• Linguagem de estilização e formatação - Sistema flexível para especificar a formatação
de elementos html.
• Define fontes, tamanhos, cores, imagens, margens, etc.
• Funciona em conjunto com a linguagem html.
• Separa conteúdo de layout e estilo de uma forma organizada.
• Permite partilhar várias folhas de estilos em múltiplos documentos ou num site
inteiro.
• Ajuda a melhorar a acessibilidade e manutenção

Vantagens do CSS3 face a versões
anteriores
• As versões mais antigas eram demasiado longas e complexas para serem actualizadas
de uma só vez.
• O CSS3 está a ser separado em módulos.
• Simpliﬁcação com novas propriedades inseridas.
• Novas características mais ﬂexíveis ao nível de desenho do interface e de
acessibilidades.
• Ainda não é possível dizer quantos browsers iram adoptar as novas funcionalidades do
CSS3, estas novas funcionalidades estão a ser implementadas gradualmente (um a dois
anos para ser amplamente adoptada).

Vantagens do CSS3 face a versões
anteriores

CSS3 e HTML5
.lista:before{
content:":: ";;}
.lista:after{
content:" ...";;}
.redimensionar {
width: 100px;;
height:100px;;
border: 1px solid;;
resize: both;;
overflow: auto;;}
button{
position:absolute;;}
button#b1 {
top:5%;;
nav-index:1;;
nav-up:#b2;; }
button#b2 {
top:10%;;
nav-index:2;;
nav-down:#b1;; nav-up:#b3;; }
button#b3 {
top:15%;;
nav-index:3;;
nav-down:#b2;; nav-up:#b4;;}
button#b4 {
top:20%;;
nav-index:4;;
nav-down:#b3;;}
.border_redonda{
background-color: #EFEFEF;;
-moz-border-radius: 5px;;
-webkit-border-radius: 5px;;
border: 2px solid #CCCCCC;;
padding: 20px;;
width: 450px;;
height: 50px;; }
.texto_com_sombra{
text-shadow: 2px 2px 2px #58595b;; }
.fundo_imagem{
background: url(images_background.png);;
border:1px solid black;;
width: 450px;;
height: 20px;; }
Nome do Site
.font-face {
font-family: "barmeno";;
src: url(font » bauhaus.ttf) format("truetype");; }
.h1 { font-family: "bauhaus", sans-serif;; }
.columns {
-moz-column-gap:1px;;
-moz-column-rule:medium solid;;
-moz-column-width:80px;;
-moz-column-gap:50px;; }
text-shadow
background-clip
border-radius
resize
nav
generated Content
multiple Column
border-radius

Exemplos
• Multiple Columns
• http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html
• Web Fonts (@font-face)
• http://www.alistapart.com/d/cssatten/nels.html
• http://www.alistapart.com/d/cssatten/poen.html
• http://www.alistapart.com/d/cssatten/heid.html
• Text Shadow
• http://westciv.com/tools/shadows/index.html
• Box Shadow
• http://westciv.com/tools/boxshadows/index.html
• Round-Corners
• http://www.bestinclass.com/blog/samples/css3-rounded-corners-ie/example.html

Javascript
• má fama: uso obstrutivo
• Javascript moderno:
• não obstrutivo
• gestão de eventos
• DOM scripting / DHTML
• Ajax
• bibliotecas

Exemplos
• Bad javascript
• Good Javascript

FIM!
Universidade de Aveiro
Ano lectivo 2009/10
Departamento de Comunicação e Arte
Mestrado em Comunicação e Multimédia
Multimédia Interactivo
Tecnologias Dinâmicas para a Internet
Orientadores
Benjamin Júnior
Telmo Silva
Autores
Alexandre das Neves
(34343)
CarlaVanessa Ferreira
Alves Leite (39925)
Celso Farias Duarte
Lopes (48454)
Joana Pimparel Mineiro
(49221)
Tim Theodor Koch-
Grünberg (35922)

Javascript, HTML5 e CSS3

Recomendados

Mais conteúdo relacionado

Mais procurados (20)

Destaque (20)

Semelhante a Javascript, HTML5 e CSS3 (20)

Último (20)

Javascript, HTML5 e CSS3