Foros del Web » Creando para Internet » CSS » Competencias CSS »

Competencia: Desafío en CSS + XHTML

Estas en el tema de Competencia: Desafío en CSS + XHTML en el foro de Competencias CSS en Foros del Web. Desde que comenzaron las navidades dediqué un poco más de tiempo a estudiar CSS y XHTML. Y debo confesar muchachos (as) que ustedes cuentan con ...

  #1 (permalink)  
Antiguo 08/01/2006, 13:05
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.027
Antigüedad: 19 años, 9 meses
Puntos: 832
Competencia: Desafío en CSS + XHTML

Desde que comenzaron las navidades dediqué un poco más de tiempo a estudiar CSS y XHTML. Y debo confesar muchachos (as) que ustedes cuentan con mi admiración. Sujetarse a los estándares y al mismo tiempo querer hacer un buen diseño o aplicar algún script no es tarea fácil. Estuve probando editores web y al final estoy trabajando con la combinación de Dreamweaver y NVU que es open source (Excelente aplicación).

Se me ocurrió entonces proponerle que hiciéramos un pequeño concurso. Aún no tengo muy clara la idea, pero se trata de hacer una página web que demuestra un buen uso tanto de CSS como de XHTML Transicional.

El asunto va por este camino: Quienes vayamos a participar nos inscribimos y tenemos un tiempo o plazo para diseñar una web (Ni idea de cuánto sería ese tiempo). Luego nos dedicamos a desarrollar el proyecto teniendo en cuenta un factor primordial, el cual no es otro que hacer una página con 0 errores en la validación de W3C. Se votará entonces por la web que cumpla con ese requisito y además que tenga el mejor diseño.

Tenía la duda de si postear el tema aquí o en el foro de XHTML, pero luego pensé que los eventuales diseños serían basados en hoja de estilos, por lo cual decidí escribirlo por estos rincones. De todas formas (Si hacemos la competencia) es posible que los panas de XHTML nos den una visita. Creo que los moderadores y colaboradores de este foro serían los mejores jueces, pero es sólo una propuesta.

Sé que me faltaron muchos puntos por cubrir, pero en general no lo veo mal sino todo lo contrario; algunos tendremos la oportunidad de aprender de quienes más saben del tema. Si ustedes dicen que , ya saben que estoy 100% anotado para competir. ¿Qué les parece la propuesta?.

Saludos.
  #2 (permalink)  
Antiguo 08/01/2006, 21:37
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 19 años, 10 meses
Puntos: 2
Te recomiendo usar editores de texto, los WYSIWYG suelen meter mucho código basura...

en cuanto al concurso está muy bien, pero si piensas seguir la mecánica que ZenGarden, pues ya tenemos a camaleoncss.com.
  #3 (permalink)  
Antiguo 09/01/2006, 04:28
Avatar de kazafun  
Fecha de Ingreso: diciembre-2003
Ubicación: Elda
Mensajes: 843
Antigüedad: 20 años, 3 meses
Puntos: 13
Camaleoncss esta parado o abandonado, que pena...
  #4 (permalink)  
Antiguo 09/01/2006, 09:32
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 19 años, 10 meses
Puntos: 2
Manoloweb tiene mucho trabajo, hace poco se mudó a Cancún y pues he tenido pocas noticias de él, pero el proyecto sigue...
  #5 (permalink)  
Antiguo 09/01/2006, 11:05
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.027
Antigüedad: 19 años, 9 meses
Puntos: 832
Cita:
Iniciado por jesusbet
Te recomiendo usar editores de texto, los WYSIWYG suelen meter mucho código basura...
Hay editores con los cuales se puede trabajar limpiamente. El que coloqué en el link es muy bueno.

Cita:
Iniciado por jesusbet
en cuanto al concurso está muy bien, pero si piensas seguir la mecánica que ZenGarden, pues ya tenemos a camaleoncss.com.
No. Las páginas de Zen Garden Genera avisos de W3C. La idea es que cuando se examine la página no salga esto:



Sino esto:



Además de que el reto es utilizar equilibradamente el HTML y el CSS. Eso quiere decir: no generar tags innecesarios de un lado u otro. Bueno es sólo lo que personalmente he imaginado para el desafío. Por supuesto se aceptan correcciones.

