Si has trabajado en grandes equipos de desarrollo para un proyecto especifico, sabrás lo difícil que es hacer que todos los miembros de tu grupo programen en un estilo definido e igual para todos los archivos. De igual manera, muchos tenemos varios proyectos personales a los que aplicamos varias mañas técnicas a las que nos acostumbramos con el tiempo.
En Cristalab hemos decidido compartir con ustedes las guías y reglas de estilo y programación que usamos en nuestros proyectos internos. Muchas de estas reglas han sido basadas en las de otros proyectos gigantes como phpBB, donde siempre es necesario un estándar para manejar los aportes de muchos desarrolladores con un mismo objetivo.
Esperamos que las aprovechen y sirvan para mejorar la efectividad y productividad de sus proyectos, tanto libres o personales como profesionales.
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Por MorphX el 17 de Agosto de 2006
Y otra cosa también importante es la forma en que se nombran los archivos, símbolos y otros útiles además de su distribución en carpetas. Por ejemplo.
logo_img1
logo_img2
header_img1
header_img2
design_col_1
design_row_5
design_barra_azul
design_boton
Adéu!
¿Sugerencias?
Por Aoyama el 17 de Agosto de 2006
Por el 17 de Agosto de 2006
Siempre incluir corchetes: NO. Nuestro cerebro está acostumbrado a leer de izquierda a derecha (supongo que hablamos idiomas latinos o sajones) y resulta más sencillo que de arriba a abajo.
Tabulación: NO. Usar las funciones de sagrando con espacios, ya que el ancho de un tabulador varía de un editor a otro y de un terminal a otro (a veces los ficheros .php hace falta verlos desde un shell unix). Además a veces hace falta sangrar a una columna no divisible por el ancho del tabulador y hay que rellenar con espacios... Tabuladores + espacios no funciona muy bien a no ser que uses EMACS.
Espacios entre signos. Se propone esto:
Código :
Pero me parece bastante más legible esto:
Código :
o bien:
Código :
Saludos.
Por josepzin el 17 de Agosto de 2006
Yo por las dudas le pongo siempre los corchetes y la verdad es que ya he "cosechado" las ventajas de esto en varias ocasiones.
Anonymous :
Pero me parece bastante más legible esto:
Código :
o bien:
Código :
Saludos.
El primero me gusta pero separando el <= , el ultimo mmm no me parece que sea legible.
El uso de espacios en blancos casi siempre es util, para ofrecer una mejor lectura, por ejemplo: en los parametros de las funciones, ya sea en la definición o a pasarselo:
Código :
function unaFuncion ( $param ) { //code } unaFuncion ( "parametro" );eso ofrece una mejor lectura que
Código :
function unaFuncion($param) { // code } unaFuncion ( "parametro" );Con respecto a la organizacion de archivos, mi "estilo" es algo asi:
Código :
template1 y template2, en ese caso son necesaria para el funcionamiento de la clase ClassName1, pero por organizacion coloco las plantillas en donde estan las demas, note que el nombre de los directorios separo las palabras con "-" y no uso la misma regla para los identificadores de clases y/o funciones que las separo con la primera letra en mayuscula (convencion de Macromedia). Es una idea solamente
Anonymous :
La gente desacredita el TAB porque muchos lo hacen sin estar seguros de porque. El TAB permite que sin importar como codifiques, puedas, en tu editor elegido, ver la identación como se te de la gana. A 4 espacios, a uno solo, no importa, tu decides.
Además, en CSS, una hoja de estilo para documentos, el archivo se descarga. Es más rapido descargar un caracter TAB que 4 espacios.
A la final es tu gusto personal, pero es que esta guía no es para enseñarte a programar mejor, es para trabajar de manera consecuente y ordenada en grandes equipos de desarrollo.
Por Shorel el 17 de Agosto de 2006
Con un buen editor no presentan ningun problema y si tienen varias ventajas. Usuarios que prefieren usar una indentacion de dos espacios pueden trabajar junto con los prefieren usar indentacion de cuatro espacios sin modificar el archivo en absoluto.
Consiganse un buen editor, programable, y aprendan a usar tabs en PHP y similares.
Por cierto, en Lisp es mejor usar espacios debido a que la indentación es variable, y los críticos originales de los tabs han sido, como pueden imaginarse, usuarios de Lisp. Y de emacs. Si usan un lenguaje de esta familia, no usen tabs, usen espacios.
Pero esta decisión no se puede tomar sin tener en cuenta el lenguaje.
Por Coyr el 17 de Agosto de 2006
A veces en los proyectos el retrado se da debido a que falta este tipo de planificación. No tengo discusión en el de CSS salvo que se justifique realizar esos @import (que ya habia chismoseado en este sitio
A la orden del día para realizar trabajos a futuro y con responsabilidad, todos sabemos que cada uno implementa su "ortografía" para menejar el código lo más valioso de esta guía es que muestra que para trabajar en equipo primero tenemos que ponernos "deacuerdo", para trabajar de una forma bien coherente. A final de cuentas cada uno o grupo de trabajo puede desarrollar sus propios lineamientos para trabajar de una manera organizada y coherente.
Por rocker el 17 de Agosto de 2006
si es un un editor por ejemplo dreamweaver en algunas ocasiones no necestias entrar a editar el codigo (php por ejemplo...)ya que el programa crea las lineas de codigo por lo tanto no es necesario preocuparase por el orden de la programacion...
aunque no estaria mal que ordenara el codigo o las lineas de programacion asi como lo hace flash al programar as.
Por el 18 de Agosto de 2006
Freddie® :
Anonymous :
La gente desacredita el TAB porque muchos lo hacen sin estar seguros de porque. El TAB permite que sin importar como codifiques, puedas, en tu editor elegido, ver la identación como se te de la gana. A 4 espacios, a uno solo, no importa, tu decides.
Además, en CSS, una hoja de estilo para documentos, el archivo se descarga. Es más rapido descargar un caracter TAB que 4 espacios.
A la final es tu gusto personal, pero es que esta guía no es para enseñarte a programar mejor, es para trabajar de manera consecuente y ordenada en grandes equipos de desarrollo.
Lo de non-modifier meme host... No entiendo si me estás insultando o no, porque no domino el argot de la Web 2.0 aunque llevo en esto desde los modems de 1200 bps. Cosas de la edad.
Bueno, no critico la tabulación sin saber por qué. Yo recomiendo usar espacios porque es más compatible, y subir a la web una copia del CSS compactada para que ocupe menos. La tabulación es una técnica arcaica que se usaba en las máquinas de escribir para alinear columnas y con los micros de hoy día creo que se puede prescindir de este "concepto".
Mis comentarios no pretenden desacreditar los buenos consejos de tu artículo. Saludos.
Por josepzin el 18 de Agosto de 2006
Dani.Shorel :
Otro tema que no se ha tocado, es el tema del uso de editores, es muy bueno que para un proyecto se use el mismo editor o al menos un parecido, eso con la razon de evitar los problemas de retornos de carro[Windows & Linux things], otro "problema" es que hay funcionalidades propios de un editor que uno puede sacarle provecho que no consigue en otro editor.
saludos
Por josepzin el 22 de Agosto de 2006
En principio me surgió una duda:
- Se supone que tenemos fuentes.css, colors.css y forms.css
Aparentemente en forms.css van las definiciones de formularios y elementos de interaccion... donde iria la etiqueta a:link y demases ???
Porque tiene definiciones de texto, de color e interaccion...
Mi logica me dice que iría todo a forms.css.
Si? no?
Cosas como
Código :
a:link { text-decoration: none; }Iría en fuentes.cssen cambio, algo como
Código :
a:link { color: #FF0567; }Iría en color.cssPor josepzin el 23 de Agosto de 2006
Entonces forms.css llevaría solo los elementos relacionados con los FORMularios. logico.
Y por ejemplo "display: block" donde va? Supongo que va en layout.css, pero no lo veo claro.
saludos
Por Josepzin el 24 de Agosto de 2006
Me imagino que "todo" es: layers, forms, colors y fuentes
Por josepzin el 26 de Agosto de 2006
Por cristal el 20 de Febrero de 2007
saben los apresio y quiero mucho gracias por los articulos
Por leo el 05 de Septiembre de 2008
mi correo es [email protected]
porfas
Por cmykrgb el 23 de Abril de 2009
-Me gustaría poner un search en el blog
-Poder poner la imagen del logo del blog con link al blog
- y hacer los post sensibles cuando pase el mouse que varíen de color... como en este blog http://blog.kingsinc.co.uk/
que tiene la misma plantilla.
que código debo meter? y donde? index.php /header.php/style.css
donde puedo editar el código de todo esto o que código debo escribir???
también tengo el loading hecho pero nose ni que código ni donde ponerlo, index.php?
Muchas gracias por todo
Por xfkdfg el 29 de Mayo de 2010
Por Cesar el 01 de Marzo de 2011
Salu2