CREACIÓN DE PÁGINAS WEB. 1
La creación de páginas para la WEB se puede hacer de varias maneras.
1.- Directamente, en un simple editor de texto, en código HTML
2.- Utilizando un editor de páginas WEB, open source (Blue Griffon) o
pagando licencia (Dreamweaver)
3.- Usando sitios ya diseñados para eso (
wix
,
weebly
, etc. )
4.- Utilizando un editor de páginas y editando el código (1 + 2)
Para efectos de esta guía de estudio, emplearemos un software libre
para edición de la página, mezclado con elementos de programación de
HTML.
El sóftware que se utiliza durante estas sesiones de trabajo es el
Blue
Griffon o el
Kompozer.
Ambos programas son open source y existen para todas las plataformas.
Existe mucha información en la red sobre la utilización de estos
programas.
El lenguaje HTML es el punto de partida para la creación de páginas
WEB. Para desarrollar contenidos más dinámicos puede ser necesario
integrar otros lenguajes :
1.
HTML define el
contenido de las páginas web
2.
CSS especifica el
layout de las páginas web
3.
JavaScript permite
programar el comportamiento de las páginas web
1.- LA ORGANIZACIÓN DE LA
INFORMACIÓN.
Para desarrollar estas prácticas
para la creación de páginas en Internet es importante tener presente
lo siguiente:
1.- Que todo el material usado en la página esté en la carpeta del
sitio (ej.: MiSitio)
2.- Que el material en la carpeta esté ordenado por tipo de media
y/o por otras divisiones
3.- Que las carpetas y archivos sean
nombrados
correctamente
4.- Es recomendable que la página de inicio del sitio (ej.: MiSitio)
se llame index.html
5.- Los videos que se vayan a utilizar en la página estarán
hospedados en otro sitio (p.ej. YouTube) y serán referenciados.
6.- Contar con un esquema de navegación y/o organización de la
página
El diagrama o esquema de navegación nos puede dar una idea bastante
clara de las páginas que debemos realizar y de los materiales que
emplearemos.
Ejemplo.
2.- LA PREPARACIÓN DE LOS MATERIALES.
En base al diagrama de la página podemos determinar el tipo de
documentos (elementos) que emplearemos en su construcción,
principalmente:
- imágenes (formatos .jpg, .gif., .png)
- videos y audios (para subir a otros sitios como p.ej. YouTube y
SoundCloud)
- documentos de texto (.pdf y .txt / .doc)
La preparación de estos materiales incluye su escalado (pensando en
las dimensiones de la página y en el tamaño del archivo), su
compresión, y su revisión en cuanto a redacción y ortografía de los
documentos de texto.
Consideraciones sobre el tamaño y el peso de las páginas WEB.
Optimización de imágenes: ver Part 3: Working with Images. Fuller and
Ulrich,
HTML In 10 Simple Steps Or
Less (2004)e, Whiley Publishing 2004.
3.- CONOCIENDO EL EDITOR DE HTML.
En el desarrollo de este curso se
utilizará como editor para la creación de páginas WEB un simple
editor de texto y el programa Kompozer o el Blue Griffon; ambos son
open source y muy
similares.
En la pantalla principal del editor existen algunos íconos.
Revisión de sus funciones.
Observar en el editor las diferencias entre Body Text, Parrafo y
Heading.
Observar principalmente las herramientas para el formato de texto,
color del texto y color del fondo.
Cada cambio que realizamos en el editor de la página origina un
cambio en el código (source). Los cambios que realizamos en el
código (source) origina también un cambio en el aspecto de la
página.
En propiedades de la página aparece el título, el autor, el lenguaje
utilizado y el conjunto de caracteres utilizado. Esto es importante
para que la página se pueda ver correctamente con acentos y otros
símbolos característicos del español.
Bibliografía
Fuller and Ulrich,
HTML In 10
Simple Steps Or Less (2004)e, Whiley Publishing 2004.
Lèvy, Pierre,
La Inteligencia
Colectiva, Antropología del Cyberspace. UNESCO
Greene, Rachel, Internet Art, Thames & Hudson. London, 2004.
En Internet:
WWW
Consortium
CREACIÓN DE PÁGINAS WEB. 2
4.- LA ESTRUCTURA DE UNA PÁGINA WEB.
Básicamente el HTML es un lenguaje
de programación que estructura la información de una página y
conecta una página con otras páginas en Internet.
Tiene dos componentes principales:
elementos
y los
atributos de estos
elementos.
Los elementos: son los textos, las imágenes, los objetos gráficos.
Los atributos son características de los elementos de la página (por
ejemplo un texto bold).
Partes de la programación de HTML: head y body.
<html>
<head>
..........
</head>
<body>
..........
</body>
</html>
Contenidos "head" y contenidos "body".
5.- LA PÁGINA DE ENTRADA
En la primera página es donde encontramos información general y los
links para eventuales páginas siguientes.
Para la optimización del trabajo es importante prever en la página
de entrada todos los links que se repitirán en las páginas
subsecuentes.
6.- INSERTAR UNA IMAGEN.
En el menú "INSERT" del programa seleccionamos "Image" o "Imagen" y
nos aparece un cuadro que nos permite seleccionar una imagen.
La imagen se puede escalar en el programa. [Wysiwyg]
En el código de la página "SOURCE" nos aparece una línea de
programación parecida a la siguiente:
Podemos editar el tamaño directamente en la página del código.
7.- INSERTAR UNA TABLA.
Las tablas permiten ordenar elementos dentro de la página.
8.- INSERTAR UN HIPERLINK.
Un vínculo se pueste establecer sobre una parte de un texto (por
ejemplo una palabra), sobre una imagen (por ejemplo una miniatura de
una imagen que nos lleva en otra página a la imagen completa), o sobre
una parte de una imagen (Image Map).
9.- TRABAJANDO CON TEXTOS
- Listas ordenadas y listas (bullet)
- Estilos de Bullets (square, disc, circle)
Bibliografía
Fuller and Ulrich, HTML In 10
Simple Steps Or Less (2004)e, Whiley Publishing 2004.
Haine Paul, HTML Mastery:
Semantics, Standars, and Styling. Friendsoft, 2006.
Stephen Wilson, Art + Science
Now, Thames & Hudson, 2010.
Stephen Wilson, Information Arts,
Intersections of art, science and technology, The MIT
Press.
Stewart Kranz, Science &
Technology in the Arts, Van Nostrand Reinhold, 1974.
CREACIÓN DE PÁGINAS WEB. 3
1.- INSERTAR UNA IMAGEN CON LINKS
(IMAGE MAP).
Preparación de una imagen con map en
Photoshop.
Se trazan en Photoshop las zonas sensibles y se guarda una imagen con
la programación html.
Animación de botones y de menu:
https://www.youtube.com/watch?v=uI-0CLy-CtA
https://www.youtube.com/watch?v=RDy4alhk9LU
Obtención del código html en sitios
en Internet.
En estos sitios subimos la imagen y trazamos en forma interactiva las
zonas sensibles sobre la imagen. El sitio nos proporciona el código
html para insertar en nuestra página. Ejemplo de estos sitios:
http://www.image-maps.com
http://imagemap-generator.dariodomi.de
http://www.maschek.hu/imagemap/imgmap
https://www.image-map.net
Image Map en Dreamweaver o en otros
softwares.
En muchos programas podemos trazar sobre la imagen las zonas sensibles
y nos inserta el código html en la programación de la página.
2.- INSERTAR UN VIDEO CON EL EDITOR
DE HTML.
De la página de YouTube entrar al menú de
share.
Copiar el código que nos proporciona la página en embed.
Insertar el código copiado en nuestra programación html.
3.- PROGRAMACIÓN BÁSICA DE JAVA
1.- Dentro de una página, como vimos anteriormente, tenemos tres
segmentos básicos:
- html
- head
- body
La programación Java Script deberá estar dentro del segmento
"head"
Ejemplo de programación de una página que abre ajustada a un
tamaño (por ejemplo para presentar una fotografía de una obra):
<script language="JavaScript">
function digital(){
window.open("digital.html" , "" , "fullscreen=0 , toolbar=0 ,
scrollbars=0 , resizable=0 , width=464 , height=510 " );
}
</script>
function digital: digital es un nombre arbitrario al que llamamos
como referencia a una página html, que en este caso contiene la
imagen.
Ver ejemplo
Bibliografía
Fuller and Ulrich,
HTML In 10
Simple Steps Or Less (2004)e, Whiley Publishing 2004.
Haine Paul,
HTML Mastery:
Semantics, Standards, and Styling.
Robbins Jennifer Niederst,
Learning
Web Design: A Beginner's Guide to (X)HTML, StyleSheets, and Web
Graphics.
Jerry Glenwright ;
www.layout :
cómo diseñar y componer sitios web. Editorial Gustavo Gili.
Greene, Rachel, Internet Art, Thames & Hudson. London, 2004.
En Internet:
WWW
Consortium