Crear una presentacion S5
Monday, January 7th, 2008En un anterior post había comentado sobre las presentaciones S5, ahora voy a explicar como hacer una. Para que nos sirva de ayuda podemos bajar una plantilla básica desde el blog del autor. Al descomprimirlo tenemos un archivo s5-blank.html y una carpeta ui, el archivo tiene la estructura básica de S5 y dentro de la carpeta se encuentra las CSS y el script javaScript, el cual se encarga de mostrar las diapositivas. Es importante mantener todo dentro del directorio que lo descomprimamos, ya que si cambiamos de lugar tanto s5-blank.html o ui se invalidarán las referencias. Si hacemos un cambio, habrá que cambiar la sección de link dentro del encabezado.
La estructura básica está formada por así decirlo por el encabezado y el cuerpo. El encabezado tiene el siguiente aspecto
[html]
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
….
… ….
[/html]
Y el cuerpo tiene este aspecto:
[html]
…
[/html]
El encabezado se encuentra entre las etiquetas <head></head> y dentro de él tenemos:
- Título de la presentación
- Metadatos
- Parámetros de configuración
- Links a las CSS
- Link al script JavaScripts
El título de la presentación debemos colocarlo entre las etiquetas <title></title>, luego en las etiquetas de metadatos <meta … />, van datos relacionados con la presentación, por ejemplo el autor, la fecha, la compañia, etc. Por ejemplo cambiemos el título de la presentación:
[html][/html]
Y cambiemos el autor y compañia
[html]
[/html]
Eso es suficiente modificar en el encabezado, vayamos al cuerpo. El cuerpo se podría dividir en dos partes:
- Diseño
- Presentación
El diseño se encuentra entre las etiquetas <div class=”layout”></div>, en él encontramos unas etiquetas que no hay que editar, sólo tenemos que cambiar dos etiquetas, las cuales son el título de la presentación y la fecha de la misma. Estas se mostrarán en la parte inferior izquierda de la presentación (teniendo en cuenta el estilo con que viene la presentación)
[html]
[/html]
La presentación se encuentra entre <div class=”presentation”></div>, dentro de él encontramos varías etiquetas <div class=”slide></div>, éstas son las diapositivas. Coloquemos una diapositiva a la presentación.
[html]
[/html]
Con esto sería suficiente para tener una una diapositiva. Si ahora abren la diapositiva con su browser, notarán que contiene signos extraños en los lugares donde hay acentos, esto se soluciona fácilmente. Deben colocar la siguiente línea en el encabezado al principio de la sección de metadatos
[html]
[/html]
Con esto sabe el browser con cuál codificación mostrar los caracteres. Aquí hay una muestra de cómo se vería

