sábado, julio 17, 2010
martes, enero 05, 2010
Como uno se da cuenta de que está bien o mal en Javascript?
Bueno, hay varios lugares con expertos sobre el tema, que se avocan a ver las maneras modernas de codificación, hay comunidades especializadas en discutir nuevas técnicas dándoles puntuación y todo.
Unos buenos lugares para comenzar una investigación más profunda se pueden encontrar en:
http://www.sitepoint.com/blogs/category/dhtml-css/
http://www.alistapart.com/
http://www.quirksmode.org/
http://simonwillison.net/tags/javascript/
http://www.kryogenix.org/days/
http://www.wait-till-i.com/
http://www.brainjar.com/
Enjoy! Have a Good Coding xD!
Unos buenos lugares para comenzar una investigación más profunda se pueden encontrar en:
http://www.sitepoint.com/blogs/category/dhtml-css/
http://www.alistapart.com/
http://www.quirksmode.org/
http://simonwillison.net/tags/javascript/
http://www.kryogenix.org/days/
http://www.wait-till-i.com/
http://www.brainjar.com/
Enjoy! Have a Good Coding xD!
Recomendaciones: Javascript 5
Optimiza el performance de tu código Javascript
Optimiza tus scripts tanto para la velocidad de descarga como para la velocidad de ejecución.
Acá unos consejos:
- Evita grandes librerías de código y procura que tus scripts sean concisos y pequeños.
- Escribe código eficiente y evita construcciones que se ejecuten lento.
- Mantén versiones de desarrollo de tus scripts que incluyan muchos comentarios para que después puedas hacer mantenimiento. Para el código que utilizaras en el website puedes utilizar Javascript cruncher o Javascript Crunchinator para quitar todos los comentarios y espacios en blanco.
Usa herramientas para optimizar tu proceso de trabajo
A continuación una selección de herramientas que te harán la vida lejanamente más fácil para cuando trabajes con Javascript:
Firefox browser
- Incluye la buena consola de Netscape para Javascript como default, esto sirve para ver mensajes de error que tengan sentido.
- La extensión para Firefox: Web Developer Toolbar, viene con un sin fin de posibilidades útiles. (Esta la veremos más a fondo más adelante del manual)
- La extensión para Firefox: Firefox DOM Inspector, para inspeccionar y editar en vivo DOM en cualquier documento web.
- La extensión para firefox: Venkman: Un muy buno Javascript debugger
JSDoc
Una herramienta que revisa documentación entre líneas en el código fuente de Javascript y produce sumarios HTML con ese contenido.
JSLint
Un verificador de sintaxis y errores de programación.
Optimiza tus scripts tanto para la velocidad de descarga como para la velocidad de ejecución.
Acá unos consejos:
- Evita grandes librerías de código y procura que tus scripts sean concisos y pequeños.
- Escribe código eficiente y evita construcciones que se ejecuten lento.
- Mantén versiones de desarrollo de tus scripts que incluyan muchos comentarios para que después puedas hacer mantenimiento. Para el código que utilizaras en el website puedes utilizar Javascript cruncher o Javascript Crunchinator para quitar todos los comentarios y espacios en blanco.
Usa herramientas para optimizar tu proceso de trabajo
A continuación una selección de herramientas que te harán la vida lejanamente más fácil para cuando trabajes con Javascript:
Firefox browser
- Incluye la buena consola de Netscape para Javascript como default, esto sirve para ver mensajes de error que tengan sentido.
- La extensión para Firefox: Web Developer Toolbar, viene con un sin fin de posibilidades útiles. (Esta la veremos más a fondo más adelante del manual)
- La extensión para Firefox: Firefox DOM Inspector, para inspeccionar y editar en vivo DOM en cualquier documento web.
- La extensión para firefox: Venkman: Un muy buno Javascript debugger
JSDoc
Una herramienta que revisa documentación entre líneas en el código fuente de Javascript y produce sumarios HTML con ese contenido.
JSLint
Un verificador de sintaxis y errores de programación.
Recomendaciones: Javascript 4
Conocer los puntos débiles del Javascript, limitaciones y bugs
A pesar que Javascript es generalmente bastante bien soportado por la mayoría de UAs modernos, ese soporte aun constituye su mayor debilidad. Esto es debido a que desde los primeros días, los usuarios fueron atacados con todo tipo de comportamientos extraños mientras navegaban websites, dígase pop ups, alertas y demás... es por eso que muchos de ellos mantienen la opción de Javascript apagada, negando la ejecución del mismo. Por ejemplo el Windows XP Service Pack 2 deshabilita algo de Javascript de arranque, porque lo interpreta como un script activo.
Si comparamos Javascript con su primo Actionscript (que es soportado cuando el plugin de flash está instalado - dicho sea de paso: no se puede apagar), vas a encontrar que la diferencia principal es que puedes depender en sus acciones para realizar algunas tareas cuando Javascript está apagado, como validación de forms.
Las implementaciones en Javascript en Internet Explorer, y Safari sufren de faltas de memoria cuando usan referencia circulares como closures, especificaciones en:
http://www.jibbering.com/faq/faq_notes/closures.html
Cuando uses referencia circulares, asegúrate de remover los manejadores de eventos cuando la página se descargue.
Normalmente siempre hay más de una mejor solución
Javascript es un lenguaje bastante flexible y como resultado hay varias maneras de hacer las cosas.
Puedes elegir entre un código orientado a objetos o bajo procesos.
Escribe tus propios scripts o usa código de lugares seguros
Actualmente hay una tonelada de código fuera de fecha o mal escrito listo para ser usado en internet.
Muchos de los scripts están plagados con detección de UAs, utilizando especificaciones como (solo trabaja con este UA o cosas así), lamentablemente para estos scripts en estos dos últimos años ha mejorado largamente la manera de escribir código. Las buenas prácticas están siendo cada vez más utilizadas, y se están volviendo estándares de calidad. Esto está exigiendo a los UAs también a cambiar la forma en que interpretan Javascript, es por eso que los scripts que antes funcionaban no necesariamente lo harán hoy. En el peor de los casos al tratar de usar un script viejo, tendrás que reescribirlo por completo.
A pesar que Javascript es generalmente bastante bien soportado por la mayoría de UAs modernos, ese soporte aun constituye su mayor debilidad. Esto es debido a que desde los primeros días, los usuarios fueron atacados con todo tipo de comportamientos extraños mientras navegaban websites, dígase pop ups, alertas y demás... es por eso que muchos de ellos mantienen la opción de Javascript apagada, negando la ejecución del mismo. Por ejemplo el Windows XP Service Pack 2 deshabilita algo de Javascript de arranque, porque lo interpreta como un script activo.
Si comparamos Javascript con su primo Actionscript (que es soportado cuando el plugin de flash está instalado - dicho sea de paso: no se puede apagar), vas a encontrar que la diferencia principal es que puedes depender en sus acciones para realizar algunas tareas cuando Javascript está apagado, como validación de forms.
Las implementaciones en Javascript en Internet Explorer, y Safari sufren de faltas de memoria cuando usan referencia circulares como closures, especificaciones en:
http://www.jibbering.com/faq/faq_notes/closures.html
Cuando uses referencia circulares, asegúrate de remover los manejadores de eventos cuando la página se descargue.
Normalmente siempre hay más de una mejor solución
Javascript es un lenguaje bastante flexible y como resultado hay varias maneras de hacer las cosas.
Puedes elegir entre un código orientado a objetos o bajo procesos.
Escribe tus propios scripts o usa código de lugares seguros
Actualmente hay una tonelada de código fuera de fecha o mal escrito listo para ser usado en internet.
Muchos de los scripts están plagados con detección de UAs, utilizando especificaciones como (solo trabaja con este UA o cosas así), lamentablemente para estos scripts en estos dos últimos años ha mejorado largamente la manera de escribir código. Las buenas prácticas están siendo cada vez más utilizadas, y se están volviendo estándares de calidad. Esto está exigiendo a los UAs también a cambiar la forma en que interpretan Javascript, es por eso que los scripts que antes funcionaban no necesariamente lo harán hoy. En el peor de los casos al tratar de usar un script viejo, tendrás que reescribirlo por completo.
Recomendaciones: Javascript 3
Crear sencillos scripts fáciles de aplicar
Trata de crear pequeños bloques de código independientes. La desventaja de tener muchas librerías de Javascript es que normalmente incluyen más código que el que en realidad necesitas y son más difíciles de entender y mantener si no los has creado tu mismo.
Por el hecho que las funciones en estas librerías son normalmente agrupadas, y usadas por otros scripts normalmente se les conoce como código spaghetti.
Una librería limpia, pequeña, que cumpla específicamente con las implementaciones necesarias será lo mejor.
El código debe ser reusable. Debe ser fácil de duplicar, fácil se agrandar, y fácil de cambiar. El código siempre debe ser comentado para su futuro mantenimiento, cambio, reutilización.
Si se está trabajando en equipo o alguien más que la persona creadora del código eventualmente va a necesitar hacer cambios en el, es bueno compartir el código con ellos, explicándoles brevemente como funciona para que siempre estén en la facultad de hacer los cambios pertinentes de ser necesarios.
Crear un Javascript a prueba del futuro
Evitar scripts de detección de browser ya que es casi imposible mantenerlos en el futuro. Es preferible hacer detección de objetos ya que ofrece una técnica a prueba de futuros cambios.
XHTML (si no es usado en modo compatible) introduce media type application/xhtml+xml (Actualmente no soportado por Internet Explorer), la cual tiene un gran impacto en como escribimos Javascript:
* El HTML DOM es case-insensitive, así que cuidado con las mayúsculas y minúsculas, el XML DOM es case-sensitive
* Los elementos necesitan ser referenciados en minúsculas ejemplo:
document.getElementsByTagName("p")
* document.body ya no se utiliza, en vez de eso se referencia por su id o se usa:
document.getElementsByTagName("body").item(0)
* Colecciones como document.images, document.applets, document.links, document.forms y document.anchors no existen cuando se da XHTML como XML, en vez de eso se usa
document.getElementsByTagName()
* innerHTML y document.write no se pueden usar mas, en vez de ellos se utilizan métodos DOM, ejemplo: document.createElementNS("http://www.w3c.org/1999/xhtml", "div")
Para mantenerte al día con las novedades que saldrán con respecto a Javascript y DOM, hay una serie grande de organizaciones que tienen un gran impacto en estos temas:
W3C
- DOM 3 provee más integración con XML y XPath
- XHTML 2 incluye eventos XML, cual introduce nuevos cambios en el comportamiento de forms
- CSS3 introduce nuevos pseudo-elements
ECMA
- ECMAScript para XML (E4X) ofrece un set de extensiones para lenguajes de programación adicionando soporte nativo en XML a ECMAScript
- ECMAScript 4 hace lenguajes basados en ECMA (como JavaScript 2 y ActionScript 2) listos para codear modularmente y en sistemas orientados a objetos
Trata de crear pequeños bloques de código independientes. La desventaja de tener muchas librerías de Javascript es que normalmente incluyen más código que el que en realidad necesitas y son más difíciles de entender y mantener si no los has creado tu mismo.
Por el hecho que las funciones en estas librerías son normalmente agrupadas, y usadas por otros scripts normalmente se les conoce como código spaghetti.
Una librería limpia, pequeña, que cumpla específicamente con las implementaciones necesarias será lo mejor.
El código debe ser reusable. Debe ser fácil de duplicar, fácil se agrandar, y fácil de cambiar. El código siempre debe ser comentado para su futuro mantenimiento, cambio, reutilización.
Si se está trabajando en equipo o alguien más que la persona creadora del código eventualmente va a necesitar hacer cambios en el, es bueno compartir el código con ellos, explicándoles brevemente como funciona para que siempre estén en la facultad de hacer los cambios pertinentes de ser necesarios.
Crear un Javascript a prueba del futuro
Evitar scripts de detección de browser ya que es casi imposible mantenerlos en el futuro. Es preferible hacer detección de objetos ya que ofrece una técnica a prueba de futuros cambios.
XHTML (si no es usado en modo compatible) introduce media type application/xhtml+xml (Actualmente no soportado por Internet Explorer), la cual tiene un gran impacto en como escribimos Javascript:
* El HTML DOM es case-insensitive, así que cuidado con las mayúsculas y minúsculas, el XML DOM es case-sensitive
* Los elementos necesitan ser referenciados en minúsculas ejemplo:
document.getElementsByTagName("p")
* document.body ya no se utiliza, en vez de eso se referencia por su id o se usa:
document.getElementsByTagName("body").item(0)
* Colecciones como document.images, document.applets, document.links, document.forms y document.anchors no existen cuando se da XHTML como XML, en vez de eso se usa
document.getElementsByTagName()
* innerHTML y document.write no se pueden usar mas, en vez de ellos se utilizan métodos DOM, ejemplo: document.createElementNS("http://www.w3c.org/1999/xhtml", "div")
Para mantenerte al día con las novedades que saldrán con respecto a Javascript y DOM, hay una serie grande de organizaciones que tienen un gran impacto en estos temas:
W3C
- DOM 3 provee más integración con XML y XPath
- XHTML 2 incluye eventos XML, cual introduce nuevos cambios en el comportamiento de forms
- CSS3 introduce nuevos pseudo-elements
ECMA
- ECMAScript para XML (E4X) ofrece un set de extensiones para lenguajes de programación adicionando soporte nativo en XML a ECMAScript
- ECMAScript 4 hace lenguajes basados en ECMA (como JavaScript 2 y ActionScript 2) listos para codear modularmente y en sistemas orientados a objetos
Recomendaciones: Javascript 2
Crea Javascript accesible
Javascript es accesible cuando la navegación de una página, contenido y funcionalidad principal (por ejemplo mandar un form) esta disponible para toda tu audiencia, independientemente del UA o artículo que utilice el usuario final para navegar el site.
Esto incluye:
* Gente que utiliza tecnología de asistencia como los screen readers.
* Gente que no utiliza mouse.
* Gente que no tiene Javascript disponible, lo hayan deshabilitado, etc. para ellos habrá que crear una opción en (x)html/css disponible.
* Search Engines
El facilitar navegación con tabs en las páginas es una costumbre buena y bastante utilizada, hace más rápida la navegación y para la gente que no tenga mouse les dará la facultad de hacer consultas. La idea es que todos puedan tener acceso a la página, no importa que tan pequeño sea el grupo con problemas.
La página debe estar lista para lidiar con múltiples escenarios.
Crear Javascript usable
La usabilidad de una página web es normalmente determinada por una buena arquitectura en su muestra de información, clara y con un diseño visualmente intuitivo, con una buena función habilidad diseñada.
Uno de los principales argumentos para utilizar Javascript es justo por la accesibilidad que este en algunas ocasiones puede llegar a brindar, sino en realidad deberías pensar si es necesario utilizarlo.
Javascript es accesible cuando la navegación de una página, contenido y funcionalidad principal (por ejemplo mandar un form) esta disponible para toda tu audiencia, independientemente del UA o artículo que utilice el usuario final para navegar el site.
Esto incluye:
* Gente que utiliza tecnología de asistencia como los screen readers.
* Gente que no utiliza mouse.
* Gente que no tiene Javascript disponible, lo hayan deshabilitado, etc. para ellos habrá que crear una opción en (x)html/css disponible.
* Search Engines
El facilitar navegación con tabs en las páginas es una costumbre buena y bastante utilizada, hace más rápida la navegación y para la gente que no tenga mouse les dará la facultad de hacer consultas. La idea es que todos puedan tener acceso a la página, no importa que tan pequeño sea el grupo con problemas.
La página debe estar lista para lidiar con múltiples escenarios.
Crear Javascript usable
La usabilidad de una página web es normalmente determinada por una buena arquitectura en su muestra de información, clara y con un diseño visualmente intuitivo, con una buena función habilidad diseñada.
Uno de los principales argumentos para utilizar Javascript es justo por la accesibilidad que este en algunas ocasiones puede llegar a brindar, sino en realidad deberías pensar si es necesario utilizarlo.
Recomendaciones: Javascript 1
Hay que asegurarse que el código Javascript este balanceado con su entorno
Los estándares web son como una silla de tres piernas, o sin metáforas, un trió de tecnología que deben convivir juntos en armonía. (X)HTML añade la estructura y la semántica a tu contenido, CSS es responsable de su presentación y DOM provee una interface para añadir acciones.
Debes mantener tu website flexible, fácil de entender, mantener, re-estilizar y updetear.
Recomendaciones varias
Hay que eliminar el llamado de acciones en las líneas de código donde no corresponde.
Cuando adjuntas una acción al load de la pagina debes hacer que trabajen ciertas cosas.
Primero, vas a encontrar diferencias entre como los UAs manejan los eventos.
Segundo, asegúrate de no haber sobrescrito algún manejador "onload".
Por último puedes encontrar una demora en el adjunto de tu acción.
El detalle es que la acción de "onload" se ejecuta justo después que toda la página haya sido cargada, incluyendo sus imágenes, objetos y demás.
Esto se tendrá que solucionar ocultando el contenido hasta que cargue el adjunto o con un script que levante la información sobre la marcha.
La regla es:
Todo lo que puedas hacer con (x)html, o CSS no lo vayas a hacer con Javascript (ejemplo clásico : un menú hecho con html/css a punta de links y listas por un menú hecho a punta de arrays en algún script), simplemente no vale la pena, el resultado puede en algunos casos ser un tanto mejor pero como ya veremos más adelante a los buscadores simplemente no agradan de los scripts, y para colmo de males hay una tendencia en los usuarios de bloquear los scripts dado la cantidad de virus que hay.
Solamente en casos extremos donde el CSS no tenga soporte genérico en los diferentes UAs, es bueno utilizar scripts basados en DOM para suplir el CSS.
A la velocidad que está avanzando la tecnología de seguro en poco tiempo ya se tendrán nuevos estándares para manejar en los nuevos UAs sobre los scripts basados en DOM y CC2.1, CCS3.
Los estándares web son como una silla de tres piernas, o sin metáforas, un trió de tecnología que deben convivir juntos en armonía. (X)HTML añade la estructura y la semántica a tu contenido, CSS es responsable de su presentación y DOM provee una interface para añadir acciones.
Debes mantener tu website flexible, fácil de entender, mantener, re-estilizar y updetear.
Recomendaciones varias
Hay que eliminar el llamado de acciones en las líneas de código donde no corresponde.
Cuando adjuntas una acción al load de la pagina debes hacer que trabajen ciertas cosas.
Primero, vas a encontrar diferencias entre como los UAs manejan los eventos.
Segundo, asegúrate de no haber sobrescrito algún manejador "onload".
Por último puedes encontrar una demora en el adjunto de tu acción.
El detalle es que la acción de "onload" se ejecuta justo después que toda la página haya sido cargada, incluyendo sus imágenes, objetos y demás.
Esto se tendrá que solucionar ocultando el contenido hasta que cargue el adjunto o con un script que levante la información sobre la marcha.
La regla es:
Todo lo que puedas hacer con (x)html, o CSS no lo vayas a hacer con Javascript (ejemplo clásico : un menú hecho con html/css a punta de links y listas por un menú hecho a punta de arrays en algún script), simplemente no vale la pena, el resultado puede en algunos casos ser un tanto mejor pero como ya veremos más adelante a los buscadores simplemente no agradan de los scripts, y para colmo de males hay una tendencia en los usuarios de bloquear los scripts dado la cantidad de virus que hay.
Solamente en casos extremos donde el CSS no tenga soporte genérico en los diferentes UAs, es bueno utilizar scripts basados en DOM para suplir el CSS.
A la velocidad que está avanzando la tecnología de seguro en poco tiempo ya se tendrán nuevos estándares para manejar en los nuevos UAs sobre los scripts basados en DOM y CC2.1, CCS3.
NASPERU abre operaciones a nivel Latinoamérica
Lima 1, Peru -- NASPERU, empresa de desarrollo web abre operaciones a partir del año 2010 a toda Latinoamérica apoyándose en Western Union para efecto de las transacciones económicas. Las operaciones que serán manejadas en primera instancia serán las de desarrollo web, optimización para buscadores, manejo de campañas publicitarias por internet y temas referentes a diseño web.
"Los negocios día a día se ponen al corriente con la tecnología, ahora las brechas entre las empresas se acortan rápidamente, en esta carrera el que tomara la ventaja es quien use el poder de la información a su beneficio, el poder de internet", comenta Omar Cisneros presidente de NASPERU.
"El reto inicial fue posicionarnos en el Peru, ya habiendo logrado esto es hora de presentar nuestros servicios a toda Latinoamérica".
Durante los últimos 5 años NASPERU ha brindado un servicio de alta calidad a todos sus clientes. Contando entre su lista a corporaciones de las más altas como organismos gubernamentales. Lo que diferencia a NASPERU de su competencia es su regla primordial: 120% de satisfacción al cliente.
Para mayor información de nuestros servicios de desarrollo web, no duden en contactarse con nosotros al email webmaster@nasperu.com o llenando el formulario de contacto en nuestra página web en http://www.nasperu.com
"Los negocios día a día se ponen al corriente con la tecnología, ahora las brechas entre las empresas se acortan rápidamente, en esta carrera el que tomara la ventaja es quien use el poder de la información a su beneficio, el poder de internet", comenta Omar Cisneros presidente de NASPERU.
"El reto inicial fue posicionarnos en el Peru, ya habiendo logrado esto es hora de presentar nuestros servicios a toda Latinoamérica".
Durante los últimos 5 años NASPERU ha brindado un servicio de alta calidad a todos sus clientes. Contando entre su lista a corporaciones de las más altas como organismos gubernamentales. Lo que diferencia a NASPERU de su competencia es su regla primordial: 120% de satisfacción al cliente.
Para mayor información de nuestros servicios de desarrollo web, no duden en contactarse con nosotros al email webmaster@nasperu.com o llenando el formulario de contacto en nuestra página web en http://www.nasperu.com
jueves, octubre 15, 2009
Buenas Practicas CSS 5-9
5) Toda nueva regla debe ser comentada.-
Como en los otros lenguajes de programación en CSS también se pueden hacer comentarios, con /* (para abrir) */ (para cerrar). Es básico comentar la hoja de estilo ya que por la cantidad de código que hay si el proyecto es grande es muy factible perder tiempo tratando de encontrar algo que se requiera
cambiar.
6) CSS Reset.-
El mejor código de reset es el de Eric Meyer’s que ha sido adoptado por un buen numero de Web Designers como un "MUST BE".
La intensión de la hoja de reseteo es la de reducir las inconsistencias de los browsers en cosas como heights, margins, font sizes, etc.
CSS RESET code:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font‐size: 100%;
vertical‐align: baseline;
background: transparent;
}
body
{
line‐height: 1;
}
ol, ul
{
list‐style: none;
}
7)Estados de los links.-
Definir los estados de los links es muy importante para poder tener la misma experiencia de navegación en todos los tipos de browsers.
a:link {color: blue;}
a:visited {color: purple;}
a:hover {color: red;}
a:active {color: yellow;}
Para mayor información sobre las pseudo clases:
http://www.westciv.com/style_master/academy/css_tutorial/selectors/p_class_selectors.html
8)No cambiar el font con pixels sino con EM .-
Un común error en el diseño web es el asignar el tamaño del font en pixels. El problema está en los UAs de Microsoft. La opción de Text size no funciona si la pagina asigna tamaños a los fonts en pixels ya que Microsoft piensa que el pixel es una medida absoluta y no debe ser cambiada., al asignar el tamaño del font a 62.5% estamos haciendo que un decimo de EM sea igual al tamaño de un pixel. Cosa que
podemos asignar los tamaños en EM pensando en pixels.
Asignacion:
body {font‐size:62.5%;}
Después de la asignación, 1 EM será equivalente a 10 pixels.
div.content { font‐size:15px } = div.content {font‐size:1.5em}
9) Limpiar los contenedores que estén con Float:
Esto es bastante bueno para cuando tienes bloques con background o borde que tengan elementos flotantes adentro.
Ejemplo:
Como en los otros lenguajes de programación en CSS también se pueden hacer comentarios, con /* (para abrir) */ (para cerrar). Es básico comentar la hoja de estilo ya que por la cantidad de código que hay si el proyecto es grande es muy factible perder tiempo tratando de encontrar algo que se requiera
cambiar.
6) CSS Reset.-
El mejor código de reset es el de Eric Meyer’s que ha sido adoptado por un buen numero de Web Designers como un "MUST BE".
La intensión de la hoja de reseteo es la de reducir las inconsistencias de los browsers en cosas como heights, margins, font sizes, etc.
CSS RESET code:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font‐size: 100%;
vertical‐align: baseline;
background: transparent;
}
body
{
line‐height: 1;
}
ol, ul
{
list‐style: none;
}
7)Estados de los links.-
Definir los estados de los links es muy importante para poder tener la misma experiencia de navegación en todos los tipos de browsers.
a:link {color: blue;}
a:visited {color: purple;}
a:hover {color: red;}
a:active {color: yellow;}
Para mayor información sobre las pseudo clases:
http://www.westciv.com/style_master/academy/css_tutorial/selectors/p_class_selectors.html
8)No cambiar el font con pixels sino con EM .-
Un común error en el diseño web es el asignar el tamaño del font en pixels. El problema está en los UAs de Microsoft. La opción de Text size no funciona si la pagina asigna tamaños a los fonts en pixels ya que Microsoft piensa que el pixel es una medida absoluta y no debe ser cambiada., al asignar el tamaño del font a 62.5% estamos haciendo que un decimo de EM sea igual al tamaño de un pixel. Cosa que
podemos asignar los tamaños en EM pensando en pixels.
Asignacion:
body {font‐size:62.5%;}
Después de la asignación, 1 EM será equivalente a 10 pixels.
div.content { font‐size:15px } = div.content {font‐size:1.5em}
9) Limpiar los contenedores que estén con Float:
Esto es bastante bueno para cuando tienes bloques con background o borde que tengan elementos flotantes adentro.
Ejemplo:
Content
Text not inside the float
Buenas Practicas CSS 1-4
Hay varias cosas que se deben hacer y que no se deben hacer en CSS. Hay que tener cuidado cuando se crean estos archivos ya que como pueden hacer que nuestros websites se vean increíbles, también pueden malograr todo en pocos segundos. Sobre todo hay que tener cuidado con los temas de compatibilidad eh integridad de código.
Aqui les van algunos consejos:
1) Hacer y probar un CSS en los más modernos browsers antes de testearlo en los antiguos.
Si comienzas a testear un website en un navegador antiguo, al terminar de crear todos los hacks paraque funcione tu código te darás cuenta que aun te falta el código para los navegadores modernos, que son estándares.Es más sencillo si de primera mano se trabaja el CSS de los navegadores modernos.
Ahora como dato hay que tener en consideración que el CSS no es igual inclusive en los navegadores modernos. Así que tendrás que hacer las pruebas pertinentes en Safari, Opera, Mozilla, Chrome eh IE.
2) No uses comillas cuando invoques URLs dentro de un archivo CSS.
Cuando cargues un file vía import, o utilices alguna imagen de background vía CSS, no utilices comillas alrededor del nombre ya que no son necesarias y aparte en Internet Explorer 5 y en las Mac no hay compatibilidad con ellas.
3) Trata de no aplicar padding, borders y fixed width a los elementos.
IE5 tiene el modelo de caja errado, lo que significa que comienza a corromper el CSS.
* BUG IE 5 HACK Boxtest
Acá un ejemplo simple de la clase "boxtest".
Tiene 20px border, 30px padding, and 300px width.
div.boxtest {
border:20px solid;
padding:30px;
background: #ffc;
width:300px;
}
El total de ancho incluyendo los bordes y el padding debería ser 400px;
20+30+300+30+20 = 400
Los UAs (ergo: User Agents , Browsers) que malinterpretan el BOX MODEL de CCS1 ponen el borde y el padding adentro del ancho especificado, lo que nos da como resultado solo 300px, y un ancho para contenido de solo 200px; Para que quede más claro, básicamente lo que pasa es que el border y el padding lo asumen como parte
del ancho total del div.boxtest, y restan ese espacio para el contenido.
300‐20‐30‐30‐20 = 200 Content
Aquí un ejemplo de un div con clase "content".
Básicamente es idéntico al div con la clase boxtest.
div.content {
border:20px solid;
padding:30px;
background: #ffc;
}
Con una importante adición: Hay una segunda regla de estilos, que toma ventaja del bug en IE5 eh IE5.5,para aplicar el ancho cuando sucede el caso de arriba.
div.content {
width:400px;
voice‐family: "\"}\"";
voice‐family:inherit;
width:300px;
}
Este div (incluyendo sus bordes) deberá ser igual de ancho que la clase boxtest en IE5 eh IE5.5
Además de esto hay que añadir inmediatamente al estilo que se encuentra en la parte superior para ayudar a los UAs que soporten CSS2 pero que tengan el mismo bug que IE5 eh IE5.5 el siguiente estilo:
html>body .content {
width:300px;
}
Para finalizar hay que tener en consideración que es probable que el siguiente estilo aplicado después del hack "\"}\"" sea ignorado por el UA, el estilo que pusimos como obligatorio después del hack solucionara el problema.
Obviamente los nombres de los estilos y los anchos/paddings/borders deben ser cambiados a los estilos que se estén manejando en la pagina.
4) Agrupa los selectores cada vez que se pueda.
Es súper importante minimizar el tiempo de carga de los archivos de la web, incluyendo la hoja de estilos, es por eso que se debe tratar de minimizar su tamaño agrupando los tags a estilar cada vez que
se pueda, ejemplo:
H1, H2, H3 { font‐family: helvetica }
‐‐‐‐‐‐‐‐‐‐‐‐‐‐
H1 {
font‐weight: bold;
font‐size: 12pt;
line‐height: 14pt;
font‐family: helvetica;
font‐variant: normal;
font‐style: normal;
}
Todas las propiedades en una línea:
H1 { font: bold 12pt/14pt helvetica }
Aqui les van algunos consejos:
1) Hacer y probar un CSS en los más modernos browsers antes de testearlo en los antiguos.
Si comienzas a testear un website en un navegador antiguo, al terminar de crear todos los hacks paraque funcione tu código te darás cuenta que aun te falta el código para los navegadores modernos, que son estándares.Es más sencillo si de primera mano se trabaja el CSS de los navegadores modernos.
Ahora como dato hay que tener en consideración que el CSS no es igual inclusive en los navegadores modernos. Así que tendrás que hacer las pruebas pertinentes en Safari, Opera, Mozilla, Chrome eh IE.
2) No uses comillas cuando invoques URLs dentro de un archivo CSS.
Cuando cargues un file vía import, o utilices alguna imagen de background vía CSS, no utilices comillas alrededor del nombre ya que no son necesarias y aparte en Internet Explorer 5 y en las Mac no hay compatibilidad con ellas.
3) Trata de no aplicar padding, borders y fixed width a los elementos.
IE5 tiene el modelo de caja errado, lo que significa que comienza a corromper el CSS.
* BUG IE 5 HACK Boxtest
Acá un ejemplo simple de la clase "boxtest".
Tiene 20px border, 30px padding, and 300px width.
div.boxtest {
border:20px solid;
padding:30px;
background: #ffc;
width:300px;
}
El total de ancho incluyendo los bordes y el padding debería ser 400px;
20+30+300+30+20 = 400
Los UAs (ergo: User Agents , Browsers) que malinterpretan el BOX MODEL de CCS1 ponen el borde y el padding adentro del ancho especificado, lo que nos da como resultado solo 300px, y un ancho para contenido de solo 200px; Para que quede más claro, básicamente lo que pasa es que el border y el padding lo asumen como parte
del ancho total del div.boxtest, y restan ese espacio para el contenido.
300‐20‐30‐30‐20 = 200 Content
Aquí un ejemplo de un div con clase "content".
Básicamente es idéntico al div con la clase boxtest.
div.content {
border:20px solid;
padding:30px;
background: #ffc;
}
Con una importante adición: Hay una segunda regla de estilos, que toma ventaja del bug en IE5 eh IE5.5,para aplicar el ancho cuando sucede el caso de arriba.
div.content {
width:400px;
voice‐family: "\"}\"";
voice‐family:inherit;
width:300px;
}
Este div (incluyendo sus bordes) deberá ser igual de ancho que la clase boxtest en IE5 eh IE5.5
Además de esto hay que añadir inmediatamente al estilo que se encuentra en la parte superior para ayudar a los UAs que soporten CSS2 pero que tengan el mismo bug que IE5 eh IE5.5 el siguiente estilo:
html>body .content {
width:300px;
}
Para finalizar hay que tener en consideración que es probable que el siguiente estilo aplicado después del hack "\"}\"" sea ignorado por el UA, el estilo que pusimos como obligatorio después del hack solucionara el problema.
Obviamente los nombres de los estilos y los anchos/paddings/borders deben ser cambiados a los estilos que se estén manejando en la pagina.
4) Agrupa los selectores cada vez que se pueda.
Es súper importante minimizar el tiempo de carga de los archivos de la web, incluyendo la hoja de estilos, es por eso que se debe tratar de minimizar su tamaño agrupando los tags a estilar cada vez que
se pueda, ejemplo:
H1, H2, H3 { font‐family: helvetica }
‐‐‐‐‐‐‐‐‐‐‐‐‐‐
H1 {
font‐weight: bold;
font‐size: 12pt;
line‐height: 14pt;
font‐family: helvetica;
font‐variant: normal;
font‐style: normal;
}
Todas las propiedades en una línea:
H1 { font: bold 12pt/14pt helvetica }
Unas VAGAciones largas...
Aparentemente mis vacaciones del ambiente de los blogs tomo mas de lo que me esperaba... han pasado 2 años, y nuevamente me han dado ganas de blogear. La buena noticia es que en estos ultimos años gracias a mi decision de volverme freelance he tenido tiempo suficiente para leer, experimentar y aprender un sin fin de cosas que espero que poder compartir con todos ustedes.
Desde hoy la tematica del blog cambiara un poco, ya no sera tan pegado a las novedades en el mundo de la tecnologia sino mas pegado a temas de programacion, optimizacion para buscadores, y ese estilo de cosas.
Asi que agarrense y preparense.
Dicho esto... Comenzemos.
Desde hoy la tematica del blog cambiara un poco, ya no sera tan pegado a las novedades en el mundo de la tecnologia sino mas pegado a temas de programacion, optimizacion para buscadores, y ese estilo de cosas.
Asi que agarrense y preparense.
Dicho esto... Comenzemos.
martes, febrero 06, 2007
Las herramientas de Google
Bueno, bueno... normalmente no nos ponemos muy técnicos en este blog dado que no es la idea principal. Pero de vez en cuando es bueno dar información sobre algunas aplicaciones que puedes hacer la vida mas sencilla a todos los Web Masters.
http://googlewebmastercentral.blogspot.com/2007/02/discover-your-links.html
Google tiene una sección dedicada a los webmasters donde a parte de publicar artículos referentes a tema de optimizing, también nos da gratuitamente todo un juego de herramientas que nos ayudaran a que revise nuestras paginas de una mejor manera. El único requerimiento para utilizar esta herramienta sobre algún website es el de colocar un código de confirmación en los meta tags de la pagina o bajar un archivo con un nombre que ellos te dan... solo para validar el hecho que es tu dominio.
Dense una vuelta, no se van a arrepentir.
miércoles, enero 31, 2007
El mundo virtual de Google
Hay un rumor que anda circulando por algunos blogs... y es que Google va a lanzar un juego o una aplicación estilo SECOND LIFE, para los que no saben a que me refiero... Second Life es un juego donde creas un avatar en un mundo virtual y te encuentra con gente... se venden cosas adentro de el, terrenos items, etc... Incluso tiene un script para la construcción de estos. Yo lo estuve probando por unas semanas, lamentablemente mi tarjeta de video no aguantaba la gran cantidad de vectores que utiliza ese juego... y se laggeaba por momentos así que decidí dejarlo hasta renovar mi tech.
En fin, parece que Google planea hacer algo similar.... Me imagino que regresara la onda VR (virtual reality) de los 90s pero con el tech actual... hmm.. Es un buen momento para comprar acciones....
lunes, enero 22, 2007
Cambiando un poco el tema...
Por fin regreso después de meses research y demás... Voy a tratar de mantener actualizado el blog desde ahora... Bueno, este post no tiene que ver mucho con tecnología del punto de vista de que siempre ha tenido el Blog, mas bien es algo mas hmmm... como decirlo... se me van las palabras al tratar de describirlo...
Me imagino que muchos de ustedes ya se encontraran en base 3 como yo, y muchos otros serán base 2 o base 4+... Hay algunas cosas que siempre unirán a estas generaciones y una de ellas es la Televisión... los programas que vimos y los que seguimos viendo. Hay pocos programas en realidad que marcaron época.
Normalmente los programas que nos marcaron, fueron los que vimos cuando pequeños... y que ya de grandes los seguimos viendo porque a pesar de haber visto los capitulos 7373 veces, siguen trayendonos buenos recuerdos de epocas donde no teniamos las preocupaciones de ahora.
Mientras surfeaba la Web en una de mis locas búsquedas... encontre este link, que me parece totalmente coherente compratirlo con ustedes... Sin lágrimas por favor.
http://www.reniet.com/chespirito/canciones.htm
Una recopilación de muestras de las canciones del Chavo del Ocho y del chapulín colorado. No están las canciones completas pero con la lista de los nombres sospecho que no será dificultad conseguirlas en algún sistema P2P o Torrent.
jueves, agosto 17, 2006
Vulnerabilidad en parche para el Explorer
Sigh *
Que típico… Microsucks sacando un parche para PARCHAR otro de sus parches… jajaja
El martes pasado (8 de Agosto), Microsoft saco un grupo de nuevos parches para su ya crappy sistema. Entre uno de ellos (MS06-042) había un parche para el Internet Explorer, básicamente relativo a asuntos de seguridad y bloqueo de ejecución de scripts remotamente. Infortunadamente este poderosísimo parche hace que el Internet Explorer (cuando solo se tiene el Pack 1, y el IE 6.0) crashee cada vez que se trata de ingresar a un website (básicamente por el protocolo http 1.1)
El gran MICROSUCKS va a relesear el “parché dú parché” –jejeje- el 22 de Agosto del presente. Por el momento se recomienda desinstalar el parche MS06-042.
Ahora claro que en realidad NO DEBERIAN USAR EL CRAP IE sino el bonito y espectacular Firefox, o el Opera. (eso a medida de consejo =P)
Suscribirse a:
Entradas (Atom)
