Muy buenas, estoy buscando alguien para hacer adaptable para móviles (es lo mismo que « responsive »?) un sitio que utiliza Spip. Si sabéis de alguien que trabaje con esta plataforma, os lo agradezco. Un saludo.
Saludos
Guillermo V. Sánchez
El 7/3/2015, a las 15:38, juanma <soyjuanma@gmail.com> escribió:
Muy buenas, estoy buscando alguien para hacer adaptable para móviles (es lo mismo que « responsive »?) un sitio que utiliza Spip. Si sabéis de alguien que trabaje con esta plataforma, os lo agradezco. Un saludo.
Spip-es@rezo.net - http://listes.rezo.net/mailman/listinfo/spip-es
Hola Juanma. Sí, eso es « responsive », extendido a todas las resoluciones, móviles, pc, tabletas… Yo desde hace meses estoy trabajando en la actualización de varios sitios creándoles nuevos esqueletos adaptables a diferentes resoluciones. Si te interesa puedes escribirme a modo privado, trabajo dando servicio en esto.
Ya para todos en general por si os sirve la información, decir que la cosa en realidad no tiene mucho misterio siempre y cuando se use css no sólo para dar formatos a textos e imágenes, si no principalmente para definir la estructura. Simplemente hay que usar un sencillo javascript que reconoce qué resolución se está usando, en función de cada rango de resolución, se aplica un .css u otro y listo.
Si os interesa amplío información.
Saludos.
F.
Hola Juanma, si llevo varios años trabajando con SPIP como CMS de base, el frontend (la plantilla o esqueleto en este caso) es totalmente independiente del backend (SPIP en este caso) por lo que se puede actualizar sin problema alguno, quizás hay que revisar el funcionamiento en actualizaciones mayores, por ejemplo en la salida inminente de la versión 3.1.
El sistema de esqueletos que utilizo está basado en Zpip que permite no repetir ni una solo línea de código o cambiar la distribución de la página en función del tipo de sección que te encuentres……
Ahora mismo estoy metido en un desarrollo urgente por lo que podría profundizar en tu caso en unas horas, si quieres podemos comunicarnos de forma privada en masweb@me.com
Recibe un cordial saludo
Guillermo Valentín
On Sun, Març 8, 2015 9:16 pm, Fernando García Balestena wrote:
.../
~ Simplemente hay que usar un sencillo javascript que reconoce
~ qué resolución se está usando, en función de cada rango de resolución, se
~ aplica un .css u otro y listo.
~
~ Si os interesa amplío información.
Hola Fernando, sí creo que estaría bien tener esa info.
saludos!
Lo normal es que ni siquiera necesites JavaScript para eso. Puedes usar CSS Media Queries.
Ejemplo (diferente color de fondo según la resolución):
body {
background: green;
}
@media (max-width: 600px) {
body {
background: red;
}
}
Igual que cambias el color de fondo puedes cambiar cualquier otra cosa. Por ejemplo: si hay espacio muestras la página con columnas, y si no no.
Eso también se puede usar en la etiqueta LINK. Ejemplo:
<link href="css/mobile.css" type="text/css" rel="stylesheet" media="handheld, only screen and (max-device-width: 700px)" />
Incluye también esto dentro de la etiqueta HEAD de tus páginas:
<meta name="viewport" content="width=device-width, initial-scale=1" />
Si buscas información sobre "CSS Media Queries" encontrarás un montón de tutoriales.
Espero que te sirva.
Saludos,
Ignacio
El 12-03-2015 09:38, xabi@nodo50.org escribió:
On Sun, Març 8, 2015 9:16 pm, Fernando García Balestena wrote:
.../
~ Simplemente hay que usar un sencillo javascript que reconoce
~ qué resolución se está usando, en función de cada rango de resolución, se
~ aplica un .css u otro y listo.
~
~ Si os interesa amplío información.Hola Fernando, sí creo que estaría bien tener esa info.
saludos!
_______________________________________________
Spip-es@rezo.net - http://listes.rezo.net/mailman/listinfo/spip-es
Hola. Perdón el retraso. Os cuento.
Como dice Ignacio, es posible que no sea necesario javascript para detectar la resolución y baste con CSS Media Queries. Lo que no he comprobado es si es posible cambiar el css según cambiamos de resolución independientemente de la carga… me explico: lo lógico es que inmediatamente te cargue la página desde el dispositivo que estás usando según sea su resolución y no haga falta que vuela a comprobarla hasta la siguiente carga. Pero también es cierto que tu puedes cambiar la resolución sin actualizar, por ejemplo cambiando el tamaño de la ventana del navegador o girando la tablet de horizontal a vertical o viceversa. Como digo, no sé si con CSS Media Queries ese cambio se refleja inmediatamente, con el javascript sí. No sé si me he explicado bien.
Yo uso un javascript muy ligero, con lo que tampoco supone mucha carga a la página. Trabaja con Jquery que sí que es pesado, pero igual esa librería la voy a cargar para otras aplicaciones, como explico más adelantne.
function adjustStyle(width) {
width = parseInt(width);
if (width < 701) {
$("#size-stylesheet").attr(« href », « css/narrow.css »);
} else if ((width >= 701) && (width < 900)) {
$("#size-stylesheet").attr(« href », « css/medium.css »);
} else {
$("#size-stylesheet").attr(« href », « css/wide.css »);
}
}
$(function() {
adjustStyle($(this).width());
$(window).resize(function() {
adjustStyle($(this).width());
});
});
En definitiva, lo que queremos conseguir es que dependiendo de la resolución nos muestre la página con una estructura y formatos u otra pues cargará un css u otro. Simplificanado, como ejemplo uso dos rangos distintos (puede haber más rangos como veréis en el código js anterior) uno para resoluciones mayores de 800px y otra para menores, podemos decir que una página se muestre con tres columnas para más de 800 y en una sola columna para resoluciones menores. También, cambiar los formatos de los textos si por ejemplo queremos destacarlos más en resoluciones menores (pensando en móviles)
En CSS>800
#total {
display: inline-block;
}
#banda-izquierda {
position:relative;
float:left;
}
#banda-central {
position:relative;
float:left;
}
#banda-derecha {
position:relative;
float:right;
}
/* el código de arriba hará tres columnas sobre el mismo ancho */
En CSS<800
#total {
display: inline-block;}
#banda-izquierda {
position:relative;
}
#banda-central {
position:relative;
}
#banda-derecha {
position:relative;
}
/* este código de arriba apilará las columnas ocupando cada una de ellas el ancho total */
/*NOTA: los div #banda-derecha, #banda-central y #banda-izquierda deben estar envueltos en el div #total */
También, para ocultar contenidos dependiendo de la resolución, los envolvemos en un div que en un css tendrá unas propiedades y en otro tendrá la única propiedad « display: none », ocultándolo. Yo lo que hago es duplicar contenidos. Por ejemplo muestro un mensaje largo para el aviso de cookies en resoluciones mayores de 800 y uno más corto para menores
EN CSS>800
#info-cookies-largo {
width: 100%;
color: #333;
background-color: #fff;
…
}
#info-cookies-corto {
display: none;
}
EN CSS<800
#info-cookies-largo {
display: none;
}
#info-cookies-corto {
width: 100%;
color: #FFF;
background-color: #000;
…
}
Ambos elementos, #info-cookies-largo y #info-cookies-corto, tienen que estar presentes en el esqueleto en .html, pero dependiendo de la resolución mostrará uno u otro.
Después, también podemos usar otros elementos ya prefabricados (podréis encontrar muchas cosas en la red) que se adaptan a todas las resoluciones. Yo en mi caso suelo usar sliders y menús desplegables. Ahí es donde seguramente voy a usar Jquery como explicaba al principio.
En resumen, yo uso:- JS para el cambio de resolución: http://stackoverflow.com/questions/24193938/change-css-href-by-javascript-by-browser-size-change
- Menú responsive: http://stackoverflow.com/questions/28444768/fixing-a-css3-menu
- Slider: http://kreaturamedia.com/layerslider-responsive-jquery-slider-plugin/
Bueno, espero haber sido de ayuda. Cualquier cosa me decís.
F.
Hola.
El 18-03-2015 12:09, Fernando García Balestena escribió:
Como dice Ignacio, es posible que no sea necesario javascript para detectar la resolución y baste con CSS Media Queries. Lo que no he comprobado es si es posible cambiar el css según cambiamos de resolución independientemente de la carga… me explico: lo lógico es que inmediatamente te cargue la página desde el dispositivo que estás usando según sea su resolución y no haga falta que vuela a comprobarla hasta la siguiente carga. Pero también es cierto que tu puedes cambiar la resolución sin actualizar, por ejemplo cambiando el tamaño de la ventana del navegador o girando la tablet de horizontal a vertical o viceversa. Como digo, no sé si con CSS Media Queries ese cambio se refleja inmediatamente, con el javascript sí. No sé si me he explicado bien.
Sí se refleja inmediatamente, siempre que tu navegador soporte CSS Media Queries. Ejemplo: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_media_example1 (reduce el tamaño de tu navegador hasta que la ventana de la derecha cambie de color).
JavaScript te puede servir para conseguir cambiar la presentación en navegadores antiguos, o para solucionar otros problemas (cargar/descargar CSS a demanda según las necesidades de la página), pero en líneas generales, si lo que quieres es tener una web compatible con dispositivos móviles, con CSS es suficiente. Otra cosa es que sepas que tienes muchos usuarios con un navegador antiguo y una resolución de pantalla baja. En ese caso te puede venir bien JS para adaptar todo lo mejor posible.
Saludos,
Ignacio
Hola. Perfecto, muchas gracias por la información.
Saludos.
F.
Si bien es cierto que las media queries solucionan gran parte de los problemas, además de detectar los cambios de orientación y redimensión de la ventana del navegador, mediante javascript es la solución menos costosa a la hora de pulir ciertos detalles.
Saludos
Guillermo V. Sánchez