Al final de las etiquetas de presentación encontramos
[html]
[/html]
El contenido que agreguemos dentro de éstas etiquetas, no se mostrará en una diapositiva, pero sí saldrá cuando imprimamos la presentación. Por ejemplo aquí se podría colocar información relacionada con la muestra de diapositivas.
Para finalizar, vamos agregar una diapositiva con efecto de muestra incremental, esto es que cada vez que hagamos click en la pantalla aparecerá un nuevo elemento. La diapositiva la agregaremos a continuación de la anterior, siempre dentro de las etiquetas <div class=”presentation”></div>; tendrá una lista de elementos, los cuales aparecerán con cada click
[html]
[/html]
Bueno, se puede hacer mucha cosas más, ya que es una página HTML, por ejemplo, agregar imágenes, link, efectos, animaciones, etc.
Presentación en S5
Sunday, January 6th, 2008S5 es una forma de realizar presentaciones de diapositivas (slide) basandose en 3 tecnologías:
- XHTML
- CSS
- JavaScript
Gracias a estas sólo necesitamos de un browser para poder exponer la presentación, aumentando enormemente la portabilidad, pudiendo lograr que la presentación se pueda reproducir en casi cualquier parte.
JavaScript es el encargado de efectuar el efecto de pasar las diapositivas. No va a ser de sorprenderse que dentro de poco salgan script que hagan incontable efectos en nuestras presentaciones, dejando atrás a cualquier efecto que nos pueda brindar un paquete ofimático de presentaciones.
Algo de mucha utilidad es que al trabajar con CSS, se pueden diseñar distintos CSS según el medio para tener una visualización acorde, por ejemplo una CSS diseñada para un medio como la impresora facilitaría su visualización porque no se imprime como se muestra en la pantalla del monitor, o sea en forma de diapositivas; esto abre un gran abanico de posibilidades, por citar algunas es posible portar nuestras presentaciones a medios como dispositivos táctiles para braille o impresoras braille.
Una contra que se le puede encontrar (pero no por mucho, supongo) es que para poder elaborar las presentaciones debemos contar con conocimientos en HTML, para el contenido y en CSS para poder diseñar el estilo de nuestra presentación. Es sólo cuestión de tiempo para que salgan interfaces que faciliten el proceso de desarrollo, además ya se encuentrar varios temas para aplicar estilos a las presentaciones.
En el blog del autor de S5 hay basta documentación del mismo.
Páginas web dinámicas
Sunday, December 9th, 2007Acá les dejo una explicación de las dos formas en que se puede generar contenido dinámico en documentos web. Ya que he notado que varias personas no comprenden bien la diferencias de las dos formas. Ninguna forma es “superior” a la otra, sino que se complementan. Hay varias ocasiones donde es necesario usar ambas formas para poder solucionar un determinado problema.
Contenido dinámico del lado del servidor:
Por ejemplo imaginen el siguiente escenario, se está llenando un formulario para ser un usuario de un determinado sitio web. Al enviar el formulario, se envía un mensaje al servidor, pero no para solicitar un archivo de regreso. Sino, se debe pasar los valores del formulario a alguna aplicación del servidor para que lo procese. Por ejemplo se podría disparar una consulta a una base de datos, para verificar que el nombre de usuario indicado en el formulario no está asignado. Entonces aquí tenemos una generación de contenido dinámica, porque según los datos del formulario se generará distintos contenidos, por ejemplo si el nombre de usuario ya está registrado se podría mostrar una página indicando que dicho nombre ya está usado, o en cambio si los datos fueron correctos generar una página felicitando al nuevo usuario. Hay varios lenguajes para escribir estos programas: Perl, PHP, JSP, ASP.
Contenido dinámico del lado del cliente:
Hoy en día está muy de moda colocar “efectos” en las páginas. Uno que es muy usado es que cuando se presiona un botón (o se pasa por arriba de este) ocurre algo, por ejemplo, cambia de color o se abre una etiqueta que nos indica a que hace referencia ese botón, etc. Como se puede ver todo ese contenido dinámico es en respuesta a la interacción con el usuario y no es necesario para nada el servidor de donde se solicitó la página. Para generar esos efectos es necesario tener comandos incrustados dentro de la página y que actúen en función de lo que hace el usuario. Un lenguaje muy popular para esto es Javascript.
Como se puede ver la diferencia entre ambas es muy rígida, pero a través de la tecnología AJAX, es posible unir las otras dos y que interaccionen de una manera más flexible ofreciendo una mayor calidad al usuario, un mayor grado de interactividad.
Algo que hay que destacar es que AJAX en sí no es una tecnología ni un lenguaje de programación, es más bien la unión de varias tecnologías. AJAX es una técnica de desarrollo web.
Una explicación sómera de como se utiliza AJAX (sin entrar en detalles técnicos) podría ser el caso en que se busca una palabra en la barra de Google, al colocar la primera letra, el servidor despliega una lista de sugerencias de palabras que empiezan con esa letra. Al colocar una segunda letra se vuelve a mostrar otra lista de sugerencias.


Aquí se puede ver que para obtener la lista se necesita información del servidor y la lista está en función de la interacción que tiene el usuario con la página. De aquí que unimos las dos tecnologías y damos una apariencia de mayor fluidez al usuario, primero por que la página no se refresca completa, sino, la lista de sugerencias y segundo una comunicación más rápida con el servidor, porque no tiene que traer toda una página, sino una pequeña lista.