Spray

Hola a todos:

Para este número utilizaremos una aplicación de CSS 3 que se llama Spray. Desde mi punto de vista permite elaborar un menú del artículo más intuitivo. Lo del link es una prueba, los colores de las anclas se pueden cambiar para que no se vean sólo en gris.

http://www.revista.unam.mx/vol.8/num8/art62/int62.htm

Ahora bien, cuando los artículos son muy largos se puede usar unas divisiones horizntales en forma de acordeón

http://www.revista.unam.mx/vol.8/num8/art57/int57.htm

El incoveniente aqui es la generación de dos scroll bar


Saludos y espero sus comentarios

Paty

Nuevas aplicaciones en la RDU

Hola

Actualmente en la revista estamos utilizando hojas de estilo (CSS) y códigos de Javascript. El código javascript nos permite sincronizar nuestra página web principal por artículo cargando sólo el contenido especifico de las anclas. Por eso, cuando se cambia de ancla en una artículo la dirección no cambia. Ya no estamos cargando diferentes páginas, lo que nos permite acceder más rápidamente al contenido del artículo.

Cada mes se elabora un nuevo CSS que determinará la apariencia total de nuestra página, en lo respecta a los colores del links, la forma como está estructura; es decir, el diseño integral de la página. Además el diseñador a cargo elabora el home y un banner diferente por número, de acuerdo al tema.

Las hojas de estilo nos dan varias ventajas, por ejemplo si tenemos que hacer un cambio de última hora, de alguno de los elementos de nuestras paginas ya sea de fuente, colores de links o cambio de banner de la cabeza, todo se actualiza automáticamente en todas las páginas que estén vinculadas a ese archivo CSS. Otra ventaja es que el código CSS se quedan almacenado en la maquina de cada usuario. De esta manera cuando el usuario abre otro artículo automáticamente el CSS se encarga de darle la apariencia y diseño a la página. Los HTMLS en si se crean por medio de divs. Cada div se vincula a un estilo especifico de tal manera que tenemos un estilo para la cabeza, la barra de navegación vertical, la barra de navegación horizontal y los diferentes encabezados que manejamos.

El software que se está utilizando para la sección de biblioteca es la nueva versión de Dreameweaver: la CS3 que cuenta con una nueva aplicación que hace mas dinámicas las paginas web , por medio de un frame work llamado Spry que permite diversas aplicaciones, como en es el acomodo de las anclas en forma de acordeón ( esto se hace con AJAX )

AJAX es un acrónimo de Asynchronous JavaScript And XML. Es una técnica de desarrollo web para crear aplicaciones interactivas. Éstas se ejecutan en el cliente, es decir, en el navegador de los usuarios, y mantiene comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre la misma página sin necesidad de recargarla. Esto significa aumentar la interactividad, velocidad y usabilidad en la misma.

AJAX es una combinación de tres tecnologías:

XHTML (o HTML) y hojas de estilos en cascada (CSS) para el diseño que acompaña a la información.
Document Object Model (DOM) accedido con un lenguaje de scripting por parte del usuario, especialmente implementaciones ECMAScript como JavaScript y JScript, para mostrar e interactuar dinámicamente con la información presentada.
El objeto XMLHttpRequest para intercambiar datos asincrónicamente con el servidor web. En algunos frameworks y en algunas situaciones concretas, se usa un objeto iframe en lugar del XMLHttpRequest para realizar dichos intercambios.
XML es el formato usado comúnmente para la transferencia de vuelta al servidor, aunque cualquier formato puede funcionar, incluyendo HTML preformateado, texto plano, JSON y hasta EBML.
Como el DHTML, LAMP o SPA, AJAX no constituye una tecnología en sí, sino que es un término que engloba a un grupo de éstas que trabajan conjuntamente.

