Error al pasar PSD a HTML

[OTTO_LOTO]

Hola,

me estoy volviendo loco con un fallo que me da la página. La he hecho en Photoshop y desde ahí la he pasado a html. Bien, a mí en mi ordenador no me sale el fallo, pero a otras personas, desde su ordenador, les salen como rayas vacías entre las uniones de cada fragmento de imagen...

No sé por dónde coger este error, ya que en algunos ordenadores se ve perfectamente y en otro no.

Os pongo el enlace de la página para ver si os sale a vosotros así y me podáis dar alguna solución.

http://pruebasweb2.comlu.com/

[marioStudios]

Mira, yo lo vi en mi IE9 y Firefox, resolución de pantalla 1400x900, se ve bien.

Eso de que n se vea bien en todos lados es por que no todos los exploradores tienen el mismo estandar, incluyendo los tipos de pantalla, pero en la internet hay mucha información de comoo corregir eso, usando varios contenedores de estilos CSS, y scripts para ello, suerte!!!

[OTTO_LOTO]

Iniciado por marioStudios

Mira, yo lo vi en mi IE9 y Firefox, resolución de pantalla 1400x900, se ve bien.

Eso de que n se vea bien en todos lados es por que no todos los exploradores tienen el mismo estandar, incluyendo los tipos de pantalla, pero en la internet hay mucha información de comoo corregir eso, usando varios contenedores de estilos CSS, y scripts para ello, suerte!!!

Pero es que no sé cómo buscar el error, ya que en algunos sale bien y en otros no. Donde más problemas salen es concretamente en esta página:

http://pruebasweb2.comlu.com/sala-recien-nacidos.html

y yo en 4 ordenadores de mi casa la veo bien, pero las clientas para quien es la web las ven las dos así, y una está en barcelona y la otra en Sevilla.. y no sé por dónde coger el error, ya busqué en Internet, pero no sé cómo buscar ese error y no me salió nada... he recurrido aquí como último recurso

[marioStudios]

Es verdad salen lineas violeta en IE9 en Firefox esta bien.
¿Como puedas resolver tu problema?, talvez estas usando pixeles en vez de porcentajes, checa por ahi, tambien a veces es bueno usar la opción relative, has una Hoja de Estilo para cuando se detecte que el usuario esta usando IE9 y otra cuando esten usando Firefox.

[Carlangueitor]

El problema es que estás exportando directamente desde el Photoshop a HTML, y eso no genera un buen código. Si quieres tener más control tendrás que hacerlo a amano y corregir los errores.


Saludos

[Rafael]

En realidad el código se vé que está hecho a mano, pero trae errores. Por ejemplo estás usando Html sin doctype y usando elementos obsoletos como center, además de tener cosas fuera de la etiqueta </body> y </html>.

Lo muevo a Html para que te ayuden a limpiar el código.

[pitufoweb]

Iniciado por Rafael

En realidad el código se vé que está hecho a mano

No @Rafael, ese código no fue hecho a mano. El código fue exportado desde Photoshop como lo dice @Carlangueitor. El problema con eso es que crea mucho código basura, incompatible con los navegadores, es mas difícil hacer modificaciones, la pagina es mas pesada y tarda mas en renderizar los elementos, etc.

Se puede corregir un poco ese código para que funcione con la mayoría de navegadores, pero...

Lo correcto seria:

No exportes el código directamente desde Photoshop.
No uses tablas cuando no son necesarias.
Crea el código a mano
Usa código limpio y semántico

Por ultimo, prueba la pagina en la mayor cantidad de navegadores.



Saludos.

[Carlangueitor]

Efectivamente, solo hay que mirar los comentarios:

Código HTML:

<!-- Save for Web Styles (pagina.psd) -->
<!-- Save for Web Slices (pagina.psd) -->
 

Saludos

[Rafael]

Mmm. qué código tan raro.

No está usando tablas sino divs con posicionamiento absoluto... ese es un concepto de "capas" que después de las tablas-tablas (table) se me hace un tanto nefasto, pero en fin. (Aunque está mejor que los que generaba antes con slices y los que genera el dreamweaver)

Otto:
1) Complétale un doctype específico.
2) Sé más especifico en que navegador se ve mal.
3) Completa quizá paddings y borders a 0.

[Rafael]

Oh... me retracto. El código de algunas páginas interiores sí está muy feo...

Otto. Si es un proyecto en forma, hay que ir aprendiendo a ensamblarlo con html y css.

[Dhanielson]

Hola! Yo tambien hago lo mismo hago mi diseño en psd despues lo exporto a html. El tema esta en las opciones de exportacion a web&devices no se si estas utilizando generar un archivo css aparte que es lo mejor. Otra cosa lo primordial es el corte del sitio con el slice tool debes hacerlo bien en youtube hay tutoriales de como hacerlo de manera correcta para que no te surjan problemas con otros browsers... Por ultimo creo que el mejor consejo es aprender a ensamblarlo con html y css como dice Rafael para ir corrigiendo los errores y borrar capas inecesarias que tienes

[henryrow]

Hola, yo hago mis diseños en photoshop y los importo a Enerwings, sólo basta con crear el layout previamente y los sitios se ven bien. Por ejemplo: [URL="http://www.fruttalisty.enerwings.com"]fruttalisty.enerwings.com[/URL]

Este es un proyecto en el cuál estaba trabajando.

[Carlangueitor]

Claro y todo maquetado con tablas, así tan 90's

[florlangosta]

OTTO
Lo que te pasa es lo que le pasa a muchos cuando quieren convertir un PSD en HTML: lo hacen desde Photoshop.
Grave error!

La conversion de PSD a HTML, o maquetacion web, es una actividad muy importante a la que hay que dedicarle un buen rato.
De hecho, hay gente que se dedica exclusivamente a la maquetacion en HTML y CSS. (como yo, entre otras cosas)

Como bien te han dicho aqui, no debes "maquetar" exportando con Photoshop, sino que deber armarlo de la forma tradicional esribiendo codigo y armando la estructura con XHTML y luego estilizando con CSS, o CSS3.

Mirando rapidamente el codigo de tu sitio, veo un par de errores o cosas a corregir como por ejemplo la declaracion de DOCTYPE (directamente ni la has puesto)

Pasa por mi blog, alli hay mucho material de como convertir PSD a HTML y maquetar con XHTML y CSS tal cual se hace de forma profesional.

Saludos!
Cristian