Mi primer trabajo en CSS + XHTML 1.0
9 seguidores
Hola gentes, pues como bien dice el asunto me ha salido el primer curro grande de css + xhtml 1.0 y la verdad ando un poco perdido a la hora de enfocar el proyecto y empezar más que nada. Ya tengo los diseños de las plantillas en psd y todo, entonces es para escuchar alguna sugerencia/consejo de como afrontar esto.
un saludo y muchas gracias
decadente
Hola DEMSSITE,
si es tu primer trabajo con estilos te diria que plantearas una plantilla muy basica (cabecera, menu, cuerpo, pie) y que poco a poco le fueras introduciendo los div unos dentro de otros y creando los estilos.
Yo al principio pongo los div con bordes o bien con colores para tener claro lo que abarca cada uno y una vez que empiezas a anidar para ver que están metidos donde realmente quieres.
Parece una tonteria pero a mi me ha ayudado bastante.
Tambien intenta comentar todas las partes del código y seguir una misma nomenclatura para los nombres, asi tendras todo mucho mas organizado.
Tambien te dirias que lo hagas picando el código, se aprende mucho mas.
suerte !!!
demssite
gracias decadente, no es mi primer proyecto css sino mi primer "gran" proyecto css+xhtml strict, entonces el tema es un poco más en cuanto a como conoceptualizar a la hora de empezar, bloques,....
orange
demssite
Hola gentes, pues como bien dice el asunto me ha salido el primer curro grande de css + xhtml 1.0 y la verdad ando un poco perdido a la hora de enfocar el proyecto y empezar más que nada. Ya tengo los diseños de las plantillas en psd y todo, entonces es para escuchar alguna sugerencia/consejo de como afrontar esto.
un saludo y muchas gracias
Si tienes requerimientos de accesibilidad primero empóllate las pautas del nivel que te pidan, ya que te van a condicionar el HTML. Si tienes dudas en alguna pregunta por aqui.
Y si no hay requerimientos en ese sentido trabaja como lo hagas habitualmente, diseña la web por módulos, planteate unos navegadores objetivos (por el soporte CSS) y a programar.
Si hay implicación fuerte de backend en el proyecto piensa también en simplificarles la vida, siempre ayuda
;)
demssite
<fieldset>Y si no hay requerimientos en ese sentido trabaja como lo hagas habitualmente, diseña la web por módulos, planteate unos navegadores objetivos (por el soporte CSS) y a programar. </fieldset>
Requerimientos, creo que te refieres a xhtml 1.0 Strict, si que los hay, y ale he echao un ojo a las pautas. Respecto a lo de los obejetivos de browser seran ie6, ie7 y firefox. ¿Algún consejo?
<fieldset>Si hay implicación fuerte de backend en el proyecto piensa también en simplificarles la vida, siempre ayuda </fieldset>
Sí que hay fuerte implicación de backend ;-)
Un saludo Borja y gracias
p.d.
Todas las cosas que he hecho hasta ahora en html (es decir no flash) ha sido un poco en plan caos en cunato a metodología y organización, así que agradecería algún enlace a artículo en cuanto a planteamiento de un site xhtml+css.
Gracias otra vez
xaguar
Me ha resultado muy bien el comenzar escribiendo primero todo el xhtml, tener toda la estructura semánticamente lista, con las etiquetas definidas y luego meterme con el css, primero trabajando las características básicas (fondo, colocación, color, etc), luego ya aplicar los estilos finales y al final meter las florituras, adornos, imágenes y todo eso.
Si es un proyecto grande, tener un css para posicionamiento, otro para estilos y otro para hacks o efectos específicos es otra buena idea.
orange
demssite
Requerimientos, creo que te refieres a xhtml 1.0 Strict
No, me refiero a un nivel de accesibilidad: A, AA o AAA
demssite
Respecto a lo de los obejetivos de browser seran ie6, ie7 y firefox. ¿Algún consejo?
Utiliza una CSS con información limpia y todos los hacks para Explorer mételos en 2 CSSs separadas vía comentarios condicionales, una para Explorer 6 e inferiores y otra para Explorer 7
[OFFTOPIC]¿Soy el último mohicano que prueba webs en Explorer 5.x Mac y Win?[/OFFTOPIC]
<fieldset>Todas las cosas que he hecho hasta ahora en html (es decir no flash) ha sido un poco en plan caos en cunato a metodología y organización, así que agradecería algún enlace a artículo en cuanto a planteamiento de un site xhtml+css.</fieldset>
Joe, ese es el librillo del maestrillo, en estos momentos no sabría por dónde empezar
:S
xaguar
[OFFTOPIC]¿Soy el último mohicano que prueba webs en Explorer 5.x Mac y Win?[/OFFTOPIC]
No.
Pero no me dejarás mentir que en verdad es una prueba de "alta tensión" xD
:-)
Kr0n
demssite
Respecto a lo de los objetivos de browser seran ie6, ie7 y firefox.
¿Y Opera? Requiere muy poco esfuerzo adicional con respecto a FF...
orange
[OFFTOPIC]¿Soy el último mohicano que prueba webs en Explorer 5.x Mac y Win?[/OFFTOPIC]
Jejeje, tu no decías en otro hilo de abandonar Outlook 2007? :D
orange
Kr0n
<div class="quote">
demssite
<blockquote>Respecto a lo de los objetivos de browser seran ie6, ie7 y firefox.</blockquote>
</div>
¿Y Opera? Requiere muy poco esfuerzo adicional con respecto a FF...
Yo creo que si funciona en FireFox pocos problemas te dará en Opera y Safari. Aunque siempre conviene probar.
Kr0n
<div class="quote">
Orange
<blockquote>[OFFTOPIC]¿Soy el último mohicano que prueba webs en Explorer 5.x Mac y Win?[/OFFTOPIC]</blockquote>
</div>
Jejeje, tu no decías en otro hilo de abandonar Outlook 2007? :D
Nada tiene que ver lo uno con lo otro, no es lo mismo que unos navegadores antiguos soporten mal CSS avanzado que el sacar una aplicación nueva y hacerlo tan rematadamente mal (hecho incluso a conciencia diría yo).
Yo de hecho tengo en mente hasta los Netscape 4.5, les meto unos estilos básicos de colores y poco más, pero trato de que accedan por completo al contenido.
Kr0n
orange
Yo creo que si funciona en FireFox pocos problemas te dará en Opera y Safari. Aunque siempre conviene probar.
Por eso digo, pero si no te lo planteas como navegador objetivo, no lo testeas y si que hay cositas que cogidas a tiempo no son nada.
orange
Nada tiene que ver lo uno con lo otro, no es lo mismo que unos navegadores antiguos soporten mal CSS avanzado que el sacar una aplicación nueva y hacerlo tan rematadamente mal (hecho incluso a conciencia diría yo).
Yo de hecho tengo en mente hasta los Netscape 4.5, les meto unos estilos básicos de colores y poco más, pero trato de que accedan por completo al contenido.
Claro que es distinto, pero básicamente se puede reducir a "Microsoft jode la existencia de los css developers" ya sea en el pasado, ya sea en el futuro. Ya depende de si quieres tragar con el pasado y no con el futuro. En cualquier caso, es un punto de inflexión. Al final se va a reducir a lo que te pida el cliente. Yo para cosas personales ya no bajo de IE<6, suficiente tengo con el 6.
xaguar
Eso, aquí también se testea hasta en pc + explorer 5.1 y mac + explorer 5.5, opera, firefox, camino y bueh... una lista interminable.
Se hace todo por dejar lo mejor posible en todos las combinaciones.
Considero que es crítico el acceso al contenido mientras todavía haya clientes con esas posiblidades de navegación.
demssite
orange
<div class="quote">
demssite
<blockquote>Requerimientos, creo que te refieres a xhtml 1.0 Strict</blockquote>
</div>
No, me refiero a un nivel de accesibilidad: A, AA o AAA
En cuanto al nivel de accesibilidad en muchos sitios se ve que hacen una "version accesible de la web", pero es posible hacer una web con bastantes "funcionalidades" que cumpla?
Igual mi pregunta es un poco abstracta/ambigüa, lo siento pero hablo desde cierto desconocimiento en la materia.
orange
Utiliza una CSS con información limpia y todos los hacks para Explorer mételos en 2 CSSs separadas vía comentarios condicionales, una para Explorer 6 e inferiores y otra para Explorer 7
Ya mirare el enlace que me pasas, y el tema que comenta xaguar de uno para hacks (en este caso segun orange 2) otro para ¿posicionamiento? y el de estilos? algun ejemplo?
Un saludo y muuchas gracias
orange
demssite
<div class="quote">
orange
<blockquote>
<div class="quote">
demssite
<blockquote>Requerimientos, creo que te refieres a xhtml 1.0 Strict</blockquote>
</div>
No, me refiero a un nivel de accesibilidad: A, AA o AAA
</blockquote>
</div>
En cuanto al nivel de accesibilidad en muchos sitios se ve que hacen una "version accesible de la web", pero es posible hacer una web con bastantes "funcionalidades" que cumpla?
Igual mi pregunta es un poco abstracta/ambigüa, lo siento pero hablo desde cierto desconocimiento en la materia.
Lo de la "versión accesible" es un cuento chino. Si tienes que hacer un site accesible hazlo, o no lo hagas... pero lo de "versión sólo texto" es de cobardes.
Respondiendo a tu pregunta se puede meter multitud de funcionalidades, flash, javascript, ajax... y todo de manera accesible. Sólo es cuestión de conocimientos y curro. Cuéntanos que funcionalidades quieres meter y te diremos cómo hacerlas accesibles.
demssite
<div class="quote">
orange
<blockquote>
Utiliza una CSS con información limpia y todos los hacks para Explorer mételos en 2 CSSs separadas vía comentarios condicionales, una para Explorer 6 e inferiores y otra para Explorer 7</blockquote>
</div>
Ya mirare el enlace que me pasas, y el tema que comenta xaguar de uno para hacks (en este caso segun orange 2) otro para ¿posicionamiento? y el de estilos? algun ejemplo?
Yo no haría eso, yo tengo:
- Una CSS con código límpio donde meto todo.
- Una para Explorer 6 y 5.x Windows
- Una para Explorer 7
- Una para Explorer 5.2 Mac
- Una para navegadores legacy (Nets 4.5 y compañía)
- Una para impresión
- Hojas alternativas para jugar con ciertos aspecto que me puedan interesar (tamaño del web, activar/desactivar determinadas funcionalidades CSS, etc...)
Por supuesto no tienes que aplicarlas todas, en tu caso me quedaría con las 3 primeras y una de impresión si es necesario.
demssite
orange
<div class="quote">
demssite
<blockquote>
<div class="quote">
orange
<blockquote>
"demssite"
NO SOMOS COBARDESS!!! así que habrá que ponerse la pilas compi jejeje respecto a las tecnologías llevará javascript y flash, pero vamos que ya iré consultando dudas y mirando cosillas.
Una cosa más en cuanto a A, AA, o AAA por cuál me decanto es lo que no tengo aun mu claro.
Un saludo y gracias por las aclaraciones
orange
Respecto al nivel de accesibilidad a elegir creo que lo que deberías hace es empollarte los puntos, comprenderlos todos bien y decidir cuántos puedes satisfacer.
El mínimo que yo le pediría a un desarrollo basado en estándares es A, un nivel mínimo y fácil de alcanzar.
La administración pública (o cualquier proyecto financiado con fondos públicos) ya te pide AA, lo que implica varias cosas, entre ellas el uso de fuentes relativas (y hasta un diseño elástico siendo estrictos a la hora de interpretar ciertos puntos). A nivel de CSS y HTML es más complejo, piénsatelo bien antes de decir que tu proyecto lo va a ser.
El nivel 3 (AAA) ya tiene cosas bastante serias, y sobre todo ir a por ese nivel implica (al menos para mi) hacer una interpretación estricta de ciertos puntos, lo que puede complicar bastante el CSS y el diseño de la web. Además está plagado de detallitos a cuidar en el HTML. Yo no iría a por él a no ser que te lo pidieran expresamente.
Lectura imprescindible:
http://www.discapnet.es/web_accesible/wcag10/full-checklist.html
demssite
Gracias Borja, ahora me pondre a echar un ojo a los requisitos de A y AA y ver por cuál me decanto, supongo que ya me surgirá alguna dudilla.
Gracias...
hartum
y si el proyecto no requiere cumplir ninguno, has triunfao' menos dolores de cabeza que te vas a llevar.
demssite
Requiere un mínimo A, pero bueno por el tema de hacerme al AA me lo estoy planteando.
demssite
orange
Yo no haría eso, yo tengo:
- Una CSS con código límpio donde meto todo.
- Una para Explorer 6 y 5.x Windows
- Una para Explorer 7
- Una para Explorer 5.2 Mac
- Una para navegadores legacy (Nets 4.5 y compañía)
- Una para impresión
- Hojas alternativas para jugar con ciertos aspecto que me puedan interesar (tamaño del web, activar/desactivar determinadas funcionalidades CSS, etc...)
Por supuesto no tienes que aplicarlas todas, en tu caso me quedaría con las 3 primeras y una de impresión si es necesario.
Respecto a lo de las 3 hojas de estilo tengo alguna duda, eso significaría no andar usando condicionales ni hacks ¿no?, es decir una hoja de estilo limpia (Firefox p.ej.) otra compatible con IE7 y otra para IE6 e IE5.x win.
¿Estoy en lo correcto?, si es así el tema que sería ¿detectar el browser cuando se abra el site? y en función de eso tirar de una hoja de estilo o de otra ¿no?
Gracias.
Diego
orange
Es que para que cada explorer pille una hoja u otra lo que haces es enlazarlas con comentarios condicionales.
A ver, ejemplo rápido y sencillito: http://www.upm.es/canalUPM/aula/oferta_de_grado.html
demssite
Muchas gracias Borja, este ejemplo ha sido de gran utilidad ;-)
Ahora ando mirando el tema de Accesibilidad A y AA y ando bastante confundido mirando las especificaciones del enlace que me pasaste antes de http://www.discapnet.es no acabo de pillarlo mu bien, ya que no es posible validarlo no? es más una cuestión de tenrlo claro y en cuenta a la hora de desarrollar el site ¿es así?
Un saludo
Diego
orange
No sé qué no acabas de pillar ¿la interpretación o aplicación de algunas de las pautas?. Bienvenido al club
:P
En serio, lo que hay que hacer es tener claro lo que te pide cada pauta, lo que a veces es complejo y otras imposible. Algunas de las pautas están mal redactadas, son vagas o directamente subjetivas... eso cuando el enunciado no te dice una cosa y luego algún comentario interno te dice otra, en fin, una mierda.
Además hay algunas pautas que se pueden comprobar de forma automática (validadores y demás) y otras han de ser comprobadas de forma manual (es decir comprobando cada página a pelo).
En general si tienes claro lo que te piden y cómo interpretarlo puedes programar de corrido sin tener que comprobar. Ya vas sobre seguro.
De nuevo, empóllate las pautas y pregunta sobre las que tengas dudas, en general se sabe ya de lo que va cada una y cómo aplicarla (o al menos como caminar por el filo de la navaja, que es lo que se acaba haciendo casi siempre en las más controvertidas)
demssite
Hola gentes, me preguntaba si tenéis por ahí algún enlace a una web WAI-AA que pueda servir como referencia, es decir un buen ejemplo de web Doble A.
Un saludo.
Diego
orange
Pues hombre a todas las que he hecho yo se le pueden poner "peros", sobre todo porque el compromiso de los cliente con la accesibilidad suele ser más que nada un grano en el culo para ellos y se lo acaban pasando por el forro.
Así a bote pronto
http://www.portalquorum.org/quorum_inicio.html
http://www.intolerantesanonimos.org/
http://www.upm.es/canalUPM/aula/oferta_de_grado.html
De esta sólo he hecho las maquetas maestras, el interior lo rellenan ellos:
http://www.uah.es/
Esta está muy basada en un gestor de contenidos:
http://www.grupoacs.com/
Y me dejo algunas seguro, pero bueno. Ahora mismo estoy bastante a gusto con una que todavía no ha salido, para otra Universidad madrileña. Y en el tintero también tengo una para un banco, que esperemos se publique pronto.
demssite
gracias Borja, yo sigo aqui mirando las pautas, puntos y técnicas de verificación a ver si me consigo aclarar con un resumen, tengo alguna dudilla pero voy a esperar a terminar pa ver si las aclaro..... O si me pego un tiro!!! Jejejej.
Un saludo y gracias.
Diego