SlideShare uma empresa Scribd logo
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
.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)

Mais conteúdo relacionado

Mais procurados (20)

01 Introdução à programação web
01 Introdução à programação web01 Introdução à programação web
01 Introdução à programação web
Centro Paula Souza
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
Rodrigo Rodrigues
 
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEBHTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
PeslPinguim
 
Html5 Aula 6
Html5 Aula 6Html5 Aula 6
Html5 Aula 6
Jose Berardo
 
HTML5 Básico: Marcação (aula 1)
HTML5 Básico: Marcação (aula 1)HTML5 Básico: Marcação (aula 1)
HTML5 Básico: Marcação (aula 1)
Gustavo Zimmermann
 
CSS3: Start (aula 1)
CSS3: Start (aula 1)CSS3: Start (aula 1)
CSS3: Start (aula 1)
Gustavo Zimmermann
 
0 Introdução ao Desenvolvimento Web - Apresentação
0   Introdução ao Desenvolvimento Web - Apresentação0   Introdução ao Desenvolvimento Web - Apresentação
0 Introdução ao Desenvolvimento Web - Apresentação
Mauro Duarte
 
Html5 Aula 5
Html5 Aula 5Html5 Aula 5
Html5 Aula 5
Jose Berardo
 
Introdução à Criação De Páginas Web Aula1
Introdução à Criação De Páginas Web Aula1Introdução à Criação De Páginas Web Aula1
Introdução à Criação De Páginas Web Aula1
marioreis
 
Introdução a programação para a Internet
Introdução a programação para a InternetIntrodução a programação para a Internet
Introdução a programação para a Internet
Leonardo Soares
 
E-book sobre HTML 5 (Devmedia)
E-book sobre HTML 5 (Devmedia)E-book sobre HTML 5 (Devmedia)
E-book sobre HTML 5 (Devmedia)
Devmedia
 
Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
Heraldo Gonçalves Lima Junior
 
Html5 Aula 4
Html5 Aula 4Html5 Aula 4
Html5 Aula 4
Jose Berardo
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
ScrumHalf Tool
 
Introdução ao Web Design: Aula 5 - HTML (part. 1)
Introdução ao Web Design: Aula 5 - HTML (part. 1)Introdução ao Web Design: Aula 5 - HTML (part. 1)
Introdução ao Web Design: Aula 5 - HTML (part. 1)
Gustavo Zimmermann
 
Introducao desenvolvimento-web
Introducao desenvolvimento-webIntroducao desenvolvimento-web
Introducao desenvolvimento-web
Marcio Mota
 
XHTML Básico
XHTML BásicoXHTML Básico
XHTML Básico
Ester Razzo Fischer
 
Desenvolvimento de sites com xhtml e css nos
Desenvolvimento de sites com xhtml e css nosDesenvolvimento de sites com xhtml e css nos
Desenvolvimento de sites com xhtml e css nos
Vinicius Rocha Olivieri
 
Construindo layout de sites com CSS
Construindo layout de sites com CSSConstruindo layout de sites com CSS
Construindo layout de sites com CSS
Talita Pagani
 
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões webMontando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
igorpimentel
 
01 Introdução à programação web
01 Introdução à programação web01 Introdução à programação web
01 Introdução à programação web
Centro Paula Souza
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
Rodrigo Rodrigues
 
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEBHTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
PeslPinguim
 
HTML5 Básico: Marcação (aula 1)
HTML5 Básico: Marcação (aula 1)HTML5 Básico: Marcação (aula 1)
HTML5 Básico: Marcação (aula 1)
Gustavo Zimmermann
 
0 Introdução ao Desenvolvimento Web - Apresentação
0   Introdução ao Desenvolvimento Web - Apresentação0   Introdução ao Desenvolvimento Web - Apresentação
0 Introdução ao Desenvolvimento Web - Apresentação
Mauro Duarte
 