Saludos.

PD: Edito el título del tema por uno más apropiado.
  #6 (permalink)  
Antiguo 09/01/2006, 11:23
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 18 años, 11 meses
Puntos: 0
Cita:
Iniciado por metacortex
No. Las páginas de Zen Garden Genera avisos de W3C. La idea es que cuando se examine la página no salga esto:



Sino esto:



Además de que el reto es utilizar equilibradamente el HTML y el CSS. Eso quiere decir: no generar tags innecesarios de un lado u otro. Bueno es sólo lo que personalmente he imaginado para el desafío. Por supuesto se aceptan correcciones.

Saludos.

PD: Edito el título del tema por uno más apropiado.
ehm.. a mi las paginas de zengarden (en su mayoria) no me botan errores, y no crees que tu desafio seria mejor si pusieras un diseño y la idea seria maquetarlo de modo estandar, parecido al concurso que hizo Cristalab hace un tiempo.
Saludos
  #7 (permalink)  
Antiguo 09/01/2006, 12:04
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.027
Antigüedad: 19 años, 9 meses
Puntos: 832
Cita:
Iniciado por RoQ
ehm.. a mi las paginas de zengarden (en su mayoria) no me botan errores
Hola RoQ. Nunca dije errores sino avisos. Por ejemplo la pagina principal de csszengarden genera 6 avisos, aunque está validada como xhtml estricta:

lÃ*nea 136 columna 21 - Aviso: trimming empty <span>
lÃ*nea 136 columna 60 - Aviso: trimming empty <span>
lÃ*nea 136 columna 99 - Aviso: trimming empty <span>
lÃ*nea 137 columna 21 - Aviso: trimming empty <span>
lÃ*nea 137 columna 60 - Aviso: trimming empty <span>
lÃ*nea 137 columna 99 - Aviso: trimming empty <span>

Aquí está la captura del código fuente.

Bueno, quizás esa medida sea muy severa para nosotros jejeje, a lo mejor como dices sólo sería necesario pasar la prueba de validación y listo; pero les digo que es posible hacer un código 100% limpio como el de maxdesign.com. No obstante, eso sólo sería una parte de la evaluación final de la página concursante.

Cita:
Iniciado por RoQ
y no crees que tu desafio seria mejor si pusieras un diseño y la idea seria maquetarlo de modo estandar, parecido al concurso que hizo Cristalab hace un tiempo.
Saludos
Según veo querían el rediseño del header, pero no está mal la idea de usar una diseño ya hecho para librarnos del tormento del diseño jejejej. Además todo sería más rápido así porque trabajaríamos sobre una imagen. Buena esa .
  #8 (permalink)  
Antiguo 09/01/2006, 12:06
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 18 años, 5 meses
Puntos: 1
Hola a todos.

Un par de apuntes.

Lo transicional es tecnología a punto de caducar.
Que sea xhtml estricto.


Hay algo que sí que tendría que ser como en zengarden:
Los contenidos debería aportarlos la organización.
  #9 (permalink)  
Antiguo 09/01/2006, 12:31
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.027
Antigüedad: 19 años, 9 meses
Puntos: 832
Cita:
Iniciado por Jorolo
Hola a todos.

Un par de apuntes.

Lo transicional es tecnología a punto de caducar.
Que sea xhtml estricto.
Estoy de acuerdo contigo. Nada de código que no sea el estricto

Cita:
Iniciado por Jorolo
Hay algo que sí que tendría que ser como en zengarden:
Los contenidos debería aportarlos la organización.
También me gusta la idea.

Adicionalmente quisiera proponer desechar todo formato propietario como Gif y Flash.
  #10 (permalink)  
Antiguo 09/01/2006, 12:43
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 18 años, 11 meses
Puntos: 0
Cita:
Iniciado por metacortex
Hola RoQ. Nunca dije errores sino avisos. Por ejemplo la pagina principal de csszengarden genera 6 avisos, aunque está validada como xhtml estricta:

