¿Cómo puedo escribir HTML, CSS y JavaScript para facilitar el trabajo de los desarrolladores de back-end?

Cuando obtengo un diseño de un diseñador, lo obtengo como un archivo PSD (Photoshop). Siempre espero los nombres adecuados de capa y carpeta, básicamente un PSD limpio y administrado. A partir de este diseño, desarrollo HTML, CSS y JavaScript y lo entrego a los desarrolladores de back-end. Para facilitarles la comprensión, yo

• escribir código semántico,
• mantener JavaScript y CSS en archivos externos,
• agregue comentarios útiles en archivos HTML, CSS y JS,
• usa sprites CSS (aunque a los desarrolladores no les gusta),
• usar placa de caldera HTML5,
• use jQuery para JavaScript,
• trate de usar nuevas etiquetas HTML5 y CSS3 siempre que sea posible y
• envió un archivo Zip que contiene HTML, CSS, JS e imágenes.

Espero que si se necesitan pequeños cambios en el diseño, los desarrolladores pueden manejar eso.

Me gustaría saber de los desarrolladores de back-end y otros ninjas de CSS qué más se puede hacer en términos de organización de archivos y marcado para facilitar la integración con los sistemas de back-end (es decir, tecnologías de back-end, PHP, .NET , Ruby, etc.) Diferentes clientes utilizan diferentes sistemas.

Muchas de estas respuestas van a cubrir la amplia gama de ideas, pero aquí están mis personales:

• Deje espacio en el diseño del formulario para mensajes de error.
• ¡No ponga etiquetas en los cuadros de entrada!
• Coloque su CSS y JavaScript en un archivo separado, a menos que sepa lo que está haciendo y se sienta mal por ello.
• Mantenga los elementos de diseño iguales entre las páginas. Es irritante cuando un componente de diseño (como un cuadro "visto recientemente") tiene un marcado diferente en cada página.
• No hagas lo fácil para ti, haz lo correcto. <button>Las etiquetas apestan. backround-imagepara cosas que realmente deberían ser <img>etiquetas apestan.
• Asegúrese de que si está creando un componente de página, puede escalar. Sé que la mayoría de los buenos desarrolladores front-end hacen esto, pero he tenido muchas instancias en las que alguien usó una sola imagen en lo que debería haber sido una situación de límite superior / inferior. Los programadores no les gusta abrir Photoshop.
• Revisa tus plantillas. Los programadores (buenos) son personas dedicadas y orientadas al detalle. Si comienzan a ver problemas en su diseño (tal vez la navegación del pie de página tiene errores ortográficos o faltas de ortografía inconsistentes) les hará hacer preguntas y ralentizar su trabajo.

Finalmente, y quizás lo más importante:

• Aprenda las convenciones básicas del lenguaje que se está desarrollando en el back-end. Poder mirar una plantilla PHP y comprender la sintaxis básica detrás de una foreacho una ifdeclaración y cómo formatear una echodeclaración o mover una <?php ?>etiqueta aumentará enormemente su valor como desarrollador front-end. Me encanta cuando un desarrollador front-end necesita para hacer un cambio simple y poder hacerlo en la plantilla en lugar de entregarme un nuevo zip de todos sus archivos.
• Como anexo, aprenda a usar el software de control de versiones. No necesita ser un experto, pero si puedo ver una diferencia en lugar de tener que intentar averiguar qué cambió entre dos archivos zip, hace que mi trabajo sea cien veces más fácil.

Esos son solo algunos: estoy seguro de que hay muchos más, pero si logra todo esto, seguramente se ganará el respeto y el aprecio de quien está convirtiendo sus plantillas en un sitio web.

Las cosas obvias en las que puedo pensar que facilitarían la vida de un chico de fondo son la simplicidad en el comportamiento. Al diseñar elementos de una página web que tienen varios comportamientos (roll-over, menús, etc.), todo este comportamiento debe estandarizarse de manera común para que el desarrollador no tenga que volver continuamente a algún gráfico para determinar qué función él necesita llamar para que una página se comporte.

