HTML, XHTML, CSS, Javascript y AJAX

Funcionalidad target="_blank"

noreply@blogger.com (Juan Morán) — Wed, 02 Jul 2008 16:45:00 +0000

Ha sido muy útil colocar links páginas que se despliegue en otra ventana para colocar, por ejemplo, para los vínculos hacia patrocinadores o banners.

Sin embargo, esto no valida contra los estándares; sin embargo se propone una alternativa que sí lo hace en esta dirección.

http://www.sitepoint.com/article/standards-compliant-world

¿Cómo abreviar el código CSS?

noreply@blogger.com (InterGraphicDESIGNS) — Fri, 27 Jun 2008 17:34:00 +0000

Es muy frecuente encontrar código CSS en varias líneas que podrían ser simplificadas en una sola. Muchos diseñadores CSS prefieren la versión "contraída" del CSS para tener menos código, reducir el tamaño de sus archivos CSS, etc.

Acá presentamos algunos ejemplos conocidos sobre cómo se podrían simplificar algunas línea de código CSS:

Backgrounds:

CSS Expandido ( background ) - - - - - - - >
background-color: red;
background-position: top;
background-position: center;
background-image: url(../);
background-attachment: scroll;
background-repeat: repeat-x;

contracción - - - - - - - >
background: url(../) red top center scroll repeat-x;

Márgenes:

CSS Expandido ( margin / padding ) - - - - - - - >
margin-top: 10px;
margin-left: 5px;
margin-right: 5 px;
margin-bottom: 10px;

contracción 1 - - - - - - - >
margin: 10px 5px 10px 5px ;
contracción 2 - - - - - - - >
margin: 10px 5px;

Tipos de letra:

CSS Expandido ( font ) - - - - - - - >
font-family: Arial, Helvetica, "Trebuchet MS";
font-size: 12px;
font-style: italic;
font-weight: bold;
line-height: 15px;

contracción - - - - - - - >
font: bold italic 12px/15px Arial, Helvetica, "Trebuchet MS";

Bordes:

CSS Expandido ( border ) - - - - - - - >
border-top: 1px;
border-bottom: 1px;
border-left: 1px;
border-right: 1px;
border-color: red;
border-style: solid;

contracción - - - - - - - >
border: 1px solid red;

Colores:

CSS Expandido ( color ) - - - - - - - >
color:#0099FF;
color:#000000;
color:#660000;

contracción - - - - - - - >
color:#09F;
color:#000;
color:#600;

Listas:

CSS Expandido ( list-style ) - - - - - - - >
list-style-image: url(../);
list-style-position: inside;
list-style-type: circle;

contracción - - - - - - - >
list-style: url(../) inside circle;

Es posible encriptar CSS, Javascript, HTML o PHP?

noreply@blogger.com (Juan Morán) — Tue, 17 Jun 2008 05:26:00 +0000

Pues primero hay que tener claro qué es lo que se ejecuta en el servidor y luego qué es lo que se ejecuta en el cliente:

Servidor:

PHP: la programación conocida como "del lado del servidor".

Cliente:

CSS.
Javascript
HTML

Primero que todo ninguno de los códigos anteriores se puede encriptar porque si fuera así se irrespetaría la sintaxis del lenguaje y el código pierde su valor y deja de ser funcional.

Por otro lado, en el caso de los CSS, HTML y Javascript que se ejecutan en el navegador, sólo en el último caso se puede aplicar un obfuscador, el cual no encripta propiamente el código sino que lo reemplaza por otro que puede ser interpretado (se respeta la sintaxis de javascript) pero que no es leíble fácilmente por un humano. Sin embargo, todo lo que se ejecuta en el cliente se almacena de manera local (en caché) por lo que los archivos siempre son descargadas y si alguien se propone adueñarse de un código, técnicamente no hay nada que le impida hacerlo; pero se pueden usar ciertas técnicas (como el obfuscamiento) para que dicha tarea sea más difícil.

Analizando Tiempos de Descarga de Páginas Web.

noreply@blogger.com (Juan Morán) — Fri, 06 Jun 2008 16:41:00 +0000

En la página

http://www.websiteoptimization.com/services/analyze/

Se tiene acceso a una herramienta que permite verificar los tiempos de descarga de una página. Dentro del análisis tiene un "resumen" donde recomienda realizar ajustes (si es necesario) del tamaño del HTML, de la cantidad de archivos CSS y de la cantidad de imágenes incluidas.

Muy útil cuando se estudia los diferentes tipos de público meta a los que se quiere llegar y cómo se ajusta la página a sus necesidades.

Editores WYSIWYG. FCKEditor vs TinyMCE

noreply@blogger.com (InterGraphicDESIGNS) — Thu, 29 May 2008 20:00:00 +0000

