Transferir como PDF, PPTX
Carregado porTim Koch-Grünberg
PDF, PPTX1,640 visualizações
Javascript, HTML5 e CSS3
O documento aborda a evolução do hipertexto e das tecnologias web, desde suas origens com Theodor Nelson até a criação do HTML5 e CSS3. Apresenta a importância do W3C na padronização das tecnologias web e as vantagens das novas versões de HTML e CSS. Também discute a modernização do JavaScript e suas aplicações no desenvolvimento web.
Recomendados
Mais conteúdo relacionado
Mais procurados
Destaque
PDF
#"button" role="switch" aria-checked="false" aria-label="Salvar #" aria-haspopup="dialog" aria-controls=":R3d7cna9r6:" popovertarget=":R3d7cna9r6:">
Semelhante a Javascript, HTML5 e CSS3
Último
Javascript, HTML5 e CSS3
- 1.
- 2.Origem da Web•Hipertexto•DoEnquire à Web•W3C
- 3.HipertextoTheodor H. Nelson- 1965Forma 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 deorigem ou de destino.
- 4.HipertextoPara 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.
- 5.HipertextoTheodor 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çasentre elas.
- 6.Hipertexto• Douglas Engelbarte 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
- 7.Do Enquire àWeb• Tim Berners-Lee - 80's• Consultor de Engenharia de Software no CERN (European Council for NuclearResearch) - maior centro de estudos sobre física de partículas do mundo.• Desenvolveu o primeiro programa de armazenamento de informação baseado noconceito de hipertexto - Enquire
- 8.Do Enquire àWeb• Tim Berners-Lee - 80's• Consultor de Engenharia de Software no CERN (European Council for NuclearResearch) - maior centro de estudos sobre física de partículas do mundo.• Desenvolveu o primeiro programa de armazenamento de informação baseado noconceito de hipertexto - Enquire.• ENQUIRE• Objectivo: interligar os computadores do laboratório a outras instituições depesquisa, e exibir documentos científicos de forma simples.• trabalho colaborativo + partilha dos documentos em rede.
- 9.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 NeXTComputer• Disseminação da Web• 1º Web apenas no CERN• 2º Web no mundo
- 10.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
- 11.W3C• W3C -Tim Berners-Lee - 1994• World Wide Web Consortium• Consórcio de empresas de tecnologia que promove a evolução, estandardização e ainteroperabilidade das tecnologias emergentes - directivas, especificações,ferramentas e software.
- 12.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 asrecomendações e certificações do W3C nos idiomas locais• Encorajam a participação internacional nas actividades desenvolvidas pelo W3C.
- 13.W3C• Objectivo inicial:obter o acordo de todos os developers sobre um conjunto deprincípios fundamentais, de modo a evitar problemas de compatibilidade einterpretação.• Actualmente: integra vários comités que estudam as tecnologias existentes para aapresentação de conteúdo na Internet e criam padrões de recomendação para utilizaressas tecnologias.• Os padrões de acessibilidade criados pelo W3C ganharam bastante importância nodesenvolvimento de páginas Web, pois a intenção de derrubar as barreirastecnológicas tem sido crescente.
- 14.HTML5• HTML eXHTML• HTML4 vs. HTML5• Porquê HTML5 e não XHTML2?• Criar estrutura / marcação adequada às novas necessidades• Novas funcionalidades
- 15.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)
- 16.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
- 17.Porquê HTML5 enã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
- 18.Novas funcionalidades• Aparte interessante!• app cache e database• geolocation• web workers• canvas• SVG• Exemplos #1• Exemplos #2• Exemplo de SVG (electionAtlasGermany)
- 19.CSS• Porquê acriação de CSS• Vantagens do CSS3 face a versões anteriores• CSS3 e HTML5• Exemplos
- 20.Porquê a criaçãode CSS• Linguagem de estilização e formatação - Sistema flexível para especificar a formataçãode 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 siteinteiro.• Ajuda a melhorar a acessibilidade e manutenção
- 21.Vantagens do CSS3face a versõesanteriores• As versões mais antigas eram demasiado longas e complexas para serem actualizadasde 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 deacessibilidades.• Ainda não é possível dizer quantos browsers iram adoptar as novas funcionalidades doCSS3, estas novas funcionalidades estão a ser implementadas gradualmente (um a doisanos para ser amplamente adoptada).
- 22.Vantagens do CSS3face a versõesanteriores
- 23.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
- 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:• não obstrutivo• gestão de eventos• DOM scripting / DHTML• Ajax• bibliotecas
- 26.Exemplos• Bad javascript•Good Javascript
- 27.FIM!Universidade de AveiroAnolectivo 2009/10Departamento de Comunicação e ArteMestrado em Comunicação e MultimédiaMultimédia InteractivoTecnologias Dinâmicas para a InternetOrientadoresBenjamin JúniorTelmo SilvaAutoresAlexandre das Neves(34343)CarlaVanessa FerreiraAlves Leite (39925)Celso Farias DuarteLopes (48454)Joana Pimparel Mineiro(49221)Tim Theodor Koch-Grünberg (35922)