diseño páginas web con editor html -...

Diseño páginas web con editorHTMLAutor: Mariló Matutano García

1

mailxmail - Cursos para compartir lo que sabes

http://www.mailxmail.com


Presentación del curso

Diseño páginas web con Editor HTML, cuantas veces al visitar una Web, noshemos preguntado ¿Cómo se harán estas páginas? ¿De qué manera podría yo crearmi propia página Web, usando programas gratuitos y de una manera sencilla?

Pues bien este curso es el indicado para ponernos manos a la obra. La finalidad esaprender a editar páginas Web utilizando un editor HTML visual, incorporando loselementos más habituales: textos, imágenes, enlaces, marcadores, listasnumeradas, etc.

2




1. Diseño Web. Introducción.

Cuantas veces al visitar una Web, nos hemos preguntado ¿Cómo se harán estaspáginas? ¿De qué manera podría yo crear mi propia página Web, usando programasgratuitos y de una manera sencilla?

Pues bien este curso, "Diseño páginas Web1 con Editor HTML", es el indicado paraponernos manos a la obra. La finalidad es aprender a editar páginas Web utilizandoun editor HTML visual, incorporando los elementos más habituales: textos,imágenes, enlaces, marcadores, listas numeradas, etc.

Una vez que lo finalicemos ya habremos empezado a crear una Web, paraposteriormente hacernos más expertos en la materia y crear una Web personal, enla que además podremos insertar imágenes, videos, audio, etc. Y se llamarán "Diseño Web2.Insertar Imagén", "Diseño Web3. Insertar Video", "Diseño Web4.Insertar Audio". Este será el objetivo de posteriores cursos que yo misma meencargaré de publicar, dependiendo de a la aceptación del primero.

Pero por ahora nos conformaremos sólo con aprender a insertar esos elementosmás habituales, que enumeré en el segundo párrafo de este capítulo.

Toda casa hay que empezarla por los cimientos, ya que sin ellos nos sería imposiblehacer el resto de la obra.

¡Ánimos y a trabajar! Ya verás la satisfacción que te produce cuando al fin veaspublicada tu página Web.

3




2. Páginas web. Conceptos Básicos

Vamos a definir algunos conceptos básicos muy utilizados en el diseño WEB. No ospreocupeis si ahora os suena a chino, pero seguro que alguno de ellos estais hartosde usarlos. Ni pretendais aprenderoslo de memoria.

1. Word Wide Web (WWW) Es el sistema de presentación de la información másutilizado en Internet. Sus principales características son:

a) Hipertexto: Es texto o imagen que se muestra en la pantalla vinculada a otraspáginas del mismo sitio o de sitios ajenos. Al situar el puntero del ratón sobre él,éste toma el aspecto de una mano. Al hacer clic se mostrará la página vinculada almismo.

b) Multimedia: En la pantalla aparece texto, imágenes, videos, audio, animaciones,etc.

c) Universalidad: Se puede acceder desde cualquier tipo de equipo o sistemaoperativo (Windows, Linux, Mac), usando cualquier navegador y desde cualquierparte del mundo.

d) Pública: Toda su información está distribuida en miles de ordenadores(servidores) que ofrecen su espacio para almacenarla. Es información pública ynormalmente accesible por cualquier usuario.

f) Dinámica: Mucha información, aunque está almacenada, puede ser actualizadapor el público que la consulta sin que el usuario necesite conocer detalles técnicosde su mantenimiento. Son las páginas activas: asp, php o jsp.

2. Navegador Es el programa que se utiliza para acceder a los contenidos deInternet. Debe ser capaz de comunicarse con un servidor y comprender el lenguajede todas las herramientas que manejan la información de Web. Los navegadoresmás populares son Internet Explorer, Mozilla, Firefox, NetScape, Opera, Safari, etc.

3. Servidor Es el ordenador encargado de proporcionar al navegador del cliente losdocumentos y medios

que éste solicita.

4. HTTP (Hyper Text Transfer Protocol) Es el protocolo de comunicación utilizadopara transmitir las peticiones y archivos a través de Internet entre el servidor y elnavegador. El protocolo http:// se indica en el inicio de la dirección. Si no se tecleaeste prefijo, el navegador lo añade de forma automática.

5. URL (Universal Resource Locator) Es la dirección donde se encuentra un recursoen Internet. Ejemplo: http://www.google.es. Si no se indica página html, el servidorenviará la página índice (index) o bien por defecto (default).