lÃ*nea 136 columna 21 - Aviso: trimming empty <span>
lÃ*nea 136 columna 60 - Aviso: trimming empty <span>
lÃ*nea 136 columna 99 - Aviso: trimming empty <span>
lÃ*nea 137 columna 21 - Aviso: trimming empty <span>
lÃ*nea 137 columna 60 - Aviso: trimming empty <span>
lÃ*nea 137 columna 99 - Aviso: trimming empty <span>

Aquí está la captura del código fuente.
La verdad es que no entiendo a que se refiere esa advertencia, revise el codigo y es algo asi:
Código HTML:
<p><span>Texto del parrafo</span></p> 
No le veo nada de malo, el span esta ahi solo para aumentar las posibilidades del diseño, debido a que en esa pagina solo puedes cambiar el CSS
Cita:
Iniciado por metacortex
Según veo querían el rediseño del header, pero no está mal la idea de usar una diseño ya hecho para librarnos del tormento del diseño jejejej. Además todo sería más rápido así porque trabajaríamos sobre una imagen. Buena esa .
Asi es, el header antiguo de Cristalab estaba enteramente hecho en flash , el concurso demostro que no era necesario el flash y ahora tiene el mismo header solo que hecho con XHTML y CSS.

Última edición por RoQ; 09/01/2006 a las 12:49
  #11 (permalink)  
Antiguo 09/01/2006, 13:06
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.027
Antigüedad: 19 años, 9 meses
Puntos: 832
El aviso se refiere a esto, los span vacíos:

Código HTML:
<div id="extraDiv1"><span></span></div><div id="extraDiv2"><span></span></div><div id="extraDiv3"><span></span></div>
<div id="extraDiv4"><span></span></div><div id="extraDiv5"><span></span></div><div id="extraDiv6"><span></span></div> 
Técnicamente no es un error de página en sí, pero genera un aviso (¿Qué función cumplen esos tags ahí?).
  #12 (permalink)  
Antiguo 09/01/2006, 13:09
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 19 años, 10 meses
Puntos: 2
De hecho es un error fatal. Pasa lo mismo que con los WYSIWYG, se supone que uno cambia a CSS para dejar aquellas tablas que confundían más el código... pero desgraciadamente aún existen personas que no entienden la escencia de la estandarización y cometen errores como esos...
  #13 (permalink)  
Antiguo 09/01/2006, 13:44
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 18 años, 11 meses
Puntos: 0
Cita:
Iniciado por metacortex
El aviso se refiere a esto, los span vacíos:

Código HTML:
<div id="extraDiv1"><span></span></div><div id="extraDiv2"><span></span></div><div id="extraDiv3"><span></span></div>
<div id="extraDiv4"><span></span></div><div id="extraDiv5"><span></span></div><div id="extraDiv6"><span></span></div> 
Técnicamente no es un error de página en sí, pero genera un aviso (¿Qué función cumplen esos tags ahí?).
pues ahi esta explicado
Código HTML:
<!-- These extra divs/spans may be used as catch-alls to add extra imagery. --> 
Como uno no puede modificar el html en csszengarden, la palntilla contiene etiquetas hasta por gusto para poder hacer lo que quiera con CSS.
En el caso del desafio que propones uno podria modificar tanto el XHTML y el CSS y no habria que caer en eso.
  #14 (permalink)  
Antiguo 09/01/2006, 20:03
Avatar de CORE
Usuario no validado
 
Fecha de Ingreso: abril-2002
Ubicación: Merida
Mensajes: 2.165
Antigüedad: 21 años, 11 meses
Puntos: 3
0 errores esta cañon a lo mejor logramos programar algo que no contenga errores pero no podra visulizarse correctamente con todos los navegadores asi que yo preferiria la accesiblidad que la aprovacion de la w3c :S

Cuenten conmigo
saludos
  #15 (permalink)  
Antiguo 09/01/2006, 20:08
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 19 años, 10 meses
Puntos: 2
ojalá tu concepción de la vida no sea tan pesimista!
  #16 (permalink)  
Antiguo 09/01/2006, 20:45
Avatar de CORE
Usuario no validado
 
