¿ El usuario lo tiene más difícil al insertar contenido para webs responsive ?

[davidj]

Hola!!

Hace tiempo que están de moda las webs con el sistema responsive web design ya que se adaptan a diferentes dispositivos.

A priori esto está muy bien pero me he dado cuenta que, si la web es más o menos completa, cuando el usuario desea añadir información en la misma, se vuelve algo más complicado que con las webs no responsive. El usuario debe tener en cuenta como se verá el contenido que está insertando en diferentes dispositivos.

Lógicamente, nosotros, los programadores procuramos que al usuario le sea lo más fácil posible pero a veces no es tan sencillo si el usuario tiene mucha libertad en la inserción de nuevo contenido, fotos, tablas, recuadros, etc...

¿ Como lo hacéis para que a los usuarios les sea fácil administrar contenidos para webs responsivas ? ¿ Que técnicas utilizáis ?

Esto sirve tanto para webs creadas desde cero como con, por ejemplo, wodpress.

Mil gracias!!

[pzin]

No entiendo la diferencia de que el usuario que añada contenido o que el contenido lo añadas tú. No hay diferencias. Es simplemente ajustar las cosas, da igual quién lo ponga.

[davidj]

Probablemente no me he explicado bien....

Vamos a suponer, que el usuario tiene una sección llamada "quiénes somos". En dicha sección el usuario, mediante un editor tipo TINY o CkEditor puede insertar el contenido que desee. De momento solo hay texto.

Pero Imagínate que pasado un tiempo, desea añadir texto pero con dos imagenes en la derecha, una debajo de la otra....

Yo, al saber HTML5, CSS, etc.. lo puedo realizar perfectamente para que sea responsive y con el diseño correcto, puedo añadir a las imagenes los estilos css que necesitan, pero,

- ¿como lo puede realizar el usuario por su cuenta y solo mediante dicho editor para que se visualice perfecto en móviles/tablets/PC y de manera ordenada?

- ¿Como hacer para que el usuario tenga la máxima libertad y sencillez para que pueda insertar contenido de toda clase para responsive ?

No se si me explico...

Mil gracias!!!

[DesgraciadoGabo]

En un caso muy sencillo como el que mencionas que el usuario coloca una imagen y debajo otra imagen, claro, estas imagenes estarán dentro de un div entonces supongamos la siguiente estructura:

Código HTML:

<div class="comentario-usuario">
  Textos textos textos
    <img src="http://www.......">
    <img src="http://www.......">
</div>
 

Y asi sucesivamente, segun el numero de registro de comentarios.

Ahora tu defines en tus hojas de estilo como quieres que actuen esas imagenes, tal vez si le pones un ancho al 100% y estas imagenes irán modificando su ancho según el div que las contiene

Código CSS:

.comentario-usuario{
  width:xxpx;
  display:block;
...
}
.comentario-usuario > img{
  width:100%;
  display:block;
}
 

Ahi lo complicado sería definir el ancho de las imagenes si son más de dos, una junto a otra, aun que podrias agregarle un identificador y listo.

No sé como trabajen esos editores que mencionas pero no deben ser muy diferentes a como lo hace wordpress, sólo será cuestion de ver si le agrega alguna clase a la imagenes y de ahi empezar a editar tus hojas de estilo, nada complicado, sólo mucha talacha, Saludos!!!!

[davidj]

Iniciado por DesgraciadoGabo

En un caso muy sencillo como el que mencionas que el usuario coloca una imagen y debajo otra imagen, claro, estas imagenes estarán dentro de un div entonces supongamos la siguiente estructura:

Código HTML:

<div class="comentario-usuario">
  Textos textos textos
    <img src="http://www.......">
    <img src="http://www.......">
</div>
 

Y asi sucesivamente, segun el numero de registro de comentarios.

Ahora tu defines en tus hojas de estilo como quieres que actuen esas imagenes, tal vez si le pones un ancho al 100% y estas imagenes irán modificando su ancho según el div que las contiene

Código CSS:

.comentario-usuario{
  width:xxpx;
  display:block;
...
}
.comentario-usuario > img{
  width:100%;
  display:block;
}
 

Ahi lo complicado sería definir el ancho de las imagenes si son más de dos, una junto a otra, aun que podrias agregarle un identificador y listo.

No sé como trabajen esos editores que mencionas pero no deben ser muy diferentes a como lo hace wordpress, sólo será cuestion de ver si le agrega alguna clase a la imagenes y de ahi empezar a editar tus hojas de estilo, nada complicado, sólo mucha talacha, Saludos!!!!

Entiendo entonces, que el tema sería que el usuario insertara alguna clase en las imágenes que nosotros los programadores previamente hemos programado verdad? Al menos es como lo hago yo hasta ahora...

[juliogut2]

Hola davidj casualmente estoy teniendo el mismo inconveniente, me gustaría saber si a estas alturas ya encontraste respuesta? con respecto a la pregunta iniciar (¿ Como lo hacéis para que a los usuarios les sea fácil administrar contenidos para webs responsivas ?) cabe mencionar que antes de que los sitios fueran responsivo utilizaba CKEditor para que los usuarios administraran sus sitio, si me puedes ayudar te lo agradecere.

[davidj]

Iniciado por juliogut2

Hola davidj casualmente estoy teniendo el mismo inconveniente, me gustaría saber si a estas alturas ya encontraste respuesta? con respecto a la pregunta iniciar (¿ Como lo hacéis para que a los usuarios les sea fácil administrar contenidos para webs responsivas ?) cabe mencionar que antes de que los sitios fueran responsivo utilizaba CKEditor para que los usuarios administraran sus sitio, si me puedes ayudar te lo agradecere.

Pues la mayoría de veces utilizando shortcodes en CKEDITOR o cualquier otro editor.

Por ejemplo si el usuario desea añadir dos columnas en el mismo editor, puede añadir shortcodes que se llamen, por ejemplo [COL_IZQUIERDA] y [COL_DERECHA]:

[COL_IZQUIERDA]
contenido etc..
[/COL_IZQUIERDA]
[COL_DERECHA]
contenido etc..
[/COL_DERECHA]

Posteriormente, al mostrar el contenido en la web, sustituyes estos nombres de shortcodes por el HTML que debe ser y listo!

;)

[juliogut2]

entonces cuando muestre el contenido recorro la información busco los Shortcodes y los sustituyo? tienes un ejemplo de esta parte.

Otra cosa no hay forma en que el CKEditor me muestre el contenido (mientras el usuario esta editando) igual a como se mostrara en la web, es decir que le muestre los diferentes aspecto ya sea si esta maximizado como para una pantalla de computadora, para una pantalla de tablet o de celular, me entiedes?. puesto al momento toda la información sale desorganizada (evidentemente por que no reconoce los css que los ubica en la posición que deben estar si es celular, tablet o computadora).

Gracias de antemano

[Rafael]

Iniciado por juliogut2

Hola davidj casualmente estoy teniendo el mismo inconveniente, me gustaría saber si a estas alturas ya encontraste respuesta?

La respuesta ahí está http://www.forosdelweb.com/f4/usuari...2/#post4638062
Prepara estilos para los hijos del contenedor que estás editando.