THE DOG

THE DOG

domingo, 25 de julio de 2010

Unidad 1. Mi primera página web (I)1.1.

El objetivo de este curso es enseñar a crear páginas web, partiendo desde cero y usando herramientas gratuitas. Para seguir el curso sólo necesitas un ordenador y ganas de aprender, al final del curso podrás crear páginas como la que puedes ver haciendo clic aquí o aquí. El lenguaje que se utiliza para crear una página web es el HTML, Hyper Text Markup Lenguage (Lenguaje de Marcas de Hypertexto) Hay muchos cursos de HTML pero creemos que este es diferente porque pretende ser un curso integral de creación de páginas web. Lo fundamental para escribir páginas web es saber HTML pero no es suficiente. Si quieres poner una imagen en tu página necesitarás saber un poco sobre gráficos web, para recortar la imagen al tamaño adecuado, si quieres poner un menú desplegable es conveniente que conozcas algo sobre JavaScript, si quieres recoger datos de los usuarios mediante un formulario es conveniente hacerlo con un lenguaje tipo PHP

1.2. Contenidos

Para que sea más facil de entender hemos desarrollado el temario de forma progresiva mediante la creación de un sitio web sobre flores, introduciendo cada concepto según se va necesitando. Así, primero (tema 2,3) veremos los conceptos básicos de HTML, escribir texto, darle formato, hiperenlaces, estilos, etc. Luego (tema 5) explicaremos brevemente el editor KompoZer, luego veremos como estructurar una página web y un sitio web (tema 6), más adelante introduciremos el programa Gimp para trabajar con gráficos (tema 9), unas ideas para crear gráficos vectoriales, como por ejemplo un logotipo para la página, con el programa Inkscape. En el siguiente tema (tema 10) introduciremos conceptos sobre JavaScript, y luego un poco de PHP (tema 11). En los temas finales, teorizaremos un poco sobre cómo publicar nuestro sitio y como conseguir que aparezca en los buscadores y tenga visitas.

Unidad 2. HTML básico (I)

A continuación vamos a ver los elementos básicos o fundamentales del HTML. Primero veremos la estructura general de las etiquetas, luego la estructura básica de la página, a continuación empezaremos a colocar cosas en la página, primero texto, luego imágenes, enlaces y por último hablaremos brevemente del elemento que nos sirve para colocar cada cosa en el sitio que queramos, las capas.

2.1. Etiquetas

El lenguaje HTML se basa en etiquetas, por eso es importante entender bien la sintaxis de las etiquetas. Las etiquetas siempre van contenidas entre los signos de desigualdad <>. Vamos a fijarnos en la apertura de la etiqueta. La primera palabra que aparece es el nombre o identificador de la etiqueta. A parte, podemos encontrar atributos con sus valores, siguiendo el formato . La forma correcta de escribirlo es escribir el nombre de la etiqueta y los atributos en minúscula, y los valores contenidos entre comillas dobles. Si un atributo tiene más de un valor, se escriben todos los valores dentro de las mismas comillas, separados por espacios en blanco.

Unidad 3. Aspecto de la página. Estilos básicos (I)

Hasta ahora hemos aprendido a utilizar los elementos básicos de HTML para escribir texto, imágenes y enlaces, pero los resultados han sido muy pobres desde el punto de vista estético. A continuación vamos a ver como poner "guapa" nuestra página formateando el texto, con bordes, márgenes y fondos. Veremos un concepto muy importante y potente: el estilo CSS. El aspecto de la página se controla con los estilos CSS.

Unidad 4. Editor Web (I)


Quizá estés un poco cansado de escribir etiquetas HTML, si es así en este tema vamos a explicar cómo ahorrarte ese trabajo. Un editor web también ayuda en otros muchos aspectos de la creación de páginas web.

4.1. ¿Qué es un editor Web?

Un editor Web sería cualquier aplicación que nos permita crear, editar y guardar una página Web. Como ya hemos visto, una página no es más que un archivo de texto, por lo que cualquier programa que nos permita editar texto, puede funcionar como un editor Web. Podemos considerar tres categorías de editores Web:

