El post que buscas se encuentra eliminado, pero este también te puede interesar

Maquetar una pagina web simple con software libre

Maquetar una pagina web simple con software libre

La maquetación web es un punto muy poco divulgado por internet, y por lo general de muy poco valor informativo, existen muchos tutoriales por la web de como crear una pagina simple pero muy pocos muestran el proceso de razonamiento para construir una pagina

la maquetación web es el proceso de diseño que un programador o diseñador web tiene que tener claramente, para poder construir una pagina web decente

esto se refleja en paginas por ejemplo creadas con HTML4 sencillas pero que siguen estándares y procesos de trabajo como los son hojas de estilo CSS, que a pesar de su sencillez comparado con PHP y CSS muestran un bonito acabado visual

un desarrollador web también debe determinar si es necesario la incrustación de código PHP o solo es necesario HTML como lo son en paginas informativas simples.
Que por lo general siempre caen en la mala practica de utilizar flash para construir una pagina completa con acceso de movimientos y sonidos que a la larga molestan e interrumpen a nuestro visitante

existen muchas formas de maquetar una pagina web, dependiendo de los programas y conocimientos que podamos tener

en este ejemplo utilizaremos inkscape -¡Si inkscape!


Para ello lo primero sera ir a preferencias de inkscape y marcar Mantener los objetos después de la conversión a guías

Maquetar una pagina web simple con software libre

y en preferencias de documento eliminaremos los bordes

diseño

en este punto es necesario sabes a que resolución trabajaremos nuestra pagina web

ejemplos

800*600
960*600
1024*768

destacar que en esta parte solo el ancho de la pagina es necesario ya que el alto no influye demasiado y podrá variar según gustos y diseños

no hay un estándar definido para poder crear una pagina web en lo que respecta en resolución, aunque no es conveniente exceder ciertos margenes si queremos que el visitante pueda ver la totalidad de la pagina. Si trabajamos en “px”, en “%” es un poco mas flexible


lo primero es crear el cuerpo de la pagina web en este caso trabajaremos con 800*600

transformaremos nuestro objetos a guías, para tener una regla en el contorno de nuestro objeto
ahora crearemos cada objeto de nuestra pagina web simple

con esto ya tendremos una vista simple de lo que tendremos en nuestra pagina con las dimensiones para poder trabajar en el documento HTML

web

y con las mismas imágenes podremos crear una imagen para nuestra pagina sin necesidad de dimensionar desde el código y así ahorraremos cargas innecesarias

ahora crearemos en una carpeta los documentos y carpetas que utilizaremos en el proyecto

index.html
mystyle.css
carpeta de imagenes

Software Libre

aclarar que este documento solo es una base nada sofisticada solo a modo de ejemplo pero implementa características de diseño como lo son las etiquetas o capas “div” y el uso de CSS
también aclarar que ya el usuario debe contar con conocimientos para poder interpretar este pequeño código

las herramientas para este proyecto como es de software libre utilizaremos

bluefish, quanta o geany para el código HTML y CSS y una pequeña ayuda podría ser CSSED para la hoja de estilo

bien el código HTML se simplifica bastante con el uso del CSS

aclaraciones del código

DOCTYPE: es el encargado de decirle al navegador que versión de html estamos utilizando

< link rel="stylesheet" type="text/css" href="mystyle.css" / >: esto hace referencia al código CSS y enlaza el documento

div: son las capas casi de la misma manera que un programa de edición de imágenes como gimp y su dimensiones se especifican en el código CSS

id: es por decirlo de alguna manera el nombre que identifica cada una de las capas

wrapper, header, menu, etc solo son nombres y pueden ser sustituidos por cualquier otro de nuestro agrado, el uso del ingles para identificarlo es para ser un poco mas estándar y acortar los nombres

dejo el código en un pequeño archivo zip ya que se me dificulta poder colocarlo directamente en la pagina web de taringa

http://binalkernel.99k.org/imagenes1/mi sitio web.zip

eso se me ocurrió ya que en la mayoría de los tutoriales de html solo enseñan a colocar imágenes y links en el aire sin dar formato a una pagina web como si solo se trabajara desde un documento de texto común

espero que sea de ayuda

5 comentarios - Maquetar una pagina web simple con software libre

@Sr_yo
a favoritos!
@ChaosArt
linkerx07 dijo:SOY EL PRIMERO!! XD

samuelportillo001 dijo:
linkerx07 dijo:SOY EL PRIMERO!! XD

felicidades

estos giles no leyeron un carajo. Está muy buena la info. De cualquier manera, hacerles saber a los aprendices que internet está plagado de información acerca de cómo trabajar con la web, tanto en código como en la parte gráfica.
saludos!
@Dracoelcapo123
esta bueno, igual ya se diseñar webs, pero no en linux +10