Ver la versión completa : [Ayuda] Aprender Diseño Web desde menos 0
pablomalaga
13/02/2013, 00:58
Buenas chicos, os resumo rápidamente:
Me dedico al mundo del diseño gráfico y, tal y como está la cosa, tengo montado una especie de estudio colaborativo con 3 personas más. De los 4 que formamos el estudio sólo 1 de nosotros es diseñador/programador web (obviamente, no soy yo) y, sin embargo, casi todo el curro que entra va, de una manera o de otra, orientado a web.
En definitiva, me gustaría empezar a estudiar por mi cuenta para aumentar el rendimiento/rentabilidad del estudio. Partamos de la base de que, probablemente, lo poco que sé de web esté contaminado por un aprendizaje autodidacta a base de chamacotutoriales y, con tota probabilidad, lo mejor sería desecharlo completamente de mi cabeza.
Por tanto, supongamos que no sé nada (0) de diseño web y quiero comenzar ¿qué libro/manual/apuntes me recomendáis para sentar unas bases correctas al respecto? Si es free mejor, pero compraría sin dudar "el manual definitivo". (Busco algo así al equivalente del libro de Ceballos con respecto a la POO).
Un saludo y muchas gracias. Confío en vuestro criterio.
ChAzY_ChaZ
13/02/2013, 01:58
yo no tengo ni idea. pero el que te ayude si hace como tu, te pedirá €€ a cambio:D:D:D
pablomalaga
13/02/2013, 08:30
yo no tengo ni idea. pero el que te ayude si hace como tu, te pedirá €€ a cambio:D:D:D
¡Qué *****! :D:D Pero, quién sabe, si hay algún profesor que haga su oferta...
Ahora en serio, ¿nadie conoce un librico bueno?
Monguer Guaper
13/02/2013, 08:39
www.w3schools.com está muy bien para empezar.
Mira los cursos de html, html5, css, DOM, javascript, jquery, ajax y ya si necesitas algo de lado del servidor, php y sql.
Además tiene una referencia muy completa y muchos ejemplos interactivos.
Como pega, es un poco superficial, pero viene bien para empezar.
pablomalaga
13/02/2013, 08:48
www.w3schools.com está muy bien para empezar.
Mira los cursos de html, html5, css, DOM, javascript, jquery, ajax y ya si necesitas algo de lado del servidor, php y sql.
Además tiene una referencia muy completa y muchos ejemplos interactivos.
Como pega, es un poco superficial, pero viene bien para empezar.
Gracias, voy a echarle un vistacín.
La web puede ser facil o puede ser un infierno, sobre todo paciencia.
Lo que te recomiendo es que te leas la pagina que te han dicho, y te empapes bien de todos los conceptos, html, css y por ultimo js, y sobre todo DE LAS BUENAS PRACTICAS.
Empieza con html css, ya que eres diseñador grafico te vendra algo mejor entender la maquetacion, y pegate mucho con el concepto id y class.
Iras evolucionando, al principio lo haras todo mal, luego sufriras de divitis y finalmente empezaras a hacer maquetacion decentes xD
Y por ultimo, huye de herramientas automaticas, lo unico que hacen (normalmente, hay excepciones ) es generar html engorroso.
Animo!!
Pd. y vete familiarizandote con firefox + firebug, opera y chrome con sus herramietas, son muy utiles para maquetar.
josepzin
13/02/2013, 10:15
Siendo diseñador gráfico yo me concentraría exclusivamente (para empezar) en HTML y CSS, y ya que empiezas, empieza bien: HTML5 y CSS3.
La base es crear un HTML válido para empezar y luego el CSS que lo muestra.
En lo que respecta al HTML, en realidad es bastante simple y fácil pero es mucha información al mismo tiempo. Yo consulto la web w3schools constantemente!! Ahora con HTML5 hay muchisimas facilidades, los formularios es un lujo hacerlos :)
En cuanto al CSS ahi es donde empiezan los insultos :D :D
Para empezar podrías usar alguno de esos "frameworks" CSS, creo que se llama 960px o algo asi, a mi me ayudaron en su momento y luego los abandoné, pero dicen que son utiles.
Siendo diseñador gráfico yo me concentraría exclusivamente (para empezar) en HTML y CSS, y ya que empiezas, empieza bien: HTML5 y CSS3.
La base es crear un HTML válido para empezar y luego el CSS que lo muestra.
En lo que respecta al HTML, en realidad es bastante simple y fácil pero es mucha información al mismo tiempo. Yo consulto la web w3schools constantemente!! Ahora con HTML5 hay muchisimas facilidades, los formularios es un lujo hacerlos :)
En cuanto al CSS ahi es donde empiezan los insultos :D :D
Para empezar podrías usar alguno de esos "frameworks" CSS, creo que se llama 960px o algo asi, a mi me ayudaron en su momento y luego los abandoné, pero dicen que son utiles.
+1
Empieza por HTML + CSS, luego yo me meteria con PHP + JS (Jquery).
Yo tengo un curso de PHP zipeado por el correo, si lo quieres mandame un privi con tu mail y te lo reenvio :). Al tiempo que practicas con HTML puedes hacer pinitos con PHP.
EDITO: no lo tengo en el correo por que ocupa un poquito... si me mandas un privi te paso un enlace de descarga
Te recomiendo El gran libro de HTML5, CSS3 y Javascript. Lo tienes tanto en papel (http://www.amazon.es/gran-libro-HTML5-CSS3-Javascript/dp/8426717705/ref=sr_1_2?s=books&ie=UTF8&qid=1360748705&sr=1-2)como en digital (http://www.amazon.es/gran-libro-HTML5-Javascript-ebook/dp/B006ROJZYK/ref=sr_1_1?s=books&ie=UTF8&qid=1360748705&sr=1-1) (kindle).
josepzin
13/02/2013, 10:58
Cada area es un mundo: PHP, JS, JQUERY, MYSQL... si no está obligado a hacerlo todo y siendo diseñador gráfico yo empezaría de a poco con HTML+CSS y si tuviera conocimientos de programación miraría algo de Javascript+Jquery, pero solo si tuviera conocimientos de programación, sino ya con HTML+CSS ya tiene para entretenerse. Y además un programador que recibe un HTML ya listo (o casi) al que meterle código acelera muchisimo los desarrollos!
pache_reloaded
13/02/2013, 13:34
por que desprecias lo que has aprendido de forma autodidacta?
yo aprendi a usar 3d studio en un verano sin saber nada de nada. en ingles encima que no sabia ni lo que significaba. fue lento pero aprendi muchisimo.
luego me vino un listillo de arquitectura que decia que sabia usarlo y el tio era lentisimo. hacia las cosas escribiendo algunas. no sabia clonar de forma masiva y yo le hice lo mismo 10 veces mas rapido y mejor.
con el photoshop igual y con un monton de programas igual.
aprendes a saber buscar soluciones mucho mas rapido.
ahora si queires mejorar vale. pero ese aprendizaje que ya tienes te sera muy util
Monguer Guaper
13/02/2013, 13:45
por que desprecias lo que has aprendido de forma autodidacta?
yo aprendi a usar 3d studio en un verano sin saber nada de nada. en ingles encima que no sabia ni lo que significaba. fue lento pero aprendi muchisimo.
luego me vino un listillo de arquitectura que decia que sabia usarlo y el tio era lentisimo. hacia las cosas escribiendo algunas. no sabia clonar de forma masiva y yo le hice lo mismo 10 veces mas rapido y mejor.
con el photoshop igual y con un monton de programas igual.
aprendes a saber buscar soluciones mucho mas rapido.
ahora si queires mejorar vale. pero ese aprendizaje que ya tienes te sera muy util
Yo tanbiem aprendí a usar el 3DS Max de forma autodidacta! Bueno autodidacta del todo no, que me empollé los tutoriales que venían con el programa en los que primero creabas formas geométricas con texturas y el tutorial final era crear un muñeco gordo mediante extrusiones. La verdad es que me quedó muy bien y luego ya por mi cuenta cree cosas muy chulas.
Que tiempos aquellos cuando no era un esclavo y tenía tiempo libre para entretenerme con cosas inútiles.
Luisodin
13/02/2013, 14:42
Yo soy, diseñador web. Como te han dicho arriba, empieza con lenguajes de marcado actualizado al dia, HTML5. Tiene mucha demanda y su complemento CSS3 y la potencia de hacer efectos como degradados, bordes, sombras, posicionamientos...
Vas a tener casi que vivir continuamente con medidas casi al pixel y organizarte plantillas.
Necesitas PHP JAVA,... para ciertas cosas, pero centrate primero en eso y sufre de divitis.
Empieza con notepad++, que pinta, variables, selectores, etiquetas de otros colores. Es asequible a mas no poder.
No recomiendan programas ke generan código, como dreamweaver, pero si haces documentos en blanco y usas solo el editor de código, su potencia de autocompletado te va a ahorrar tiempo si eres muy vago.
Libros?
Anaya tiene guias cojonudas para principiantes, avanzados etc. Valen como 15€ y tienen de CSS3, JAVA7, HTML5,...
Empieza por este ultimo, aprende a ordenar el contenido, no uses etiquetas y atributos desaprovados en la norma y estaras al día.
Una vez dominado, embarcate en las CSS, separa contenido de aspecto visual y luego amplia segun el camino que quieras tomar, diseñando estilos, botones, fondos, menus,...
Tengo alguna presentacion que le hice a un chico al que daba clase, te los buscaré.
Soy gilipoyas, no se pq no trabajo de esto -.-
^MiSaTo^
13/02/2013, 14:57
Sólo quiero añadir que lo que estais hablando es MAQUETADOR web, no diseñador web.
HTML+CSS = maquetador/frontend
JAVA, PHP o cualquier otro lenguaje de servidor = backend
Y desde luego no tiene nada que ver hacer una cosa u hacer otra ;)
IronArthur
13/02/2013, 14:58
Yo soy, diseñador web. Como te han dicho arriba, empieza con lenguajes de marcado actualizado al dia, HTML5. Tiene mucha demanda y su complemento CSS3 y la potencia de hacer efectos como degradados, bordes, sombras, posicionamientos...
Vas a tener casi que vivir continuamente con medidas casi al pixel y organizarte plantillas.
Necesitas PHP JAVA,... para ciertas cosas, pero centrate primero en eso y sufre de divitis.
Empieza con notepad++, que pinta, variables, selectores, etiquetas de otros colores. Es asequible a mas no poder.
No recomiendan programas ke generan código, como dreamweaver, pero si haces documentos en blanco y usas solo el editor de código, su potencia de autocompletado te va a ahorrar tiempo si eres muy vago.
Libros?
Anaya tiene guias cojonudas para principiantes, avanzados etc. Valen como 15€ y tienen de CSS3, JAVA7, HTML5,...
Empieza por este ultimo, aprende a ordenar el contenido, no uses etiquetas y atributos desaprovados en la norma y estaras al día.
Una vez dominado, embarcate en las CSS, separa contenido de aspecto visual y luego amplia segun el camino que quieras tomar, diseñando estilos, botones, fondos, menus,...
Tengo alguna presentacion que le hice a un chico al que daba clase, te los buscaré.
Soy gilipoyas, no se pq no trabajo de esto -.-
Solo por comentar que Sublime Text 2 se ha comido con patatas al notepad++, por mucho.
salu2
Monguer Guaper
13/02/2013, 15:20
Sólo quiero añadir que lo que estais hablando es MAQUETADOR web, no diseñador web.
HTML+CSS = maquetador/frontend
JAVA, PHP o cualquier otro lenguaje de servidor = backend
Y desde luego no tiene nada que ver hacer una cosa u hacer otra ;)
Según lo que dice he creido entender que pedia tutoriales para maquetador, porque diseñador ya debe ser.
O al menos eso he sacado yo de los mensajes.
-----Actualizado-----
Solo por comentar que Sublime Text 2 se ha comido con patatas al notepad++, por mucho.
salu2
Jratuito?
josepzin
13/02/2013, 15:21
Jratuito?
No, es de pajo, por eso sigo con Notepad++!!
^MiSaTo^
13/02/2013, 15:23
Según lo que dice he creido entender que pedia tutoriales para maquetador, porque diseñador ya debe ser.
O al menos eso he sacado yo de los mensajes.
-----Actualizado-----
Jratuito?
Sí, si yo también he entendido eso, pero como todo el mundo habla de diseño web y luego veo algunos que tb han sacado el tema de Java/PHP...
Pues por aclarar conceptos, que a mi me gusta llamar las cosas por su nombre ;)
Y sobre sublime text, sí, es gratuíto.
-----Actualizado-----
No, es de pajo, por eso sigo con Notepad++!!
What? En la web oficial lo puedes descargar sin problemas, es una trial?
EDIT: ya veo:
Sublime Text 2 may be downloaded and evaluated for free, however a license must be purchased for continued use. There is currently no enforced time limit for the evaluation.
Luisodin
13/02/2013, 15:27
Sólo quiero añadir que lo que estais hablando es MAQUETADOR web, no diseñador web.
HTML+CSS = maquetador/frontend
JAVA, PHP o cualquier otro lenguaje de servidor = backend
Y desde luego no tiene nada que ver hacer una cosa u hacer otra ;) Pero pq el quiere empezar de 0 o eso hemos entendido...
IronArthur
13/02/2013, 15:40
What? En la web oficial lo puedes descargar sin problemas, es una trial?
EDIT: ya veo:
Sublime Text 2 may be downloaded and evaluated for free, however a license must be purchased for continued use. There is currently no enforced time limit for the evaluation.
En teoría cada nosecuantas veces que guardas un fichero te sale un box para decirte si quieres comprarlo. Nothing more.
salu2
buba-ho-tep
13/02/2013, 15:45
Yo estoy haciendo web ahora mismo y es un infierno. Depende que cosas te salen a la primera y otras que las pasas canutas. Lo peor es el concepto de padding y marggin. Siempre me lian pero al final a base de prueba y error me sale casi todo.
Dreamweaver te crea mucho codigo basura pero solo si utilizas el lado de diseño. Si juegas con el lado codigo/diseño funciona tan bien como otro programa. Y es más rápido.
^MiSaTo^
13/02/2013, 15:51
Pero pq el quiere empezar de 0 o eso hemos entendido...
Ya, pero si es diseñador gráfico, entiendo que no sabe programar, por tanto no querrá hacer backend ;)
Yo le recomiendo que aprenda interaction design o frontend (o ambas). Y como ya han dicho, los tutoriales de W3Schools para mi son los mejores que hay. Huye de todo lo que haya en Español que suele ser mierder
-----Actualizado-----
Yo estoy haciendo web ahora mismo y es un infierno. Depende que cosas te salen a la primera y otras que las pasas canutas. Lo peor es el concepto de padding y marggin. Siempre me lian pero al final a base de prueba y error me sale casi todo.
Dreamweaver te crea mucho codigo basura pero solo si utilizas el lado de diseño. Si juegas con el lado codigo/diseño funciona tan bien como otro programa. Y es más rápido.
El concepto padding/margin suele líar al principio sí pero es un concepto "sencillo":
padding es DENTRO del elemento. Es decir, el margen que dejas por ejemplo en un input text entre el recuadro y el propio texto.
margin es FUERA del elemento. Por ejemplo la separación que hay entre dos input texts
Sobre dreamweaver yo no lo recomiendo para nada, aparte que hace años que no se usa profesionalmente (o yo en las empresas que he estado en los últimos 8-10 años no lo he visto). Cualquier editor de texto plano te vale de sobra ;)
Luisodin
13/02/2013, 16:11
Yo el Dream lo uso por vagueria, pa escribir menos xD
Una imagen para entenderlo mejor Buba
En una caja o elemento primero va el margen, con respecto a la ventana o al elemento que lo contiene.
Luego va el borde, que es la division entre los 2 conceptos y es el área de nuestra caja o elemento
Despues tenemos el padding, que es la separacion del borde al contenido
Y por ultimo el contenido, texto o lo que sea.
http://i.stack.imgur.com/aVyFe.gif
Monguer Guaper
13/02/2013, 16:13
Yo estoy haciendo web ahora mismo y es un infierno. Depende que cosas te salen a la primera y otras que las pasas canutas. Lo peor es el concepto de padding y marggin. Siempre me lian pero al final a base de prueba y error me sale casi todo.
Dreamweaver te crea mucho codigo basura pero solo si utilizas el lado de diseño. Si juegas con el lado codigo/diseño funciona tan bien como otro programa. Y es más rápido.
Y si te joden los diseños porque trabajas con tamaños fijos en porcentajes siempre puedes utilizar:
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
para que el padding y el margin se incluyan dentro del ancho y alto total del elemento. Como ya he dicho es un truco muy util si trabajas con anchos en porcentaje y margenes en pixeles.
A mi me cambió la vida :D
^MiSaTo^
13/02/2013, 16:22
Yo el Dream lo uso por vagueria, pa escribir menos xD
Pues eso es un mal vicio ;) Te lo digo por experiencia
buba-ho-tep
13/02/2013, 17:07
Merci por la info. Una última pregunta:
¿Qué es mejor para enlazar los contenidos de diferentes páginas usar iframes, requires o simplemente copiar la pagina?
josepzin
13/02/2013, 17:20
¿Qué es mejor para enlazar los contenidos de diferentes páginas usar iframes, requires o simplemente copiar la pagina?
¿Para enlazar?? :P
Si quieres inlcuir otra pagina dentro de la tuya puedes usar iframes > http://www.w3schools.com/tags/tag_iframe.asp
^MiSaTo^
13/02/2013, 17:21
En serio? iframes en pleno 2013? [Ahhh]
Monguer Guaper
13/02/2013, 17:23
En serio? iframes en pleno 2013? [Ahhh]
Que conste que iframe no es lo mismo que frame!
Los iframes están aprobados en html5, aunque yo nunca los utilizo.
josepzin
13/02/2013, 17:40
Los iframes están aprobados en html5, aunque yo nunca los utilizo.
Eso, eso, QUE ESTAN APROBAOS!!! que no son ilegales!
Si eres pijoguai puedes usar JQuery.load :D :D
Monguer Guaper
13/02/2013, 17:51
Eso, eso, QUE ESTAN APROBAOS!!! que no son ilegales!
Si eres pijoguai puedes usar JQuery.load :D :D
Hoy en día el 99% de la gente suele tener habilitado javascript en su navegador, pero no hay que suponerlo. Y si tu página no tira de JS para nada más, enlazar la lib sólo para eso es un overkill.
Creo que se ha ido un poco de madre el tema, si lo que quieres es saber sobre diseño web, así en grande y en pequeñito, sin preocuparte del cómo... lo mejor que yo he leido (Y no soy diseñador web!):
http://nathanbarry.com/webapps/
Echa un vistazo a esto, aun falta un poco pero tiene buena pinta:
http://miriadax.net/web/introduccion_desarrollo_web
buba-ho-tep
14/02/2013, 06:14
El concepto padding/margin suele líar al principio sí pero es un concepto "sencillo":
padding es DENTRO del elemento. Es decir, el margen que dejas por ejemplo en un input text entre el recuadro y el propio texto.
margin es FUERA del elemento. Por ejemplo la separación que hay entre dos input texts
Sobre dreamweaver yo no lo recomiendo para nada, aparte que hace años que no se usa profesionalmente (o yo en las empresas que he estado en los últimos 8-10 años no lo he visto). Cualquier editor de texto plano te vale de sobra ;)
No es la primera persona que me lo dice pero en clase lo usamos. Yo intento aprender el codigo lo mejor que pueda pero hay veces que tiras de diseño para hacer cosas engorrosas como las tablas, los requires o atacar a tu base de datos mySQL.
Yo el Dream lo uso por vagueria, pa escribir menos xD
Una imagen para entenderlo mejor Buba
En una caja o elemento primero va el margen, con respecto a la ventana o al elemento que lo contiene.
Luego va el borde, que es la division entre los 2 conceptos y es el área de nuestra caja o elemento
Despues tenemos el padding, que es la separacion del borde al contenido
Y por ultimo el contenido, texto o lo que sea.
http://i.stack.imgur.com/aVyFe.gif
Algo más claro me queda pero estos conceptos se asimilan a base de ir trabajando. Gracias!!
Y si te joden los diseños porque trabajas con tamaños fijos en porcentajes siempre puedes utilizar:
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
para que el padding y el margin se incluyan dentro del ancho y alto total del elemento. Como ya he dicho es un truco muy util si trabajas con anchos en porcentaje y margenes en pixeles.
A mi me cambió la vida :D
Lo tendré en cuenta tío. Yo siempre trabajo con porcentajes ya que si me salgo del patrón que he aprendido me hago un lio monumental. :D
Powered by vBulletin® Version 4.2.5 Copyright © 2025 vBulletin Solutions Inc. All rights reserved.