Tutorial - Plantillas Web - Parte I

Jajajajaja, Gracias Arkad me has resuelto la duda que tenía de forma muy divertida y fácil de entender. La pregunta tb venía pq en varias páginas he visto que el gráfico del títuto estaba dividido en varios trozos y no sabía muy bien pq lo hacía. Pero ahora ya lo he entendido. Gracias de nuevo.

 

La segunda entrega del tutorial esta en linea. Recien horneada. Saludos.

 

como hacer la imagen...

oye arcard.....en realidad yo soy primeriza en esto y pues quisiera saber desde el principio y no se si tu me pudieras ayudar, es decir, quisiera saber como es que diseñaste esa imagen y de que tamaño hiciste tu documento en photoshop para adaptarlo a lo que es la pagina y por verlo ver bien en diferentes resoluciones....

Te agradeceria mucho tu ayuda....

 

Arcard, gracias por mencionar mi sitio ( <a href="http://www.adukal.com" target="_blank">adukal.com</a> ) aquí. Ya que se habla de las medidas standard para el diseño web ... sería bueno dejar en claro que en algunos casos el alto total visible es de 420 pixeles. Y, en realidad, convengamos en que armar un sitio con tablas, midiendo todo en pixeles y basando el diseño en los slices de Photoshop no es lo mas recomendable y conveniente.
Saludos

 

A mi me ha funcionado muy bien, sólo es cuestión de saberlo usar.
Pero cada quien tiene sus preferencias. Si la otra opcion que encuentras es usar capas (layers) les encuentro aún MUCHOS inconvenientes, dada su incompatibilidad con muchos navegadores.

No solo buscamos un diseño accesible, sino tambien compatible.


Saludos.

 

Que algo funcione no significa que esté bien hecho. Mi sitio se ve bien en la mayoría de navegadores, pero en términos de estándares web es un desastre. Quiero decir, cada uno diseña como quiere y como puede dependiendo de muchos factores (mayoritariamente si el sitio es personal o comercial), pero no podemos hacer la vista gorda a los estándares.
Por ejemplo, no hay que olvidarse que las tablas fueron hechas para tabular datos y no para maquetar. Hoy día, con el mejorado soporte de CSS, es posible diseñar excelentes sitios sin (o casi sin) tablas, cosa que muchos diseñadores provenientes de la gráfica desconocen. No sé si viene al caso esto, pero me pareció interesante comentarlo porque mucha gente confía en lo que programas como Photoshop producen sin siquiera darle una mirada al código.
Me parece que el gran error es tratar a la web tal como se encara una publicación impresa.

 

<!--quoteo--><div class='quotetop'>CITA</div><div class='quotemain'><!--quotec-->No sé si viene al caso esto, pero me pareció interesante comentarlo porque mucha gente confía en lo que programas como Photoshop producen sin siquiera darle una mirada al código. &nbsp;
Me parece que el gran error es tratar a la web tal como se encara una publicación impresa. &nbsp;
.<!--QuoteEnd--></div><!--QuoteEEnd-->


Tienes razon en ese aspecto, no debemos tratar el web como si fuera un impreso. Pero, aun teniendo en cuenta el gran soporte que la mayoria de los navegadores tienen para con el css, es interesante recordar que efectivamente 'distintos navegadores interpretan' el codigo, pero no lo presentan de la misma forma. En cambio, la gran ventaja de las tablas, es que todos los navegadores los presentan con una similitud casi al 100%.

<!--sizeo:9--><span style="font-size:12pt;line-height:100%"><!--/sizeo-->
Ahora, pasando al rollo de que photoshop no crea realmente un entorno accesible, tambien concuerdo contigo en ese aspecto, pero si notaste, por eso se creó un segundo tutorial, de este mismo tema, con la finalidad de dejar 'usable' lo que photoshop crea.<!--sizec--></span><!--/sizec-->