Introdução à Criação De Páginas Web Aula1
Introdução à Criação De Páginas Web Aula1Introdução à Criação De Páginas Web Aula1
Introdução à Criação De Páginas Web Aula1
marioreis
 
Introdução a programação para a Internet
Introdução a programação para a InternetIntrodução a programação para a Internet
Introdução a programação para a Internet
Leonardo Soares
 
E-book sobre HTML 5 (Devmedia)
E-book sobre HTML 5 (Devmedia)E-book sobre HTML 5 (Devmedia)
E-book sobre HTML 5 (Devmedia)
Devmedia
 
Introdução ao Web Design: Aula 5 - HTML (part. 1)
Introdução ao Web Design: Aula 5 - HTML (part. 1)Introdução ao Web Design: Aula 5 - HTML (part. 1)
Introdução ao Web Design: Aula 5 - HTML (part. 1)
Gustavo Zimmermann
 
Introducao desenvolvimento-web
Introducao desenvolvimento-webIntroducao desenvolvimento-web
Introducao desenvolvimento-web
Marcio Mota
 
Desenvolvimento de sites com xhtml e css nos
Desenvolvimento de sites com xhtml e css nosDesenvolvimento de sites com xhtml e css nos
Desenvolvimento de sites com xhtml e css nos
Vinicius Rocha Olivieri
 
Construindo layout de sites com CSS
Construindo layout de sites com CSSConstruindo layout de sites com CSS
Construindo layout de sites com CSS
Talita Pagani
 
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões webMontando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
igorpimentel
 

Destaque (20)

HTML5 Básico: Formulários (aula 2)
HTML5 Básico: Formulários (aula 2)HTML5 Básico: Formulários (aula 2)
HTML5 Básico: Formulários (aula 2)
Gustavo Zimmermann
 
HTML5 Básico: Multimídia 1 (aula 3)
HTML5 Básico: Multimídia 1 (aula 3)HTML5 Básico: Multimídia 1 (aula 3)
HTML5 Básico: Multimídia 1 (aula 3)
Gustavo Zimmermann
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScript
Edureka!
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
Victor Adriel Oliveira
 
Curso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTMLCurso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTML
Rodrigo Bueno Santa Maria, BS, MBA
 
Farol: Os 4 ciclos
Farol: Os 4 ciclosFarol: Os 4 ciclos
Farol: Os 4 ciclos
Gustavo Zimmermann
 
JavaScript: Estruturas (aula 2)
JavaScript: Estruturas (aula 2)JavaScript: Estruturas (aula 2)
JavaScript: Estruturas (aula 2)
Gustavo Zimmermann
 
JavaScript: Introdução e Operadores (aula 1)
JavaScript: Introdução e Operadores (aula 1)JavaScript: Introdução e Operadores (aula 1)
JavaScript: Introdução e Operadores (aula 1)
Gustavo Zimmermann
 
CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGNCSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
Renato Melo
 
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScriptCurso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Rodrigo Bueno Santa Maria, BS, MBA
 
HTML5 & CSS3
HTML5 & CSS3 HTML5 & CSS3
HTML5 & CSS3
Ian Lintner
 
Introdução a HTML, CSS, JS, Ajax
Introdução a HTML, CSS, JS, AjaxIntrodução a HTML, CSS, JS, Ajax
Introdução a HTML, CSS, JS, Ajax
Gabriel Kamimura Yano
 
Aula html5
Aula html5Aula html5
Aula html5
Rodrigo Gidra
 
Html (formulário)
Html (formulário)Html (formulário)
Html (formulário)
andreluizlc
 
Agilidade e Semântica com HTML5 e CSS3
Agilidade e Semântica com HTML5 e CSS3Agilidade e Semântica com HTML5 e CSS3
Agilidade e Semântica com HTML5 e CSS3
Anderson Aguiar
 
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...
joselialcosta
 
The State of Front End Web Development 2011
The State of Front End Web Development 2011The State of Front End Web Development 2011
The State of Front End Web Development 2011
Pascal Rettig
 
