Últimamente he comenzado a aburrirme con las presentaciones tipo ppt que hago con Impress de LibreOffice, asi que comencé a buscar la forma de hacer presentaciones con html.
He encontrado algunos sitios web en los que se publicita hacer presentaciones con html5; desde fanthom.js hasta Html5 Slides. Sin embargo, ante la necesidad de gastar algún tiempo para aprender a utilizar esos programas, he decidido hacer mi propio editor de presentaciones. Para lograrlo, decidí que primero debo hacer una presentación «general» y luego pensar en hacer el editor.
De esta manera, inicio con esta entrada este proyecto, mostrando la idea que tengo en mente:
Son tres secciones que en el html quedan así:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" http-equiv = "content-type" content = "text/html" />
<meta name="description" content="Plantilla de presentaciones">
<meta name="keywords" content="plantilla">
<title>Presentación tipo Power Point</title>
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<nav>
<div id="menu">Menu</div>
<div id="hora">Tiempo/Hora</div>
<div id="configuracion">Configuración</div>
</nav>
<section>
</section>
<footer>
<div id="barra">Barra de avance</div>
<div id="autor">Autor</div>
</footer>
</body>
</html>
En la primera parte tengo los elementos que permiten ver la página en español con los caracteres propios de este idioma.
Para que todo tome la apariencia que quiero, debo incluir un archivo de estilo «style.css» que copio a continuación, y un llamado a JQuery que seguro emplearé mas adelante cuando tenga que programar el javascript.
En los elementos «menu», «configuracion», «barra de avance» aparecerán los íconos y figuras respectivas pero, por el momento únicamente pongo los nombres respectivos.
El siguiente es el codigo css
html, body{
margin: 0px;
padding: 0px;
background: #eee
}
#menu{
padding:10px;
position: absolute;
top: 0%;
left:0%;
}
#hora{
text-align: center;
}
#configuracion{
padding:10px;
position: absolute;
top: 0%;
right: 0%;
}
#barra{
position: absolute;
bottom: 0%;
left: 40%;
}
#autor{
padding:10px;
position: absolute;
bottom: 0%;
right: 0%;
}
Con todo esto se obtendrá una pantalla así:
En el siguiente post veremos como poner los íconos y la barra de progreso
NOTA
Los códigos html y css insertados en esta nota se maquetaron siguiendo las instrucciones de la página:
http://tutorialesde.blogspot.com/2013/02/como-mostrar-codigo-en-posts-de-blogger.html
por coincidencia encontré tu blog, me parece muy bueno saber de un compañero de México con esta iniciativa, saludos.
ResponderEliminar