Maquetacion Web CSS o Photoshop?

[DeCodigos]

Buenas, queria saber que me recomiendan, ustedes prefieren maquetar en Photoshop y luego guardarlo para web (html e imagenes) o en CSS, creando divs? que es lo mas conveniente?
Saludos..!

[fvillalba]

Yo primero tecleo el código en NotePad++ en xhtml strict 1.0 más css 2.1. Luego creo las imagenes en Photoshop o Fireworks. Los logos en Illustrator.

[pao01]

DeCodigos, sin ningún lugar a dudas creo que te conviene aprender html y css y de esa forma elaborar tus proyectos web.
Lo mejor es que tú entiendas el código y puedas ir modificándolo.

[bioxido]

Personalmente no te recomiendo maquetar en photoshop...

Bueno, primero que nada si vas a hacer toda la web en photoshop, te va pesar bastante porque van a ser 50imagenes para 1 sola seccion...

La verdad es mas facil hacerlo directamente desde html y css, despues terminas perdiendo mas tiempo intentando "adaptar" todas las divs,tablas,etc que te creo el photoshop...

[hades87]

Photoshop no, por 2 esenciales razones:

1 - No se usan tablas para maquetar
2 - El texto será una imagen y no tendrá valor semántico y por tanto te costará horrores salir en google

[w0rldart]

Hmmm??? Como que photoshop no?

Yo lo que hago es lo siguiente:

1. Hago un esquema de como seria mi web (donde estaria el menu, sidemenu, las dimensiones de todo...)

2. Me pongo a diseñar sobre la esquema que tengo.

3. Acabo el diseño, rectifico las errores que pueden aver.

4. Empieza la magia.

5. Empiezo a ir seleccionando cada parte de la web y a guardalo para la web. (Background del website, background del header, footer y etc...) sin texto claro.

6. Empieza la obra del css, a ordenar y colocar cada parte que hemos guardado previamente para colocarlo en su sitio tal como lo hemos diseñado en photoshop...

7. Luego va el menu, y todo lo que queda.

Asi es como yo lo hago, y me sale de maravilla.

Suerte,
w0rldart

[ramonjosegn]

Photoshop también genera CSS....

[DeCodigos]

Ramonjosegn, Como hago para generar css desde photoshop?...

[hades87]

DeCodigos, yo dejaría el photoshop para lo que es y haría las web con HTML y CSS.

[DeCodigos]

Iniciado por w0rldart

Hmmm??? Como que photoshop no?

Yo lo que hago es lo siguiente:

1. Hago un esquema de como seria mi web (donde estaria el menu, sidemenu, las dimensiones de todo...)

2. Me pongo a diseñar sobre la esquema que tengo.

3. Acabo el diseño, rectifico las errores que pueden aver.

4. Empieza la magia.

5. Empiezo a ir seleccionando cada parte de la web y a guardalo para la web. (Background del website, background del header, footer y etc...) sin texto claro.

6. Empieza la obra del css, a ordenar y colocar cada parte que hemos guardado previamente para colocarlo en su sitio tal como lo hemos diseñado en photoshop...

7. Luego va el menu, y todo lo que queda.

Asi es como yo lo hago, y me sale de maravilla.

Suerte,
w0rldart

Tienes alguna web de ejemplo que hicistes con este sistema?

[hades87]

Mírate estos dos tutoriales:

http://www.araudi.net/migracion/migr...sin_dolor.html
http://www.araudi.net/migracion/migr..._parte_II.html

[kseso?]

Hola DeCodigos
La metododología propuesta por w0rldart es tan válida como cualquier otra:
Medito y selecciono una idea
La esbozo
Hago un interfaz (el layout) en un programa de diseño gráfico
Preparo las imágenes para los distintos elementos
A escribir código (xhtml + css) para convertir el dibujo en código para los navegadores.
Todo ello muchas veces con un constante ir y venir del editor de texto al de gráficos.
Los que debes encontrar es la forma en la que más a gusto te manejes y más efectiva encuentres.

Lo que no te recomendaría nunca, y enfatizo lo de nunca, es:

Iniciado por ramonjosegn

Photoshop también genera CSS....

ni creo que lo hiciesen la mayoría de los diseñadores/programadores de páginas web que cuentan con mi reconocimiento y admiración por sus trabajos y conocimientos.

La razón es muy sencilla: cada programa para lo que es su función principal y para lo que está optimizado.
Posíblemente te genere un código, sí, pero lleno de basura y en muchas partes ni estándar ni válido.
Y ya no entramos en tiempo de carga de la página, peticiones al servidor, peso, semántica, optimización, accesibilidad y un largo etcétera.

Un saludo

[ramonjosegn]

<html>
<head>
<title>pagina001</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Styles (pagina001.psd) -->
<style type="text/css">
<!--

#pagina001 {
position:absolute;
left:0px;
top:0px;
width:1000px;
height:730px;
}

-->
</style>
<!-- End ImageReady Styles -->
</head>
<body id="pagina001" style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<!-- ImageReady Slices (pagina001.psd) -->
<img src="im%c3%a1genes/pagina001.jpg" width="1000" height="730" alt="">
<!-- End ImageReady Slices -->
</body>
</html>

creo que es bastante más limpio que el de muchos programas populares, como dreamweaver o frontpage...

con respecto a cómo se genera, es muy largo de explicar (y tiene muchísimas opciones), tan sólo decir que se hace con la opción exportar para web, y ahí está todo lo que se necesita, opciones, nombres, carpetas, comptabilidad, etc

