El titulo parece un anuncio de un tutorial pero no lo es, ya que creo que tutorial para diseñar una pagina web no existe, seria como encontrar un tutorial acerca de como pintar mejor.
Hoy le voy a contar, como así llegue la mundo del diseño, las influencia que tuve para llegar donde estoy.
¿Cómo comenzó todo esto?
Un primer intento 2007-11-28 tenia nociones básicas de html creo que hice un manual en ese entonces. pues en ese entonces use tab para maquetar el, como en ese entonces tenia el Photoshop y me daba la opción de importar en html lo hice así Craso error.
Repasare algunos de los errores, pues si no tendría sentido el post.
1. Uno de los primeros errores que note es que no sabia nada de Estandares web ni de SEO.
NO existe DOCTYPE el titulo es index y ni hablar de las tag. ¿cometerán ustedes el mismo error?
<html> <head> <title>index</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head>
2. Otro error grande es el de usar tablas para la maquetación, veamos el detalle de menú superior.
como podemos ver utilicé un <tr> para contener mi imágenes de mis enlaces a mis secciones error . debi hacerlo con listas Ul LI
3. NO optimizar la página
Algo que me causo mucha gracias es que el de No utilizar el backgroud-color (los fondos esta en imagen). la pagina no debiera pesas mucho pero use imágenes innecesarias, si se fina los bordes también están echos con Photoshop.
4. En cuanto al Diseño en si (aspecto visual)
Aquí fui influenciado (hice una copia de la pagina Videocopilot) , un diseño sencillo con un menú horizontal (creo que me quedo con ese esquema)
Viendo estos errores ustedes podrán comenzar con buen pie
Segundo intento
Despues de casi un año 11/30/08 aprendi PhP y conocí SMF y wordpress
Ahora les mostrare el segundo intento. en este conocí que es un header.php – Footer.php los cuales los veo muy importantes aquí también conocí SMF y wordpress. le muestro una captura de como quedo el sito.
Trate de meter el wordpress dentro de mi site así como también el SMF. para esto tuve que aprender Php (una etiqueta básica include)y a manejar base de datos Mysql.
Aquí es donde comenzó mi apasionarte uso de los Div (digo apasionante por que me parecieron sensacionales).
¿como aprendí a usar los div? pues mirando otras paginas echas mediante estos contenedores, poco a poco. esto me llevo indudablemente a usar hojas de estilos. en todo esto ya había pasado mas de 6 meses, y seguía teniendo problemas. hasta este punto ni me entere que las paginas tenias que ser validadas.
y por que el titulo del post es Aprender a diseñar una página web pues partamos de estos errores para comenzar a realizar nuestro site. les doy unos pasos con los cuales me muevo hoy.
1. Primero Veo paginas similares tratando de escoger un diseño que se acomode . donde como. instale foxmark y cada vez que veo una página simpática o algunos temas que me agradan los guardo (categorizandolos)
2. Me pongo a diseñar en photoshop.
3. Comenzamos la maquinación.
para esto utilizo Dreamweaver y Top Style 4.0
4. Subimos al servidor y la validación. (esto de la validación tenemos que hacerla constantemente mientras maqueamos la página. con la practica veras que tendras menos errores. el resultado lo podemos ver en la siguiente dirección.
no puedes hacer una guía de donde podamos aprender a diseñar correctamente una web
Algun tutorial para pasar de psd a html?.
pon tutorial para crear themes en wordpress pues man por favor lo necesito gracia spero uno bueno no puro floro cosas qu eni se entiende…
gracias por todo
Como dices tutoriales hay muchos en la red, tanto en ingles como en español.
Debes creer que es muy difícil crear tu propio theme. pues no lo es.
necesitas conocer:
De hojas de estilos.
Un poco de php.
y mucho html.
si aun no dominas esta teoría, hacer tu propio teme te sera imposible.
en tanto de dejo de tarea. hacer tu diseño en photoshop.
luego te ayudo a pasarlo a wordpress.
ahora si hablamos de diseño ufff. photoshop imprescindible.
Muy bueno tu post; anteriormente yo inicié con pphp-nuke, modificando algunas parte del theme y haciendo desastres, luego me pasé a phpBB, donde pude modificar algo más y agregar MODs y crearlos, pero nunca me atreví a realizar themes, posteriormente me pasé a WordPress y actualmente uso este CMS.
Un día hace poco menos de un año decidí crear mi propio theme, primero utilicé artisteer, pero me sentí algo limitado, así que decidí buscar toda la información posible, recién allí pude entender el uso de DIVs, las listas para menús, etc… el uso de CSS, desde mi primer theme creado con un diseño que hice en photoshop y maquetado en dreamweaver, se puede decir que mi evolución ha sido muy favorable, cada día aprendo cosas nuevas. No se si sea bueno o malo, pero he dejado de hacer los diseños en photoshop y maquetar directamente, aunque no todo, ya que prácticamente los gráficos que necesito los realizo en photoshop de manera separada.
Y como dices, quieras o no, photoshop es imprescindible…
Por cierto, que beneficios hay en utilizar Top Style 4.0
Hola Fliberty, que gusto verte por aquí, te cuento que varias veces quize proponerte para realizar un proyecto.
un workflow seria.
1. Planificación.
¿que queremos?
¿a quienes nos dirigimos?
¿como llegamos?
hacerse las preguntas
2. bosquejo.
este puede ser en papel
3. mockup
es como una bosquejo mas elaborado
4. Diseño
ponerle color y sabor, hacerlo atractivo
5. Maquetacion
desarrollo del html
6. Programación
añadir la parte automatizada
haré un post. a respecto del como pienso al comenzar un proyecto.
Saludos Flyberti
se me olvido. acerca del topstyle.
Tiene muchas herramientas para el desarrollo css
Que tal compatriota, ya estuve revisando el top style, ahora estoy maquetando un theme para una de mis webs y me esta dando dolor de cabeza esto del thimthumb, jajajaja… Cualquier cosa que desees estoy a tu disposición; actualmente estoy por empezar un proyecto en reseller y para empezar estoy por brindar un curso de maquetación de themes wordpress, que incluirá hosting, bueno aun está en mente, tengo que iniciar el diseño del portal aún, jajajaja…
Saludos…
Bien dicho, yo utilizo los mismos métodos que tu, primero comienzo a navegar y veo sitios que me llamen la atención, pero primero habiendo definido los colores que usaré para la pagina y hacia que ámbito esta dirigido, luego teniendo ideas aproximadas de lo que podría ser el sitio, comienzo a diseñarla en photoshop (Esta es la parte más difícil, tienes que tener mucha imaginación y creatividad) e ir mejorandola a medida que la diseñas. Luego, vamos al código propiamente tal, creo que los conocimientos necesarios según mi punto de vista serian:
-xHTML (Me gusta trabajar con código bien estructurado)
-CSS
-jQuery o Mootools (Ambos Frameworks de js)
Mi primer intento, fue desastroso, no sabia utilizar Photoshop, y hice la pagina con tablas, muy muy fea, utiliza gif’s que encontraba por la red, y quedo demasiado cargada en elementos no deseados.
Después lo deje, aprendí photoshop en un mes aproximadamente (Haciendo diseños con dificultad intermedia) debido a el típico “Tu no podrías aprender a hacer esto, y menos aún superarme” de un amigo, entonces, fue una competencia.
Seguí aprendiendo de Photoshop, y un día del año pasado me dije… “¿Y si intento hacer una pagina ahora?” entonces busque tutoriales de como pasar de PSD a HTML, y me encontré con raymicha en cristalab, comencé a ver sus videos
http://vimeo.com/raymicha/videos/sort:oldest
Realmente buenos si alguien quiere aprender a programar una pagina bien.
En la actualidad prefiero programar cosas en PHP, me llena más que el diseño web, y ahora estoy trabajando en add-ons para un script llamado RapidLeech, un amigo se monto una pagina de esto con su servidor, y estoy codeando, fixeando y optimizando todo lo que pueda.
Buen articulo, me hiciste recordar muchas cosas.
PD: El SEO no es un proyecto, es un proceso.
Una consulta, ¿donde ves el repositorio de paginas de inspiración? yo utilizo http://cssmania.com/, visitala si tienes un tiempo.
También puedes ver muchos diseños en Deviantart.com