6. HTML (Hyper Text Markup Language) Es el lenguaje en el que se diseñan laspáginas que se visualizan a través del navegador. Este lenguaje se basa en etiquetas(instrucciones que le dicen al navegador como deben mostrarse) y atributos(parámetros que dan valor a la etiqueta). Una página HTML contiene texto con uncierto formato y referencias a archivos externos que contienen imágenes, sonidos,animaciones, etc.

4




7. Archivo HTML El lenguaje HTML se utiliza para definir un documento que sevisualizará a través del

navegador. Este documento se guarda en un archivo con extensión .htm o .html

Básicamente los documentos escritos en HTML constan de texto y etiquetas. Lasetiquetas permiten definir el formato del texto, el título que mostrará en la barra detítulo del navegador, los elementos multimedia que aparecerán incrustados en eldocumento pero que se almacenan en archivos externos, etc.

Todo documento HTML tiene la siguiente estructura: cabecera y cuerpo deldocumento. Las tres etiquetas que describen su estructura general son:

• <html>: indica que se inicia el documento.

• <head>: incluye el título de la página (<title>) que se muestra en la barra detítulo

del navegador.

• <body>: contiene la información visible.

5




3. Documento HTML

1. Crea una nueva carpeta y llamala Mi Doc HTML, en Mi PC>Disco local (C:).Abreel Bloc de Notas de Windows mediante: Inicio > Todos los programas > Accesorios > Bloc de Notas.

2. En un documento nuevo escribe el siguiente texto:

<html>

<head>

<t i t le>Mi primer documento HTML</ t i t l e>

< /head>

<body>

Estoy aprendiendo a elaborar una página WEB

< /body>

< / h t m l >

3. Selecciona Archivo > Guardar como. Se mostrará este cuadro de diálogo.

6




4. En la lista desplegable Guardar en:elige la carpeta que hemos creadoanterioarmente.

5. Introduce el nombre del archivo añadiéndole la extensión .htm porejemplo: miprimerdoc.htm

6. Pulsa en el botón Guardar.

7. Cierra la ventana del Bloc de Notas.

8. Elige Inicio > Mi Pc para situarte en esta carpeta donde has guardado tu archivo HTML. Encontrarás un archivo con el icono de un documento HTML con el nombreque has elegido y con el dibujo de tu navegador (por ejemplo la E de internetexplore o el que uses habitualmente mozilla, etc.).

9. Haz doble clic sobre el icono de este archivo y se abrirá el navegador configuradopor defecto en tu equipo mostrando el contenido de esta página HTML.

10. Observa que en la barra de título del navegador aparece el texto que hasencerrado entre las etiquetas

7




encerrado entre las etiquetas

<tit le> … </t i t le> y en el documento en blanco el texto que has incluido entre< body>…</body>

8




4. Navegador Mozilla Firefox. Diseño Web

Firefox es un Navegador gratuito. Recomiendo que lo useis para navegar con él ypara la creación de nuestras páginas Web. Ya que desde el principio hemos dichoque ibamos a usar programas gratuitos para nuestro trabajo.

CARACTERÍSTICAS MÁS DESTACADAS DE FIREFOX

X-Firefox

Multiplataforma: Existen versiones de Mozilla Firefox para Windows, Linux y Mac.

Navegación con pestañas: Se pueden abrir simultáneamente varias páginas web detal forma que cada una se visualiza en una pestaña independiente. Cada pestañadispone de su propio botón de cerrado. Si se cierra accidentalmente una pestaña sepuede recuperar en el menú Historial.

Restauración de sesión: Cuando Firefox se cierra o reinicia se ofrece la opción derestaurar la sesión para evitar la pérdida de información en formularios, descargas,etc.

Corrector ortográfico: Si se dispone del complemento Diccionario deEspañol/España se puede activar el corrector ortográfico integrado que subrayarálas palabras no tecleadas correctamente en cualquier cuadro de texto de la páginaweb. Mediante clic derecho sobre esa palabra se ofrecerán alternativas parasustituirla.

Sugerencias de búsqueda: Al comenzar a escribir en la barra de búsqueda deGoogle se mostrará una lista de sugerencias.

Canales RSS: Permite leer directamente los titulares de noticias RSS sin necesidad detener instalado ningún otro programa.

Búsqueda integrada: Firefox proporciona una barra de búsqueda que integra losmotores más utilizados a nivel mundial: Google, Yahoo!, eBay, Diccionario RAE,Wikipedia y Creative Commons. Para ello basta con elegir el motor e introducir eltérmino de búsqueda.

Bloqueador de ventanas emergentes: Se pueden controlar las ventanasemergentes molestas evitando que se desplieguen. Mediante una barra informativa oun icono en la parte inferior de la pantalla se notifica al usuario el

bloqueo de ventanas.