Fecha de Ingreso: abril-2002
Ubicación: Merida
Mensajes: 2.165
Antigüedad: 21 años, 11 meses
Puntos: 3
si crees que la accesiblidad solo tiene que ver con firefox opera y explorer, te invito a testear mas tus css con mas navegadores ... cssdoka

saludos

Última edición por CORE; 09/01/2006 a las 20:52
  #17 (permalink)  
Antiguo 10/01/2006, 03:55
Avatar de kazafun  
Fecha de Ingreso: diciembre-2003
Ubicación: Elda
Mensajes: 843
Antigüedad: 20 años, 3 meses
Puntos: 13
Bueno metacortex, si llevas a cabo el proyecto yo me apunto ( si el trabajo me lo permite, que de momento es que si )

Un saludo.
  #18 (permalink)  
Antiguo 10/01/2006, 12:58
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.027
Antigüedad: 19 años, 9 meses
Puntos: 832
Cita:
Iniciado por RoQ
pues ahi esta explicado
Código HTML:
<!-- These extra divs/spans may be used as catch-alls to add extra imagery. --> 
Como uno no puede modificar el html en csszengarden, la palntilla contiene etiquetas hasta por gusto para poder hacer lo que quiera con CSS.
En el caso del desafio que propones uno podria modificar tanto el XHTML y el CSS y no habria que caer en eso.
Gracias RoQ siempre con una buena respuesta a mano; se me escapó esa nota del código fuente.

Ahora bien, de lo discutido he podido extraer lo que pudiesen ser las reglas del juego, el cual consistirá en:
  • Hacer una web original y monopágina dentro de un tiempo previsto.

  • Se trabajará con CSS y HTML, utilizando ambos lenguajes equilibradamente, es decir, no se empleará HTML para trabajos que se puedan ejecutar con CSS y viceversa.

  • En el área de HTML, sólo se usará código XHTML estricto, por lo cual la página deberá pasar la validación correspondiente (Jorolo).

  • No se utilizarán formatos de archivos propietarios, tales como Gif y SWF.

  • Los jueces nos proporcionarán el texto con el cual vamos a trabajar. Dicho texto será utilizado en su totalidad para elaborar nuestra página (RoQ).

  • El diseño será libre.

  • La página además deberá presentar el mayor grado posible de accesibilidad (CORE).

Si encuentran algo que arreglar o modificar no hay problema. También quiero proponer que los competidores tengamos la libertad de elegir trabajar solos o formar clanes. Lo importante es avisarlo antes y anotarse previamente para que no se formen grupos luego de iniciada la competencia. Los clanes deben estar 100% compuestos por usuarios de Foros del Web.

Aquí hay algunos aspectos que se evaluarán:
  • Aprobación de la validación W3C (Strict).

  • Accesibilidad (Incluye peso del conjunto de archivos).

  • Diseño.

  • Mejor uso de CSS y HTML.

Si le falta o sobra algo favor avisar para que empecemos lo antes posible. Los que se quieran ir anotando pueden ir comenzando desde ya. Hasta el momento la lista de anotados es:

- Kazafun.

- Metacortex.


Pueden participar todos los usuarios del foro, sin discriminación de posts, antigüedad o nivel de conocimiento; el fin es aprender y divertirnos un buen rato.

Saludos.
  #19 (permalink)  
Antiguo 10/01/2006, 13:23
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 18 años, 11 meses
Puntos: 0
aunque no soy bueno diseñando me apunto

aun creo que seria bueno trabajar sobre un diseño hecho, pero si todos consideran que cada uno debe diseñar su web por mi esta bien.
  #20 (permalink)  
Antiguo 10/01/2006, 13:40
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.027
Antigüedad: 19 años, 9 meses
Puntos: 832
Venga esa mano . Entonces tenemos en la lista:

- RoQ.
- Kazafun.
- Metacortex.
  #21 (permalink)  
Antiguo 10/01/2006, 14:04
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.672
Antigüedad: 22 años, 3 meses
Puntos: 16
orale, yo baje esa extencion del FF solo para ver si mi pagina pasaba y si...0 avisos , claro, esta en transicional 4.01
  #22 (permalink)  
