60 / 68
CODE/
REVEAL
PRO-
GRAMAÇÃO MÉDIO
2 HORAS
60
DICAS PARA PROGRAMAR DE UMA
MANEIRA FÁCIL E DESCOMPLICADA
Q
uase todo mundo
que já usou um
computador criou
apresentações em
programas como PowerPoint
e similares. São softwares
fáceis de entender e usar.
Eles têm uma gama de
recursos de animação e
apresentação que permite
controlar textos, imagens,
vídeo, transições de tela e
interatividade com o usuário.
Para fazer isso em páginas
de internet, que possam ser
lidas por navegadores, existem
diversas ferramentas e linguagens
padronizadas, como o HTML5.
Entretanto, a maioria não é
fácil de usar como o PowerPoint.
([LJH FRGLíFD©¥R H FRQKHFLPHQWR
de linguagens de script e de
programação. Com o Reveal.js, a
coisa mudou. Ficou bem simples
e intuitivo gerar apresentações
rapidamente e com grande
TXDOLGDGH JU£íFD H GH GHVLJQ
INSTALE
Reveal.js é um pacote de
arquivos, uma biblioteca, e sua
instalação é simples. Acesse o
link
https://github.com/hakimel/reveal.js e clique em Download ZIP.
É preciso apenas salvar o arquivo e
descompactá-lo no diretório onde
será criado o arquivo html de teste.
Isso basta para instalar o Reveal.js.
Primeiros passos
para um slideshow
Para criar um pequeno
slideshow, digite o seguinte código
no arquivo “teste.html”:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primeiro teste
com Reveal.js</title>
<link rel="stylesheet"
SLIDES FÁCEIS COM
REVEAL.JS
href="css/reveal.min.css">
<link rel="stylesheet"
href="css/theme/default.css"
id="theme">
<!--Suporte para versões
antigas do Internet Explorer
-->
<!--[if lt IE 9]>
<script src="lib/js/
html5shiv.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>
Os dois arquivos CSS e o
arquivo JS são necessários para
Crie apresentações
emHTML5 com esta
biblioteca
Por Homero Ottoni
Página do
Reveal.js: com
a ferramenta,
tornou-se
simples criar
apresentações
gerar o slideshow de teste.
O próximo passo é incluir os
elementos no corpo do arquivo,
que vão receber as classes e os
códigos para esse efeito.
<div class="reveal">
<!-- Classe para
conter os slides -->
<div class="slides">
<!-- Os slides
vão aqui -->
<!-- Cada
elemento de seção representa
um slide -->
<section>
<h1>Sobre
nosso site</h1>
REVISTA LOCAWEB