HTML5 CSS3
HTML5 CSS3HTML5 CSS3
HTML5 CSS3
rommelweb
 
Português: Gramática
Português: GramáticaPortuguês: Gramática
Português: Gramática
Simaoalmeida2102
 
Aprender CSS (UFCD0154) v2
Aprender CSS (UFCD0154) v2Aprender CSS (UFCD0154) v2
Aprender CSS (UFCD0154) v2
Afonso Gomes
 
HTML5 Básico: Formulários (aula 2)
HTML5 Básico: Formulários (aula 2)HTML5 Básico: Formulários (aula 2)
HTML5 Básico: Formulários (aula 2)
Gustavo Zimmermann
 
HTML5 Básico: Multimídia 1 (aula 3)
HTML5 Básico: Multimídia 1 (aula 3)HTML5 Básico: Multimídia 1 (aula 3)
HTML5 Básico: Multimídia 1 (aula 3)
Gustavo Zimmermann
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScript
Edureka!
 
JavaScript: Estruturas (aula 2)
JavaScript: Estruturas (aula 2)JavaScript: Estruturas (aula 2)
JavaScript: Estruturas (aula 2)
Gustavo Zimmermann
 
JavaScript: Introdução e Operadores (aula 1)
JavaScript: Introdução e Operadores (aula 1)JavaScript: Introdução e Operadores (aula 1)
JavaScript: Introdução e Operadores (aula 1)
Gustavo Zimmermann
 
CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGNCSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
Renato Melo
 
Html (formulário)
Html (formulário)Html (formulário)
Html (formulário)
andreluizlc
 
Agilidade e Semântica com HTML5 e CSS3
Agilidade e Semântica com HTML5 e CSS3Agilidade e Semântica com HTML5 e CSS3
Agilidade e Semântica com HTML5 e CSS3
Anderson Aguiar
 
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...
joselialcosta
 
The State of Front End Web Development 2011
The State of Front End Web Development 2011The State of Front End Web Development 2011
The State of Front End Web Development 2011
Pascal Rettig
 
Aprender CSS (UFCD0154) v2
Aprender CSS (UFCD0154) v2Aprender CSS (UFCD0154) v2
Aprender CSS (UFCD0154) v2
Afonso Gomes
 
Anúncio

Semelhante a Javascript, HTML5 e CSS3 (20)

HTML5 e o futuro da Web - Senac Consolação 2012
HTML5 e o futuro da Web - Senac Consolação 2012HTML5 e o futuro da Web - Senac Consolação 2012
HTML5 e o futuro da Web - Senac Consolação 2012
Reinaldo Ferraz
 
Curso básico HTML5
Curso básico HTML5Curso básico HTML5
Curso básico HTML5
Professor José de Assis
 
Desenvolvimento Web Parte II
Desenvolvimento Web Parte IIDesenvolvimento Web Parte II
Desenvolvimento Web Parte II
igorpimentel
 
Apresentacao html css
Apresentacao html cssApresentacao html css
Apresentacao html css
Daniele Montenegro
 
Benefícios dos WebStandards
Benefícios dos WebStandardsBenefícios dos WebStandards
Benefícios dos WebStandards
Náiron Jcg
 
Criação de Sites - David Arty - SENAC
Criação de Sites - David Arty - SENACCriação de Sites - David Arty - SENAC
Criação de Sites - David Arty - SENAC
David Arty
 
XHTML e CSS
XHTML e CSSXHTML e CSS
XHTML e CSS
Fábio Flatschart
 
Técnicas e processos - HTML / CSS - aula 1
Técnicas e processos - HTML / CSS - aula 1Técnicas e processos - HTML / CSS - aula 1
Técnicas e processos - HTML / CSS - aula 1
Ritielle de Souza
 
Mobile Web e HTML5
Mobile Web e HTML5Mobile Web e HTML5
Mobile Web e HTML5
Reinaldo Ferraz
 
