Barcelona Activa Cibernàrium
Anuncio
Barcelona Activa Cibernàrium Crea tu website 1. Introducción En el lenguaje coloquial se utiliza muy a menudo la expresión “me he conectado a una página web”. Pero en realidad eso es inexacto. No nos conectamos a una página web sino a un website o sitio web. Una página web es un fichero informático (generalmente en formato .html) que contiene información y que podemos ver con un navegador: es un archivo individual. Un website o sitio web es un conjunto de páginas web relacionadas entre ellas según una estructura determinada. Las relaciones entre las páginas web se llaman enlaces. A través de los enlaces los usuarios podemos saltar de una página web a otra: es lo que llamamos navegar 1. Cómo voy a realizar mi website La mayoría de páginas web están construidas con un lenguaje de programación llamado HTML (Hypertext Markup Language-Lenguaje de marcas de Hipertexto). Más que un lenguaje de programación en sentido estricto consiste en una serie de códigos llamados etiquetas (tags) que indican al navegador las modificaciones de estilo, del texto o del contenido que está escrito entre dos de estas etiquetas HTML. Para hacer una página web profesional o bien hemos de programar con el código HTML o bien utilizar programas de edición web como Dreamweaver que nos facilita mucho la labor, por su interfaz intuitiva, más parecido a editores de textos o a programas de maquetación. Dreamweaver es un CI-011 v.01 Dossier / 1 Barcelona Activa Cibernàrium gestor de lenguaje HTML: convierte automáticamente lo que hacemos en lenguaje HTML evitándonos tener que escribir el código. Otros programas editores de HTML son: Frontpage, Composer, Golive o aplicaciones gratuitas en software libre como Nvu 1.0 o Amaya en su versión 9.4. Trabajar con el código HTML puede resultar un poco complejo al principio por la cantidad de etiquetas que hay, por los atributos que puede tener cada etiqueta y por los valores que pueden acompañar a cada atributo. En cualquier caso hay que conocer los elementos básicos del lenguaje porque nos permitirán trabajar mejor aunque utilicemos algún programa editor. Además conociendo el HTML podemos ver el código fuente de los sitios web que visitemos y entender su estructura. Hay otros lenguajes que se pueden utilizar también para construir una web o partes de esta: XHTML (Extensible HyperText Markup Language – Lenguaje Extensible de Marcado de Hipertexto). Es el lenguaje avanzado pensado para sustituir en un futuro al HTML como estándar para las páginas web. Javascript. HTML sirve para dar formato al contenido de una página web y para crear enlaces pero no permite realizar acciones dinámicas ni cálculos matemáticos. Javascript (desarrollado por Sun Microsistems) es un lenguaje que hace posible utilizar algunos elementos de programación de algoritmos tradicionales de la informática. Las acciones programadas en Javascript se introducen dentro de los documentos HTML y el navegador las lee directamente (por ejemplo incluir en la web una calculadora, un simulador de hipotecas, etc). VBScript. Es un lenguaje similar a Javascript desarrollado por Microsoft. CSS (Cascade Style Sheets – Hojas de Estilo en Cascada): se utiliza para definir estilos en una página web o en un conjunto de páginas. Así si definimos unas CSS en el inicio de nuestro proyecto web (tipo de letra, CI-011 v.01 Dossier / 2 Barcelona Activa Cibernàrium tamaño, interlineados, márgenes, colores, etc) no será necesario programar estas características en cada una de las páginas. Las CSS también se pueden exportar en un website a otro si queremos darles un aspecto gráfico homogéneo. DHTML (Dynamic HTML- HTML dinámico). Designa el conjunto de técnicas que permiten crear sitios web interactivos utilizando una combinación de HTML estático, lenguajes como Javascript y hojas de estilo en cascada (CSS). Flash. Es un programa de animación gráfica desarrollado por las empresas Macromedia. Es posible diseñar sitios web enteros con Flash pero es una práctica que está cayendo en desuso por los problemas que puede dar a la navegación. Se utiliza Flash fundamentalmente para incluir en la web elementos ornamentales, anuncios, demos, simuladores, etc… animados. En esta cápsula veremos solamente las características principales de HTML estático, la base para construir un sitio web sencillo. 3. Webs estáticas vs Webs dinámicas Las páginas web pueden ser estáticas o dinámicas. Llamamos estáticas a aquellas que simplemente están alojadas en el servidor y no cambian su contenido a no ser que las actualicemos nosotros de manera manual. Así eran al principio la mayoría de páginas de Internet Son páginas web dinámicas las que mediante unas tecnologías determinadas modifican de manera automática su contenido en el servidor para dar respuesta a un requerimiento del visitante. Son ejemplos de páginas web dinámicas el sitio web de una agencia de noticias (que va modificando automáticamente las informaciones según le llegan, sin intervención humana) o la de los buscadores de Internet que cuando les hacemos una petición nos devuelven una página generada especialmente para responder a la búsqueda que estamos realizando. CI-011 v.01 Dossier / 3 Barcelona Activa Cibernàrium A veces se confunde dinamismo con animación, música, sonido o videos. Esto es dinamismo sino incorporación de multimedia. Pero los elementos ya están incluidos dentro de la web en su diseño original. Los elementos dinámicos se generan especialmente a petición del usuario de le web. Una web estática puede contener audio, animaciones, vídeo. Además puede incorporar programación en Javascript o VBScript para abrir pop ups(ventanas emergentes) o elementos animados que avisen de algún error que estemos cometiendo, por ejemplo. El navegador reconocerá todos estos elementos que están incorporados al código HTML y los ejecutará: es decir que se ejecutarán dentro de nuestro propio ordenador. Las web dinámicas por el contrario no se ejecutarán en nuestro ordenador sino en el servidor y serán servidas al usuario con un contenido u otro según lo que nos pidan. Para hacer posible esto la página web incorpora un código de servidor que contiene las instrucciones necesarias que el servidor interpreta para ejecutar en cada momento una acción u otra. El código de servidor forma parte de la página web pero sólo se ejecuta en el momento en que se solicita esta página. El código de servidor no es visible en la página que visualiza el usuario: el internauta sólo ve el HTML resultante de las operaciones que ha efectuado este código. Hay diversos estándares para programar el código de servidor, dependiendo del tipo de servidor con el que trabajemos. Si nuestro website está alojado en un servidor que funciona con programas de Microsoft la tecnología de servidor para páginas dinámicas se llama ASP (Active Server Pages). Si tenemos el sitio web en un servidor basado en Java la tecnología equivalente es la JSP (Java Server Pages). En cualquier caso, independientemente del código de servidor que utilicemos, el resultado para el usuario será siempre un documento HTML. Las web dinámicas nos permiten incorporar aplicaciones como buscadores, bases de datos, catálogos, “carritos de la compra”, etc. CI-011 v.01 Dossier / 4 Barcelona Activa Cibernàrium 4. Lenguaje HTML Vamos a analizar a partir de aquí algunas de las etiquetas más importantes del HTML, no con la finalidad de tener un dominio exhaustivo sino para poder reconocerlas en los códigos fuente de las páginas web o optimizar el trabajo con programas gestores de este lenguaje (como Dreamweaver o Frontpage). Como ya hemos mencionado el HiperText Markup Language (lenguaje de marcas de hipertexto) funciona a partir de una serie de marcas, también conocidas como etiquetas o tags que se enmarcan entre los signos < > que suelen ir en parejas de apertura y cierre. Una etiqueta de cierre se diferencia de una de apertura en que la de cierre siempre lleva el nombre precedido de la barra “/” por ejemplo <body> sería una etiqueta de apertura y </body> sería una etiqueta de cierre. La diferencia entre ambas es que la primera (la de apertura) indica que empezamos a trabajar con un elemento y la segunda, la de cierre, indica que dejamos de trabajar con ese elemento. Existen algunas excepciones en algunas etiquetas que no se cierran que mencionaremos a lo largo de este dossier. 4.1. Posibilidades del HTML Dar forma al texto que hay en pantalla. Es decir tipo de letra, tamaño, color, color de fondo, alineación de textos, marcos, subrayados, negritas, cursivas, etc. Insertar elementos multimedia. Audio, vídeo, imágenes, animaciones. Posibilidad de realizar enlaces o links a otras páginas. Es decir unir páginas para crear el sitio web. CI-011 v.01 Dossier / 5 Barcelona Activa Cibernàrium 4.2. Partes de una página web Las páginas web tienen dos partes diferenciadas, primero está el encabezado (head) y después el cuerpo (body) 4.2.1. <head> el encabezado En el encabezado <head> se incluye el título de la página que aparecerá en la barra azul de la ventana de Windows y toda aquella información que el usuario no ve en pantalla, como la descripción de la página o las palabras clave (keywords). Estos dos elementos son fundamentales no a la hora del diseño pero si en el momento de publicar el sitio en Internet y atraer visitas. El cuerpo de las páginas web <body> es aquello que el visitante puede ver en pantalla. Por lo tanto, todo el contenido que introduzcamos después de esta se verá en el navegador A las etiquetas suelen acompañarles atributos y a los atributos valores. Los atributos son indicaciones de alguna acción que queremos realizar con la etiqueta y los valores son la especificación de la acción a realizar. Iremos viendo sucesivos ejemplos de estos temas a lo largo de este dossier. NOTA: los valores los pondremos siempre entre comillas para que cualquier ordenador, navegador, sistema operativo los reconozca 4.2.2. <body>: el cuerpo de la página El fondo de la página por defecto es blanco, pero si queremos añadirle color pondremos el atributo “bgcolor” acompañado del valor que queramos establecer es decir del color de fondo que le queramos poner. Quedará una etiqueta como la siguiente: <body bgcolor=”red”> CI-011 v.01 Dossier / 6 Barcelona Activa Cibernàrium Con esta etiqueta estamos cambiando el color de fondo de la web a rojo. Podemos expresar los colores con su nombre en inglés o mediante las combinaciones hexadecimales RGB. 4.2.3. RGB El RGB corresponde a las siglas de Red, Green y Blue es decir rojo, verde y azul. El RGB sirve para crear matices de colores, es decir para darle más o menos intensidad a un color. Si sólo ponemos su nombre en inglés tendríamos una variante del color a la máxima intensidad posible, pero no colores matizados. Para definir un color mediante este sistema utilizaremos 6 dígitos de la siguiente escala: 0 1 2 3 4 5 6 7 8 9 A B C D E F. El 0 equivaldría a la ausencia de color y la F a la saturación de color. Crearemos un código hexadecimal, es decir de 6 dígitos de los cuales dos corresponderán a cada color. Es decir, dos para el rojo (Red), dos para el verde (Green) y dos para el azul (Blue). Es indiferente la combinación de números con números, números y letras o letras solamente. Siguiendo con el ejemplo anterior si escribimos: <body bgcolor=”#ff0000”> lo que estaría haciendo es definir el rojo en su máxima intensidad, pues hay ausencia de verde y de azul. Así pues un código “#ffffff” equivale al blanco, pues el color blanco es la máxima saturación de color posible y un código “#000000” equivale al negro que es la ausencia de color total. NOTA: ponemos el signo “#” delante del código de color para que cualquier ordenador, navegador, sistema operativo lo reconozca. CI-011 v.01 Dossier / 7 Barcelona Activa Cibernàrium NOTA: cuando abrimos cualquier etiqueta que contenga atributos como por ejemplo <body bgcolor=”#ff0000”> al cerrarla no hemos de cerrarla con sus atributos sino que basta con cerrarla con el nombre de etiqueta es decir poniendo </body>. Esto sirve para cualquier etiqueta que tenga atributos y valores. 4.3. <font> trabajando con las fuentes Para trabajar con los tipos de letra, el tamaño y el color partiremos de la etiqueta <font> acompañada de los atributos: Face para indicar qué tipo de letra queremos. Es decir el nombre de la fuente que queremos utilizar en la página que estamos creando. Así para utilizar la fuente Verdana escribiríamos: <font face=”verdana”>. Es importante poner el nombre exacto de la fuente o no nos lo reconocerá como tal Size para indicarle el tamaño. El tamaño de la letra lo expresaríamos en valores que van del 1 al 7 ”, siendo el 1 el más pequeño y el 7 el más grande. Por ejemplo: <font size=”5”> Color para el color de fuente, expresándolo con su respectivo nombre en inglés o bien con la combinación RGB. Por ejemplo: <font color=”red”> o <font color=”#ff0000”> No hemos de abrir una etiqueta <font> para cada atributo sino que con una sola que incluya los tres atributos es suficiente, así con los ejemplos anteriores lo adecuado sería escribir: <font color=”#ff0000 size=”5” face=”verdana”> CI-011 v.01 Dossier / 8 Barcelona Activa Cibernàrium siendo indiferente el orden en que pongamos los atributos. 4.4. <br> y/o <p> saltos de línea Para realizar una salto de línea, o sea, el equivalente a “ENTER” utilizamos la etiqueta <br>. Una etiqueta hace un salto de línea. Podemos poner tantas como saltos de línea queramos obtener y <P> para un salto más grande de aproximadamente un espacio y medio o cambio de párrafo. Sólo podemos indicar una <P>, pues en caso de poner dos o más seguidas, no obtendremos más que el primer salto de párrafo. En este caso ninguna de las dos etiquetas tiene un equivalente de cierre 4.5. Otros elementos para la edición de textos Para centrar un texto o un elemento utilizamos el tag <center> </center> Para poner un texto o una palabra en negrita utilizamos <b> </b>, en cursiva <i> </i> y en subrayado <u> </u> Para alinear un texto con respecto a los márgenes utilizaremos: <p align=”left”> para alinear el texto a la izquierda <p align=”right”> para alinear el texto a la derecha y <p align=”justify”> para que el texto quede alineado justificado, aunque con este formato lo que puede pasar es que los espacios entre las palabras a veces se hagan más grandes o mas pequeños, creando cierta irregularidad que no a todas las personas les gusta. 4.6. Trabajando con imágenes A la hora de trabajar con imágenes lo correcto sería trabajar con formatos de compresión digital como son el “Gif” (256 colores) y el “Jpg” (millones de colores). CI-011 v.01 Dossier / 9 Barcelona Activa Cibernàrium Estos formatos son los adecuados pues pesan muy poco y evitarán que la descarga se vuelva demasiado lenta, como lo pasaría con otros formatos de imagen como el “bmp” o el “psd” que no son de compresión digital. La resolución de GIF o JPG es más que suficiente para trabajar y publicar en la red. Por otro lado también deberíamos tener en cuenta que lo más adecuado antes de publicar las imágenes en la web es trabajarlas con programas específicos para el tratamiento digital de imágenes como “Photoshop”, “Corel” o “Irfanview” o “GIMP”. Estos dos últimos son de carácter gratuito. Una vez se han preparado y definido las imágenes se insertan en la web con la etiqueta: <img src=“flor.gif”> teniendo en cuenta que donde pone “flor.gif” iría el nombre de la imagen o la ruta en caso de estar en alguna carpeta. Si tuviéramos la imagen en un directorio diferente a donde estuviera la página deberíamos indicárselo por ejemplo de esta forma <img src=“imagenes\flor.gif”> escribiendo donde dice “imágenes” el nombre real de la carpeta que las contiene. La etiqueta de imagen es de las que no se cierran. A las imágenes les podríamos añadir Width (anchura), Height (altura), para modificar su apariencia, aunque como hemos dicho antes lo más lógico sería definir desde el programa de tratamiento de imágenes todos los aspectos de resolución, definición, altura, anchura… La imagen suele definirse en función de la definición de pantalla, es decir en píxeles. Hemos de tener cuidado al definir la resolución de pantalla, porque no todo el mundo tienen o trabaja con la misma. Una resolución más alta da la sensación de que todo se ve más pequeño en pantalla. Generalmente la mayoría de páginas suelen estar optimizadas para trabajar a 800x600 o superior. Esto es algo que tenemos que tener en cuenta a la hora de colocar elementos como las imágenes dentro de la página web. CI-011 v.01 Dossier / 10 Barcelona Activa Cibernàrium Las imágenes por defecto se alinean con el texto por la parte inferior de manera que se pueden comer espacio. Si queremos que el texto envuelva a la imagen hemos de colocar los atributos de alineación left o right en función de la alineación (derecha o la izquierda) que queramos para la imagen. <img src="mena.jpg align="left"> por ejemplo. Ejemplo de imagen sin el atributo de alineación en la etiqueta: Ejemplo de imagen con el atributo de alineación a la izquierda: CI-011 v.01 Dossier / 11 Barcelona Activa Cibernàrium 4.7. <a> Links o enlaces Podemos realizar enlaces a páginas propias dentro de un directorio o carpeta o a páginas ya existentes y colgadas en Internet. En ambos casos el elemento o las palabras que están entre la etiqueta de apertura <a> y la de cierre </a> serán lo que actúe de enlace <a href=“paginanueva.html”>palabra</a>en este caso entenderíamos como “paginanueva.html” el nombre del archivo con el que queremos enlazar la página en la que estamos y como “palabra” el elemento o palabra que queremos que actúe de enlace. <a href=“http://www.yahoo.es”>palabra</a> en este caso “palabra” actuaría de enlace al sitio web de Yahoo. Una imagen también podría hacer de enlace otras páginas propias o externas. Bastaría con poner entre la etiqueta de apertura y de cierre la etiqueta de imagen como por ejemplo: <a href=“paginanueva.html”><img src="mena.jpg”> </a> Los elementos marcados como enlaces (link) por defecto adquieren un color azul, mientras que aquellos enlaces ya visitados (vlink) adquieren un color fucsia. Si por cuestiones de diseño fuera necesario que esto se cambiara, en la etiqueta <body> añadiremos nuevos atributos y valores para especificar que colores queremos que tengan los elementos que actúan de enlace. Por ejemplo: <body link=”#009900” vlink=”#445599”> Los enlaces por defecto se abren en la misma ventana activa en la que estamos situados. Si queremos que se abran en ventanas nuevas (algo adecuado sobre todo cuando enlazamos a sitios web externos), añadiremos target=”blank” a la etiqueta <a href…>. Por ejemplo: <a href=http://www.yahoo.es target=”blank”> CI-011 v.01 Dossier / 12 Barcelona Activa Cibernàrium 4.8. <table> Usando las tablas para la organización del contenido Una manera de presentar los datos dentro de una página y facilitar la estructuración del contenido sería en forma de tablas que podrían ser visibles o no en función de añadir el atributo border al tag <table>. Por ejemplo:<table border=“2”> </table> daría una tabla con borde visible. Hemos de tener en cuenta que las tablas se construyen por filas y después colocando las celdas que queramos dentro de cada fila. Las tablas pueden tener anchura y altura con los atributos Width (anchura), Height (altura) acompañados de un valor en píxeles. Si no ponemos nada, siempre podemos definir la anchura desde las celdas con los mismos atributos. En caso de no poner nada en las celdas la tabla simplemente se adaptaría al tamaño de aquellos elementos que insertáramos dentro o al texto que fuéramos colocando dentro de las celdas. Las tablas también pueden tener un color de fondo colocando en su etiqueta el atributo “bgcolor” y el color que queramos. Si no lo hacemos, la tabla será del mismo color de fondo de la página. También podemos añadir un color de fondo diferente en cada celda Para construir una tabla hemos de hacer lo siguiente: <table> Indica que empezamos a crearla <tr>indica una fila, es decir indica que empezamos la construcción de la primera fila: las filas no tienen ningún tipo de formato <td> empieza la celda</td>fin de la celda <td> empieza la celda</td>fin de la celda </tr> final de la primera fila CI-011 v.01 Dossier / 13 Barcelona Activa Cibernàrium <tr>empezamos la segunda fila <td> una celda 2 </td> fin de la celda <td> otra celda 2 </td> fin de la celda </tr> final de la segunda fila </table>fin de la tabla 4.9. Otras etiquetas de interés <!--............--> esta etiqueta es conocida como la etiqueta de comentario. Es una etiqueta más visual que no aporta nada más allá de ser una guía para leer el código fuente y ayudar en caso de que las páginas sean o se hagan muy complejas. Se pueden colocar en cualquier lugar del documento y aunque se coloquen en el BODY serán ignoradas de manera que no serán mostradas en pantalla. <H1>...</H1> - <H6>...<H6> Estas etiquetas son las de cabecera y se utilizan para destacar un texto. Se caracterizan porque la etiqueta tiene una H acompañada de un rango que va del 1 al 6, siendo 1 el formato de cabecera más grande y 6 el más pequeño. Se recomienda utilizar solo entre el 1 y el 3 pues los otros pueden resultar algo ilegibles. <SMALL>...</SMALL> pequeño <BIG>...</BIG> grande <SUP>…</SUP> superíndice <SUB>…</SUB> subíndice <STRIKE>…</STRIKE> tachado <UL>......</UL> es la etiqueta que introduce una lista no numerada, o sea de boliches <OL>.....</OL> es la etiqueta que introduce una lista numerada CI-011 v.01 Dossier / 14 Barcelona Activa Cibernàrium <LI> introduce cada nuevo elemento de una lista <DL>.....</DL> es la etiqueta que introduce una lista de definición <DT>.....</DT> es el término a definir <DD>....</DD> introduce la definición del término a definir Imaginemos que queremos empezar una lista numerada pero en lugar de empezar por el número 1 quisiéramos empezar a partir del 30, 31, 32... y así sucesivamente. Al primer valor de lista le añadiríamos el atributo Value y el valor 30: <OL> <LI value=”30”> este sería el valor 30 <LI>este sería el 31 <LI>y así sucesivamente </OL> CI-011 v.01 Dossier / 15 Barcelona Activa Cibernàrium Algo que también podemos hacer es definir mediante HTML un elemento que actúe como enlace al programa de correo, de manera que al hacer clic sobre él, se abra el gestor de correo predeterminado y de esta forma la gente pueda escribirnos un correo electrónico partiendo desde nuestra propia página web. Utilizaremos el atributo mailto: acompañando a la etiqueta ancla. Por ejemplo: Para contactar con nosotros <A href=mailto:[email protected]>escríbeme</A>. CI-011 v.01 Dossier / 16 Barcelona Activa Cibernàrium GUíA DE RECURSOS “Crea tu website” Fundamental W3C: World Wide Web Consortium: Oficina española. http://www.w3c.es/ Sitio web del consorcio de la World Wide Web en España. Este consorcio se encarga de la creación de los estándares del HTML entre otros lenguajes. En la web encontraréis las novedades y la información más actualizada. HTML: Cursos, manuales, tutoriales Cursos y manuales gratuitos sobre el diseño y planificación de páginas web. Navegando por la Red encontraréis muchos más. SOLOCURSOS http://www.solocursos.net/guia_para_el_diseño_de_paginas_en_internetslccurso604825.htm http://www.solocursos.net/manual_de_html_y_trucos_de_diseño_webslccurso1029310.htm http://www.solocursos.net/construyendo_paginas_webslccurso1026421.htm Aulaclic http://www.aulaclic.es/html/f_html.htm Webmaestro http://www.ldc.usb.ve/~vtheok/webmaestro/ LOGRATIS http://www.logratis.info/manuales.asp EVIDALIA http://www.evidalia.com/tutoriales/subcategoria4.html Aplicaciones de software libre Programas para la creación de páginas web de Software libre AMAYA CI-011 v.01 Dossier / 17 Barcelona Activa Cibernàrium http://www.w3.org/Amaya/ Quanta http://quanta.kdewebdev.org/ NVU http://nvu.com/ Bluefish http://bluefish.openoffice.nl/index.html Programes para el tratamiento de imágenes GIMP http://www.gimp.org/ Irfanview http://www.irfanview.com/ CI-011 v.01 Dossier / 18