Editores de texto.

Nos permiten editar el código fuente puro y duro, como puede ser el bloc de notas.

Editores de HTML.

Funcionan como los editores de texto, pero pueden tener algunas opciones más avanzadas. Como mostrar las etiquetas de colores, o cerrarlas automáticamente. Funcionan como los editores de texto, pero pueden tener algunas opciones más avanzadas. Como mostrar las etiquetas de colores, o cerrarlas automáticamente.

Editores WYSIWYG.

Por un lado, nos permiten editar el código fuente como los editores de HTML. Y por otro, nos permiten trabajar en vista de diseño. Es decir, ver la página como se vería en un navegador mientras la editamos. La mayoría de estos editores suelen tener opciones para realizar tareas adicionales de forma más fácil, como por ejemplo, crear elementos de un formulario, insertar menús, e incluso código JavaScript tipo AJAX ( más adelante veremos de qué se trata). Editores de este tipo pueden ser Amaya o Dreamweaver.


Unidad 5. Preparar nuestro sitio (I)


5.1. ¿Qué es un sitio web?

Un sitio web o website, es un conjunto de páginas web, más o menos extenso, agrupadas bajo un dominio, como puede ser www.aulaclic.es o www.elpais.com. 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


5.2. La temática 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.

unidad 6. diseño


El contenido de una página web es lo más importante pero un buen contenido con un mal diseño no es una buena página web. Tampoco sirve de nada un buen diseño con un mal contenido. Suponemos que el buen contenido lo pones tú, nosotros vamos a intentar darte unas orientaciones para conseguir un buen diseño.

6.1. Un buen diseño

Comodidad para el visitante. Le debe de resultar cómodo navegar por el sitio, y también debe de poder captar la información (texto, imágenes, flash, vídeos...). Por eso es importante un buen sistema de navegación, y presentar el contenido de forma clara y espaciada.

Comodidad para el autor.

Cuanto más fácil nos resulte realizar modificaciones, mejor. Por eso separaremos el contenido del diseño, utilizando hojas de estilo.

Accesibilidad.

Cuanta más gente pueda ver nuestro sitio mejor. Pensemos en cómo accede el visitante. En el aspecto técnico, el sitio debería de seguir los estándares, para facilitar la compatibilidad con navegadores antiguos, u otros dispositivos, como teléfonos móviles.

Usabilidad.

Por otra parte, pensemos en quién es el visitante. No es lo mismo si se dirige a niños, adultos, personas mayores o a todo el mundo. En cualquier caso, nuestro sitio debe de ser fácil de usar.

Transmitir.

El diseño debe de transmitir lo que el usuario puede esperar de él. Por ejemplo, de un banco esperamos seriedad, por lo que un diseño informal puede ser contraproducente.

Bonito y original.

El diseño debe de ser agradable, combinar bien colores, organización de los elementos, etc. Y cuanto más original sea, más lo será nuestro sitio.

Simple.

Cuanto más simple sea el diseño, más se facilitarán el resto de aspectos que hemos comentado.

6.2. Colores

La elección de colores apropiados es una de las cosas que más influyen en el aspecto del sitio. Lo habitual es utilizar una gama de colores armónicos, con variaciones de tonos de un mismo color. Con ellos formaremos la paleta de colores de nuestro sitio. Utilizar la misma paleta es importante, porque si no iremos utilizando variaciones del color, y al final tendremos un sitio con muchos colores distintos .


Unidad 7. Maquetación web (I)


7.1. Maquetar una página web