Antiguo 10/01/2006, 14:09
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 19 años, 10 meses
Puntos: 2
Cita:
orale, yo baje esa extencion del FF solo para ver si mi pagina pasaba y si...0 avisos , claro, esta en transicional 4.01


seh, yo también participo en el juego...
  #23 (permalink)  
Antiguo 10/01/2006, 14:26
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 18 años, 5 meses
Puntos: 1
Me apunto pero...

Hola a todos.

Estoy encantado con la inclusión de la accesibilidad, ahora que sé que no ganaré, puedo relajarme y divertirme. Me apunto.

Quedan varios puntos importantes por definir.

Por ejemplo:

¿En que navegador/es se visualizará el código?
¡Tema crucial!


MI OPINION

Estoy radicalmente en contra de que se valoren criterios como 'compatibilidad con navegadores antiguos'.
Iría contra en espíritu del Desafio.


Pregunta
Tengo un archivo.loquesea ¿que programa debería usar para visualizar su contenido?

Respuesta
Deberías usar un prograna capaz de visualizar el contenido del archivo de la forma mas fideligna posible.

Reacción
¡Es que hay programas que no son capaces de hacerlo! (o no quieren)

Conclusión
Pues no los uses.
  #24 (permalink)  
Antiguo 10/01/2006, 14:30
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 19 años, 10 meses
Puntos: 2
no entendí tu soliloquio O.o
  #25 (permalink)  
Antiguo 10/01/2006, 14:34
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.027
Antigüedad: 19 años, 9 meses
Puntos: 832
Anotados:

- Jorolo.
- Jesusbet.
- RoQ.
- Kazafun.
- Metacortex.
  #26 (permalink)  
Antiguo 10/01/2006, 14:41
Avatar de CORE
Usuario no validado
 
Fecha de Ingreso: abril-2002
Ubicación: Merida
Mensajes: 2.165
Antigüedad: 21 años, 11 meses
Puntos: 3
yu tambien me apunto
  #27 (permalink)  
Antiguo 10/01/2006, 14:50
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.027
Antigüedad: 19 años, 9 meses
Puntos: 832
Con respecto a tus dudas Jorolo no te entendí muy bien, pero jugaremos 100% sujetos a los estándares W3. Además debemos tomar en cuenta la accesibilidad. Esto nos deja 2 opciones que tendremos que definir ahora:

1) Si Opera, IE o Safari no aceptan algún estándar, desecharemos dichos códigos o formatos a favor de que la página sea más accesible para la mayoría de los navegadores (Aún así no se usará código propietario bajo ninguna circunstancia).

2) Si Opera, IE o Safari no aceptan algún estándar, pues mala suerte para los navegadores; aprovecharemos todo el estandar disponible.

Supongo que si se va a evaluar la accesibilidad, la primera opción es la mejor. Yo personalmente preferiría la segunda por razones ideológicas, pero la palabra final la tenemos todos.

Saludos.
  #28 (permalink)  
Antiguo 10/01/2006, 14:51
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.027
Antigüedad: 19 años, 9 meses
Puntos: 832
Anotados:

- CORE
- Jorolo.
- Jesusbet.
- RoQ.
- Kazafun.
- Metacortex.


Si alguien se anota actualicen la lista para tenerla fresca.
  #29 (permalink)  
Antiguo 10/01/2006, 14:52
Avatar de Seppo  
Fecha de Ingreso: marzo-2005
Ubicación: Buenos Aires, Argentina
Mensajes: 1.284
Antigüedad: 19 años
Puntos: 17
ahahhahaha
Mis diseños se caracterizan por ser un verdadero asco, pero es lindo el desafío...

Anotados:

- Jorolo.
- Jesusbet.
- RoQ.
- Kazafun.
- Metacortex.
- Core.
- Seppo.
  #30 (permalink)  
Antiguo 10/01/2006, 15:05
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 18 años, 5 meses
Puntos: 1
Hola a todos, hola jesusbet.

Cita:
Iniciado por jesusbet
no entendí tu soliloquio O.o
Sí, lo siento, la literatura no es lo mío, pero insisto.

En otras palabras:
¿Qué pasa si diseño una página realmente alucinante que solo funcione en Opera por que Opera es el unico que soporta ciertas propiedades css?
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 00:35.