JavascriptHTML5 . CSS3

Apresentação

Origem da Web

•Hipertexto

•Do Enquire à Web

•W3C

HipertextoTheodor 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íficos de forma simples.

• trabalho colaborativo + partilha dos documentos em rede.

Do Enquire à Web• Tim Berners-Lee && Robert Cailliau - final 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/configurar 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, especificações, ferramentas e software.

W3C

• MIT - Laboratório de Ciências da Computação e de Inteligência Artificial (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 certificaçõ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 flexí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íficos)

• HTML5

• Renderização de gráficos

• 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 especificaçã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

• é influenciado 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.

• Simplificação com novas propriedades inseridas.

• Novas características mais flexí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/10Departamento de Comunicação e ArteMestrado em Comunicação e MultimédiaMultimédia InteractivoTecnologias Dinâmicas para a Internet

Orientadores

Benjamin JúniorTelmo Silva

Autores

Alexandre das Neves (34343)Carla Vanessa Ferreira Alves Leite (39925)Celso Farias Duarte Lopes (48454)Joana Pimparel Mineiro (49221)Tim Theodor Koch-Grünberg (35922)