Las cuadrículas no deberían requerir una manipulación celda por celda de datos o funcionalidad. Los elementos de bloque de páginas deben definirse fácilmente como elementos comunes para que puedan segmentarse fácilmente en el código que se encuentra detrás. Esto ayudará al desarrollador a reutilizar el código y / o facilitar la comunicación entre varias facetas de la página.

Las áreas de la página no deben cruzar límites de diseño específicos. Los elementos de un elemento no deben interferir en los elementos de otro elemento.

Sin embargo, llega un punto en el que simplemente no se puede evitar hacer que los desarrolladores salten a través de aros en llamas. Algunos elementos de la interfaz serán difíciles de construir por su propia naturaleza.

Tenga en cuenta que, a veces, debe elegir entre facilitar la modificación de una solución para un desarrollador de back-end y hacer algo optimizado.

Los sprites CSS que citó son un buen ejemplo. No entiendo cómo alguien puede crear un sitio web cuando la escalabilidad y el rendimiento son importantes y tener enlaces a 100 imágenes, 5 CSS y 15 archivos JavaScript de cada página. Por otro lado, los sprites CSS no son fáciles de mantener, y los pequeños cambios en el diseño pueden requerir mucho trabajo.

Por ejemplo, si tiene tres íconos de estado, uno debajo del otro, y debe agregar un cuarto estado, ¿agrega el cuarto ícono en la parte inferior de la imagen, por separado de los otros tres? ¿O lo agrega después del tercer icono, moviendo todo lo demás hacia abajo para tener un espacio vacío?

Lo mismo viene con la combinación y minificación de archivos CSS y JavaScript. Debe hacerlo para un sitio web de cierta escala, pero requeriría un esfuerzo adicional.

Es exactamente lo mismo para CDN. Debe usarlo para sitios web grandes, pero los cambios serían más difíciles de realizar. Por ejemplo si ha cambiado un archivo CSS, usted tiene que obligar a los navegadores para descargar el nuevo, al modificar el URI para el archivo a cdn.example.com/g.css?r=2, a continuación cdn.example.com/g.css?r=3, etc.

Además, "más fácil" es relativo . Vea, por ejemplo, las pautas para escribir código CSS: personalmente, prefiero un estilo por línea, sin espacios en blanco:

#TopMenu a{text-decoration:none;color:#fff;padding:5px 10px;float:left;}

mientras que la mayoría de la gente odiaría esta sintaxis y preferiría la que odio y me resulta difícil de leer (no, no estoy loco):

#TopMenu a
{
    text-decoration: none;
    color: #fff;
    padding: 5px 10px;
    float: left;
}

De la misma manera, usar jQuery no significa que facilitará a los desarrolladores back-end modificar sus archivos, porque algunos desarrolladores tienen más experiencia con Prototype u otros marcos.

En todos los casos, una documentación detallada es útil, si el desarrollador quiere leerla (la mayoría de ellos no). También puede facilitar la vida de un desarrollador preguntando con precisión al desarrollador específico cómo prefiere las cosas que se deben hacer, y trabajando codo con codo al principio, mientras construye un marco (por ejemplo, diseñando el flujo de trabajo para minimizar y combina los archivos).

Lo mejor de todos los mundos es cuando el diseñador no arroja un archivo zip sobre una pared y en realidad está trabajando en el proyecto como uno de los desarrolladores. Requiere un poco de sujeción para la configuración, pero es realmente increíble cuando no hay ninguna traducción entre diseño y desarrollo y todos pueden participar en las mismas iteraciones. Si tienes un buen proceso ágil sin fricción, no es demasiado difícil de lograr.

En la mayoría de los casos, me conformaría con que los diseñadores trabajaran en una versión controlada y la usaran como mecanismo de distribución. Realmente no quiero lidiar con un archivo zip grande y gordo cada vez que hay un pequeño cambio.

La flexibilidad para usted es flexibilidad para ellos típicamente. Todas esas mejores prácticas que estás siguiendo son victorias en ambos lados de la aplicación.