Html5
Html5Html5
Html5
thiagosenac
 
1a5614c679b23c018654639f6b57ecf1.pdf
1a5614c679b23c018654639f6b57ecf1.pdf1a5614c679b23c018654639f6b57ecf1.pdf
1a5614c679b23c018654639f6b57ecf1.pdf
NickMartinsgaspar
 
HTML5 + CSS3 - Aula01
HTML5 + CSS3 - Aula01HTML5 + CSS3 - Aula01
HTML5 + CSS3 - Aula01
Heloisa Biagi
 
HTML5 - (01) Visão Geral do HTML5
HTML5 - (01) Visão Geral do HTML5HTML5 - (01) Visão Geral do HTML5
HTML5 - (01) Visão Geral do HTML5
Ministério Público da Paraíba
 
HTML e CSS - O que é?
HTML e CSS - O que é?HTML e CSS - O que é?
HTML e CSS - O que é?
Gustavo Teodoro
 
MVP Virtual Conference 2013: Suporte a padrões Web
MVP Virtual Conference 2013: Suporte a padrões WebMVP Virtual Conference 2013: Suporte a padrões Web
MVP Virtual Conference 2013: Suporte a padrões Web
Rogério Moraes de Carvalho
 
Passado, Presente e Futuro da Web - Centro Universitário Unimonte 2015
Passado, Presente e Futuro da Web - Centro Universitário Unimonte 2015Passado, Presente e Futuro da Web - Centro Universitário Unimonte 2015
Passado, Presente e Futuro da Web - Centro Universitário Unimonte 2015
Reinaldo Ferraz
 
Professor rogerio-apostila
Professor rogerio-apostilaProfessor rogerio-apostila
Professor rogerio-apostila
Horacio Diamante Mondlane
 
Front-End do Século XXI.I
Front-End do Século XXI.IFront-End do Século XXI.I
Front-End do Século XXI.I
Luiz Oliveira
 
Souza naves
Souza navesSouza naves
Souza naves
Fernando Henrique Gaffo
 
O HTML 5 e o futuro da web
O HTML 5 e o futuro da webO HTML 5 e o futuro da web
O HTML 5 e o futuro da web
Campus Party Brasil
 
HTML5 e o futuro da Web - Senac Consolação 2012
HTML5 e o futuro da Web - Senac Consolação 2012HTML5 e o futuro da Web - Senac Consolação 2012
HTML5 e o futuro da Web - Senac Consolação 2012
Reinaldo Ferraz
 
Desenvolvimento Web Parte II
Desenvolvimento Web Parte IIDesenvolvimento Web Parte II
Desenvolvimento Web Parte II
igorpimentel
 
Benefícios dos WebStandards
Benefícios dos WebStandardsBenefícios dos WebStandards
Benefícios dos WebStandards
Náiron Jcg
 
Criação de Sites - David Arty - SENAC
Criação de Sites - David Arty - SENACCriação de Sites - David Arty - SENAC
Criação de Sites - David Arty - SENAC
David Arty
 
Técnicas e processos - HTML / CSS - aula 1
Técnicas e processos - HTML / CSS - aula 1Técnicas e processos - HTML / CSS - aula 1
Técnicas e processos - HTML / CSS - aula 1
Ritielle de Souza
 
1a5614c679b23c018654639f6b57ecf1.pdf
1a5614c679b23c018654639f6b57ecf1.pdf1a5614c679b23c018654639f6b57ecf1.pdf
1a5614c679b23c018654639f6b57ecf1.pdf
NickMartinsgaspar
 
HTML5 + CSS3 - Aula01
HTML5 + CSS3 - Aula01HTML5 + CSS3 - Aula01
HTML5 + CSS3 - Aula01
Heloisa Biagi
 
MVP Virtual Conference 2013: Suporte a padrões Web
MVP Virtual Conference 2013: Suporte a padrões WebMVP Virtual Conference 2013: Suporte a padrões Web
MVP Virtual Conference 2013: Suporte a padrões Web
Rogério Moraes de Carvalho
 