La maquetación es la distribución de los elementos en nuestra página. Piensa en una página web cualquiera. Seguro que distingues algunos elementos, como encabezados, columnas, menús laterales, etc. Hace unos años, la maquetación de las páginas web se realizaba utilizando tabla.
Por ejemplo, vamos a crear una galería fotográfica para las imágenes de las distintas flores que queremos colgar en nuestro sitio. La idea es tener cuatro páginas, una para cada categoría de flores (silvestres, ornamentales, exóticas y plantas), desde las que podamos acceder a las fotografías de las flores, que son de gran tamaño. Las fotografías que utilizaremos puedes encontrarlas en la carpeta fotos_flores que habrás descargado con los archivos del sitio. La idea es simple: mostrar imágenes en una página. En principio, bastaría con ir poniendo las etiquetas img para cada imagen. Esto bastaría si fuesen imágenes de pequeño tamaño. Pero imagina una página con 15 o 20 imágenes, donde cada una ocupa toda la pantalla. La página tardaría mucho en cargarse, por el peso de las imágenes, y sería muy larga.


Unidad 8. Menús (I)

8.1. El HTML del menú

El menú es un elemento fundamental de nuestra web, y hemos de dedicarle una atención especial. Básicamente, el menú es un conjunto de enlaces a las distintas partes de nuestro sitio, y lo más habitual es encontrarlo en el html de la página, o en un archivo javascript. De momento, vamos a ver cómo crearlo desde el HTML.

Unidad 9. Imágenes (I)


9.1. Introducción

Ya hemos visto que podemos incluir imágenes en nuestra página web utilizando la etiqueta , y que estas imagen deben de ser del formato jpg, gif o png, dependiendo del tipo de imagen, para obtener la mejor relación calidad-tamaño. En nuestro sitio de ejemplo, vamos a utilizar imágenes para mostrar fotografías, pero también como parte del diseño. Por ejemplo, vamos a crear una galería fotográfica para las imágenes de las distintas flores que queremos colgar en nuestro sitio. La idea es tener cuatro páginas, una para cada categoría de flores (silvestres, ornamentales, exóticas y plantas), desde las que podamos acceder a las fotografías de las flores, que son de gran tamaño. Como la mecánica es la misma, sólo haremos la galería de flores silvestres. Pero te invitamos a que intentes hacer alguna otra sin ayuda al acabar el tema.

9.2. Galería con miniaturas


Las fotografías que utilizaremos puedes encontrarlas en la carpeta fotos_flores que habrás descargado con los archivos del sitio. La idea es simple: mostrar imágenes en una página. En principio, bastaría con ir poniendo las etiquetas img para cada imagen. Esto bastaría si fuesen imágenes de pequeño tamaño. Pero imagina una página con 15 o 20 imágenes, donde cada una ocupa toda la pantalla. La página tardaría mucho en cargarse, por el peso de las imágenes, y sería muy larga. Por eso, lo normal cuando creamos una galería es crear miniaturas (o thumnails) de las imágenes. Se trata toda o parte de la imagen original, de menor tamaño, que al pulsar sobre ella muestra la imagen original.

Unidad 10. JavaScript (I)


10.1. Introducción

Vamos a añadir algunos comportamientos extra a nuestro sitio. Por ejemplo, vamos a crear un menú desplegable, para que al ponernos sobre la pestaña Flores, se muestren las categorías existentes. Por otra parte, vamos a hacer que al pulsar sobre las imágenes, en las páginas de las categorías, se abra una nueva ventana, pero con el nombre de la flor, una imagen, y un enlace que permita cerrar la ventana. Pero todo esto no podemos hacerlo sólo con HTML y CSS. JavaScript es un lenguaje de programación que el navegador es capaz de interpretar y ejecutar sobre la página web. Utilizando este lenguaje podemos crear comportamientos que no están disponibles en el html, por ejemplo mostrar un mensaje pulsando aquí, abrir una ventana, cerrarla... O también podemos utilizarlo para cambiar la página.

Unidad 11. Formularios y PHP (I)


11.1. Introducción

Hemos visto como crear una página web, darle formato y añadirle funcionalidades con JavaScript, pero esto es sólo el comienzo. Una página web puede hacer muchas más cosas, puede mostrar los datos que obtiene es ese instante de una Base de Datos que reside en un servidor de Internet, puede comunicarse con otras webs, puede utilizar mapas, información del tiempo, etc. En definitiva, una página web puede mostrar información actualizada cada vez que se ejecuta. Es lo que se conoce como páginas dinámicas, en contraposición a las páginas estáticas, que siempre muestran la misma información. Un ejemplo de página dinámica sería un foro de Internet, como el que hay en aulaClic. Esta página que estás leyendo sería un ejemplo de página estática. Nosotros hemos elegido PHP por ser gratuito y fácil de aprender. Para explicar PHP necesitaríamos un curso completo, así que sólo vamos a dar las nociones básicas para que puedas empezar a programar en PHP.

