Un diseñador perdidos

[Dose]

Hola a todos,

Soy diseñador gráfico, hasta ahora he estado trabajando con cartelería, folletos, camisetas, etc, etc. Pero hace unos meses decidí dar el salto a la web.

He de reconocer que al principio me asusto mucho tanta "cosa", estaba muy muy perdido y no sabía por donde comenzar. Todo eran conceptos nuevos: HTML, CSS, XHTML, Java, Dreamweaver.....

Busqué por la web información, guias, tutoriales, vamos, lo normal. Es algo natural para un diseñador buscar cosas nuevas en internet. El caso es que llegué a varias conclusiones:
1- El programa mas completo es Dreamweaver y dado que ofrece la posibilidad WYSIWYG he puesto muchas espectativas en él.
2- Por muchos programas que tenga, sin conocer lo básico de HTML no puedo ir a ningun lado.
3- El lenguaje que mas juego me podría dar es CSS.

Bien, ahora viene el problema, llevo un mes "dando clases" con "Wikilearning"
pero cada vez estoy menos convencido de que sea lo que necesito. Tambíen he ojeado el tutorial para CSS y me cuesta pillar muchas cosas.

He visto tutoriales para pasar webs de photoshop a Dreamweaver y creo que es lo que más satisfacciones me ha dado....

No se por donde tirar, no se como avanzar ni que debo hacer ahora o que debo tener en cuenta.

¿me podéis echar una mano?

[xizetto]

Vamos a intentar ayudarte, porque en internet no solo es importante el diseño, sino también la programaci´n y el posicionamiento

Por ejemplo, una página hecha en Photoshop, es muy atractiva a la vista, se puede programar con JavaScripts y los botones y toda la web se hace interactiva con el usuario, pro es pobre en contenido de texto y por ende es un poco dificil lograr que una página así esté bien posicionada, lo mismo ocurre con Flash

[Dose]

agradeceré toda la ayuda, estoy totalmente abierto a cualquier método.

Gracias de antemano

[xizetto]

por ejemplo: visita estas dos páginas

http://www.siteinternet.com.mx/ está hecha en Flash y se demora tremendo tiempo en descargar, por lo tanto, aunque tiene un diseño muy bonito, los internautas la abandonan con rapidez y esto no es bueno para posicionar un sitio web

Sin embargo, revisa esta otra página web, esta hecha en wordpress,
http://www.cirugia-laser.net
Navega por sus páginas para que veas que rapido descargan, esta es una web bien diseñada desde el punto de vista del posicionamiento aunque no tenga un diseño artístico.

(Wordpress es un CMS ( Content Management System) creo que se escribe así y quiere decir: Sistema de Administración de Contenidos). después que aprendes a usar un sistema de estos y aprendes a optimizar un sitio web, te das cuenta que el diseño, aunque es importante, no es lo que más cuenta en Internet.
Por supuesto, si eres diseñador sabes los colores que son más agradables a la vista, en internet deben usarse espacios en blanco y no repletar una sola págna con tanto contenido que el internauta se vaya a marear.

Yo te recomendaria que escogieras bien el lenguaje de programación que vas a utilizar o el CMS que más te guste, y comiences por ese.

el HTML es obigado, porque esa es la base de todo y todos heredan cosas de allí.
el PHP es muy dinamico pero también complicado, para trabajar con PHP también hay que dominar el MySQL Server como manipulador de Bases de Datos.
están también el ASP y otros o los CMS

- Plone y Zopa.
- WordPress.
- Joomla (trabaja sobre la base de PHP)

Estos CMS son modulares y traen una gran libreria o biblioteca de funciones y algoritmos ya prediseñados que te pueden ayudar.

Los foros tambié, son muy importantes, en las FAQs de los diferentes foros de diseño y programación web aparacen muchos trucos de como hacer cosas, esto te puede ayudar a enterder este mundo loco del WWW que cada vez está más complejo.

[Dose]

Conozco las diferencias de crear una pagina en Flash y en Html y el Flash ya lo había descartado por lo mismo que comentas.

Creo que conozco lo básico pero no domino ningun lenguaje. Hasta que punto es aconsejable crear páginas en dreamweaver através de Photoshop?

[xizetto]

Las páginas en Dreamweaver a través de fotoshop no son tan malas, pero tienes que asegurarte de que el tiempo de descarga de la página sea lo más rapido posible.

Tambien tienes que usar algunos trucos, por ejemplo, poner letreros que cuando tu pases por encima de una imagen, esta deje ver un texto relativo a la imagen, este texto lo van a utilizar los buscadores para saber de que trata tu web, es imprescindible también que domines el JavaScripts, para poder lograr la interactividad que requeriría un sitio hecho en photoshop

