Foros del Web » Creando para Internet » HTML »

Estoy buscando tutoriales para aprender...

Estas en el tema de Estoy buscando tutoriales para aprender... en el foro de HTML en Foros del Web. Hola compañeros. Llevo muchisimo tiempo con ganas de aprender a crear diseño liquido. Se que muchos de aqui os encontrareis en contra de hacer este ...
  #1 (permalink)  
Antiguo 10/08/2010, 09:49
Avatar de RAZGRIZ24  
Fecha de Ingreso: septiembre-2009
Mensajes: 141
Antigüedad: 8 años, 3 meses
Puntos: 2
Estoy buscando tutoriales para aprender...

Hola compañeros.

Llevo muchisimo tiempo con ganas de aprender a crear diseño liquido. Se que muchos de aqui os encontrareis en contra de hacer este tipo de diseños. Pero yo quiero aprender a aplicarlos.

Ciertamente, se hacer efecto liquido en ligeros aspectos, como tablas y fondos.

Pero no soy capaz de ajustar las medidas a otros aspectos como marcos hechos por photoshop (a los que quiero poner para "enmarcar" la informacion), fotografias, botones, backgrounds... etc.

Alguien puede facilitarme algun tutorial de como conseguir estos diseños o algun consejo? Algo que me ayude a aprender a aplicarlo?

Se que muchos estais en contra de este diseño, pero es atractivo y a mi me resulta como tal.

Si podeis ayudarme...
  #2 (permalink)  
Antiguo 11/08/2010, 04:40
Avatar de RAZGRIZ24  
Fecha de Ingreso: septiembre-2009
Mensajes: 141
Antigüedad: 8 años, 3 meses
Puntos: 2
Respuesta: Estoy buscando tutoriales para aprender...

Nadie puede ayudarme?
  #3 (permalink)  
Antiguo 11/08/2010, 06:08
Avatar de xhiena  
Fecha de Ingreso: enero-2008
Ubicación: Valencia
Mensajes: 34
Antigüedad: 9 años, 10 meses
Puntos: 0
Respuesta: Estoy buscando tutoriales para aprender...

no entiendo que quieres decir con diseños liquidos. ¿puedes explicarlo?
  #4 (permalink)  
Antiguo 11/08/2010, 07:44
Avatar de RAZGRIZ24  
Fecha de Ingreso: septiembre-2009
Mensajes: 141
Antigüedad: 8 años, 3 meses
Puntos: 2
Respuesta: Estoy buscando tutoriales para aprender...

lo contrario del diseño fijo. Es decir, el diseño que se ve igual en todas las pantallas de ordenador. Y no me refiero a diseños tipo foro (ya que ahi son tablas y resulta sencillo) Sino cuando el diseño tiene otros elementos mas complejos, como imagenes, spry, botones, capas... etc.

Como esta pagina, que desde hace mucho me encanta:

www.astonmartin.com

Se ve igual en todas las pantallas.
  #5 (permalink)  
Antiguo 11/08/2010, 07:59
Avatar de ElJavista
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Lima Perú
Mensajes: 2.231
Antigüedad: 10 años, 9 meses
Puntos: 67
Respuesta: Estoy buscando tutoriales para aprender...

Los diseños líquidos ciertamente son bastante buenos, pero no es que permitan que se vean igual en todas las pantallas, eso se consigue mediante un diseño fijo. Lo que permite es que el diseño de adapte a cualquier resolución. Eso hoy en día es bastante útil porque las pantallas panorámicas se han puesto de moda y están bajando sus precios. Un diseño de, digamos 760 píxeles, (lo que se solía recomendar) se podría ver ridícula viéndose en una pantalla panorámica configurada con alta resolución.

Bueno, el problema con el diseño líquido es justamente lo que pides, cuando existen imágenes y capas (en cuanto a los botones no le veo el problema). Talvez en cuanto a las capas tampoco haya problemas porque a las capas se les da también un tamaño porcentual, pero en cambio hacer eso con imágenes? podríamos darle un tamaño porcentual y asunto resuelto, pero no todos los navegadores lo renderizan adecuadamente. Qué hacer entonces?
No podría darte una respuesta satisfactoria, creo que cada uno debería buscar su solución de acuerdo al diseño mismo.

Podría hacerse que en el diseño haya partes líquidas y otras no, o podría tomarse en cuenta los diferentes tamaños que adoptaría el diseño para que se vea bien en las distintas resoluciones. Es un problema en que no puedo hacer una recomendación definitiva. Suerte!
  #6 (permalink)  
Antiguo 11/08/2010, 09:13
Avatar de RAZGRIZ24  
Fecha de Ingreso: septiembre-2009
Mensajes: 141
Antigüedad: 8 años, 3 meses
Puntos: 2
Respuesta: Estoy buscando tutoriales para aprender...

Si bueno, las capas tienes razon.

Pero las imagenes es bastante comprometido. Cuando aplicas el porcentaje en el ancho funciona perfectamente... pero a lo alto no.

Por otro lado, el tema botones que dices que no ves el problema: Es el mismo que el de las imagenes cuando la barra de navegacion ha sido creada integramente por ti. Tu le aplicas por ejemplo el 20% (5 botones, 20% de la <td> cada boton) Efectivamente, se ajustan. Pero tendras que aplicarle un porcentaje equivalente al alto para que no se distorsione la imagen. Pero ¿cual es el porcentaje equivalente? teniendo en cuenta que la proporcion de ancho/alto de las pantallas es diferente en cada una... Y si pasas a medidas de pixeles? volvemos al diseño fijo.
  #7 (permalink)  
Antiguo 11/08/2010, 20:35
Avatar de ElJavista
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Lima Perú
Mensajes: 2.231
Antigüedad: 10 años, 9 meses
Puntos: 67
Respuesta: Estoy buscando tutoriales para aprender...

En cuanto a los botones, pues si le pones imágenes como fondo o haces que el botón sea una imagen, pues claro que hay problemas. Yo estaba pensando en los botones input type="button", <button> o los links que se les da apariencia de botón sin fondo de imágen. En fin.

A ver, en primer lugar estas exagerando el término de diseño líquido, solo se trata de hacer el ancho líquido, no el alto, de qué serviría un alto líquido si para eso existe el scroll? Eso no es un problema en realidad. El único problema que veo son las imágenes. Pero como te dije, yo no conozco ninguna solución definitiva para el tema. Si alguien podría darla por favor que nos la comparta.
  #8 (permalink)  
Antiguo 11/08/2010, 21:14
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: Estoy buscando tutoriales para aprender...

RAZGRIZ24:

Tu planteo es un poco confuso, al parecer lo que vos deseas es trabajar con diferentes resoluciones, eso y lo que generalmente se conoce como "divs liquidos" son cosas diferentes. Hay muchas técnicas para hacer eso. Con lo que más deberías cuidarte es con las imagenes, estas no se ajustan.
Te sugiero que busques en Google por "liquid Layouts" y veas algunos tuitoriales y te descargues algunas de las numerosas plantillas que se encuentran disponibles. analizalas, hace tus pruebas, y si tenes problemas concretos, nos los expongas en el foro.

El ejemplo de http://www.astonmartin.com/ que pusiste, de liquido no tiene nada y en 800x600 hace scroll

Saludos y espero por tu trabajo
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Etiquetas: tutoriales, buscadores
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:39.