Durante mucho tiempo hemos estado utilizando la herramienta FCKEditor en algunos formularios para permitir a los usuarios ingresar descripciones con formato, hipervínculos e imágenes.

Sin embargo, comenzamos a tener algunos inconvenientes.

Estuvimos editando algunos contenidos que tenían viñetas y listas numeradas en el navegador Mozilla Firefox; pero al visualizar ese contenido en el navegador Microsoft Internet Explorer se mostraban algunos caracteres que no eran parte del contenido (pudimos observar que FCKEditor generó código específico para el navegador que estábamos utilizando para editar los contenidos).

Por otro lado, al revisar el código fuente HTML que FCKEditor generaba para los contenidos, pudimos observar en algunos casos mucha basura en el código. Remover esa basura de manera manual implicó tiempo que hubiéramos podido invertir en otra actividad más productiva.

También existía la necesidad de que los usuarios de la página web pudieran borrar algunos archivos que habían sido subidos al servidor mediante el FCKEditor y no se podía a menos que nosotros ingresáramos vía FTP y los borráramos del servidor manualmente.

Por estas y otras razones, comenzamos a buscar otra herramienta que hiciera lo mismo y nos topamos con TinyMCE.

Hicimos las pruebas correspondientes y notamos mayor velocidad con el TinyMCE, además de que la edición de contenido en diferentes navegadores producía el mismo código fuente HTML. Encontramos también un botón para limpiar automáticamente el código basura.

Lo que no encontramos al inicio fue una herramienta para subir archivos, sin embargo, pudimos encontrar una utilidad gratuita para TinyMCE llamada ajaxfilemanager en la siguiente dirección:

http://www.phpletter.com/Demo/Tinymce-Ajax-File-Manager/

Nos tomamos el tiempo para integrarla con TinyMCE y pudimos subir y escoger archivos para los contenidos, además que esa herramienta nos permitió eliminar archivos del servidor y manipular las imágenes (cortar, redimensionar, rotar, etc.).

También estuvimos buscando opiniones en muchos foros y se mencionaba que el TinyMCE se adhiere mejor a los estándares de la web permitiendo mejor validación de las páginas, es más pequeño en tamaño y trabaja más rápido que el FCKEditor.

Una de las características que más ha gustado a los usuarios del TinyMCE es el hecho de poder redimensionar el editor o también expandirlo a pantalla completa.

Nos quedan muchas pruebas en el camino, pero por el momento hemos tomado la decisión de utilizar TinyMCE de ahora en adelante para nuestros proyectos.

La página oficial de TinyMCE es: http://tinymce.moxiecode.com/

AJAX Libraries API

noreply@blogger.com (Juan Morán) — Wed, 28 May 2008 15:18:00 +0000

Las Bibliotecas AJAX API es una red de distribución de contenido y una arquitectura de carga de las bibliotecas más populares de JavaScript. Al utilizar el método google.load() la aplicación pude tener un acceso de alta velocidad (disponible globalmente) a las siguientes bibliotecas:

Google se encarga de administrar y aceptar las versiones estables más recientes, lo que aliviana el trabajo del programador por un lado para que se despreocupe de esta tarea.

Una ventaja de rendimiento es que si un usuario utiliza varios sitios que referencian al mismo javascript entonces la versión en caché beneficia a todos los sitios y a la experiencia del usuario en general. Sin embargo esto es discutible ya que tendría que ocurrir que la mayoría de los sitios comiencen a utilizar a google como su repositorio de código javascript.

Mas información en: AJAX Libraries API

Firefox 3 Release Candidate 1

noreply@blogger.com (InterGraphicDESIGNS) — Fri, 23 May 2008 20:37:00 +0000

En la siguiente dirección: http://www.mozilla.com/en-US/firefox/all-rc.html ya es posible descargar Firefox 3 (al menos en su versión Release Candidate 1), es decir, que pronto estará disponible la versión final de Firefox 3.

Esta nueva versión promete mucha más velocidad y una buena serie de facilidades que serán atractivas principalmente a desarrolladores. En cuanto a velocidad, se anunciaron mejoras al engine de JavaScript de este navegador, lo que permitirá que algunas aplicaciones como Gmail corran hasta dos veces más rápido que en Firefox 2.

Entre las nuevas facilidades se menciona mejoras a la forma en que Firefox administra contraseñas, facilidad para hacer Zoom sobre los webs, un nuevo administrador de descargas, entre otras interesantes que se mencionan en el artículo Firefox 3 for developers - MDC.

Para desarrolladores de sitios web es un buen momento para hacer algunas pruebas interesantes, empezar a navegar con esta nueva herramienta, estudiar la compatibilidad de sus proyectos con este nuevo navegador, entre otras cosas.