Passado, Presente e Futuro da Web - Centro Universitário Unimonte 2015
Passado, Presente e Futuro da Web - Centro Universitário Unimonte 2015Passado, Presente e Futuro da Web - Centro Universitário Unimonte 2015
Passado, Presente e Futuro da Web - Centro Universitário Unimonte 2015
Reinaldo Ferraz
 
Front-End do Século XXI.I
Front-End do Século XXI.IFront-End do Século XXI.I
Front-End do Século XXI.I
Luiz Oliveira
 
Anúncio

Último (20)

SAC - 08 Original PRIMEIROS SOCORROS.ppt
SAC - 08 Original PRIMEIROS SOCORROS.pptSAC - 08 Original PRIMEIROS SOCORROS.ppt
SAC - 08 Original PRIMEIROS SOCORROS.ppt
AmbientarConsultoria
 
Alfredo Peres da Silva PPT Portugués.ppt
Alfredo Peres da Silva PPT Portugués.pptAlfredo Peres da Silva PPT Portugués.ppt
Alfredo Peres da Silva PPT Portugués.ppt
cruzkaique059
 
Apresentação Formação Inicial de Professores ISEC 2025.pdf
Apresentação Formação Inicial de Professores ISEC 2025.pdfApresentação Formação Inicial de Professores ISEC 2025.pdf
Apresentação Formação Inicial de Professores ISEC 2025.pdf
Nelson Santos
 
Curso de processo civil teoria do processo civil volume 1 Mitidiero
Curso de processo civil teoria do processo civil volume 1 MitidieroCurso de processo civil teoria do processo civil volume 1 Mitidiero
Curso de processo civil teoria do processo civil volume 1 Mitidiero
hblsidope141
 
A estrutura geológica do Brasil e sua relação com a formação do relevo.pptx
A estrutura geológica do Brasil e sua relação com a formação do relevo.pptxA estrutura geológica do Brasil e sua relação com a formação do relevo.pptx
A estrutura geológica do Brasil e sua relação com a formação do relevo.pptx
AlessandraRibas7
 
Microbiologia Industrial - Alimentos Bernardo Dias Ribeiro
Microbiologia Industrial - Alimentos Bernardo Dias RibeiroMicrobiologia Industrial - Alimentos Bernardo Dias Ribeiro
Microbiologia Industrial - Alimentos Bernardo Dias Ribeiro
fariszetti
 
Slides Lição 10, CG, João Marcos, 2Tr25.pptx
Slides Lição 10, CG, João Marcos, 2Tr25.pptxSlides Lição 10, CG, João Marcos, 2Tr25.pptx
Slides Lição 10, CG, João Marcos, 2Tr25.pptx
LuizHenriquedeAlmeid6
 
AULA 1 O MUNDO DO TRABAlho sociologia pptx
AULA 1 O MUNDO DO TRABAlho sociologia pptxAULA 1 O MUNDO DO TRABAlho sociologia pptx
AULA 1 O MUNDO DO TRABAlho sociologia pptx
anamagalhaes210
 
5W2H.pptx Gestão de Produção e Qualidade
5W2H.pptx Gestão de Produção e Qualidade5W2H.pptx Gestão de Produção e Qualidade
5W2H.pptx Gestão de Produção e Qualidade
Fabricia Desiderio Dos Santos
 
Cruzadinha - Problematizando com adição e subtração.
Cruzadinha - Problematizando com adição e subtração.Cruzadinha - Problematizando com adição e subtração.
Cruzadinha - Problematizando com adição e subtração.
Mary Alvarenga
 
Ebook Educacao Inclusiva: Um direito Inegociável
Ebook Educacao Inclusiva: Um direito InegociávelEbook Educacao Inclusiva: Um direito Inegociável
Ebook Educacao Inclusiva: Um direito Inegociável
Nelson Santos
 
