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
y en preferencias de documento eliminaremos los bordes
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
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
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
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
y en preferencias de documento eliminaremos los bordes
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
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
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