Date Created: 01/28/04 Last Revision: 01/28/05 Revision Number:

0
Page i






Estndares de
Codificacin WEB
Mejores Prcticas para Javascript con Jquery

Define los lineamientos para los desarrolladores
13/03/2012
2012
T&T International Group, S.A.
Calle Luis de Camoens, Edf. Centro Clover, Piso 1 Zona Industrial La Trinidad
Caracas, 1080 Venezuela Tel.: (58212)944.05.50 (master) Fax: (58212)945.05.10
Web: http://www.ttinternationalgroup.com Email: info@ttinternationalgroup.com
Fecha elaboracin: 13/03/12 ltima actualizacin: 13/03/12 N actualizacin: 0 Pgina 2 de 9




Tabla de Contenidos
1 CONTROL DE VERSIONES Y CAMBIOS ................................................................................ 3
2 INTRODUCCIN .................................................................................................................. 3
2.1 POR QU ESTNDARES WEB ......................................................................................................... 7
2.2 W3C - EL CONSORCIO WORLD WIDE WEB ..................................................................................... 3
3 BUENAS PRACTICAS CODIFICACION JAVASCRIPT CON JQUERY ....................................... 4
4 CONVENCIONES DE NOMBRE .............................................................................................. 8
4.1 LINEAMIENTOS GENERALES ......................................................................................................... 8
5 ESTILO DE CDIGO ............................................................................................................. 9
5.1 EJEMPLO ESTRUCTURA DE CODIGO VALIDO POR W3C ......................................................................... 9
6 RECURSOS.10


Fecha elaboracin: 13/03/12 ltima actualizacin: 13/03/12 N actualizacin: 0 Pgina 3 de 9




1 Control de Versiones y de Cambios
El versionamiento y los cambios producidos de este documento, as como las fechas y
responsables de los mismos, se reflejan en la siguiente tabla:

Versin Fecha Responsable Estado Cambios efectuados
1.0 13/03/12 Pedro Giacometto / Desarrollo Web Borrador Manual Estandares XHTML

2 Introduccin
Este documento define los lineamientos y sugerencias que sern utilizados por el departamento
de desarrollo web, as lograr un estilo consistente y reforzar prcticas que mitiguen errores
comunes. Se encuentra enfocado primordialmente en el desarrollo de Javascript con la
utilizacin del framework Jquery.
2.1 Por qu estndares web?
Para hacer que Internet sea un lugar mejor, tanto para los desarrolladores y los visitantes, es
importante que tanto los navegadores Web y los desarrolladores siguen los estndares Web.
Al seguir los estndares de la Web, el desarrollo se simplifica, ya que es ms fcil para un
desarrollador de entender la codificacin.
El uso de estndares Web se asegurar de que todos los navegadores mostrar el sitio web
correctamente.
Las pginas Web que se ajusta a las norma son ms fciles de indexar para los motores de
bsqueda, ms fcil de convertir a otros formatos, y ms fcil de acceder con lenguajes de
programacin (como JavaScript y el DOM).
2.2 W3C - El Consorcio World Wide Web
El W3C crea y mantiene los estndares de la Web.
La World Wide Web Consortium (W3C), fundado en 1994, es un consorcio internacional
dedicado a "guiar la Web hacia su mximo potencial", lo que hace al desarrollo de
especificaciones, directrices, software y herramientas.
Los estndares del W3C ms importantes son:
HTML
CSS
Fecha elaboracin: 13/03/12 ltima actualizacin: 13/03/12 N actualizacin: 0 Pgina 4 de 9




XML
XSL
DOM
Gua de Referencia XHTML
Estndares
El W3C Oficial Pgina de inicio




3 Buenas Prcticas codificacin javascript con
jquery

1. Aprenderse bien la librera. Para utilizar siempre la solucin ms optimizada
posible. No est de ms tener a mano una cheat sheet de jQuery o ir
directamente a la documentacion oficial de jQuery

2. Utilizar libreras consolidadas, verstiles, con soporte y con proyecto de
futuro. Por ejemplo jQuery como librera principal y jQuery Tools y jQuery UI
como libreras adicionales de efectos

3. Trabajar en archivos separados. Mejor crear JS's diferentes para cada
funcionalidad separable de nuestro site y luego utilizar algn sistema que
junte todos estos JS's en uno final (comprimido y ofuscado)

4. Javascript no intrusivo. Nunca depender de JS en la medida de lo posible. Si
est desactivado el javascript o falla, que la pagina muestre un aspecto
normal. Javascript es una mejora, no un sistema de seguridad.

5. Optimiza el cdigo haciendo pruebas de rendimiento. Con Firebug podemos
medir el tiempo que tarda una funcin (o trozo de cdigo) en ejecutarse.

6. Comprimir el cdigo al final. Al comprimir el cdigo el archivo JS que tendr que
bajarse el usuario ser de menor tamao, aunque hay que valorar el rendimiento final ya
que por el contrario el navegador tendr que realizar el proceso adicional de
Fecha elaboracin: 13/03/12 ltima actualizacin: 13/03/12 N actualizacin: 0 Pgina 5 de 9




descomprimir el cdigo antes de ejecutarlo. Para comprimir el cdigo disponemos de
herramientas, tipo YUI Compressor aunque hay muchas mas

7. El marcado semntico y accesible viene primero. No adaptar el marcado
para facilitar el JS sino que sea el JS el que se adapte al marcado. Con IDs,
herencia, y clases podemos acceder a cualquier elemento y asignarle
funcionalidades.

8. Encapsular lo mximo posible el cdigo. Esto significa agrupar todas las funciones
comunes dentro de una funcin padre, as acotamos el contexto de cada funcionalidad
(objeto si hace falta)