Accesibilidad:Firefox incluye distintas prestaciones para facilitar la accesibilidad apersonas con deficiencias visuales: aumento del tamaño de la fuente mediante<Ctrl>+Scroll del ratón,compatibilidad con lectores de pantalla (p.e. FreedomScientific’s JAWS).

Protección antiphising: Cuando una página web sea sospechosa de fraude por robode identidad digital frente a una entidad bancaria (physing), Firefox advertirá alusuario y ofrecerá una página de búsqueda para encontrar la página auténtica quese está buscando.

9




Actualizaciones automáticas: Firefox comprueba la versión del navegador y siexiste una más reciente avisa al usuario sobre la posibilidad de instalarla. Estaactualización suele ser pequeña resultando fácil y rápida de descargar e instalar.

Protección contra programa espías: Firefox no permite que una página webdescargue, instale o ejecute programas en el equipo sin un consentimiento explícitodel usuario.

Limpieza de información privada: Utilizando esta utilidad situada en el menúHerramientas se garantiza que se limpian todos los datos privados de la navegaciónen un solo clic. Es especialmente útil en un equipo multiusuario donde se abresesión siempre con el mismo usuario Windows.

Complementos: Firefox ofrece más de 1000 complementos que permiten aumentarlas prestaciones por

defecto de este navegador web: lectura de noticias RSS, herramientas web y dedesarrollo,descargas de archivos, privacidad y seguridad, herramientas debúsqueda, marcadores,diccionarios, multimedia, etc. El uso de un administrador decomplementos facilita lasoperaciones de instalación, desinstalación y desactivación.

Temas: Se pueden instalar y configurar distintos temas que permiten cambiar loscolores, fuentes,iconos, gráficos, etc del interfaz de Mozilla Firefox.

Plugins: Firefox dispone de la mayoría de plugins necesarios para visualizar todotipo de contenidos multimedia: Adobe Flash Player, Java, QuickTime, RealPlayer,Windows Media Player, etc.

En la página web oficial de Mozilla Firefox podrás encontrar la versión más recienteo que se adapta a tu sistema.O usar la versión portable del mismo, con eso nosevitamos tener que instalarlo en nuestro PC.

http://www.mozilla-europe.org/es/products/firefox/

1 0




5. Kompozer . Diseño Web

Existen multitud de editores Web comerciales, pero en este curso vamos a usarel Kompozer, http://www.kompozer.net, p or sus interesantes características:

•Editor visual.

•Gratuito.

•Soporta tablas, plantillas y hojas de estilo.

•Subida de archivos por FTP al servidor.

•En castellano.

•Multiplataforma: windows, linux, mac, etc

•Portable.

Kompozer es un editor WYSIWYG (What You See Is What You Get= Lo que ves es loque tienes) de páginas Web. Resulta una herramienta de uso fácil, de libredistribucción y de uso gratuito basado en el motor de Mozilla. Este programa es elsucesor no oficial del conocido Nvu 1.0 y se propone como alternativa ya que Nvuno se actualiza desde el 2005 y una nutrida comunidad de usuarios desarrolladoresse han encargado de evolucionar Nvu bajo esta nueva denominación con múltiplescorrecciones y parches.

INSTALACIÓN DE KOMPOZER.

Primero nos dirigimos a la página oficial de Kompozer especificada en el primerpárrafo de estae capítulo. Descomprimimos el archivo y lo instalamos comocualquier otro programa.O usamos su versión portable, para evitar su instalación elel PC.

Kompozer

1 1


http://www.kompozer.net



6. Uso Kompozer.

Haz doble clic sobre el icono de Kompozer del escritorio.

Kompozer

1. Barra de Menús. Ofrece asceso a todas las opciones del programa organizadascomo en otras aplicacioines de windows en Archivo, Editar, Ver, Insertar...

2. Barra de Redacción. Consta de los botones de accesos a las operaciones másfrecuentes: Nuevo, Abrir, Guardar, Publicar...

3. Barra de Formato. Contiene las herramientas más útiles para aplicar formato altexto: Tipo de fuente,tamaño, color, efecto, justificación, etc. Si se sitúa el ratónsobre cada botón se muestra un mensaje indicando su función.

4. Barra de Pestaña. Kompozer permite editar varias páginas usando un sistema depestañas donde cada documento es accesible al pulsar sobre la pestañacorespondiente. El nombre del archivo aparece acompañado por el icono de undiskete rojo cuando esta página ha sido modificada, pero no guardada.

5. Docuemnto. Muestra el contenido HTMLactual.