O sexto sentido
O sexto sentidoO sexto sentido
O sexto sentido
Ler Pensar
 
viroses_principais_viroses_aula_complemento
viroses_principais_viroses_aula_complementoviroses_principais_viroses_aula_complemento
viroses_principais_viroses_aula_complemento
thomaznova1
 
Onde começa a empatia
Onde começa a empatiaOnde começa a empatia
Onde começa a empatia
m_momentoi
 
livro de atividade para as crianças prat
livro de atividade para as crianças pratlivro de atividade para as crianças prat
livro de atividade para as crianças prat
leda20091
 
Aula 10 Componentes de Sangue e Linfa.pptx
Aula 10 Componentes de Sangue e Linfa.pptxAula 10 Componentes de Sangue e Linfa.pptx
Aula 10 Componentes de Sangue e Linfa.pptx
Basilio4
 
dia a dia geografia-2.pdf do did a dia do professor de escola pública
dia a dia geografia-2.pdf do did a dia do professor de escola públicadia a dia geografia-2.pdf do did a dia do professor de escola pública
dia a dia geografia-2.pdf do did a dia do professor de escola pública
caiquedesouzapires
 
Figuras, Passos e Ações Motoras da Dança - Heel and Toe
Figuras, Passos e Ações Motoras da Dança - Heel and ToeFiguras, Passos e Ações Motoras da Dança - Heel and Toe
Figuras, Passos e Ações Motoras da Dança - Heel and Toe
MariaJooVasconcelos1
 
Sem querer querendo Roberto Gómez Bolaños
Sem querer querendo Roberto Gómez BolañosSem querer querendo Roberto Gómez Bolaños
Sem querer querendo Roberto Gómez Bolaños
pmqhovuu7243
 
Ebook: Diferentes Olhares para o Conceito de Educao Inclusiva
Ebook: Diferentes Olhares para o Conceito de Educao InclusivaEbook: Diferentes Olhares para o Conceito de Educao Inclusiva
Ebook: Diferentes Olhares para o Conceito de Educao Inclusiva
Nelson Santos
 
SAC - 08 Original PRIMEIROS SOCORROS.ppt
SAC - 08 Original PRIMEIROS SOCORROS.pptSAC - 08 Original PRIMEIROS SOCORROS.ppt
SAC - 08 Original PRIMEIROS SOCORROS.ppt
AmbientarConsultoria
 
Alfredo Peres da Silva PPT Portugués.ppt
Alfredo Peres da Silva PPT Portugués.pptAlfredo Peres da Silva PPT Portugués.ppt
Alfredo Peres da Silva PPT Portugués.ppt
cruzkaique059
 
Apresentação Formação Inicial de Professores ISEC 2025.pdf
Apresentação Formação Inicial de Professores ISEC 2025.pdfApresentação Formação Inicial de Professores ISEC 2025.pdf
Apresentação Formação Inicial de Professores ISEC 2025.pdf
Nelson Santos
 
Curso de processo civil teoria do processo civil volume 1 Mitidiero
Curso de processo civil teoria do processo civil volume 1 MitidieroCurso de processo civil teoria do processo civil volume 1 Mitidiero
Curso de processo civil teoria do processo civil volume 1 Mitidiero
hblsidope141
 
A estrutura geológica do Brasil e sua relação com a formação do relevo.pptx
A estrutura geológica do Brasil e sua relação com a formação do relevo.pptxA estrutura geológica do Brasil e sua relação com a formação do relevo.pptx
A estrutura geológica do Brasil e sua relação com a formação do relevo.pptx
AlessandraRibas7
 
Microbiologia Industrial - Alimentos Bernardo Dias Ribeiro
Microbiologia Industrial - Alimentos Bernardo Dias RibeiroMicrobiologia Industrial - Alimentos Bernardo Dias Ribeiro
Microbiologia Industrial - Alimentos Bernardo Dias Ribeiro
fariszetti
 
