View
9.622
Download
1
Category
Preview:
DESCRIPTION
Palestra apresentada por Elcio Ferreira no 9º ELPI. A palestra apresentou ao público os Microformats, uma maneira de incluir novas características e possibilidades no HTML atual, oferecendo significado extra ao conteúdo e facilitando a criação de mash-ups. Comparou também a adoção inicial de Microformats com o padrão de adoção de novas tecnologias abertas, em especial o RSS. Por fim, demonstrou com exemplos práticos a simplicidade para se implementar Microformats e sua grande utilidade e flexibilidade. Vídeo aqui: http://www.andrey.com.br/?p=185
Citation preview
Microformatsa web semântica
com letra minúscula
Elcio Ferreiraelcio@visie.com.br
visie.com.br
tableless.com.brelcio.com.brvisie.com.br
Padrões são legais
São libertadores
São acopláveis
Adoção exponencialAdoção exponencial
tempo
usuá
rios
tempo
usuá
rios
tempo
usuá
rios
Barulhentos
As Webs Semânticas
A Web Semântica(com letra maiúscula)
interessante
complexa
possível?
A web semântica(com letra minúscula)
interessante
simples
possível hoje
O plano
Iniciando
Use o seu XHTML atual
<h2>Sobre mim</h2><ul> <li><img style="float:left; margin-right:4px" src="http://elcio.com.br/imagens/elcio.jpg" alt="photo"/> <a href="http://elcio.com.br">Elcio Luiz Ferreira</a></li> <li>Visie Padrões Web (<a href="http://visie.com.br">visie.com.br</a>)</li> <li><a href="mailto:elcio arroba visie.com.br"> elcio arroba visie.com.br</a></li> <li> <div>Rua Onofre da Silveira, 574</div> São Paulo, SP, 04304-010 Brasil <span>lat: -23.626550, long: -46.639785</span> </li> <li>11-3477-3347</li></ul>
Acrescente significado
<h2>Sobre mim</h2><ul> <li><img style="float:left; margin-right:4px" src="http://elcio.com.br/imagens/elcio.jpg" alt="photo"/> <a href="http://elcio.com.br">Elcio Luiz Ferreira</a></li> <li>Visie Padrões Web (<a href="http://visie.com.br">visie.com.br</a>)</li> <li><a href="mailto:elcio arroba visie.com.br"> elcio arroba visie.com.br</a></li> <li> <div>Rua Onofre da Silveira, 574</div> São Paulo, SP, 04304-010 Brasil <span>lat: -23.626550, long: -46.639785</span> </li> <li>11-3477-3347</li></ul>
<ul> <li><img style="float:left; margin-right:4px" src="http://elcio.com.br/imagens/elcio.jpg" alt="photo"/> <a href="http://elcio.com.br"> <span>Elcio</span> <span>Luiz </span> <span>Ferreira</span> </a></li> <li>Visie Padrões Web (<a href="http://visie.com.br">visie.com.br</a>)</li> <li><a href="mailto:elcio arroba visie.com.br"> elcio arroba visie.com.br</a></li> <li> <div>Rua Onofre da Silveira, 574</div> <span>São Paulo</span>, <span>SP</span>, <span>04304-010</span> <span>Brasil</span> <span> lat: <span>-23.626550,</span> long: <span>-46.639785</span> </span> </li> <li>11-3477-3347</li></ul>
<ul> <li><img style="float:left; margin-right:4px" src="http://elcio.com.br/imagens/elcio.jpg" alt="photo"/> <a href="http://elcio.com.br"> <span>Elcio</span> <span>Luiz </span> <span>Ferreira</span> </a></li> <li>Visie Padrões Web (<a href="http://visie.com.br">visie.com.br</a>)</li> <li><a href="mailto:elcio arroba visie.com.br"> elcio arroba visie.com.br</a></li> <li> <div>Rua Onofre da Silveira, 574</div> <span>São Paulo</span>, <span>SP</span>, <span>04304-010</span> <span>Brasil</span> <span> lat: <span>-23.626550,</span> long: <span>-46.639785</span> </span> </li> <li>11-3477-3347</li></ul>
<ul class=”vcard”> <li><img style="float:left; margin-right:4px" src="http://elcio.com.br/imagens/elcio.jpg" alt="photo"/> <a href="http://elcio.com.br"> <span>Elcio</span> <span>Luiz </span> <span>Ferreira</span> </a></li> <li>Visie Padrões Web (<a href="http://visie.com.br">visie.com.br</a>)</li> <li><a href="mailto:elcio arroba visie.com.br"> elcio arroba visie.com.br</a></li> <li> <div>Rua Onofre da Silveira, 574</div> <span>São Paulo</span>, <span>SP</span>, <span>04304-010</span> <span>Brasil</span> <span> lat: <span>-23.626550,</span> long: <span>-46.639785</span> </span> </li> <li>11-3477-3347</li></ul>
<ul class=”vcard”> <li><img style="float:left; margin-right:4px" src="http://elcio.com.br/imagens/elcio.jpg" alt="photo" class=”photo”/> <a href="http://elcio.com.br" class=”url fn n”> <span class=”given-name”>Elcio</span> <span class=”additional-name”>Luiz </span> <span class=”family-name”>Ferreira</span> </a></li> <li>Visie Padrões Web (<a href="http://visie.com.br">visie.com.br</a>)</li> <li><a href="mailto:elcio arroba visie.com.br"> elcio arroba visie.com.br</a></li> <li> <div>Rua Onofre da Silveira, 574</div> <span>São Paulo</span>, <span>SP</span>, <span>04304-010</span> <span>Brasil</span> <span> lat: <span>-23.626550,</span> long: <span>-46.639785</span> </span> </li> <li>11-3477-3347</li></ul>
<ul class=”vcard”> <li><img style="float:left; margin-right:4px" src="http://elcio.com.br/imagens/elcio.jpg" alt="photo" class=”photo”/> <a href="http://elcio.com.br" class=”url fn n”> <span class=”given-name”>Elcio</span> <span class=”additional-name”>Luiz </span> <span class=”family-name”>Ferreira</span> </a></li> <li class=”org”>Visie Padrões Web (<a href="http://visie.com.br">visie.com.br</a>)</li> <li><a class=”email” href="mailto:elcio arroba visie.com.br"> elcio arroba visie.com.br</a></li> <li class=”adr”> <div>Rua Onofre da Silveira, 574</div> <span>São Paulo</span>, <span>SP</span>, <span>04304-010</span> <span>Brasil</span> <span> lat: <span>-23.626550,</span> long: <span>-46.639785</span> </span> </li> <li>11-3477-3347</li></ul>
<ul class=”vcard”> <li><img style="float:left; margin-right:4px" src="http://elcio.com.br/imagens/elcio.jpg" alt="photo" class=”photo”/> <a href="http://elcio.com.br" class=”url fn n”> <span class=”given-name”>Elcio</span> <span class=”additional-name”>Luiz </span> <span class=”family-name”>Ferreira</span> </a></li> <li class=”org”>Visie Padrões Web (<a href="http://visie.com.br">visie.com.br</a>)</li> <li><a class=”email” href="mailto:elcio arroba visie.com.br"> elcio arroba visie.com.br</a></li> <li class=”adr”> <div class=”street-address”>Rua Onofre da Silveira, 574</div> <span class=”locality”>São Paulo</span>, <span class=”region”>SP</span>, <span class=”postal-code”>04304-010</span> <span class=”country-name”>Brasil</span> <span> lat: <span>-23.626550,</span> long: <span>-46.639785</span> </span> </li> <li>11-3477-3347</li></ul>
<ul class=”vcard”> <li><img style="float:left; margin-right:4px" src="http://elcio.com.br/imagens/elcio.jpg" alt="photo" class=”photo”/> <a href="http://elcio.com.br" class=”url fn n”> <span class=”given-name”>Elcio</span> <span class=”additional-name”>Luiz </span> <span class=”family-name”>Ferreira</span> </a></li> <li class=”org”>Visie Padrões Web (<a href="http://visie.com.br">visie.com.br</a>)</li> <li><a class=”email” href="mailto:elcio arroba visie.com.br"> elcio arroba visie.com.br</a></li> <li class=”adr”> <div class=”street-address”>Rua Onofre da Silveira, 574</div> <span class=”locality”>São Paulo</span>, <span class=”region”>SP</span>, <span class=”postal-code”>04304-010</span> <span class=”country-name”>Brasil</span> <span> lat: <span>-23.626550,</span> long: <span>-46.639785</span> </span> </li> <li class=”tel”>11-3477-3347</li></ul>
<ul class=”vcard”> <li><img style="float:left; margin-right:4px" src="http://elcio.com.br/imagens/elcio.jpg" alt="photo" class=”photo”/> <a href="http://elcio.com.br" class=”url fn n”> <span class=”given-name”>Elcio</span> <span class=”additional-name”>Luiz </span> <span class=”family-name”>Ferreira</span> </a></li> <li class=”org”>Visie Padrões Web (<a href="http://visie.com.br">visie.com.br</a>)</li> <li><a class=”email” href="mailto:elcio arroba visie.com.br"> elcio arroba visie.com.br</a></li> <li class=”adr”> <div class=”street-address”>Rua Onofre da Silveira, 574</div> <span class=”locality”>São Paulo</span>, <span class=”region”>SP</span>, <span class=”postal-code”>04304-010</span> <span class=”country-name”>Brasil</span> <span> lat: <span>-23.626550,</span> long: <span>-46.639785</span> </span> </li> <li class=”tel”>11-3477-3347</li></ul>
Ahá! Temos hCard!
<ul class=”vcard”> <li><img style="float:left; margin-right:4px" src="http://elcio.com.br/imagens/elcio.jpg" alt="photo" class=”photo”/> <a href="http://elcio.com.br" class=”url fn n”> <span class=”given-name”>Elcio</span> <span class=”additional-name”>Luiz </span> <span class=”family-name”>Ferreira</span> </a></li> <li class=”org”>Visie Padrões Web (<a href="http://visie.com.br">visie.com.br</a>)</li> <li><a class=”email” href="mailto:elcio arroba visie.com.br"> elcio arroba visie.com.br</a></li> <li class=”adr”> <div class=”street-address”>Rua Onofre da Silveira, 574</div> <span class=”locality”>São Paulo</span>, <span class=”region”>SP</span>, <span class=”postal-code”>04304-010</span> <span class=”country-name”>Brasil</span> <span class=”geo”> lat: <span class=”latitude”>-23.626550,</span> long: <span class=”longitude”>-46.639785</span> </span> </li> <li class=”tel”>11-3477-3347</li></ul>
<ul class=”vcard”> <li><img style="float:left; margin-right:4px" src="http://elcio.com.br/imagens/elcio.jpg" alt="photo" class=”photo”/> <a href="http://elcio.com.br" class=”url fn n”> <span class=”given-name”>Elcio</span> <span class=”additional-name”>Luiz </span> <span class=”family-name”>Ferreira</span> </a></li> <li class=”org”>Visie Padrões Web (<a href="http://visie.com.br">visie.com.br</a>)</li> <li><a class=”email” href="mailto:elcio arroba visie.com.br"> elcio arroba visie.com.br</a></li> <li class=”adr”> <div class=”street-address”>Rua Onofre da Silveira, 574</div> <span class=”locality”>São Paulo</span>, <span class=”region”>SP</span>, <span class=”postal-code”>04304-010</span> <span class=”country-name”>Brasil</span> <span class=”geo”> lat: <span class=”latitude”>-23.626550,</span> long: <span class=”longitude”>-46.639785</span> </span> </li> <li class=”tel”>11-3477-3347</li></ul>
E agora Geo!
<ul class=”vcard”> <li><img style="float:left; margin-right:4px" src="http://elcio.com.br/imagens/elcio.jpg" alt="photo" class=”photo”/> <a href="http://elcio.com.br" class=”url fn n”> <span class=”given-name”>Elcio</span> <span class=”additional-name”>Luiz </span> <span class=”family-name”>Ferreira</span> </a></li> <li class=”org”>Visie Padrões Web (<a href="http://visie.com.br">visie.com.br</a>)</li> <li><a class=”email” href="mailto:elcio arroba visie.com.br"> elcio arroba visie.com.br</a></li> <li class=”adr”> <div class=”street-address”>Rua Onofre da Silveira, 574</div> <span class=”locality”>São Paulo</span>, <span class=”region”>SP</span>, <span class=”postal-code”>04304-010</span> <span class=”country-name”>Brasil</span> <span class=”geo”> lat: <span class=”latitude”>-23.626550,</span> long: <span class=”longitude”>-46.639785</span> </span> </li> <li class=”tel”>11-3477-3347</li></ul>
Pronto, você está dentro!
Pra queserve?
Lembrado RSS?
Exponencial
“Pra que serve RSS?”
“Pra que serve RSS?”
“Pra que serve RSS?”
“Pra que serve RSS?”
“Pra que serve RSS?”
“Pra que serve RSS?”
“Pra que serve RSS?”
“Pra que serve RSS?”
Formatos Interessantes:●hCard●hCalendar●Geo
●XFN● rel:no-follow●XOXO
Exemploscom a
Operator
Tall eye
Desenvolva sua aplicação
“We need microformats and to get people to
agree on them. It is going to bootstrap exchanging
data on the Web…”Bill Gates
Mash it up!
RSS
Firefox
Firefox
Bloglines
Google Reader
iPodder
Amarok
Netvibes
Page Flakes
Odeo
Yahoo! Pipes
Democracy
Aaah, sim, claro,Firefox 3
Escreva
Leia
Crie
? ? dúvidas ? ?
O b r i g a d o !
Elcio Ferreiraelcio@visie.com.br
visie.com.br
Recommended