Como separar diseño de funcionalidad?

wakewakeup · #1 (**permalink**) 10/12/2004, 05:19

Tengo que hacer una web en asp.net del cual cuando yo termine otra empresa le pondrá un diseño. El problema es que no se como hacerlo para que la otra empresa pueda cambiar el diseño sin meterse en codigo.
Habia pensado que ellos solo modificarian los ficheros .aspx y no los .cs pero claro el aspx no es codigo html y tambien tiene etiquetas que dan funcionalidad... Ademas si utilizo controles de servidor que van en dll, estos no se pueden modificar el diseño con html puro, el diseñador ya tendria que conocer las etiquetas y atributos de ese control en concreto.
No se, estoy un poco liao. Sabeis la forma profesional de hacer esto?
gracias

wakewakeup · #2 (**permalink**) 13/12/2004, 03:03

al menos contestar para decir que pregunto una tonteria pero decir algo

lucxx · #3 (**permalink**) 13/12/2004, 10:47

Yo no lo veo complicado, la empresa en cuestión solo tiene que tocar la CSS de la web, yo personalmente realizo las páginas en XHTML 1.1, y el contenido está total y absolutamente separado de la presentación

. Si no quieres que tengan que tocar nada de la página (hombre, seguro que algun atributo "class" tendran que poner), te recomiendo:
- En primer lugar no utilizar tablas para maquetar (ya, ya se que al principio suena a locura, pero te garantizo que una vez que uno se quita las tablas de encima, hacer webs es mucho mas grato y rápido (y sobre todo mucho más correcto). En su lugar separar los diferentes bloques lógicos con etiquetas div (cada una con su id correspondiente)
- No utilizar ninguna etiqueta del tipo "font" o similares, usa strong para la negrita y em para la cursiva. Organiza jerarquicamente la información con etiquetas h1, h2, ... h6, p
- Para los menús utiliza listas desordenadas "ul" (si se generan a partir de un archivo xml o algo así, en lugar de utilizar un datalist, por ejemplo, para mostrarlos, genera el código de la lista mediante programación y en el aspx/ascx utiliza un asp:literal para pintarla
- agrupa los campos de formulario con etiquetas fieldset
- utiliza etiquetas label for="" (no los label de asp.net, sino los de html) para etiquetar los campos de formulario (ej: <label for="tx_usuario>usuario:<label><asp:textbox id="tx_usuario" runat="server" />) En el caso de que los controles a etiquetar esten en un control de usuario, para conseguir esa funcionalidad se debe poner un asp:label con el atributo associatedControlId="tx_usuario"
- ...
Como no se si esto queda claro, te dejo un link que es una magnifica demostración de separación de diseño y funcionalidad (ya se que es una página estática, pero yo aplico los mismos preceptos con paginas aspx y funciona perfectamente):
http://csszengarden.com

Para cualquier duda, aquí estamos

Salu2 ----------- XHTML - CSS YA!

wakewakeup · #4 (**permalink**) 14/12/2004, 02:46

muchas gracias por tu completa respuesta. Y el ejemplo inmejorable...
Una cosa, respecto a utilizar div en vez de tablas veo un problema por ejemplo a la hora de hacer datagrids el codigo generado por asp.net son tablas, ¿supongo que eso no importaria no?
No he utilizado nunca las etiquetas label, fieldset de las que hablas pero supongo que eso es cosa de agenciarme un manual de xhtml para familiarizarme.

Solo una cosa mas, para meter atributos tipo class o alguna otra etiqueta, el diseñador podria utilizar dreamweaver o alguna aplicacion del estilo? porque podria no tener ni idea del formato aspx...
gracias otra vez

lucxx · #5 (**permalink**) 14/12/2004, 10:44

En cuanto a lo del datagrid no hay ningun problema, no se deben utilizar tablas para maquetar, pero sí para presentar datos de forma tabular, que es para lo que sirve un datagrid.

En cuanto a lo de meter atributos tipo class, hombre, si quienes tienen que aplicar el diseño no tienen ni pájara de asp.net, pues en aquellos controles de servidor tipo datagrid ponles tú el atributo CssClass="loquesea" (no utilizar nombres del tipo "arial10px" ni cosas así, mejor algo como "pieGrid", etc) y pon en el head de las paginas algo como
<style type="text/css" media="screen">@import url (estilos/estilos.css);</style>
y en el archivo estilos.css ve recopilando aquellas clases que utilices, algo así como:

/* Clases utilizadas en los controles de servidor : En los archivos .aspx se referencian con el atributo CssClass de los controles de servidor asp.net */

.pieGrid {

/* Esta clase se utiliza en los pies de los datagrid de las páginas ... */

}
... (sin especificar ningún contenido en las clases, solo donde se utilizan)

De esta forma, si no saben como va, es su problema, no el tuyo ...

Una ultima cosa, por defecto, las páginas asp.net no validan como xhtml, ya que el código que devuelve el servidor contiene algunos atributos no válidos. Esto no es impedimento para que se pueda separar la presentación del contenido, pero si de todas formas quieres que las páginas validen como xhtml, hay varias soluciones, la que a mi me parece mejor y es la que uso (aunque afecta al rendimiento del servidor, la verdad, pero a mi me sirve ;) ) es un modulo HTTP que coge la salida que devuelve el servidor tras la petición de una página y corrige los elementos que hacen que la página no sea XHTML 1.1 válido. Además, es el más fácil de desactivar para cuando .NET produzca una salida XHTML (simplemente hay que borrar una linea del web.config)

Bueno, no se si me saldrá el jodido mensaje de que "el servidor está demasiado ocupado en estos momentos", que ultimamente no hay quien entre aquí.... tratare de postearlo de todas formas

Salu2

wakewakeup · #6 (**permalink**) 15/12/2004, 02:43

Entendido todo lo que he mas dicho muchas gracias. Ahora te comento una nueva cosa que no se si hay forma de modificar por los diseñadores sin entrar en asp.net. Por ejemplo, utilizo un control que genera graficas, el codigo aspx simplicficado sería:

<web:ChartControl id="grafica" runat="server" >
<Background Color="Brown"></Background>
</web:ChartControl>

El codigo html que genera asp.net sería algo asi como

<img src="imagen.jpg">

Como podria el diseñador cambiar ese color de fondo "brown" sin tener que saber los atributos del control y todo es eso?
Si me das tambien solucion a esto ya eres mi heroe...

lucxx · #7 (**permalink**) 15/12/2004, 10:27

Hombre, eso ya... dado que el resultado final es una imagen, no hay manera de aplicarle ningún estilo "post-generación", de todas formas, entrégales algun archivo en el que documentes estas cosas, indicándoles la ubicación del control del servidor, así como los atributos que sirven para dar estilo al mismo y los valores que admiten (simplemente los atributos que sirven para dar estilo, el resto no). Si con eso no son capaces de cambiar la apariencia...

Salu2