javascript - tag - title html w3schools
Convertir diseño absoluto para usar flotadores (7)
Estoy buscando algún consejo sobre un proyecto en el que estoy trabajando y agradecería cualquier ayuda.
Objetivo:
Para hacer un CMS de arrastrar y soltar que le permita al usuario dibujar elementos en una cuadrícula y moverlos a la posición deseada. Los cambios se registran en formato JSON y se convierten en HTML / CSS cuando el usuario presiona un botón de publicación. El HTML resultante debe ser limpio y flexible (es decir, tener en cuenta el contenido que variará en altura / longitud). El sistema debe poder manejar la creación de sitios de comercio electrónico, así como sitios de información simple.
Problema:
La forma lógica de lograr un sistema de arrastrar y soltar en HTML es utilizar absolute posicionamiento absolute con el width establecido sy la height s; este método no se presta para el sitio terminado, ya que es probable que el contenido sea de longitud variable y que los elementos de posición absoluta se extraigan del flujo del documento y no tengan conocimiento de los elementos que los rodean.
Solución:
Cree un sistema que convierta los elementos absolutamente posicionados en elementos flotantes.
Ejemplo:
En el sistema CMS, el usuario crea el siguiente diseño dibujando cuadros en una cuadrícula:
- Cabecera de altura fija.
- Navegación de altura variable
- Imagen de altura fija.
- Contenido principal de la página de altura variable.
- Lista de artículos visitados de altura variable
- Pie de página de altura fija.
Disposición absoluta:
El HTML / CSS sería algo como esto:
body {
background-color: #999999;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 70%;
margin: 15px 0;
padding: 0;
}
#mainContainer {
background-color: #FFFFFF;
height: 500px;
margin: 0 auto;
position: relative;
width: 916px;
}
.contentBlock {
border: 1px solid orange;
box-sizing: border-box;
color: orange;
font-size: 2em;
text-align: center;
}
.contentBlock:after {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
#contentBlock1 {
height: 120px;
left: 0;
position: absolute;
top: 0;
width: 916px;
}
#contentBlock2 {
height: 100px;
left: 0;
position: absolute;
top: 140px;
width: 136px;
}
#contentBlock3 {
height: 100px;
left: 0;
position: absolute;
top: 260px;
width: 136px;
}
#contentBlock4 {
height: 220px;
left: 156px;
position: absolute;
top: 140px;
width: 604px;
}
#contentBlock5 {
height: 220px;
left: 780px;
position: absolute;
top: 140px;
width: 136px;
}
#contentBlock6 {
height: 120px;
left: 0;
position: absolute;
top: 380px;
width: 916px;
}
<div id="mainContainer">
<div class="contentBlock" id="contentBlock1">1</div>
<div class="contentBlock" id="contentBlock2">2</div>
<div class="contentBlock" id="contentBlock3">3</div>
<div class="contentBlock" id="contentBlock4">4</div>
<div class="contentBlock" id="contentBlock5">5</div>
<div class="contentBlock" id="contentBlock6">6</div>
</div>
El usuario ahora presiona el botón de publicación y el diseño se convertirá para usar posiciones float lugar de absolute . El HTML resultante no puede usar absolute posicionamiento absolute porque si el contenido en 2 o 4 se expande, pasará por encima / debajo de 3 y 6. Float mantienen los elementos en el flujo y son conscientes entre sí, por lo que lo siguiente incluiría el contenido dinámico en 2 y 4:
Diseño flotante:
El HTML / CSS sería algo como esto:
body {
background-color: #999999;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 70%;
margin: 15px 0;
padding: 0;
}
#mainContainer {
background-color: #FFFFFF;
margin: 0 auto;
width: 916px;
}
.contentBlock {
border: 1px solid orange;
box-sizing: border-box;
color: orange;
font-size: 2em;
text-align: center;
}
.contentBlock:after {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
#contentBlock1 {
margin-bottom: 20px;
height: 120px;
}
#contentBlock2 {
height: 100px;
margin-bottom: 20px;
width: 136px;
}
#contentBlock3 {
height: 100px;
margin-bottom: 20px;
width: 136px;
}
#contentBlock4 {
float: left;
height: 220px;
margin-bottom: 20px;
margin-left: 20px;
width: 604px;
}
#contentBlock5 {
float: left;
height: 220px;
margin-bottom: 20px;
margin-left: 20px;
width: 136px;
}
#contentBlock6 {
clear: left;
height: 120px;
}
#contentContainer1 {
float: left;
width: 136px;
}
<div id="mainContainer">
<div class="contentBlock" id="contentBlock1">1</div>
<div id="contentContainer1">
<div class="contentBlock" id="contentBlock2">2</div>
<div class="contentBlock" id="contentBlock3">3</div>
</div>
<div class="contentBlock" id="contentBlock4">4</div>
<div class="contentBlock" id="contentBlock5">5</div>
<div class="contentBlock" id="contentBlock6">6</div>
</div>
No se puede esperar que el usuario entienda cómo funcionan los elementos flotantes, por lo que este proceso debería ser automático cuando se publiquen los cambios.
Este ejemplo en particular es bastante simple, aunque también deberían manejarse diseños más avanzados.
Lo que hacen otros sistemas CMS:
Por lo que puedo decir, la mayoría de los sistemas de CMS arreglan al usuario en una plantilla de conjunto o construyen la página usando JavaScript para establecer las alturas / posición de los elementos posicionados absolutamente (lo que me gustaría evitar).
Mis preguntas:
- ¿Es posible idear un conjunto de reglas para convertir un diseño absoluto a uno flotante?
- Si es así, ¿hay algún CMS existente que lo haga?
- ¿Alguna sugerencia sobre otras formas de abordar este problema?
Gracias.
¿Es posible idear un conjunto de reglas para convertir un diseño absoluto a uno flotante?
No imposible, pero extremadamente difícil de implementar.
Si es así, ¿hay algún CMS existente que lo haga?
No que yo sepa.
¿Alguna sugerencia sobre otras formas de abordar este problema?
Me parece más fácil pensar en los diseños como un grupo de filas y columnas, flotando adecuadamente. Entonces, para este diseño:
Generaría un código HTML similar a este (simplificado para comprender):
<div class="box">Content 1</div>
<div class="row">
<div class="col">
<div class="box">Content 2</div>
<div class="box">Content 3</div>
</div>
<div class="col">
<div class="box">Content 4</div>
</div>
<div class="col">
<div class="box">Content 5</div>
</div>
</div>
<div class="box">Content 6</div>
Deberá proporcionar una UI donde un usuario pueda:
- Agregar contenido
- Añadir envolturas de columna
- Añadir columnas dentro de envolturas de columna
Luego puede nombrar las filas, columnas y / o elementos de contenido y usar CSS para ajustar sus anchos. Aquí hay una prueba de concepto:
$(function() {
$(".insertable").draggable({ revert: "invalid" });
$(".insertzone").droppable({ activeClass: "acceptable", drop: handleInsert, accept: ".insertable-box, .insertable-row" });
$(".removezone").droppable({ activeClass: "acceptable", drop: handleRemove, accept: ".removable" });
function handleInsert(event, ui) {
ui.draggable.css({ left: 0, top: 0 });
var $div = $("<div class=''removable''></div>").appendTo(this).draggable({ revert: "invalid" });
if (ui.draggable.hasClass("insertable-box")) {
$div.addClass("box").text("Lorem ipsum dolor sit amet.");
}
if (ui.draggable.hasClass("insertable-row")) {
$div.addClass("row").droppable({ activeClass: "acceptable", drop: handleInsert, greedy: true, accept: ".insertable-col" }); ;
}
if (ui.draggable.hasClass("insertable-col")) {
$div.addClass("col").addClass(ui.draggable.find("select").val()).droppable({ activeClass: "acceptable", drop: handleInsert, greedy: true, accept: ".insertable-box, .insertable-row" });
}
}
function handleRemove(event, ui) {
ui.draggable.remove();
}
});
/* INTERFACE */
body { font: medium/1 monospace; }
select { font: inherit; margin: -1em 0; border: 0; padding: 0; }
.insertzone { margin: 1em 0; box-shadow: 0 0 .25em #CCC; }
.removezone { margin: 1em 0; box-shadow: 0 0 .25em #CCC; }
.insertable { cursor: move; display: inline-block; padding: 1em 4em; background-color: #CCC; }
.removable { cursor: move; }
.acceptable { background-color: #FEA !important; }
.insertzone .box { background-color: #EFD; }
.insertzone .row { background-color: #FEE; }
.insertzone .col { background-color: #FFD; }
.insertzone .box:after { display: block; padding: 1em; text-align: center; content: "box"; color: #CCC; margin-bottom: -1em; }
.insertzone .row:after { display: block; padding: 1em; text-align: center; content: "row"; color: #CCC; }
.insertzone .col:after { display: block; padding: 1em; text-align: center; content: "col"; color: #CCC; min-width: 8em; }
.insertzone:after { display: block; padding: 1em; text-align: center; content: "Drag here to insert"; }
.removezone:after { display: block; padding: 1em; text-align: center; content: "Drag here to remove"; }
/* LAYOUT */
.box { margin: 1em 0; padding: 1em; }
.row { margin: 1em 0; }
.row:after { display: block; clear: both; content: ""; }
.col { float: left; }
.col > * { margin-left: .5em; margin-right: .5em; }
.col:first-child > * { margin-left: 0; }
.col:last-child > * { margin-right: 0; }
.col > *:first-child { margin-top: 0; }
.col > *:last-child { margin-bottom: 0; }
.col-10 { width: 10%; }
.col-20 { width: 20%; }
.col-30 { width: 30%; }
.col-40 { width: 40%; }
.col-50 { width: 50%; }
.col-60 { width: 60%; }
.col-70 { width: 70%; }
.col-80 { width: 80%; }
.col-90 { width: 90%; }
<link rel="stylesheet" href="//code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<div class="insertzone"></div>
<div class="removezone"></div>
<div>
<div class="insertable insertable-box">box</div>
<div class="insertable insertable-row">row</div>
<div class="insertable insertable-col">col
<select>
<option value="col-10">10%</option>
<option value="col-20">20%</option>
<option value="col-30">30%</option>
<option value="col-40">40%</option>
<option value="col-50" selected>50%</option>
<option value="col-60">60%</option>
<option value="col-70">70%</option>
<option value="col-80">80%</option>
<option value="col-90">90%</option>
</select>
</div>
</div>
Y aquí está su diseño, diseñado utilizando esta herramienta:
- Eche un vistazo a los marcos de la cuadrícula (no a la cuadrícula de datos), hay muchas ideas buenas, quizás pueda usar algunas de ellas sin ninguna personalización.
- Piense una vez más en la entrada del usuario con posición absoluta, pero creo que no es adecuado para un CMS.
Creo que deberías tener cuidado: por lo que parece que estás intentando construir una interfaz WYSIWYG usando posicionamiento y tamaño absolutos que se convierten en algo que no es WYSIWYG al final; Anchos variables y posicionamiento dependiendo del tamaño de la pantalla.
Usted ha encontrado uno de los problemas fundamentales del diseño responsivo moderno; Los sitios web ya no son WYSIWYG. Es prácticamente imposible transmitir todas las diferentes formas en que un sitio móvil bien diseñado se verá en una sola imagen.
Sus usuarios deberán cumplir con las mismas restricciones que tienen los diseñadores con el diseño móvil, ya que los elementos deben fluir con gracia entre los tamaños de pantalla. Por lo general, esto significa restringir el contenido a una cuadrícula o un plano único (es decir, columnas o filas), o diseñar dos veces; Una vez para móvil, una vez para escritorio.
Dicho esto, uno de los pocos sistemas de rejilla que he visto que funciona con elementos de tamaño y posición absoluta es la Rejilla de Albañilería . Toma elementos de cualquier tamaño e intenta encajarlos lo mejor que pueda sin interrumpir el flujo de la página. A menudo se usa en sitios de revistas o portafolios donde el contenido escrito de formato largo es raro.
Con un sistema de reglas decentes y elementos especiales que crean un espacio negativo (es decir, divisores de ancho completo, bloques ''vacíos'', barras laterales de altura completa), podría dar a sus usuarios las herramientas para crear un sitio que se reorganice bastante bien utilizando la Grilla de Albañilería para todo.
El problema con la conversión de posicionamiento absoluto a flotado es que gastarás mucho esfuerzo en algo que probablemente no se traduzca bien. ¿No sería mejor tener el uso de elementos flotando desde el principio?
Sé que no desea que los usuarios tengan que entender la flotación, pero piense en la forma en que funcionan las imágenes en Microsoft Word: el usuario arrastra la imagen hacia donde la quiere y luego puede configurar la forma en que el texto la envuelve. Esto no es tan diferente de los elementos flotantes, y presentará con mayor precisión el resultado final que algo que aún no ha pasado por un proceso de traducción que puede o no funcionar al 100%.
Ejemplo:
Arrastra un elemento a la página, ocupa 100% de ancho. Arrastra otro elemento a la página, se coloca debajo del primero y ocupa lo mismo. Luego, cambia el estilo de "envoltura" de ambos elementos para que floten hacia la izquierda, y la página se actualiza para mostrar exactamente lo que el usuario obtendrá al final. Lo que sacrifica en un posicionamiento súper flexible, lo compensa con una mejor experiencia de usuario.
Conclusión
Parece que estás anticipando las necesidades de tus usuarios al decidir que el posicionamiento absoluto es la única solución lo suficientemente flexible. Mi consejo es: no construyas características que los usuarios no han pedido. Dales una interfaz de usuario de arrastrar y soltar que PUEDES construir, y luego, si piden más funciones, descifralas entonces. Puede que nunca pregunten, y te ahorrarás un dolor de cabeza.
Esto es lo que me gustaría diseñar un sistema que automáticamente hace eso:
(pseudo código, en su mayoría)
- obtener
window.widthywindow.heightde lo que el usuario está visualizando en su pantalla calcula un porcentaje para cada elemento con una fórmula simple:
var elWidth = (element.width / window.width) * 100
var elHeight = (element.height / window.height) * 100- Obtenga todos los elementos que no sean 100% anchos para comportarse como un elemento en línea con
display:inline-block;
Esta debe ser una buena base para comenzar, siempre que diseñes una buena interfaz de usuario para derivar cada DIV anidado y una especie de cuadrícula "magnética" para alinear los elementos.
¿Qué piensas?
Existe una herramienta de creación de sitios web llamada Weebly que tiene la misma funcionalidad que usted está buscando. Es gratuito, por lo que puede echar un vistazo para obtener más información sobre sus características.
Lo que estás pidiendo es realmente vago, así que dividí las respuestas en varias partes:
1- Para la función de arrastrar y soltar:
Esto es exactamente lo que estás buscando: Gridster
Puede permitir que el usuario cambie el tamaño de los cuadros manteniendo las restricciones.
2- Si estás buscando un Framework CSS limpio:
- La correa de arranque de Twitter
- Foundation
- y muchos más
3- Si está buscando un diseño fluido que cubra toda la página (vertical y horizontalmente):
html,
body {height:100%; margin:0px; padding:0px;}
.wrapper {position:relative; height:100%; width:100%; display:block;}
.header {position:relative; height:22%; width:100%; display:inline-block; margin-bottom:3%; background:red;}
.footer {position:relative; height:22%; width:100%; display:inline-block; margin-top:3%; background:green;}
.content {position:relative; height:50%; width:100%; display:inline-block;}
.content .left_sidebar {float:left; width:17%; height:100%; position:relative; margin-right:3%; background:yellow;}
.content .right_sidebar {float:right; width:17%; height:100%; position:relative; margin-left:3%; background:purple;}
.content .middle {float:left; width:60%; height:100%; position:relative; background:cyan;}
/**
* @info Clearfix: clear all the floated elements
*/
.clearfix:after {visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;}
.clearfix {display:inline-table;}
/**
* @hack Display the Clearfix as a block element
* @hackfor Every browser except IE for Macintosh
*/
/* Hides from IE-mac /*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */
<div class="wrapper">
<div class="header">Header</div>
<div class="content">
<div class="left_sidebar">Left Sidebar</div>
<div class="middle">Middle</div>
<div class="right_sidebar">Right Sidebar</div>
<div class="clearfix"></div>
</div>
<div class="footer">Footer</div>
</div>
Tenga en cuenta que hacerlo destruirá la experiencia del usuario en dispositivos móviles.
Primero: no creo que "convertir" un diseño absoluto a flotar sea el mejor enfoque. Debería pensar en flotadores desde el principio e insinuar / enseñar al usuario a construir el diseño en consecuencia.
Segundo: Creo que la herramienta que quieres construir necesitará que los usuarios aprendan a usarla. Dicho esto, quiere que sea lo suficientemente simple para que las personas que no están familiarizadas con los conceptos de HTML / CSS puedan usarlo. Por lo tanto, debe basar el uso de esta herramienta en conceptos simples y comprensibles que los usuarios pueden usar para crear el "look" y usted para generar el código detrás de él.
Los que puedo pensar son:
- bloques / contenedor
- columnas
- anchura altura
- margen / relleno
Ahora, utilizando estos conceptos, podría permitir al usuario crear bloques con propiedades: número de columnas para el margen de ancho / alto del contenido / relleno. Luego, el usuario puede anidar bloques indefinidamente con estas propiedades y arrastrar y soltar contenido dentro de ellas.
Aquí es cómo podría funcionar para su ejemplo:
Encabezado:
El usuario crea un bloque y le da estas propiedades:
- ancho: 100%
- altura: 80 px (esto se puede hacer arrastrando el borde de los elementos)
- número de columnas 2 (una para el logotipo y otra para el menú)
Principal :
El usuario crea un nuevo bloque bajo el encabezado con estas propiedades:
- ancho: 100%
- altura: adaptable
- número de columnas: 3 (col 1 y 3: 15% de ancho, col 2 70% de ancho)
Pie de página
Nuevo bloque con las mismas propiedades que el encabezado.
El uso puede comenzar nuevamente dentro de cada bloque / columna y anidar nuevos con las mismas propiedades
Generando el código:
Conoces el número de columnas de cada bloque y sus anchos, por lo que puedes crear fácilmente un div para cada uno y usar flotadores / ancho para colocarlos lado a lado. Para las alturas: el usuario puede establecer una altura fija y no le será difícil comprender que el contenido puede desbordarse. Entonces, si no quiere, debe seleccionar la altura "adaptable" ( height : auto; en css ).
Conclusión:
Esta es una idea muy general y un concepto simple. El trabajo principal será sobre el diseño de la interfaz de usuario y la forma en que sugerirá / enseñará al usuario a crear diseños con su herramienta. Tenga en cuenta para quién está diseñando y cómo reaccionarían en diferentes situaciones. Usa tus mejores habilidades de UI para insinuar / enseñar el uso en la dirección correcta.