ya revisaste http://www.cirugia-laser.net y la otra página que te dije

[Dose]

Dado que mi fuerte es el photoshop me gustaria explotar esa opcion todo lo posible, pero lo único que se hacer es diseñarlas, no se ponerlas en funcionamiento

[xizetto]

Te puedo ayudar enviandote una pequeña página hecha en photoshop, yo tampoco lo he trabajado mucho, pero por algo puedes comenzar.

Tambien puedes entrar en algun foro sobre javascript.

Si quieres también podemos hacer una sociedad, trabajariamos juntos y veremos que sale, yo no se mucho sobre diseño, pero si de programación de páginas webs y posicionamiento.

[Dose]

haber si alguien por aqui me puede echar una mano. Y guiarme un poco.
Porcierto, ya estoy mirandome Javascript, gracias por el consejo ;)

[lucasan]

A ver trato de guiarte un poco.

1. Si apenas empiezas sería buenisimo empezar con buenas costumbres (por llamarlo de alguna forma) es mas dificil empezar con dreamweaver y luego safarte de el.

Así que no te acostumbres a los WYSIWYG ya que no es la forma ideal de hacer sitios web.

2. Pasate por www.librosweb.es hay dos manuales excelentes para que empieces, el de Xhtml y el de CSS, aun no te compliques con Javascript ni lenguajes del lado del servidor, que son muy útiles pero un paso a la vez antes de correr

3. Cualquier duda, pregunta o problema qu etengas, estaremso aquí para poder guiarte.

Nota: No digo que sea malo usar el dreamweaver, ya que es hasta muy útil que te resalta el código, te auto completa...
En si de loq ue hablo es de no usar el modo WYSIWYG ya que te malacostumbra y no es la forma correcta de diseñar sitos web válidos, accesibles y usables.

Saludo y mucho ánimo con tu nuevo emprendimiento.

[Dose]

No conocia la página, muchas gracias.

Ya me he puesto a mirar el manual de Xhtml, parece bastante útil.

Como curiosidad, por que salen mal las paginas creadas en WYSIWYG?

Y una pregunta importante: Si yo diseño una pagina web en Photoshop, colores, cuadros para texto y anuncios, etc, etc. ¿como la paso a código? ¿imagen a imagen?
Se que estoy adelantadome a lo que voy a aprender con los libros pero, para alguien con mi experiencia completamente visual, hacerme a la idea de esto me cuesta.

[lucasan]

Cuando diseñas con WYGIWYS lo que se hace es maquetar el sitio en tablas, es decir

Código HTML:

<table width="918" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td width="243" height="43">&nbsp;</td>
    <td width="394">&nbsp;</td>
    <td width="281">&nbsp;</td>
  </tr>
  <tr>
    <td height="268">&nbsp;</td>
    <td valign="top"><img src="file:///C|/Documents and Settings/Lucas Torres/Escritorio/multiservice/76530693.jpg" width="489" height="349" /></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td height="273">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table> 

Por ejemplo para insertar una imagen mira el código que me generó el dreamweaver, solo para insertar una imagen.

La insertó en una estructura de tablas, lo cual es incorrecto, si bien el resultado (visual) es bueno (hay diseñadores que hacen cosas realmente hermosas) el resultado semántico es incorrecto.

Es decir, las tablas son para presentar datos tabulados, facturas, cuadros, etc. Todo uso que se haga de ellas mas alla de este es semánticamente incorrecto.

Ahora, hacerlo o no hacerlo es cuestión de que tan bueno se quiera ser en el trabajo que realizamos; por ejemplo un sitio con una maquetación correcta va a ser mas accesible a todo tipo de navegadores, personas, equipos, etc.

Existen diferentes tipos de navegadores, no solo los que usamos nosotros, sino por ejemplo lectores de pantalla, que usan las personas invidentes y estos lectores requieren de un sitio semánticamente correcto (cada etiqueta de xhtml en su lugar).
Otros usan navegadores de texto, como el Linxs, que no muestra imágenes sino solo texto, y si el sitio no está bien maquetado no se mostrará correctamente.

Y no me extiendo mas...

Saludos, date una pasada por el foro de Usabilidad y Accesibilidad, hay unos expertos que te darán mejor idea de lo que yo puedo darte.

Ahí he aprendido montones.

Saludos.

[lucasan]

Por último, la duda que tienes de pasar de photoshop al código.

En photoshop creas una maqueta de lo que será tu sitio.

Ahora, una vez leas el manual de Xhtml y te inicies con CSS (has los ejercicios que proponen, son buenisimos) te darás cuenta que los sitios se maquetan como si se tratara de cajas (lo llaman el box model). mira este ejemplo

Y una vez te acostumbres al box model ya sabrás como poner cada imagen en su "caja".

Saludos.