[kseso?]

Vaya, un documento sin Doctype,
que no cierra el único metatag que incluye.
Tiene una declaración de estilos en el head y pese a ello mete más estilos en el body para la misma clase, obviando que margin es una propiedad shorthand.
Que sólo tiene una imagen en el html pero sin elemento contenedor que la ampare.
Y no entramos en todo lo que se podrá derivar del uso de la posición absoluta una vez que a la página se le añadan contenidos.

Definitivamente, sigo sin ser partidario de que el photoloquesea me haga el (x)html y el css

[Triby]

Confucio dijo: "Yo invente la confusion"... ahhh, no eso se lo achaco una Miss ... segun la pelicula Entrapment Confucio dijo: "No uses un cañon para matar un mosquito".

Podemos traducirlo con la sugerencia de kseso?: a cada herramienta darle el uso para el que fue creada y Photoshop fue creado para manipulacion de imagenes; que tiene ese pequeño extra para "facilitar el trabajo" de "guardar para Web", si, lo tiene, pero no genera codigos estandar y va a dar mas problemas que beneficios.

[trasgukabi]

Iniciado por kseso?

Vaya, un documento sin Doctype,
que no cierra el único metatag que incluye.
Tiene una declaración de estilos en el head y pese a ello mete más estilos en el body para la misma clase, obviando que margin es una propiedad shorthand.
Que sólo tiene una imagen en el html pero sin elemento contenedor que la ampare.
Y no entramos en todo lo que se podrá derivar del uso de la posición absoluta una vez que a la página se le añadan contenidos.

Definitivamente, sigo sin ser partidario de que el photoloquesea me haga el (x)html y el css

(No te puedo dar karma-no sé porqué-, pero te lo daría)

[arthpix]

Y si por casualidad aparece una web maquetada con Photosp en Google ¿Cómo se vería en los resultados de la búsqueda?

Mi web con Photoshop -- [Traducir esta página]
Imagen001Imagen002Imagen003Imagen004Imagen005Image n006Imagen007Imagen008Imagen009Imagen010
Imagen011Imagen012Imagen013Image014Imagen015Imagen 016Imagen017
www.photoshopweb.com/mipagina.html - En Caché - Similares

[fmorenop]

No es de Confucio... pero "Las opiniones son como los culos. Todo el mundo tiene una" y esta es la mía, la que uso:

Maquetas el prototipo con photoshop, incluyendo textos y obtienes una instantanea de cómo se verá la web (aproximadamente)

Ahora puedes decidir si exportas las imágenes (sin textos) para maquetarlo con capas y css (tu mismo si te pones con el notepad+ desde 0 pero es como reinventar la rueda) o puedes:

- Definir sectores en photoshop con los elementos de la página.
- Exportar el HTML y las imágenes (optimizadas, poco peso incluso para una página completa)
- Coger un editor web 'de verdad' (dreamweaver por ejemplo) y cambiar las imágenes de las celdas por fondos, añadir capas con textos u otras imágenes, css, javascript, rollovers, etc...

Los sectores e imágenes comunes a toda la web se utilizán en el resto de las subpáginas (se encuentran en la cache del browser y las páginas se cargan instantaneamente)

En este caso, se obtiene usa página maquetada sobre una tabla... (tened paciencia los fandiv+css), el texto es texto, atributos, cabeceras, DOCTYPE, etc.. sin problemas SEO, (El que quiera validar que se ponga a ello).... y ya está.

Y la página que obtienes (con más o menos vistosidad, calidad o validez), no depende de las herramientas o tecnología, sino del uso que le da.

No es el supermoderno div+css pero es tan estandar, compatible y accesible, bla, bla,bla,... como cualquier otro método.

Imageready (Photoshop), con opciones para crear HTML, sectores, optimizar imágenes, rollovers, enlaces, etc... SI fué creado para hacer páginas web (aunque no sea, ni de cerca, el mejor editor web y, claro está, yo apenas lo uso para generar la tabla inicial, los slices o, tan sólo, los sectores de la página usando luego el dreamweaver) pero fijo que el notepad+, editplus, etc... tampoco se crearon para maquetar HTML, ni cobol, ni java, ni PHP, pero sierven perfectamente si estás acostumbrado.

Esta, por ejemplo, es otra forma de hacer páginas. Tan válida como el wordpress, joomla, o el notepad+ y el paintshop pro.

Pack

P.D: Entre matar moscar a cañonazos y 'hacerlas huir sin causarles daño y sufrimiento'... hay unos cuantos cientos de miles de posibilidades. jejejeje

[w0rldart]

DeCodigo si tengo, por ejemplo: www.reformaslorenzo.es, esta diseñada en photoshop y luego claro, todo lo he pasado a xhtml y css

[Triby]

Iniciado por fmorenop

No es de Confucio... pero "Las opiniones son como los culos. Todo el mundo tiene una" y esta es la mía...

Iniciado por fmorenop

Entre matar moscar a cañonazos y 'hacerlas huir sin causarles daño y sufrimiento'... hay unos cuantos cientos de miles de posibilidades. jejejeje

Cierto, las posibilidades son casi infinitas, sin embargo, yo hablaba solo de la que creo mas conveniente (aunque requiere mucho mas trabajo), ya despues DeCodigos vera cual de todas las opciones que le dimos le sirve o le gusta mas.