9. Elimina consultas innecesarias. Podemos ahorrarnos la llamada al
$(document).ready() lanzando el <script> justo antes de cerrar el tag </body> lo que
nos asegura que todos los elementos que podemos necesitar estn ya cargados en el
rbol DOM.

10. Eval is evil Evitar el uso de eval. Problemas de seguridad. Mas info de por qu puede
ser un problema aqui. Una posible alternativa al uso de EVAL puede ser JSON.parse o
JSONP

11. Checkear la disponibilidad de un objeto antes de acceder a l. Muchos de los
errores en Javascript se deben a que se intenta acceder a elementos o mtodos que no
existen en un determinado momento del periodo de ejecucin. Para solucionar esto
basta con realizar una pequea comprobacin antes de utilizar dicho elemento o mtodo
if ( $('#signup').length ) {.

12. Evita el uso de variables globales. A fin de evitar el uso de variables globales,
podemos utilizar data, un mtodo de jQuery que nos permite mantener relaciones entre
valores y elementos DOM.

13. Definir siempre las variables con VAR , incluso dentro de los FOR, de esta forma
nos aseguramos que la variable tendr el mbito que le corresponda. Si no se pone var
se toma la variable como global.

14. Usa FOR en vez de EACH. Por lo general las funciones nativas de Javascript son mas
rapidas que las derivadas de libreras

Fecha elaboracin: 13/03/12 ltima actualizacin: 13/03/12 N actualizacin: 0 Pgina 6 de 9




15. Para concatenaciones largas de cadenas, mejor JOIN() que CONCAT(). JOIN
devuelve texto y CONCAT devuelve un array

16. Return FALSE Si no devuelves FALSE en la funcin la pagina salta al top, por eso a la
hora de capturar eventos conviene devolver FALSE al final para que haga lo que nosotros
definimos y nada mas

17. Usar correctamente el tag SCRIPT. El atributo LANGUAGE est deprecado en el tag
<script>. Forma correcta <script type="text/javascript >.

18. La seleccin ms rpida es por ID. Siempre el selector ms rpido y que menos
iteraciones produce es la bsqueda por un #id, ya que simplemente lanza un
document.getElementById(), lo que al ser nativo nos asegura un tiempo de respuesta
mnimo y un mnimo consumo de proceso.

19. Usar tags delante de las clases. Al hacer seleccin de clases con jQuery, es
recomendable indicar el tag del elemento solicitado ya que al hacer internamente uso de
document.getElementsByTagName() para localizarlos acotamos previamente los
elementos en los que buscar las clases solicitadas.

20. Usar la cach de objetos. Coger el hbito de guardar una variable con el valor de un
objeto jQuery nos evita realizar una serie de comprobaciones innecesarias y que en
scripts pesados pueden suponer un aumento de rendimiento importante.

21. Aprovechar el encadenamiento. El encadenamiento pese a producir un amasijo de
cdigo que no contribuye a mejorar la lectura del cdigo hace que nuestro Javascript sea
ms ligero y puede ayudar a mejorar el rendimiento de nuestros scripts.

22. Usar subqueries siempre que se pueda. Si debemos realizar varias bsquedas sobre
un elemento es altamente recomendable realizar un uso intensivo del mtodo find() de
jQuery para realizar las bsquedas. Mejoraremos el tiempo de respuesta al evitarnos
bsquedas previas ya realizadas.

23. Limitar la manipulacin directa del DOM. La idea general es crear exactamente lo
que necesitas en memoria y luego actualizar el DOM

24. Usar JSON. Para guardar estructuras de datos o enviar/recibir estructuras de datos
va AJAX mejor JSON que XML

Fecha elaboracin: 13/03/12 ltima actualizacin: 13/03/12 N actualizacin: 0 Pgina 7 de 9






4 Glosario de Trminos
Camel Case: Palabra con la primera parte toda en minscula, y cada parte siguiente
con la primera letra en mayscula y el resto en minscula Ej. customerName.
Pascal Case: Palabra con la primera letra de cada parte que la conforma en
mayscula y el resto en minscula Ej. CustomerInfo.
5 Convenciones de nombre
La consistencia es un pilar fundamental para tener soluciones con buenas caractersticas para su
mantenimiento. De esta forma es clave al darle nombre a todos elementos involucrados en el
desarrollo de los proyectos (nombre de los proyectos, de archivos fuentes, entre otros).
5.1 Lineamientos generales
1. Siempre usar Camel Case o Pascal Case.
2. Evitar nombres que estn todos en maysculas, as cmo el uso de puras minsculas en
palabras compuestas Ej. Usar lastName, en vez de LastName.
3. No usar nombres que comienzan en un nmero.
4. Siempre utilizar nombres que sean especficos y que indiquen un significado.
5. Evitar ser poco descriptivo.
6. Evitar el uso de abreviaciones, al menos que el nombre sea excesivamente largo.
7. Evitar abreviaciones que tengan ms de 5 caracteres.
8. Las abreviaciones deben ser ampliamente conocidas y aceptadas.
9. Usar mayscula para abreviaciones de 2 letras, y pascal case para abreviaciones ms
largas.

Fecha elaboracin: 13/03/12 ltima actualizacin: 13/03/12 N actualizacin: 0 Pgina 8 de 9






6 Estilo de codigo
6.1 Ejemplo estructura de cdigo valido por W3C




Fecha elaboracin: 13/03/12 ltima actualizacin: 13/03/12 N actualizacin: 0 Pgina 9 de 9




7 Recursos

Resumen de Firebug
Depurar Javascript con Firebug - video tutorial
YSlow