(fuente wikipedia: http://es.wikipedia.org/wiki/AJAX)

Elegimos esta forma de trabajar debido a que Dreamweaver contiene una librería de codigos .js con su respectivo CSS para cada tipo de aplicación, que cuando se carga a la página se vinculan automáticamente en la etiqueta y se cargan igualmente los archivos en nuestro sitio, archivos que también se tienen que subir al servidor para que funcione la aplicación.

Cuando ya están vinculados los archivos se puede cambiar la apariencia que tienen las aplicaciones por medio del CSS, el cual podemos abrir y cambiar los atributos del objeto; desde el color de fondo de la fuente, el tipo de fuente, contornos, etc… por otro lado, en cuanto a la funcionalidad de nuestras aplicaciones de igual manera se pueden manipular para que funcionen como mejor nos convenga.



Saludos cordiales,
Ismael

http://labs.adobe.com/technologies/spry/

Hola a todos:

Este es el nuevo template en CSS con algunas mejoras, espero sus comentarios y sugerencias para mejorarlo.

cargador y home de febrero

Hola:

El home de enero contiene un cargador, esta implementación va a permitir que los usuarios que tengan una conexión lenta puedan tener un indicador de que la página se está cargando y así no se desesperen si la descarga tarda. Me parece que es una buena idea de Ismael que podemos incorporar en los homes de ahora en adelante.

Para el home de febrero Fabián propone que lo ilustremos con imágenes de paisajes o monumentos que representen a cada país, por ejemplo, de E.U. la estatua de la Libertad, de México podría ser el Angel de la Independencia, de Canadá unas cataratas o algo por el estilo, tal vez la torre de Toronto. Envien alguna propuesta de estas imágenes y cómo podría ser presentadas.

Para este número ningún artículo se va a realizar completamente en Flash, la verdad no es práctico tampoco porque los artículos son largos y tendríamos que poner un buen de siguientes. Lo que podemos hacer es incorporar algunas pequeñas animaciones en el HTML, también espero sus propuestas al respecto.

Saludos
Paty

Home de febrero

Hola a todos:

Antes que nada deseo que este año sea muy bueno para todos, termina en siete y eso ya podría indicar buena suerte.

Para el mes de febrero el tema será América del Norte, los invito a enviar sus ideas para el home de este número, para el cual podríamos pensar en algo más que hacer el típico mapa de Canada E.U. y México o poner las banderitas.

Espero sus propuestas.

Reciban un cordial saludo.

Paty

Ejercicio

Hola:

Les encargo el siguiente ejercicio: hay que buscar páginas de internet cuya edición digital sea realmente sobresaliente. Yo he seleccionado esta página. http://www.bestiario.org/bestiario.html
Véanla, considero que la forma como se presentan a los colaboradores te atrapa de inmediato y no es complicado ver la ficha de cada uno de ellos. Además de que la página en si contiene un buen número de objetos realmente interesantes. Me interesa la opinión de cada uno de ustedes para poder calificar esta página y también que ustedes propongan alguna otra para analizarla entre todos.

Saludos cordiales.

Paty

sobre los CSS

Conceptos básicos:
Las hojas de estilo o CSS fueron diseñadas para separar en un documento el estilo lógico del estilo físico, dejando éste último en bloques de definición de estilos separados de la estructura del documento.
CSS son las siglas de "Cascade StyleSheet". Se trata de una especificación sobre los estilos físicos aplicables a un documento HTML, que trata de dar la separación definitiva de la lógica (estructura) y el físico (presentación) del documento.

Estilos
El estilo lógico se refiere a la lógica del documento: cabeceras, párrafos, ... no se preocupa de la apariencia final, sino de la estructura del documento. Por el contrario, el estilo físico no se preocupa de la estructura del documento, sino por la apariencia final: párrafos con un cierto tipo de letra, tablas con un determinado color de fondo, ...
La finalidad de las hojas de estilo es crear unos estilos físicos, separados de las etiquetas HTML (en lugar de como parámetros de las etiquetas), y aplicarlos en los bloques de texto en los que se quieran aplicar. Estos estilos podrán ser modificados en algunas ocasiones desde JavaScript, con lo cual se logra un poco más de interactividad.

Capas
Por otra parte, tenemos las capas, que vienen a darnos la solución al problema de poner elementos justo en la posición que queramos, evitándonos tener que hacer artificios para obtener el resultado buscado. Una capa será una parte más del documento que puede ser situada en cualquier posición del mismo, consiguiendo que se solape sobre algunos elementos si es lo que necesitamos, adecuando sus márgenes y otras propiedades a lo que queramos hacer.