Partiendo de la página que hemos creado, vamos a crear un par de páginas sencillas. La idea es tener páginas con algunos elementos, como texto, para poder comenzar con el diseño.
Otra opción podrá ser crear la páginas con un texto de prueba. En este caso, como ya sabemos lo que queremos poner podemos adelantar trabajo.
Como básicamente se trata de introducir texto, lo haremos mucho más rápido utilizando el editor de KompoZer.
Vamos a comenzar por la página index.html.
Como tenemos una página que nos sirve de plantilla (base.html) vamos a utilizarla. La abrimos, y en menú Archivo seleccionamos Guardar como, y le damos el nombre index.html. De este modo tenemos una página con la misma estructura que la página base. Sólo nos queda cambiar el contenido de la división central.
Comenzamos por el título de la sección. Como estamos en la página inicial, y trata de ser una web amistosa, vamos a darle la bienvenida al usuario. Por ejemplo, lo cambiamos por ¡Bienvenidos a la web de Floramics!
Al estar en la página inicial, vamos describir brevemente qué puede encontrar el usuario en nuestra página. Recuerda que la idea principal es que los usuarios visiten nuestra galería de fotos, que pensábamos dividir en cuatro categorías. Por lo que sería una buena idea poner enlaces directamente a esas categorías, así remarcamos que es el contenido principal del sitio. De momento, crearemos el enlace, utilizando una lista como con el menú. Como aún no sabemos que categorías tendremos, vamos a dejar el enlace provisional, enlazando sólo con # (Enlace).
Por ejemplo, esto es lo que hemos introducido en el contenido del index.html, viéndolo en el modo de edición de etiquetas de KompoZer:
La otra página que vamos a crear es nosotros.html. En ella hablaremos un poco de nuestra asociación.
Como antes, partimos del archivo base.html, que guardaremos como nosotros.html, y cambiaremos el contenido:
Una vez editado el contenido, guarda la página.
Ahora ya puedes probar los enlaces del menú, para ir de inicio a nosotros y viceversa
miércoles, 17 de marzo de 2010
ESTRUCTURA DE LA PAGUINA
nuestro ejemplo, como norma general todas las páginas mantendrán la misma estructura. Por ejemplo, tendrán el mismo logo o título, el sistema de navegación en la misma posición, el mismo pie, etc. Sólo iremos cambiando el contenido.
Una excepción a esto puede ser la página de inicio. Pensemos que esta página es la presentación de nuestro sitio, y el visitante se hará una idea de qué puede encontrar en nuestro sitio a partir de ella. Por eso no es extraño que tenga más enlaces que el resto de páginas. Esto, como siempre, dependerá del tamaño del sitio.
Pero pensando en el resto de páginas, no es una mala idea comenzar creando una página base, con esos elementos comunes que podamos utilizar a modo de plantilla.
Vamos a ver qué elementos necesitamos en nuestro ejemplo:
Un título, para lo que podemos utilizar un encabezado h1. En el se mostrará el nombre de la asociación, Floramics.
Un menú. En este caso pondremos un enlace a las siguientes secciones:
Inicio (index.html)
Flores (flores/index.html)
Nosotros (nosotros.html)
Contacto (contacto.html)
Noticias (noticias.html) Como son sólo cinco elementos, vamos a ponerlo en la parte superior, ya que en un lateral desperdiciaríamos espacio.
Un área para el contenido. Cambiará en cada página, pero tendrá un título para la sección.
El pie, por ejemplo para poner el copyright de la página. Podemos utilizar un elemento de bloque como un párrafo o un div. También existe una etiqueta específica, utilizada para contener información sobre el autor de la página.
Para que nos quede mejor estructurada la página, vamos a utilizar divisiones en las tres secciones diferenciadas:
EncabezadoTítulo y menú
Contenido
Pie
De esta manera, entre páginas prácticamente sólo cambiaremos el contenido.
Con esta estructura en mente, vamos a escribir el código:
Creamos una nueva página, con el Doctype, head, body, etc... como ya hemos visto.
Dentro, creamos tres divisiones.
En la primera, colocamos un con el nombre de la asociación. También una
Una excepción a esto puede ser la página de inicio. Pensemos que esta página es la presentación de nuestro sitio, y el visitante se hará una idea de qué puede encontrar en nuestro sitio a partir de ella. Por eso no es extraño que tenga más enlaces que el resto de páginas. Esto, como siempre, dependerá del tamaño del sitio.
Pero pensando en el resto de páginas, no es una mala idea comenzar creando una página base, con esos elementos comunes que podamos utilizar a modo de plantilla.
Vamos a ver qué elementos necesitamos en nuestro ejemplo:
Un título, para lo que podemos utilizar un encabezado h1. En el se mostrará el nombre de la asociación, Floramics.
Un menú. En este caso pondremos un enlace a las siguientes secciones:
Inicio (index.html)
Flores (flores/index.html)
Nosotros (nosotros.html)
Contacto (contacto.html)
Noticias (noticias.html) Como son sólo cinco elementos, vamos a ponerlo en la parte superior, ya que en un lateral desperdiciaríamos espacio.
Un área para el contenido. Cambiará en cada página, pero tendrá un título para la sección.
El pie, por ejemplo para poner el copyright de la página. Podemos utilizar un elemento de bloque como un párrafo o un div. También existe una etiqueta específica, utilizada para contener información sobre el autor de la página.
Para que nos quede mejor estructurada la página, vamos a utilizar divisiones en las tres secciones diferenciadas:
EncabezadoTítulo y menú
Contenido
Pie
De esta manera, entre páginas prácticamente sólo cambiaremos el contenido.
Con esta estructura en mente, vamos a escribir el código:
Creamos una nueva página, con el Doctype, head, body, etc... como ya hemos visto.
Dentro, creamos tres divisiones.
En la primera, colocamos un
con el nombre de la asociación. También una , con un elemento y un enlace para cada una de las secciones.
La división central la dejamos en blanco, ya que será la que iremos cambiando.
En la tercera división, introducimos el texto del pie. Por ejemplo, © Todos los derechos reservados.
Y no hemos de olvidar, que en un futuro contendrá un enlace a la hoja de estilos. Por lo que es conveniente que lo pongamos ya, decidiendo un nombre para la hoja, por ejemplo estilo.css.
Una vez creada, guardamos la página como base.html.
La página tiene pocos elementos, y te recomendamos que intentes hacerla escribiendo directamente el código fuente. De todas formas, puedes seguir este ejercicio paso a paso para realizar la página con KompoZer, y comprobar el código generado.
Una vez creada, visualiza la página con un navegador. Puedes pulsar F5 desde KompoZer o hacer doble clic directamente sobre el archivo.
La división central la dejamos en blanco, ya que será la que iremos cambiando.
En la tercera división, introducimos el texto del pie. Por ejemplo, © Todos los derechos reservados.
Y no hemos de olvidar, que en un futuro contendrá un enlace a la hoja de estilos. Por lo que es conveniente que lo pongamos ya, decidiendo un nombre para la hoja, por ejemplo estilo.css.
Una vez creada, guardamos la página como base.html.
La página tiene pocos elementos, y te recomendamos que intentes hacerla escribiendo directamente el código fuente. De todas formas, puedes seguir este ejercicio paso a paso para realizar la página con KompoZer, y comprobar el código generado.
Una vez creada, visualiza la página con un navegador. Puedes pulsar F5 desde KompoZer o hacer doble clic directamente sobre el archivo.
ESTRUCTURA DEL MENU
El uso de menús es muy habitual en las páginas web. Un menú no es más que una lista de enlaces relativos a nuestro sitio, llamados elementos del menú.
Por lo general el menú se suele colocar en la parte superior de la página, junto al logo o debajo de él, o en un lateral, normalmente el izquierdo.
El menú no debe de ser demasiado extenso. En un sitio grande no podemos pretender enlazar con todas las páginas, y no sería útil hacer buscar al usuario entre cincuenta enlaces.
Normalmente, aparecerán las secciones de nuestro sitio web. Y por ejemplo, podemos utilizar diversos métodos para que el usuario pueda expandir cada sección y ver enlaces a los apartados de la sección, o utilizar menús desplegables. También podemos mostrar los enlaces a las distintas partes de la sección en que se encuentra el usuario, ya que si está en esa sección es probable que le interesen los apartados relacionados.
Los elementos del menú deben de ser descriptivos. Por ejemplo, no es útil poner una imagen, por bonita que sea, si puede que el usuario no entienda qué significa o a dónde lleva. O que para saberlo tenga que poner el cursor sobre él.
El menú debe de ser ligero, y no ocupar demasiado espacio, ya que se repetirá en todas las páginas.
En lo que se refiere al código, el menú suele tener estos elementos:
Los menús se suelen basar en listas
El aspecto del menú se consigue por CSS.
Suelen tener código javascript, por ejemplo para mostrarlo, producir efectos más o menos avanzados, o en vez de los enlaces.
Por lo tanto, comenzaremos creando nuestro menú como una lista, a la que más adelante le iremos dando estilo hasta convertirla en un atractivo elemento de navegación
Por lo general el menú se suele colocar en la parte superior de la página, junto al logo o debajo de él, o en un lateral, normalmente el izquierdo.
El menú no debe de ser demasiado extenso. En un sitio grande no podemos pretender enlazar con todas las páginas, y no sería útil hacer buscar al usuario entre cincuenta enlaces.
Normalmente, aparecerán las secciones de nuestro sitio web. Y por ejemplo, podemos utilizar diversos métodos para que el usuario pueda expandir cada sección y ver enlaces a los apartados de la sección, o utilizar menús desplegables. También podemos mostrar los enlaces a las distintas partes de la sección en que se encuentra el usuario, ya que si está en esa sección es probable que le interesen los apartados relacionados.
Los elementos del menú deben de ser descriptivos. Por ejemplo, no es útil poner una imagen, por bonita que sea, si puede que el usuario no entienda qué significa o a dónde lleva. O que para saberlo tenga que poner el cursor sobre él.
El menú debe de ser ligero, y no ocupar demasiado espacio, ya que se repetirá en todas las páginas.
En lo que se refiere al código, el menú suele tener estos elementos:
Los menús se suelen basar en listas
El aspecto del menú se consigue por CSS.
Suelen tener código javascript, por ejemplo para mostrarlo, producir efectos más o menos avanzados, o en vez de los enlaces.
Por lo tanto, comenzaremos creando nuestro menú como una lista, a la que más adelante le iremos dando estilo hasta convertirla en un atractivo elemento de navegación
NAVEGACION
Si construimos un sitio sobre la marcha, sin planificación, según vaya creciendo, se irá complicando la navegación y al final no nos quedará más remedio que hacer modificaciones que resultarán más costosas que haberlo pensado un poco mejor con anterioridad.
Existe una regla que dice que un usuario no debería de necesitar más de tres clics para llegar a la página que busca. Por eso lo primero que hemos de pensar es en facilitar a navegación.
El usuario debe de ser capaz de moverse de forma intuitiva por nuestro sitio sin perderse, para ello:
Debe de saber dónde está. Debemos de dejarle claro en qué parte del sitio se encuentra. Para esto es muy útil el título de la página y utilizar un encabezado que identifique la sección. También debe de distinguir si sigue en nuestro sitio, o si ha pulsado un enlace que le lleve a un sitio distinto.
Debe de saber dónde ha estado. Debemos de evitar que el usuario pase una y otra vez por la misma página para buscar algo. Por ejemplo, distinguiendo los enlaces ya visitados.
Debe de saber dónde puede ir. Una página web se basa en enlaces, y estos deben de ser claramente identificables. Además, no deben de ofrecer dudas de a dónde llevan, por ejemplo con nombres de páginas entendibles, que se muestran en la barra de estado, o con textos de información emergentes.
Debe de poder seguir navegando. No le enviaremos a una página sin enlaces, desde la que no pueda continuar recorriendo el sitio. Piensa que puede acceder directamente a esa página, por ejemplo a través de un buscador, por lo que no podría utilizar ni el botón Atrás del navegador.
La forma de navegar por nuestro sitio, debe de ser constante. Así, con visitar unas pocas páginas aprenderá a moverse por nuestro sitio, y le resultará más cómodo.
La forma más habitual de solucionar todo esto es utilizar un menú, que se mostrará en todas las páginas
Existe una regla que dice que un usuario no debería de necesitar más de tres clics para llegar a la página que busca. Por eso lo primero que hemos de pensar es en facilitar a navegación.
El usuario debe de ser capaz de moverse de forma intuitiva por nuestro sitio sin perderse, para ello:
Debe de saber dónde está. Debemos de dejarle claro en qué parte del sitio se encuentra. Para esto es muy útil el título de la página y utilizar un encabezado que identifique la sección. También debe de distinguir si sigue en nuestro sitio, o si ha pulsado un enlace que le lleve a un sitio distinto.
Debe de saber dónde ha estado. Debemos de evitar que el usuario pase una y otra vez por la misma página para buscar algo. Por ejemplo, distinguiendo los enlaces ya visitados.
Debe de saber dónde puede ir. Una página web se basa en enlaces, y estos deben de ser claramente identificables. Además, no deben de ofrecer dudas de a dónde llevan, por ejemplo con nombres de páginas entendibles, que se muestran en la barra de estado, o con textos de información emergentes.
Debe de poder seguir navegando. No le enviaremos a una página sin enlaces, desde la que no pueda continuar recorriendo el sitio. Piensa que puede acceder directamente a esa página, por ejemplo a través de un buscador, por lo que no podría utilizar ni el botón Atrás del navegador.
La forma de navegar por nuestro sitio, debe de ser constante. Así, con visitar unas pocas páginas aprenderá a moverse por nuestro sitio, y le resultará más cómodo.
La forma más habitual de solucionar todo esto es utilizar un menú, que se mostrará en todas las páginas
ORGANIZAR LOS ARCHIVOS
¿cómo organizamos los archivos del sitio? No existe una regla exacta, ya que depende de muchos factores: número de páginas, cómo queremos navegar entre ellas, cómo se organiza el contenido, etc.
Pero por lo general, y sin entrar en mucha teoría, tendremos en cuenta una serie de cosas:
En la raíz del sitio, tendremos como mínimo la página de inicio, a la que llamaremos index.html (o .htm). Esto se debe a que cuando a un navegador le indicamos que abra una carpeta, busca el archivo index de la misma.
Organizaremos los tipos de archivo en carpetas. Por ejemplo, una carpeta para las imágenes que forman parte del diseño de la página. Si a parte tenemos fotografías de una galería, o de productos, es mejor ponerlas en otra carpeta, ya que no tienen relación con el diseño. Otra carpeta para los archivos javascript, etc.
Si tenemos secciones claramente definidas, podemos guardar sus páginas en subcarpetas. Por ejemplo, en aulaclic.es tenemos una carpeta para cada curso. Recuerda que es conveniente incluir en cada carpeta que contenga páginas htm, un archivo index.html, más que nada para que no se produzca un error si se accede directamente a la carpeta
Pero por lo general, y sin entrar en mucha teoría, tendremos en cuenta una serie de cosas:
En la raíz del sitio, tendremos como mínimo la página de inicio, a la que llamaremos index.html (o .htm). Esto se debe a que cuando a un navegador le indicamos que abra una carpeta, busca el archivo index de la misma.
Organizaremos los tipos de archivo en carpetas. Por ejemplo, una carpeta para las imágenes que forman parte del diseño de la página. Si a parte tenemos fotografías de una galería, o de productos, es mejor ponerlas en otra carpeta, ya que no tienen relación con el diseño. Otra carpeta para los archivos javascript, etc.
Si tenemos secciones claramente definidas, podemos guardar sus páginas en subcarpetas. Por ejemplo, en aulaclic.es tenemos una carpeta para cada curso. Recuerda que es conveniente incluir en cada carpeta que contenga páginas htm, un archivo index.html, más que nada para que no se produzca un error si se accede directamente a la carpeta
jueves, 4 de marzo de 2010
LA TEMATICA DEL SITIO
La idea de crear un sitio web nace porque tenemos algo que comunicar con el mundo. Y un tema que puede resultar interesante. Porque, por ejemplo, aunque crear una página Web con nuestros hobbies y aventuras cotidianas puede ser un buen ejercicio como aprendizaje, a la hora de la verdad a poca gente le resultará interesante leerlo. Para esto, obtendremos mejores resultados creándonos una cuenta en una de las numerosas redes sociales.
El tema elegido determinará el diseño de la página. No es lo mismo si pensamos mostrar fotos de animales para los amantes de las mascotas, una web para niños, una empresa de informática, etc.
Una vez elegido la temática, debemos de distinguir cuales son las categorías en las que vamos a dividir nuestro sitio. Estas serán más genéricas o menos, dependiendo del tamaño del sitio.
En nuestro ejemplo vamos a crear la web de una asociación de aficionados a las flores. Principalmente, a esta ficticia asociación le interesa exponer sus fotografías de flores en la web, pero también crearemos las páginas que den a conocer la asociación y que permitan ponerse en contacto con ella
El tema elegido determinará el diseño de la página. No es lo mismo si pensamos mostrar fotos de animales para los amantes de las mascotas, una web para niños, una empresa de informática, etc.
Una vez elegido la temática, debemos de distinguir cuales son las categorías en las que vamos a dividir nuestro sitio. Estas serán más genéricas o menos, dependiendo del tamaño del sitio.
En nuestro ejemplo vamos a crear la web de una asociación de aficionados a las flores. Principalmente, a esta ficticia asociación le interesa exponer sus fotografías de flores en la web, pero también crearemos las páginas que den a conocer la asociación y que permitan ponerse en contacto con ella
¿QUE ES UN SITIO WEB?
Es un conjunto de páginas web, más o menos extenso, agrupadas bajo un dominio, como puede ser www.aulaclic.es
Lo normal, es que el sitio web parta desde una página inicial, o home, desde la que podemos acceder, de forma jerárquica a todo el contenido del sitio, a través de hiperenlaces. A su vez, podemos encontrar enlaces hacia otros sitios distintos, ya que cada sitio tiene una URL única que nos permite acceder a él.
En conjunto de los sitios publicados en Internet forman la WEB o WWW.
El contenido de las páginas del sitio, puede estar escrito directamente en HTML. Esto genera un sitio estático, que sólo recibe actualizaciones de vez en cuando, ya que hay que hacerlas manualmente sobre el código.
En cambio, existen otros lenguajes, como PHP, ASP o JSP que generan en HTML a partir de datos, como contenidos de bases de datos, datos introducidos por el usuario, información global, etc. Esto origina sitios dinámicos, ya que los cambios se producen frecuentemente y son generados desde la propia página. Por ejemplo, una página que muestra la fecha del día actual sería un contenido dinámico. Otro ejemplo sería un foro.
Lo normal, es que el sitio web parta desde una página inicial, o home, desde la que podemos acceder, de forma jerárquica a todo el contenido del sitio, a través de hiperenlaces. A su vez, podemos encontrar enlaces hacia otros sitios distintos, ya que cada sitio tiene una URL única que nos permite acceder a él.
En conjunto de los sitios publicados en Internet forman la WEB o WWW.
El contenido de las páginas del sitio, puede estar escrito directamente en HTML. Esto genera un sitio estático, que sólo recibe actualizaciones de vez en cuando, ya que hay que hacerlas manualmente sobre el código.
En cambio, existen otros lenguajes, como PHP, ASP o JSP que generan en HTML a partir de datos, como contenidos de bases de datos, datos introducidos por el usuario, información global, etc. Esto origina sitios dinámicos, ya que los cambios se producen frecuentemente y son generados desde la propia página. Por ejemplo, una página que muestra la fecha del día actual sería un contenido dinámico. Otro ejemplo sería un foro.
martes, 2 de marzo de 2010
elementos del entorno kompozer
la barra de titulo, donde podemos ver el titulo de la hoja, contiene tambien una barra de menus con multiples opciones con la cual podemos acceder a las opciones mas comunes y usadas del programa
Debajo de esta encontraremos las barras de redaccion y de formato, en esta primera barra se encuentran las opciones de "guardar", "nuevo", "insertar" y con la segunda podemos formatear el documento. La barra de formato nos facilita la pestaña de "texto en el cuerpo" con la cual se puede elegir el elemento que contiene el texto que escribimos es decir, un encabezado o un parrafo.
En el centro se encuentra el área de edicion y ahi podemos editar el contenido de nuestra página.
La manera de ver y trabajar con la página depende de el modo de edición y de las 4 opciones disponibles en la parte inferior que son "etiquetas html", "normal", "código fuente", y "vista preliminar".
En la parte de abajo podemos ver la barra de estado de la cual se desprenden una serie de etiquetas y al seleccionarlas se puede hacer lo que deseamos con tan solo dar doble clic en una de la opciones o etiquetas.
Al dar clic en cada una de las etiquetas se desprende un menu desplegable con opciones muy útiles. seleccionar eliminar, etiqute cambiar, etiqueta id clases estilo en linea
Debajo de esta encontraremos las barras de redaccion y de formato, en esta primera barra se encuentran las opciones de "guardar", "nuevo", "insertar" y con la segunda podemos formatear el documento. La barra de formato nos facilita la pestaña de "texto en el cuerpo" con la cual se puede elegir el elemento que contiene el texto que escribimos es decir, un encabezado o un parrafo.
En el centro se encuentra el área de edicion y ahi podemos editar el contenido de nuestra página.
La manera de ver y trabajar con la página depende de el modo de edición y de las 4 opciones disponibles en la parte inferior que son "etiquetas html", "normal", "código fuente", y "vista preliminar".
En la parte de abajo podemos ver la barra de estado de la cual se desprenden una serie de etiquetas y al seleccionarlas se puede hacer lo que deseamos con tan solo dar doble clic en una de la opciones o etiquetas.
Al dar clic en cada una de las etiquetas se desprende un menu desplegable con opciones muy útiles. seleccionar eliminar, etiqute cambiar, etiqueta id clases estilo en linea
Suscribirse a:
Entradas (Atom)
