Com S5, pra quê Power Point?
04/12, 2005 12:00 por Fellipe
Um cara, Eric Meyer, pensador da web, juntou um monte de idéias flutuantes na rede e fechou um pacote. Seu objetivo foi simples: criar um slide-show usando apenas tecnologias conhecidas e difundidas, como XHTML, CSS e Javascript.
A vantagem é óbvia: Todo micro tem um browser (sim, é crossbrowser), mas nem todo micro suporta apresentações PPT, feitas pelo power point, da Microsoft.
Essa é uma alternativa definitiva para solucionar grande parte dos casos de apresentações. A desvantagem (?) é não poder fazer transições animadas, mas, quem conhece flash resolve isso fácil, fácil.
A estrutura em XHTML é simples. Os títulos são H1 e os item estão em uma lista comum. Não há segredo algum. Quem quiser ir além, pode ainda modificar a aparência via CSS.
Os links para descobrir mais a respeito são:
Meyerweb site:
http://www.meyerweb.com/eric/tools/s5/
Apresentação em ação:
http://www.meyerweb.com/eric/tools/s5/s5-intro.html
Bom proveito!
Através do link http://ruf.rockgrafia.com/webstandards/slide.php poderemos visualizar uma aplicação que eu criei baseando-se no S5 e na Apostila de Webstandards. O efeito final ficou interessante.
Durante o processo de criação, eu tive que mudar estruturalmente alguns arquivos HTML de forma que o PHP pudesse lê-los cortando alguns pedaços que simplesmente eram grandes demais ou entravam em detalhes muito específicos. Fiz um esquema para dividir um único tópico em X partes também….
O Script é:
<?php
# Parse dos Tópicos
# ===== === =======
/*
Esta parte existe para ler o arquivo "$folder.$index" e dividí-lo em tópicos.
Ok, ok... eu poderia usar um parser XML, mas no meu caso foi melhor assim...
*/
$pars = file($folder.$index);
$ix=0;
$pt = "âêîôûãõäëïöüáéíóúàèìòùç ÂÊÎÔÛÃÕÄËÏÖÜÁÉÍÓÚÀÈÌÒÙÇ"; // portuga-graphs 
$sn = "?!.,:;\>\<\\\"=\/"; // acentos, problema no [:punct:] 
$er = "[[:alnum:][:space:]]*"; // regex propriamente dita
$er2 = "[[:alnum:][:space:]$sn$pt]*"; // regex propriamente dita (caso 2)
foreach($pars as $pline) {
if(eregi("<li><a href=",$pline)) {
preg_match("/<li><a href=\"#($er)\">($er2)<\/a><\/li>/i", $pline, $matches);
$var[$ix]["id"] = $matches[1];
$var[$ix]["nome"] = $matches[2];
$ix++;
}
}
?>
E depois….
<?php
# Construção dos slides, baseado nos arquivos
# ===========================================
/*
Finalmente, vou pegar as posições de $var geradas no loop acima e vou montar os slides.
*/
foreach($var as $topic) {
$view=true;$sameslide=0;
echo "\n\n\n<div class=\"slide\">\n";
echo "<h1 id=\"".$topic["id"]."\">".$topic["nome"]."</h1>";
if(file_exists($folder.$topic["id"].".html")){
$inc = file($folder.$topic["id"].".html");
foreach($inc as $i) {
if(eregi("<!--@noslide-->",$i)) $view=false;
if($view) {
echo $i;
if(eregi("<!--@slidebreak/-->",$i)) {
echo "\n</div>";
echo "\n\n\n<div class=\"slide\">\n";
echo "<h1 id=\"".$topic["id"]."-".++$sameslide ."\">".$topic["nome"]."</h1>";
}
}
if(eregi("<!--@/noslide-->",$i)) $view=true;
}
#<!--@noslide--> // Começa a esconder
#<!--@/noslide--> // Termina
#<!--@slidebreak/--> // Quebra o tópico
}else{
echo "<h1>404</h1><ul><li>Em construção/aprovação</li></ul>";
}
echo "\n</div>";
}
?>
E shazam.
Este artigo foi publicado Sunday, 04 de December de 2005 às 12:00 e foi categorizado como webstandards, Cookbook, inovação.
Você pode acompanhar os comentários deste post assinando o comment RSS (RSS 2.0 [?]).
Você também pode comentar ou atrelar um trackback [?] daqui no seu site.
2 comentários para “Com S5, pra quê Power Point?”
Deixe seu parecer sobre o artigo
- The WordPress Engine.
05 de January, 2006 às 19:08
Buenas!
No opera 8 não funcionou!
Abraços!
Ved
07 de February, 2006 às 17:40
[…] Com S5, pra quê Power Point? Artigo técnico BEM útil. Através de um XHTML bem formado, Javascript e CSS é possível criar apresentações de slides puro-HTML para o Browser. […]