Ordenar pagina web

[Espinosidro]

Buenas, estoy haciendo un intranet y ya tengo esencialmente todo hecho (base de datos, back end, front end, etc.) pero no se como organizar todo en la pagina final y queda en una sola fila.

Me pidieron que quedara lo mas parecido a esto:

¿Como puedo hacer que quede así?

Muchas gracias por adelantado

[Sir Thorondor]

2 opciones,

o buscas un wysiwyg como dreamviewer (te recomiendo bootstrap studio)

o lo haces a la antigua, con divs estaticos y tablas

[Espinosidro]

Hace 1 hora, Sir Thorondor dijo:

2 opciones,

o buscas un wysiwyg como dreamviewer (te recomiendo bootstrap studio)

o lo haces a la antigua, con divs estaticos y tablas

Voy a echarle un vistazo a los wysiwyg, pero como se puede hacer con divs? se que se puede hacer flotar pero me parece una solución pésima y que no escala para nada en dispositivos con distintas relaciones de aspectos.

De hecho en smartphones se ve super bien la version vertical.

[Sir Thorondor]

solo con divs y tablas no te lo recomiendo, pese a que sirve como "conocimiento general" ya practicamente no se usa por que no permite justo lo que quiers, que escale bien (es muy complejo y toma mucho tiempo lograr una pagina responsiva programandola a mano)

si no quieres usar un wysiwyg usa bootstrap (o algun framework similar de diseño web) para hacer la pagina desde 0, aunque es un poco complicado entender algunos conceptos de como trabaja.

[Espinosidro]

Hace 2 horas, Sir Thorondor dijo:

solo con divs y tablas no te lo recomiendo, pese a que sirve como "conocimiento general" ya practicamente no se usa por que no permite justo lo que quiers, que escale bien (es muy complejo y toma mucho tiempo lograr una pagina responsiva programandola a mano)

si no quieres usar un wysiwyg usa bootstrap (o algun framework similar de diseño web) para hacer la pagina desde 0, aunque es un poco complicado entender algunos conceptos de como trabaja.

Estoy viendo con un programa que se llama BlueGriffon, cuando lo entienda y agarre el ritmo hablare.

Alguna recomendación de editor de texto? estaba usando Visual Studio Code pero no tiene soporte para múltiples lenguajes en el mismo archivo (estoy usando HTML, CSS, Javascript y PHP (también SQL, dentro de PHP) en el mismo archivo en algunas partes y se vuelve loco).

Estuve probando PHPStorm de Jetbrains (tengo todos los productos gratis porque soy estudiante!!) y es demasiado complicado para mi xD, tiene demasiada funcionalidad y es un poco difícil de integrar con MAMP que estoy usando ahora mismo. Voy a ver con Atom ahora.

Aparte después tengo la tarea de integrar todo en Ubuntu Server, es cosa de copiar todos los archivos/paginas del htdocs y luego restaurar una copia de la base de datos no?

[memoooxd]

Hace 17 horas, Espinosidro dijo:

Buenas, estoy haciendo un intranet y ya tengo esencialmente todo hecho (base de datos, back end, front end, etc.) pero no se como organizar todo en la pagina final y queda en una sola fila.

Me pidieron que quedara lo mas parecido a esto:

¿Como puedo hacer que quede así?

Muchas gracias por adelantado

Yo te diría que le dieras un vistazo a bootstrap o algún framework parecido que use el concepto de "mobile first", puede que se te haga mas paja pero es mantenible a la larga.

Hace 8 horas, Espinosidro dijo:

Alguna recomendación de editor de texto?

Prueba con atom o sublime text, le puedes instalar plugins y tiene multiple lenguaje. 

Yo uso WebStorm pero debe ser parecido a PHPStorm y si dices que es complicado no te lo recomendaría.

[Sir Thorondor]

para php yo uso phpDesigner (es de pago), muchos usan sublime y hasta netbeans te puede servir como editor.

 

de cualquier forma cuando uses un wysiwyg ten cuidado ya que suelen modificar a su antojo las librerias de css al hacer movimientos como "arrastrar" lo que te mata las clases, 

[Espinosidro]

Y asi va quedando!! 

Al final lo que hize fue poner tablas dentro de tablas dentro de tablas dentro de tablas. Tambien cambie casi todos los divs por fieldsets que ponen esa cosa alrededor toda sexy (y no hay nadie que requiera uno de esos readers para que le repita mil millones de veces la palabra datos, personales, profesionales y navale xD)

Pero que manera de poner tablas, quien diria que son asi de utiles para organizar cosas horizontalmente....

[Danser]

Si quieres que quede responsive div+float+  tamaño en %  y estableciendo un min de ancho.

 

Editado Agosto 23, 2017 por Danser