6. Barra de Modo de Edición. Indica el modo de vista que está activo en eldocumento actual. Se puede cambiar el modo de visualización pulsando en una deestas pestañas: Normal, Etiquetas HTML, Código Fuente y Vista Preliminar. Mientrasno se indique lo contrario se utiliará el modo de visualización Norrmal.

7. Barra de Estado. Muestra la posición del cursor con respecto a la jerarquía deetiquetas HTML del documento. Se pueden asignar atributos a una etiquetahaciendo clic derecho sobre la etiqueta en la barra de estado y seleccionando laopción deseada.

1 2




8. Administrador de Sitios. Permite crear y mantener un sitio Web.

1 3




7. Diseño de página Web (1/2)

El propósito de esta actividad es diseñar tu primera página con Kompozer.

Para ello vamos primero a crear una carpeta en el raiz de tu disco duro. Así que nosdirijimos a Inicio>>>Mi Pc>>>Disco local C.Pinchando con derecho en elratón vamos a nuevo>>>carpeta y creamos una con el nombre miweb la abrimosy dentro de esta creamos una subcarpeta a la que llamaremos imagenes.

En el Bloc de notas, que podeis encontrar en Inicio>>>Accesorios>>>Bloc denotas, lo abrís y copiais el siguiente texto que marco en negritas, así os evitarétener que buscar un texto:

Géneros cinematográficos

Artículo principal: Género cinematográfico En la teoría cinematográfica, el género se refiere al método de dividir a las películasen grupos.Típicamente estos géneros están formados por películas que comparten ciertassimilitudes, ciertos tópicos,tanto en lo narrativo como en la puesta en escena.

Cine independiente: Una película independiente es aquella que ha sido producidasin el apoyo inicial de un estudio o productora de cine comercial. El cine deindustria puede ser o no de autor, mientras que el cine independiente lo será casisiempre. Actualmente existen muchos países que no tienen una fuerte industria delcine, y toda su producción puede ser considerada independiente. Cine de animación:

El cine de animación es aquél en el que se usan mayoritariamente técnicas deanimación.El cine de imagen real registra imágenes reales en movimiento continuo,descomponiéndolo en un número discreto de imágenes por segundo. En el cine deanimación no existe movimiento real que registrar, sino que se producen lasimágenes individualmente y una por una (mediante dibujos, modelos, objetos yotras múltiples técnicas), de forma tal que al proyectarse consecutivamente seproduzca la ilusión de movimiento.Es decir, que mientras en el cine de imagen real se analiza y descompone unmovimiento real, en el cine de animación se construye un movimiento inexistenteen la realidad.

Cine documental:

El cine documental es el que basa su trabajo en imágenes tomadas de la realidad.Generalmente se confunde documental con reportaje, siendo el primeroeminentemente un género cinematográfico, muy ligado a los orígenes del cine, y elsegundo un género televisivo.

Cine experimental:

El cine experimental es aquél que utiliza un medio de expresión más artístico,olvidándose del lenguaje audiovisual clásico, rompiendo las barreras del cinenarrativo estrictamente estructurado y utilizando los recursos para expresar ysugerir emociones, experiencias, sentimientos, utilizando efectos plásticos o

1 4




rítmicos, ligados al tratamiento de la imagen o el sonido.

Cine de autor:

El concepto de cine de autor fue acuñado por los críticos de los Cahiers du Cinémaparareferirse a un cierto cine en el que el director tiene un papel preponderante en latoma de todaslas decisiones, y en donde toda la puesta en escena obedece a sus intenciones.Suele llamarse de esta manera a las películas realizadas basándose en un guiónpropio y al margen de las presiones y limitaciones que implica el cine de los grandesestudios comerciales, lo cual le permite una mayor libertad a la hora de plasmar sussentimientos e inquietudes en la película. Sin embargo, grandes directores de laindustria, como Alfred Hitchcock, también pueden ser considerados «autores» desus películas.Se define de acuerdo con su ámbito de aplicación y recepción, ya que no sueletratarse de un cine ligado a la industria, y no se dirige a un público amplio sinoespecífico, y comparte a priori un interés por productos que se hallan fuera de loscánones clásicos. Un subgénero importante podría ser el cine abstracto.

Una vez escrito o copiado el texto hemos de guardarlo llendoa Archivos>>>Guardar como, de la manera que indica el dibujo siguiente:

Teniendo en cuenta que donde al abrir el desplegable "TIPO" hemos de elegirDocumento de texto (*txt). Y a la hora de poner nombre no ha de llevar ni espacios,ni acentos,ni ñ etc. Por ejemplo podemos poner el nombre de generoscinematograficos.generoscinematograficos.

1 5