Sin embargo, un punto crítico y a menudo perdido es escribir una interfaz de usuario robusta. Demasiados componentes de la IU están demasiado anclados en un contexto o un conjunto de HTML demasiado exigente y tienen CSS configurado para fallar.

Si tiene un menú desplegable, por ejemplo, es mucho menos trabajo de JS anclar un componente de colocación en posición absoluta dentro de un contenedor cliqueado de conjunto relativo (no se requieren coordenadas) de lo que es sacar el martillo JQuery y obtener las coordenadas para desplazarlo sobre el elemento y solo pegarlo en su lugar. También es mucho menos probable que se rompa en los casos en que la página cambia o alguna nueva función del navegador arroja información de posicionamiento. Cuanto más confíe en las habilidades de HTML / CSS para evitar el trabajo de JS, más robusta será su interfaz de usuario.

Como regla general, trato de asegurarme de que lo único que necesitan mis componentes de la interfaz de usuario es una etiqueta HTML para vivir con una ID o clase adecuada. Cuantas más cosas pueda hacer con ese contenedor sin que la interfaz de usuario se rompa dentro o con el contenedor que realmente se acomode como expandirse / encogerse para adaptarse a medida que cambian las dimensiones del contenedor, más se puede implementar fácilmente en cualquier parte de la aplicación sin necesidad de un lado del cliente experto. Todo lo que tienen que hacer es ponerle una clase.

Prefiere la delegación de eventos en contenedores ui a asignar oyentes directamente a nodos de punto final como botones. Ese componente de la interfaz de usuario puede funcionar con HTML estático ahora, pero nunca se sabe cuándo alguien querrá poder extraer y reescribir el HTML dentro con innerHTML o algo así. Si el contenedor está intacto y se delegan todos los eventos (vea el método jquery 'on'), no tiene que preocuparse por eso y es posible que nunca aprendan de la manera difícil que reemplazar HTML rompe a los oyentes.

Con el interés de mantener la delegación como una opción, no use stopPropagate en ningún lugar que no sea un nodo de punto final y envíe correos de odio a desarrolladores de marcos idiotas que lo envían por todo el lugar.

En cuanto al diseño, mantenga el HTML mínimo, semántico y evite los contenedores div. Cuanto menos HTML haya, más fácil será diagnosticar los problemas de diseño.

Utilice nombres de clase autoexplicativos para la utilidad CSS. Es probable que una clase de "fila" sea más clara para los noobs CSS que "clearfix".

Siempre dé elementos seccionales únicos, identificaciones únicas. Hace que sea mucho más fácil identificar dónde están sucediendo cosas específicas de una sección, es más fácil anular las cosas y también puede ser una legibilidad y un rendimiento JS ganar.

Obviamente, es una mala noticia ser excesivo con un esquema de clases, pero cuanto más pueda establecer un desarrollador de back-end simplemente agregando las clases correctas a las cosas, más fácil será para ellos hacer modificaciones a la página existente.

Y, por supuesto, al comienzo del proyecto, pídales que se pongan de acuerdo en al menos una cosa: la conexión posterior y frontal solo a través de HTML y JSON. ¡No dejes que usen cosas que "escriban el JavaScript por ti!" Es un desastre sangriento y una pesadilla de mantenimiento.

Como con todas las cosas relacionadas con el desarrollo, prefiera DRY y minimalismo.

Todavía no me deja solo comentar (tan estúpido), pero como nota personal, mencionaría que trabajo todos los días con un codificador de PHP (además de ayudarlo en su trabajo) y la herramienta más fácil que hemos encontrado es para usar la caja de herramientas de Komodo y enumerar las variables "transferidas" de cada vista / controlador / modelo en la caja de herramientasx, de modo que en cualquier momento, si estoy buscando diseñar una página en torno a un conjunto de datos enviados a esa página, yo puede mirar en la caja de herramientas y ver exactamente qué datos se envían y en qué "tipo" se envían, así como viceversa en su extremo. Solo un consejo.