11.2. Formularios

Hay varias formas de recoger datos y enviar un correo, nosotros vamos a emplear la más didáctica utilizando dos páginas. Luego en un ejercicio la mejoraremos (con una sola página). Necesitamos una primera página escrita en HTML que contiene el formulario para recoger los datos y llamar a una segunda página escrita en PHP que realiza el envío del correo.

Unidad 12. Funciones extra (I)

Existen multitud de aplicaciones y librerías de código gratuito y de gran calidad, listas para usar, es muy interesante conocer que existen. En cualquier momento se puede presentar la ocasión adecuada para utilizarlas. A continuación vamos a dar un breve repaso a las que consideramos más interesantes.

12.1. APIs

Aunque si combinamos HTML, JavaScript y PHP podemos hacer muchas cosas con nuestras páginas, existen aún otras fuentes de datos que residen fuera de nuestra página y que podemos incorporar a nuestra web mediante las APIs. Para añadir funcionalidades complejas a nuestra página web o para acceder a información, podemos comunicarnos con otro software, ofrecido por sitios web especializados, utilizando una Interfaz de Programación de Aplicaciones (API). Lo que nos ofrece una API es una serie de procedimientos para acceder e interactuar con aplicaciones o datos realizadas por terceros. Es decir, en vez de desarrollar esas funciones con un lenguaje de programación y almacenarlas en nuestro sitio, creamos una "ventana", a través de la cual mostramos esa aplicación. Además, nos ofrece una serie de funciones, normalmente en JavaScript con las que podemos interactuar con esa ventana. Para añadir el mapa, solo hemos de ir a http://maps.google.es/ y buscar la dirección que queramos. Cuando la tengamos, pulsamos Enlazar, y nos aparece una ventana con dos tipos de enlace:

Unidad 13. Publicar (I)


13.1. Introducción

Una vez tenemos terminada nuestra página web sólo queda publicarla en Internet para hacerla accesible a los millones de internautas de todo el mundo. Hoy en día nos parece normal que cualquier persona del planeta pueda ver nuestras páginas web en Internet pero hasta la década de 1990 a nadie se le hubiera ocurrido soñar que sería tan fácil y tan barato poder comunicarse con tanta gente. Básicamente para publicar hace falta tener acceso a un servidor de Internet y disponer de una forma de subir los archivos al servidor. También es conveniente saber lo que es un dominio de Internet y cómo hacer que nuestra página sea encontrada por los buscadores.

13.2. Servidores


Para que tu página se vea desde Internet simplemente tiene que estar almacenada en un servidor de Internet. Es decir, debes disponer de espacio en un servidor para poder subir tus archivos, donde cualquiera pueda verlos. Cualquiera puede tener un servidor de Internet, sólo hace falta un ordenador, una dirección IP fija, una conexión telefónica y un software adecuado, como el servidor Apache, que además es gratuito. Esto explica el gran crecimiento inicial de Internet. Han surgido miles de servidores que comparten su información por el simple gusto de aprender y enseñar. Y muchos más que esperan hacer negocio en la red. a) Servidores gratuitos. Podemos diferenciar dos alternativas gratuitas: • Sitios especializados. Existen algunos sitios web especializado en ofrecer espacio gratuito como Fortunecity, Tripod, iEspaña, Galeon, etc. La mayoría colocarán publicidad en las páginas alojadas. Los servidores gratuitos pueden imponer restricciones en el uso de ciertas instrucciones de programación web y no te permiten cambiar la configuración del servidor. Cada vez es más difícil encontrar servidores gratuitos con un mínimo de calidad. Google Sites es un caso aparte