Y en la carpeta im,agen que creamos dentro de la de miweb podemosguardar cualquier foto relacionada con el cine en formato jpeg que podeis buscar eninternet y bajarla de cualquier página. Eso lo dejo a vuestra elección.

1 6




8. Diseño de página Web (2/2)

Una vez que ya hayamos hecho lo que dijimos en el capítulo anterior vamos a abrirel Kompozer haciendo doble click, con izquierdo en el icono del programa. y vamosa seguir los siguientes pasos:

1. Inicia el programa Kompozer haciendo doble clic sobre el correspondiente iconosituado en el escritorio.

2. Minimiza esta ventana y utiliza el explorador de archivos para abrir (doble clic) elarchivo de texto generoscinematograficos.txt. Se abrirá el Bloc de Notas mostrandosu contenido.

3. Selecciona Edición > Seleccionar todo para seleccionar el texto completo quecontiene este archivo y a continuación elige Edición > Copiar para copiarlo alportapapeles de Windows. Cierra la ventana del Bloc de Notas.

4. En la barra de tareas de windows pulsa en el botón correspondiente de Kompozerpara maximizar la ventana de este programa.

5. Clic sobre el nuevo documento HTML que estamos editando y en la barra demenús selecciona Editar > Pegar. De esta forma podrás disponer del texto de lapágina sin necesidad de teclearlo.

6. Antes de continuar conviene guardar el archivo en la carpeta miweb que hemoscreado. Para ello pulsa en el botón Guardar o bien elige Archivo > Guardar.

7. En el cuadro de diálogo Título de la página introduce su título y haz clic en elbotón Aceptar.

8. En el cuadro de diálogo Título de la página introduce su título y haz clic en elbotón Aceptar.

9. Se muestra el cuadro de diálogo Guardar página como donde debes desplegar lalista Guardar en para localizar la carpeta miweb. En la casilla Nombre introduce elnombre del archivo: generoscinematografico. Haz clic en guardar.

10. Título. Pulsa y arrastra para seleccionar la primera línea de texto: GenerosCinematograficos. En la barra de Formato despliega el cuadro de estilos de párrafo yelige Título 1. Si deseas regresar al estilo normal, marca el texto que desees yselecciona en esta lista:Texto del cuerpo. Vamos ahora a insertar la imagen quebuscamos y guardamos en la subcarpeta "imagenes".A esa imagen le pudimosllamar cine.jpg o como mejor os gustara. Para ello seguiremos los siguientes pasos:

1. Clic debajo del título anterior y pulsa la tecla para definir el punto donde seinsertará la imagen. En la barra de Redacción pulsa en el botón Imagen.

2. Se muestra el cuadro de diálogo Propiedades de imagen. Pulsa en el botón Elegirarchivo& para localizar el archivo que contiene la imagen.

3. Despliega la lista Buscar en: para abrir la carpeta miweb\images donde hemossituado anteriormente el archivo cine.jpg. Clic sobre este archivo y pulsa en el botónAbrir.

4. Al regresar de nuevo al panel Propiedades de imagen conviene introducir el Texto

1 7




alternativo. En este caso teclea Generos Cinematograficos. Se trata de un textodescriptivo que contribuye a la accesibilidad de nuestra página y que se mostrarácuando el usuario sitúe el ratón sobre ella.

5. Observa que en la casilla Ubicación de la imagen se indica la ruta relativa paralocalizar la imagen desde la página actual: images/cine.jpg. Para terminar clic en elbotón Aceptar.

Ya podemos abrir nuestra primera página.Para hacerlo vamos a la crpeta "miweb" yhacemos doble clic sobre el icono que tiene el dibuko de nuestro navegador:internet explore, mozilla,etc. ¿Qué tal, cómo os setís a ver esto? Genial eh. Lo únicoque te hace falta para subir, una vez hechas las páginas es: Si tienes acceso aInternet en casa tu compañía te da sitio en su servidor para que la alojes (Ono,Terra, Orange...). Ponte en contacto con ellos para que te activen en servicio y te denlas clases para configurar Filezilla. Si quieres tener un dominio propio (como podríaser www.tunombre.es) tienes que comprar ese dominio (no cuesta mucho al año:unos 6 euros). Ya publiqué en maixmail un curso llamado montaje. Fotos y músicaGracias por seguir este curso y ya estoy preparando la segunda partre que sellamará: "Diseño páginas Web 2: Insertar imágenes" Cualquier duda sobre el cursoeditado pueden preguntarmela en el correo siguiente: [email protected] Fdo:MªDolores Matutano Gracía

1 8




diseño páginas web con editor html -...

Documents