• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Javascript, HTML5 e CSS3

on

  • 2,658 views

Trabalho de grupo no âmbito da cadeira Tecnologias Dinâmicas para a Internet pela Universidade de Aveiro.

Trabalho de grupo no âmbito da cadeira Tecnologias Dinâmicas para a Internet pela Universidade de Aveiro.

Statistics

Views

Total Views
2,658
Views on SlideShare
2,650
Embed Views
8

Actions

Likes
0
Downloads
41
Comments
0

1 Embed 8

http://www.slideshare.net 8

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Javascript, HTML5 e CSS3 Javascript, HTML5 e CSS3 Presentation Transcript

    • 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í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 border-­radius   .font-­face  {     font-­family:  "barmeno";;   text-­shadow     src:  url(font  »  bauhaus.ttf)  format("truetype");;  } .texto_com_sombra{     text-­shadow:  2px  2px  2px  #58595b;;  }  .h1  {  font-­family:  "bauhaus",  sans-­serif;;  } border-­radius   .border_redonda{ Nome  do  Site   background-­color:  #EFEFEF;;   -­moz-­border-­radius:  5px;;   -­webkit-­border-­radius:  5px;;   border:  2px  solid  #CCCCCC;;   padding:  20px;;  nav     width:  450px;; button{   height:  50px;;  }   position:absolute;;} button#b1  {   top:5%;;    generated  Content     nav-­index:1;; .lista:before{   nav-­up:#b2;;  }   content:"::  ";;} button#b2  { .lista:after{   top:10%;;     content:"  ...";;}   nav-­index:2;;   nav-­down:#b1;;  nav-­up:#b3;;  } button#b3  {   top:15%;; resize     nav-­index:3;; .redimensionar  {       nav-­down:#b2;;  nav-­up:#b4;;}   width:  100px;;       height:100px;;     button#b4  {   border:  1px  solid;;       top:20%;;   resize:  both;;       nav-­index:4;;   overflow:  auto;;}   nav-­down:#b3;;} background-­clip   .fundo_imagem{       background:  url(images_background.png);;    multiple  Column     border:1px  solid  black;;     .columns  {   width:  450px;;   -­moz-­column-­gap:1px;;   height:  20px;;  }   -­moz-­column-­rule:medium  solid;;   -­moz-­column-­width:80px;;   -­moz-­column-­gap:50px;;  }
    • 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 Orientadores Autores Ano lectivo 2009/10 Benjamin Júnior Alexandre das Neves Departamento de Comunicação e Arte Telmo Silva (34343) Mestrado em Comunicação e Multimédia Carla Vanessa Ferreira Multimédia Interactivo Alves Leite (39925) Tecnologias Dinâmicas para a Internet Celso Farias Duarte Lopes (48454) Joana Pimparel Mineiro (49221) Tim Theodor Koch- Grünberg (35922)