PSD a HTML5 - CSS3

[iamskywalker]

Hola comunidad y staff de Forosdelweb, ¡Muchas Gracias! por el espacio.
Trabajando sobre PS y luego exportando el proyecto a XHTML, queriendo pasar todo a HTML5 - CSS3 y validarlo W3C estoy teniendo un problema, estaría muy agradecido con cualquier tipo de ayuda.

¿Qué quiero hacer? tener un HTML5+CSS3 validado por W3C, y todo lo que es parte del antiguo XHTML, por ejemplo, "Cellpadding" y "Cellspacing" que no se utilizan mas de esa manera, ahora todo es en CSS.
Cuando exportas un PSD a XHTML te genera una tabla, si borras "Cellpadding" y "Cellspacing" la tabla se "deforma" logicamente, y no logro con los comandos padding, border-collapse me funcionen. El resto como "Width" o "Border" me funcionan perfectamente.

A continuación dejo dos capturas, como referente del "problema" que veo de quitar los comandos cellpadding y cellspacing del XHTML para migrar a HTML5 con W3C.

Imagenes: http://imgur.com/a/2ZY58, incluye una comparativa y las originales, donde se ve que la tabla adquiere otras dimensiones, si bien, no toca o deforma el diseño, incluso es mas grande que el diseño mismo.

CON CELLPADDING - CELLSPACING:

<table id="fucktable" width="821" border="0" cellpadding="0" cellspacing="0">

linea 34 - code completo: http://pastebin.com/4nSNSkHu

SIN CELLPADDING - CELLSPAGING: HTML5 - CSS3

<table id="fucktable">

linea 34 Code completo: http://pastebin.com/BBbWbjTW
CSS: http://pastebin.com/Wrry0eUY

Pense incluso que era una falla del DW CS6, trabajo también con NetBeans y Aptana, probe con ambos, y lo mismo.

[Rafael]

Primero bienvenido.

Segundo. Hay una fría realidad.
Exportar tu psd con slices... No sirve para nada. Las tablas que genera es muy primitivo.

Qué quiero hacer? tener un HTML5+CSS3 validado por W3C

La w3 no valida, los revisores de código dan pistas para entender qué está mal en cuanto a código, pero usar tablas no es de código, es un error conceptual que se ha tratado de erradicar desde hace más de una década.

La manera de pensar es otra. Si te vas a dedicar a esto date un tiempo de aprender a armar un html y css.

Para salir del paso ahorita busca una combinación de

Código CSS:

table, td {border: collapse; padding: 0, margin: 0; border: 0;}
 

No recuerdo cuales porque nunca los he necesitado ya que nunca usé slices.

Acá la documentación: http://www.sidar.org/recur/desdi/tra...s.html#borders

[iamskywalker]

Iniciado por Rafael

Primero bienvenido.

Segundo. Hay una fría realidad.
Exportar tu psd con slices... No sirve para nada. Las tablas que genera es muy primitivo.

La w3 no valida, los revisores de código dan pistas para entender qué está mal en cuanto a código, pero usar tablas no es de código, es un error conceptual que se ha tratado de erradicar desde hace más de una década.

La manera de pensar es otra. Si te vas a dedicar a esto date un tiempo de aprender a armar un html y css.

Para salir del paso ahorita busca una combinación de

Código CSS:

table, td {border: collapse; padding: 0, margin: 0; border: 0;}
 

No recuerdo cuales porque nunca los he necesitado ya que nunca usé slices.

Acá la documentación: [URL]http://www.sidar.org/recur/desdi/traduc/es/css/tables.html#borders[/URL]

Primero que nada, muchísimas gracias por tu respuesta Rafael, de corazón te lo agradezco.

Segundo, soy desarrollador, y hace mucho, por no decir muchisimo (si bien, no 10 años como usted) tiempo trabajo sobre HTML y CSS + codes serverside y javascript, ¡ojo! no quiero que se me malinterprete, la intencionalidad de este comentario es la de hacerse sentir comodo para tipear cualquier tipo de respuesta, de hecho, soy founder de un par de startups y sitios que muy posiblemente los conozcas.

Maquete muy poco en PSD, pese a que siempre trabaje muy bien con IS y PSD, cuando leí, para trabajar de PSD a HTML, los "encargados" utilizaban la slices tools del mismo. Vi que otros usuarios con las funciones de cortar de PSD dejaban preparado directamente para maquetar desde el CSS, insisto, de todas manera la mayoría con Slices tools.

¿Que opción me recomendas de las mencionadas o algunas que utilices en especial?

Sobre W3C: Soy consciente de que las tablas no son códigos, por lógicos motivos, pero con W3C no validamos una documentación? http://validator.w3.org/ que nos permite obtener un "certificado de calidad" para garantizar que el sitio no contiene errores de code relaciones con la sintaxis o tags en desuso por ejemplo?

[Rafael]

Oh. Ok.

Bueno, primero, trata por lo pronto de parchar spacing con el css.

El procedimiento podría ser pensar realmente una web, digamos en Photochop, en términos reales de modelo de caja, y en términos reales de objetos uno sobre otro. El bien entendido modelo de capas.

Digo bien entendido, porque el dreamgüiver X) popularizó un uso absurdo de position absolute.

Pensar quizá en un framework e ir pocisionando objetos, galerías, modelo de columnas, y exportando la capa de Photoshop a mi png necesario.

[iamskywalker]

¡Fantastico!

De todas maneras, no se si pudiste ver las capturas que deje del sitio, es solo un logo que trabaja como un WebSpot con los enlaces al perfil socialmedia 2.0 y nada mas.

http://imgur.com/a/2ZY58

¿Que me recomendarías para algo mas "pequeño" (técnica o framework)? como este caso, un proyecto y diseño mas sencillo, de una sola pagina.

¡Muchas Gracias!

Si hay algun problema al trabajar sobre DW, no hay drama, lo codeo desde Netbeans (también suelo utilizar otro IDE: Aptana).

EDIT: No entiendo por que al Photoshop (PS) lo llamas Photochop o al Dreamweaver (DW) dreamgüiver? jjajaja

[pitufoweb]

Hola,

En Photoshop solo exporta las imágenes (banner, iconos,etc.) que necesites. Nada de HTML.

Después vas armando la pagina con HTML y CSS con el editor de código que prefieras. Si tienes conocimientos de HTML y CSS, no te sera muy difícil hacerlo.



Saludos

[Rafael]

El Photo-chop aparte del cotorreo, es porque muchos creen que es todopoderoso, mágico etc. (Photomágico), cuando en realidad muchos estan cortando sus posibilidades (chop) por su uso inadecuado.

El güiver algo parecido. Bien usado puede ser muy bueno, siendo la web el nicho más grandioso para la libertad, incluida las herramientas para desarrollar, muchos creen que una herramienta es la que soluciona cosas, cuando hay un montón de recursos que ensamblan solitos, sabiendo que hay que hacer; me suena a esos aparatos para adelgazar, donde algunos creen que por quedarse sentado viendo el infomercial, adelgaza.

Por eso el cotorreo. Lo mejor es hacer ejercicio, comer frutas y verduras y aprender html y css.