¿Cómo hacer gradientes o rotar una página con CSS?

noreply@blogger.com (InterGraphicDESIGNS) — Fri, 25 Apr 2008 14:02:00 +0000

Algunos se preguntan cómo hacer el gradiente de un sitio web (el degradado o transición de un color a otro) sin necesidad de utilizar una imagen, sino sólamente utilizando atributos CSS. Otra pregunta que es común encontrar es cómo rotar o inclinar un texto utilizando sólamente CSS.

Actualmente estas características CSS no están totalmente implementadas, sin embargo, existen iniciativas interesantes que nos dejan ver que estas características podrían ser parte de Internet dentro de un tiempo.

WebKit:

Todos los navegadores tienen un sistema para interpretar el código HTML y CSS para así mostrar una página web dada, WebKit es este sistema para el navegador Safari, y ya se empieza a utilizar en otros dispositivos como algunos teléfonos celulares Nokia. Puede descargar la versión más reciente de WebKit

Con Webkit, ya es posible implementar algunas de estas características, por ejemplo, para utilizar gradientes podríamos utilizar el siguiente código:

background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));

Para rotar una página podríamos utilizar lo siguiente:

body {
-webkit-transform: rotate(-2deg);
}

En general, podríamos decir que estas características aún no deberían ser utilizadas en cualquier sitio web, debido a que la mayoría de los navegadores no tienen instalado WebKit, sin embargo, es una iniciativa interesante que parece indicar que, si en el futuro todos los navegadores empiezan a incorporar la facilidad para interpretar estos atributos CSS, pronto podemos empezar a utilizarlos. Por ahora, a los diseñadores web se les recomienda descargar WebKit para ir probando algunas de estas funciones y prepararse para el futuro cercano de CSS.

Extensiones de Firefox recomendadas para diseño web

noreply@blogger.com (InterGraphicDESIGNS) — Fri, 04 Apr 2008 17:04:00 +0000

Queremos aprovechar este espacio para incluir algunas de nuestras recomendaciones sobre aquellas extensiones de Firefox que más nos ayudan en las tareas de diseño web.

Web Developer

En especial queremos hacer énfasis en "Web Developer" desde la cual es posible habilitar/dehabilitar varias características de la navegación como javascript, la visualización de css, las imágenes, etc; brinda información adicional sobre los sitios web consultados, cuenta con interesantes herramientas de validación y visualización de sitios web, etc.

Conocer más sobre "Web Developer": https://addons.mozilla.org/es-ES/firefox/addon/60

Firebug

Es una excelente herramienta que permite entre otras cosas visualizar el código html de un sitio web de una forma sumamente ordenada y ágil, haciendo referencia a la estructura del código y a los estilos utilizados en cada parte del html que se está examinando.

Conocer más sobre "Firebug": https://addons.mozilla.org/es-ES/firefox/addon/1843

Esperamos que las extensiones les sean de mucho provecho.

¿Qué es el sIFR?

noreply@blogger.com (InterGraphicDESIGNS) — Thu, 03 Apr 2008 21:02:00 +0000

Una pregunta que muchos diseñadores web llegan a hacerse es cómo utilizar cualquier texto con cualquier fuente (tipo de letra) sin necesidad de tener que editar una imagen, y haciendo que este texto sea reconocido por los buscadores más populares. Esto era imposible hasta hace unos años, y es un tema solucionado gracias al sIFR, una técnica publicada gracias al trabajo de Mike Davidson y Mark Wubben.

El sIFR (Scalable Inman Flash Replacement) es una técnica que mezcla Flash y funciones de Javascript para lograr este objetivo. Puede ver ejemplos de esta técnica aplicada en cualquiera de las páginas internas del sitio web de InterGraphicDESIGNS (Ver un ejemplo aquí).

Para poner a funcionar sIFR en su sitio web puede descargar la última versión del producto en alguno de los sitios web de sus creadores, donde se indican en detalle todas las instrucciones necesarias.

Conocer más detalles del funcionamiento del sIFR (Inglés)

Descargar el sIFR (Versión 2.0.2)

Ver la página oficial de ejemplo

Documentación oficial

Tutoriales para aprender HTML

noreply@blogger.com (InterGraphicDESIGNS) — Tue, 01 Apr 2008 17:06:00 +0000

Algunos de nuestros clientes o contactos, nos han hecho llegar su inquietud sobre algún enlace que puedan tomar como referencia para iniciar su aprendizaje en HTML. Encontramos una buena serie de tutoriales en SitePoint.com que sin duda son una excelente forma de iniciar.

El primer nivel del tutorial se encuentra en la siguiente dirección: http://www.sitepoint.com/article/beginners-html-1