Slides Lição 10, CG, João Marcos, 2Tr25.pptx
Slides Lição 10, CG, João Marcos, 2Tr25.pptxSlides Lição 10, CG, João Marcos, 2Tr25.pptx
Slides Lição 10, CG, João Marcos, 2Tr25.pptx
LuizHenriquedeAlmeid6
 
AULA 1 O MUNDO DO TRABAlho sociologia pptx
AULA 1 O MUNDO DO TRABAlho sociologia pptxAULA 1 O MUNDO DO TRABAlho sociologia pptx
AULA 1 O MUNDO DO TRABAlho sociologia pptx
anamagalhaes210
 
Cruzadinha - Problematizando com adição e subtração.
Cruzadinha - Problematizando com adição e subtração.Cruzadinha - Problematizando com adição e subtração.
Cruzadinha - Problematizando com adição e subtração.
Mary Alvarenga
 
Ebook Educacao Inclusiva: Um direito Inegociável
Ebook Educacao Inclusiva: Um direito InegociávelEbook Educacao Inclusiva: Um direito Inegociável
Ebook Educacao Inclusiva: Um direito Inegociável
Nelson Santos
 
O sexto sentido
O sexto sentidoO sexto sentido
O sexto sentido
Ler Pensar
 
viroses_principais_viroses_aula_complemento
viroses_principais_viroses_aula_complementoviroses_principais_viroses_aula_complemento
viroses_principais_viroses_aula_complemento
thomaznova1
 
Onde começa a empatia
Onde começa a empatiaOnde começa a empatia
Onde começa a empatia
m_momentoi
 
livro de atividade para as crianças prat
livro de atividade para as crianças pratlivro de atividade para as crianças prat
livro de atividade para as crianças prat
leda20091
 
Aula 10 Componentes de Sangue e Linfa.pptx
Aula 10 Componentes de Sangue e Linfa.pptxAula 10 Componentes de Sangue e Linfa.pptx
Aula 10 Componentes de Sangue e Linfa.pptx
Basilio4
 
dia a dia geografia-2.pdf do did a dia do professor de escola pública
dia a dia geografia-2.pdf do did a dia do professor de escola públicadia a dia geografia-2.pdf do did a dia do professor de escola pública
dia a dia geografia-2.pdf do did a dia do professor de escola pública
caiquedesouzapires
 
Figuras, Passos e Ações Motoras da Dança - Heel and Toe
Figuras, Passos e Ações Motoras da Dança - Heel and ToeFiguras, Passos e Ações Motoras da Dança - Heel and Toe
Figuras, Passos e Ações Motoras da Dança - Heel and Toe
MariaJooVasconcelos1
 
Sem querer querendo Roberto Gómez Bolaños
Sem querer querendo Roberto Gómez BolañosSem querer querendo Roberto Gómez Bolaños
Sem querer querendo Roberto Gómez Bolaños
pmqhovuu7243
 
Ebook: Diferentes Olhares para o Conceito de Educao Inclusiva
Ebook: Diferentes Olhares para o Conceito de Educao InclusivaEbook: Diferentes Olhares para o Conceito de Educao Inclusiva
Ebook: Diferentes Olhares para o Conceito de Educao Inclusiva
Nelson Santos
 

Javascript, HTML5 e CSS3

  • 2. Origem da Web •Hipertexto •Do Enquire à Web •W3C
  • 3. 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.
  • 4. 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.
  • 5. 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.
  • 6. 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
  • 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 física de partículas do mundo. • Desenvolveu o primeiro programa de armazenamento de informação 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 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.
  • 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 NeXT Computer • 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 a interoperabilidade 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 as recomendaçõ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 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.
  • 14. HTML5 • HTML e XHTML • 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 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
  • 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 criação de CSS • Vantagens do CSS3 face a versões anteriores • CSS3 e HTML5 • Exemplos
  • 20. 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
  • 21. 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).
  • 22. Vantagens do CSS3 face a versões anteriores
  • 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
  • 27. 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)