En este vídeo se explica una de las nuevas caracterísitcas de la nueva versión de Dreamweaver CS6. La composición fluida o líquida que nos permite crear un diseño que se adaptará la pantalla del dispositivo que se utilice para visualizarlo, sea este un móvil, una tablet o la pantalla de un ordenador.
sep 10, 2012 @ 15:13:31
Buenos día, quería darle las gracias por el aporte con este tema. Me gustaría que me ayudara con algunas cosas básicas especificas.
Como haría para que mi fondo en diseño liquido me aparezca centrado y el diseño en general también, he buscado en las propiedades pero no logro centrar el contenido adecuadamente ya que si lo hago la imagen de fondo se me recorta. Lo he estado probando en pantalla de 20 y 13 pulgadas
sep 11, 2012 @ 19:34:16
Lo más rápido es que edites manualmente las opciones de background de CSS
dic 12, 2012 @ 09:46:07
Hola Antonio, quisiera hacer una pregunta porque no consigo resolver este problema.
En el mismo video que tienes colgado en youtube ya te la he hecho pero es que me es tan urgente que necesito una respuesta lo antes posible.
se como esconder ya un div para que aparezca en la pantalla de table y desktop pero no en phone, pero como hago para que donde hay un div viendose en tablet y desktop, en cambio en phone se vea otro div distinto en el mismo lugar?
gracias y perdona por abordarte asi.
un saludo.
dic 12, 2012 @ 14:43:15
Pienso que lo más rápido sería hacer dos DIVs distintos y ocultar o mostrar el DIV adecuado en cada Media Query. La posición no es más que otra propiedad CSS, así que no habría ningún problema en asignarle a un DIV la posición de otro DIV que está en modo invisible. Además al DIV invisible se le podría asignar otra posición en el Media Query donde aparece invisible.
dic 12, 2012 @ 15:09:37
Perdona mi ignoracia. Los Media-query es el CSS que te pide guardar dreamweaver al crear una plantilla de diseño fluido con textos como: @media only screen and (min-width: 769px) {…?
Y como puedo variar el posicionamiento de un div fluido?, si no puedo aplicarle un posicionamiento absoluto ni relativo a nada? no puedo anidarlos para que tengan una referencia donde ajustarse no?
dic 12, 2012 @ 15:40:23
Efectivamente. Todas las instrucciones CCS que hay entre las llaves que acompañan a la instrucción “@media only screen and (min-width: 481px)” o equivalente, son las características CSS de cada uno de los DIVS que actúan en ese media Query. Verás que puedes acceder a la programación CSS de todos los DIVS para ese tipo de pantalla específico, por ejemplo en este ejemplo:
@media only screen and (min-width: 481px) {
.gridContainer {
width: 96.8984%;
padding-left: 1.5507%;
padding-right: 1.5507%;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
}
Si quisiera cambiar la posición de DIV #LayoutDiv1″ y transformarla en posición en absoluta, además de hacerlo invisible, simplemente tendría que modificar el código de esta forma:
@media only screen and (min-width: 481px) {
.gridContainer {
width: 96.8984%;
padding-left: 1.5507%;
padding-right: 1.5507%;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
position: absolute;
visibility: hidden;
top: -3000px;
left: 5000px;
}}
Observa que le he dado unas coordenadas absolutas de -3000, 5000 que sería la forma en CSS de “enviarlo al quinto pimiento”. Si no estás familiarizdo con el código CSS, puedes hacer lo mismo editando el estilo correspondiente desde la paleta de estilos CSS de Dreamweaver.
dic 12, 2012 @ 15:47:46
lo acabo de probar tanto lo de si los media-query son la CSS que guardas al principio, y creo que si, y le he dado un posicionamiento absoluto a los div y me lo coge, lo unico que no se si esto es correcto? Lo único que si lo hago asi, me obliga a estar desplazando cada elemento que vaya a ir colocando hacia abajo
Por cierto porque puede ser que no me sale la pagina centrada en el navegador? sino como un poco desplazada hacia la izquierda?
dic 12, 2012 @ 15:50:17
perdona he debido de volverte a escribir antes de que se visualizara tu respuesta.
dic 12, 2012 @ 16:06:00
gracias antonio. El problema que le veo es lo de que me obligue a poner todo lo que vaya seguido con posicionamiento absoluto, con lo cual le quito un poco de fluidez no?
dic 12, 2012 @ 16:19:04
El posicionamiento absoluto no es obligatorio,es simplemente para evitar que el DIV invisible pueda ser molesto. Lo importante es que esté activada la propiedad “hidden”. …Y te dejo que debo coger un avión en unas horas. Felices fiestas!!
dic 12, 2012 @ 16:24:45
pero si no es obligatorio el posicionamiento absoluto, como coloco el div visible en el lugar donde esta el div escondido?
Felices fiestas igualmente Antonio, y buen viaje
dic 12, 2012 @ 22:21:34
El posicionamiento de los diferentes DIVs lo decides en cada Media Query, tal y como se explica en el vídeo. Cuando un DIV es invisible, es como si no estuviera en ese Query y por lo tanto puede remaquetarlo como te parezca siempre y cuando tengas en cuenta el comportamiento del diseño líquido. De todos modos, o diseño fluido o posicionamiento absoluto, debes escoger el método con sus pros y sus contras. Aún así tampoco estoy al 100% seguro de haber entendido tu pregunta.
dic 12, 2012 @ 19:17:00
tampoco se pueden colocar con el diseño fluido un mapa de imagen (un vinculo en una zona en concreto de la imagen), porque como se redimensiona la pagina no?
dic 12, 2012 @ 22:23:24
El mapa de imagen va vinculado al DIV que contiene el tag![]()
correspondiente al mapa, así que no veo porqué no debería acompañar a ese DIV allá donde vaya.
dic 13, 2012 @ 02:10:37
Donde me dices que igual no has entendido mi pregunta. Voy a dejarte un ejemplo de lo que quiero decir: http://www.it.eku.edu/ o este: http://www.dorigati.it/it/ estas paginas por ejemplo tienen una imagen o elementos que cuando la ventana se va estrechando o cuando lo visualizas en un iphone por ejemplo desaparecen, a eso me refiero, es decir como de repente por ir cambiando la visualización se va cambiando los divs y donde había una imagen luego hay otra o no hay nada. Eso es lo que quiero.
Y lo del mapa lo volveré a probar, pero lo he estado haciendo hoy y se me situaba descolocado cuando lo visualizaba en el navegador. El mapa no utliza coordenadas de posición absoluta? podría ser eso no por lo que me ha fallado?
Para escalar algo mas una imagen cuando vaya reduciendose el tamaño de la ventana del navegador he encontrado este plugin: http://jquerypicture.com/ que te parece?
creo que estoy muy cerca de terminar de entender el comportamiento de las nuevas cuadriculas fluidas, muchas gracias por la ayuda que me estas prestando Antonio.
dic 13, 2012 @ 10:10:27
Las páginas que te indicado en el post anterior las he visto en mediaqueri.es, y haciendo un análisis general de lo que veo en esta página. Practicamente la mayoría suele colocar el menu arriba y muy limpio, entiendo que por razones visibles en la adaptabilidad. Pero en cambio en otros casos como este: http://coworkchicago.com/ el menu esta en medio y pasa a estar arriba, esto lo han hecho con el posicionamiento absoluto?.
Y en la página que te indicaba antes http://www.dorigati.it/it/ y otras muchas veo elementos superpuestos, algo que antes yo al menos conseguia hacer con un posicionamiento abosoluto y un Z-index 1. como puedo hacer esto con el diseño fluido?
Me recomiendas usar imagenes SVG?
dic 14, 2012 @ 00:34:29
antonio se han borrado los ultimos mensajes?
dic 14, 2012 @ 08:22:36
Hola Israel. No se habían borrado los mensajes. Lo que ocurre es que, como te comenté, estos días ando de vuelos y aviones y no me es posible estar conectado.
En cuanto a las página que comentas, no se exactamente que método habrán seguido, pero está claro que están utilizando la propiedad “visibility” de CSS.
En cuanto a la superposición de objetos en diseño fluido, es muy fácil. Debes dar coordenadas absolutas a los DIVs pero con el modo de posicionamiento “Relative”, de esta manera, esas coordenadas se establecerán en base relativa a las coordenadas del DIV “padre” que lo contiene. Algo similar puede ocurrir con los mapas.
Siento si estos días no puedo estar tan presente como acostumbro. Pero estoy en un congreso en los EE.UU y no voy a tener mucho tiempo para atender el resto de actividades.
Un saludo.
dic 14, 2012 @ 11:10:04
gracias antonio por tu esfuerzo, he probado lo que me dices pero no me funciona. Si doy una coordenada abosluta a un div pero le indico posicionamiento relativo, no me hace nada. Hago esto:
/* Diseño móvil: 480 px e inferior. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 87.36%;
padding-left: 1.82%;
padding-right: 1.82%;
}
#cabeceraIPHONE {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#cabeceraTABLET {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
visibility: hidden;
}
#cabeceraESCRITORIO {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
visibility: hidden;
}
/* Diseño tableta: de 481 px a 768 px. Hereda estilos de: Diseño móvil. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 90.675%;
padding-left: 1.1625%;
padding-right: 1.1625%;
}
#cabeceraIPHONE {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
visibility:hidden;
}
#cabeceraTABLET {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
visibility: visible;
top: 0px;
position: relative;
}
#cabeceraESCRITORIO {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
}
/* Diseño escritorio: de 769 px hasta un máximo de 1232 px. Hereda estilos de: Diseño móvil y Diseño tableta. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 88.2%;
max-width: 1232px;
padding-left: 0.9%;
padding-right: 0.9%;
margin: auto;
}
#cabeceraIPHONE {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
visibility:hidden;
}
#cabeceraTABLET {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
visibility:hidden;
}
#cabeceraESCRITORIO {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
visibility: visible;
top: 0px;
position: relative;
}
}
dic 14, 2012 @ 11:27:32
creo que deberia de haberle metido valores negativos para que funcione, me acabo de dar cuenta. Pero en definitiva eso obliga como te comenté a que todos los elementos que vienen por detras tambien se tenga que modificar su posicion no?
dic 14, 2012 @ 14:19:57
Sí, así es,
dic 14, 2012 @ 14:36:16
Gracias Antonio, lo único que al dar coordenadas de posicionamiento en px en algunos navegadores se me ve distintos que en otros. Estaría bien que pudiera ser porcentual, pero lo he probado y no me da resultado.
dic 14, 2012 @ 14:49:30
Bfff…en teoría con porcentaje debería funcionar también, pero para detectar donde está el error habría que meterse a fondo en el caso concreto y ahí ya no te puedo ayudar.
Lo que si te recomiendo es que le eches un vistazo a la nueva Versión de Adobe Muse que ahora permite también hacer diseño fluido/responsivo pero sin programación. Quizá también te ayude a conseguir lo mismo.
dic 15, 2012 @ 10:13:01
Gracias antonio, me parece una solucion increible Adobe Muse.
He estado echandola un vistazo en youtube y por lo q veo y como tu me decias, se puede hacer diseño responsivo. ¿Hay q crear imagino diseños distintos para cada formato no? O automaticamte adapta un diseño a varios formatos? No creo no?
Y puedo tambien utilizar web fonts como en dreamweaver cs6?
dic 15, 2012 @ 18:24:14
En Muse, para hacer diseño responsivo partes del diseño que hayas hecho en uno de los querys y luego en el resto realizas las modificaciones necesarias.
dic 15, 2012 @ 10:36:16
Y puedo importar a adobe muse graficos svg antonio?
dic 15, 2012 @ 18:24:52
Sí. Pero no todos los browser los pueden visualizar.
dic 15, 2012 @ 20:45:02
Creo que encontré por ahí una linea de código para que ciertos navegadores no mostrarán el svg y en cambio mostraran un jpg o un png.
Por lo demás no da problemas a la hora de visualizar las páginas creadas con Muse en navegadores antiguos de IE sobre todo? o crea como hace el Dreamweaver unas lineas de código para que interprete la página estos navegadores?
dic 18, 2012 @ 01:06:27
Muse está preparado para navegadores compatibles HTML5. Hasta dónde yo se no hace discriminación. Si planeas hacer webs para navegadores antiguos Muse ( ni el diseño responsivo ) deberían ser tu elección.
Afortunadamente, las últimas estadísticas demuestran que la base instalada de navegadores antiguos es ya residual.
dic 18, 2012 @ 16:55:56
muchas gracias antonio. Y estoy trabajando con el Muse, y cada minuto que pasa estoy mas sorprendido.
De todas formas no quiero olvidarme del Dreamweaver.
Imagino que para páginas que no vayan con diseño responsivo hasta que no lo controle en dreamweaver seguiré con adobe Muse. Y Dreamweaver para algo mas concreto.
muchas gracias por tu ayuda nuevamente Antonio. Ya me he añadido a tu lista de correo para recibir las ultimas noticias que vayas metiendo en el blog, me parece muy interesante todo lo que metes.
un abrazo