Javascript, HTML5 e CSS3

  • View
    121

  • Download
    5

Embed Size (px)

DESCRIPTION

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

Text of Javascript, HTML5 e CSS3

  • 1. Javascript HTML5 . CSS3Apresentao

2. Origem da Web Hipertexto Do Enquire Web W3C 3. Hipertexto Theodor H. Nelson - 1965Forma no linear de apresentar texto em formato digital.Contem ligaes feitas atravs de marcas de hipertextualidade: N uma unidade de contedo do documento (uma pgina, um pargrafo, etc). Elo uma ligao entre dois ns, que pode ser uni ou bidireccional. ncora o ponto do documento onde inicia-se ou termina um elo, ncora deorigem ou de destino. 4. Hipertexto Para que serve? esclarecer conceitos com ligaes externas. viajar dentro do documento. encaminhar para documentos que complementam o texto. conjugar com vdeos, imagens e animaes - hipermdia. 5. HipertextoTheodor Nelson - projecto Xanadu - 1967 Primeira tentativa no implementada. Sistema que possua as caractersticas conceptuais do hipertexto. E ainda capaz de processar verses mltiplas de um texto, e mostrar as diferenasentre elas. 6. Hipertexto Douglas Engelbart e Augmentation Research Center (SRI) - 60's NLS (oN-Line System) Primeiro sistema que conseguiu pr em prtica: hipertexto + inovaes tecnolgicas + inovaes conceptuais No hipertexto os limites dependem: criatividade literria + competncia tecnolgica do leitor 7. 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 fsica de partculas do mundo. Desenvolveu o primeiro programa de armazenamento de informao baseado no conceito de hipertexto - Enquire 8. 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 fsica de partculas do mundo. Desenvolveu o primeiro programa de armazenamento de informao baseado no conceito de hipertexto - Enquire. ENQUIRE Objectivo: interligar os computadores do laboratrio a outras instituies de pesquisa, e exibir documentos cientcos de forma simples. trabalho colaborativo + partilha dos documentos em rede. 9. 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 Disseminao da Web 1 Web apenas no CERN 2 Web no mundo 10. Do Enquire Web Primeira pgina Web publicada @ 6 Agosto de 1991 pgina de texto com explicaes sobre: conceito de World Wide Web como criar um Browser como instalar/congurar um servidor Web O conceito de Web foi sendo alargado: sistema de partilha de informao comunidade 11. W3C W3C - Tim Berners-Lee - 1994 World Wide Web Consortium Consrcio de empresas de tecnologia que promove a evoluo, estandardizao e a interoperabilidade das tecnologias emergentes - directivas, especicaes, ferramentas e software. 12. W3C MIT - Laboratrio de Cincias da Computao e de Inteligncia Articial (CSAIL) - EUA Consrcio Europeu de Investigao em Informtica e Matemtica (ERCIM) - Frana Universidade de Keio - Japo Escritrios espalhados por todo o mundo +/- 16 regies Parcerias com as comunidades Web de cada regio, de modo a promover as recomendaes e certicaes do W3C nos idiomas locais Encorajam a participao internacional nas actividades desenvolvidas pelo W3C. 13. W3C Objectivo inicial: obter o acordo de todos os developers sobre um conjunto de princpios fundamentais, de modo a evitar problemas de compatibilidade e interpretao. Actualmente: integra vrios comits que estudam as tecnologias existentes para a apresentao de contedo na Internet e criam padres de recomendao para utilizar essas tecnologias. Os padres de acessibilidade criados pelo W3C ganharam bastante importncia no desenvolvimento de pginas Web, pois a inteno de derrubar as barreiras tecnolgicas tem sido crescente. 14. HTML5 HTML e XHTML HTML4 vs. HTML5 Porqu HTML5 e no XHTML2? Criar estrutura / marcao adequada s novas necessidades Novas funcionalidades 15. HTML e XHTML 1991 HyperText Markup Language uma linguagem de marcao Inventada por Tim Berners-Lee 1993 Primeira publicao 1995 HTML 2.0 Linguagem demasiado exvel 1999 Com a ajuda da W3C surge a HTML 4.01 2000 Surge o XHTML (eXtensible HyperText Markup Language) 16. HTML4 vs. HTML5 HTML4 Continua orientado a documentao textual (artigos cientcos) HTML5 Renderizao de grcos Controle embutido de contedos audio e vdeo Armazenamento de dados por parte do cliente Maior interactividade No necessita de tecnologias proprietrias como Flash, Silverlight e JavaFX Estrutura do HTML5 vs. HTML4 17. Porqu HTML5 e no XHTML2? XHTML2 no uma reformulao mas sim uma nova especicao inteiramente baseado em XML e Markups a W3C anunciou a descontinuidade do XTHML 2.0 apresentava srios problemas ao nvel da retro-compatibilidade e implementao. HTML5 uma evoluo/extenso do HTML 4 e do XHTML1 inuenciado pelo "state of the art" e pela utilizao corrente dos Markups Misunderstanding Markup: XHTML 2/HTML 5 Comic Strip 18. Novas funcionalidades A parte interessante! app cache e database geolocation web workers canvas SVG Exemplos #1 Exemplos #2 Exemplo de SVG (electionAtlasGermany) 19. CSS Porqu a criao de CSS Vantagens do CSS3 face a verses anteriores CSS3 e HTML5 Exemplos 20. Porqu a criao de CSS Linguagem de estilizao e formatao - Sistema exvel para especicar a formatao de elementos html. Dene fontes, tamanhos, cores, imagens, margens, etc. Funciona em conjunto com a linguagem html. Separa contedo de layout e estilo de uma forma organizada. Permite partilhar vrias folhas de estilos em mltiplos documentos ou num site inteiro. Ajuda a melhorar a acessibilidade e manuteno 21. Vantagens do CSS3 face a verses anteriores As verses mais antigas eram demasiado longas e complexas para serem actualizadas de uma s vez. O CSS3 est a ser separado em mdulos. Simplicao com novas propriedades inseridas. Novas caractersticas mais exveis ao nvel de desenho do interface e de acessibilidades. Ainda no possvel dizer quantos browsers iram adoptar as novas funcionalidades do CSS3, estas novas funcionalidades esto a ser implementadas gradualmente (um a dois anos para ser amplamente adoptada). 22. Vantagens do CSS3 face a versesanteriores 23. CSS3 e HTML5border-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 Sitebackground-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; } 24. 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 25. Javascript m fama: uso obstrutivo Javascript moderno: no obstrutivo gesto de eventos DOM scripting / DHTML Ajax bibliotecas 26. Exemplos Bad javascript Good Javascript 27. FIM! Universidade de AveiroOrientadoresAutores Ano lectivo 2009/10 Benjamin Jnior Alexandre das Neves Departamento de Comunicao e ArteTelmo Silva (34343) Mestrado em Comunicao e MultimdiaCarla Vanessa Ferreira Multimdia InteractivoAlves Leite (39925) Tecnologias Dinmicas para a Internet Celso Farias Duarte Lopes (48454) Joana Pimparel Mineiro (49221) Tim Theodor Koch- Grnberg (35922)