Ahi tenemos el gran ejemplo de Netscape Versus IExplorer, ambos son muy conocidos y utilizados, pero aun asi, tienen grandes diferencias que obligan a algunos diseñadores a optar por utilizar elementos que sean interpretados en lo mas similar posible por los dos.

Las capas (layers), el hermoso css, util sí. muy útil, pero a fin de cuentas, interpretado de distintas formas por estos navegadores principales.

Las tablas no fueron creadas para acomodar el diseño, pero eso no quiere decir que no se pueda, o que sea inapropiado, despues de todo, eso seria en parte una muestra de la gran inventiva de nosotros como diseñadores, que tomamos los recursos que tenemos y les sacamos el maximo partido.


Ahora, sacas a relucir otro asunto
<!--quoteo--><div class='quotetop'>CITA</div><div class='quotemain'><!--quotec-->Que algo funcione no significa que esté bien hecho. Mi sitio se ve bien en la mayoría de navegadores, pero en términos de estándares web es un desastre. Quiero decir, cada uno diseña como quiere y como puede dependiendo de muchos factores (mayoritariamente si el sitio es personal o comercial), pero no podemos hacer la vista gorda a los estándares. &nbsp;
<!--QuoteEnd--></div><!--QuoteEEnd-->

Creo que si tu sitio se ve bien en la mayoria de los navegadores, no tienes otra cosa de que preocuparte. Los estandares solo seran eso, estándares, nunca serán 100% obligatorios, ya depende de ti el discernir cuando afecta el no apegarse a ellos y cuando no.

Te pongo el ejemplo de los banners : existe un estandar para el tamaño de los banners, pero eso no significa que un banner va a estar mal hecho, si se le da un tamaño menor, debido a problemas de espacio.

En fin, los estandares deben tomarse en cuenta, y respetarse, pero si yo puedo no apegarme a ellos sin afectar al usuario,por mi encantado.Sea como fuere, este topic ha sido dedicado 'a las plantillas web en photoshop' no a la usabilidad.


PD. Si te molesta el que se use tablas en el web...habra que reclamarle primero a Microsoft... si ellos usan, porque nosotros no?... Otra cosita, si el uso de tablas en el acomodo del diseño no es factible... ¿Entonces porque el codigo HTML tiene todas las etiquetas para trabajarlo?

Saludos.

 

Linda discusión, no? Algo bueno sacaremos de esto.
Pero me pareció mejor crear un tópico <a href="http://www.forocreativo.net/foro/viewtopic.php?p=9529#9529" target="_blank"> aquí »» </a>
Como voy a ODIAR las tablas!!! ja ja
Las tablas son solo un elemento mal utilizado (y me incluyo en la lista!) y me parece que si cada uno de nosotros comenzamos a aplicar cada elemento como corresponde estaremos contribuyendo a mejorar la web.

Y por favor, que quede claro que tu tutorial está perfecto. Así es como se trabaja en Photoshop para la web.
Otro tema muy interesante sería el de la creación de Gif transparentes. Yo particularmente prefería el viejo sistema de Photoshop, Hoy utilizo Ulead Smart Saver para generar este tipo de imágenes.

 

bueno, simplemente decirte q muchisimas gracias por este pedazo de tutorial, he estado tiempo buscando algo asi, y este es mas de lo q esperaba...

y... no es q me gustaria, ni q estare esperando, es q NECESITO esa 3ª parte!!!!!!!!!!!!!! falta mucho????

salu2

 

La tercera parte no está lista, pero la segunda ya.

Dame un poco de tiempo, que tambien tengo vida personal

 

+++++++++

Gracias por el tuto bro, me es de gran ayuda.

 

En enlace está muerto, plis resubid!!! Gracias!

 

Me uno a ese pedido...me interesa eso...please!!!!!!!

 

Ese tutorial esta en mi web. www.disenosfaraon.tk y se llama plantillas web, es del mismo autor, solo que me pidio que le cambiara el nick.

Abrazos

 

Jejeje...MUCHAS GRACIAS!