Download BLOQUE III: “DISEÑO Y EDICIÓN DE PÁGINAS WEB”

BLOQUE III:
“DISEÑO Y EDICIÓN DE
PÁGINAS WEB”
1
1..PÁGINAS WEB
Lo que habitualmente llamamos web o página web es en realidad un sitio web, es decir, un conjunto de
documentos enlazados entre sí, a los cuales se accede a través de una dirección común. Los documentos
que constituyen un sitio web son archivos y carpetas que contienen texto, fotografías, iconos,
animaciones, …, y que se han creado para ser vistos por usuarios con ordenadores y navegadores de
distintas características.
Para acceder a las páginas web utilizamos un navegador (Mozilla Firefox, Internet Explorer, Google
Chrome, …) que se encarga de comunicar el ordenador con los servidores que albergan las páginas web,
descargar las páginas y mostrarlas.
El lenguaje básico que se usa para crear los documentos que conforman el sitio web es el HTML
(lenguaje de marcas hipertextuales).
1.1. CLASIFICACIÓN
Las páginas web se clasifican en estáticas y dinámicas:


ESTÁTICAS: Son aquellas que no cambian, muestran siempre el mismo contenido cada vez que
las cargamos.
DINÁMICAS: Son páginas que el servidor interpreta en cada caso, de forma que, sin hacer
cambios en el código, devolverán diferentes resultados en función de la actuación del usuario.
1.2 FUNCIONAMIENTO
Los sitios web son creados por programadores y diseñadores. Una vez creados, las personas encargadas
de mantenerlos se llaman administradores.
El proceso de trabajo habitual de un administrador es crear en su ordenador el conjunto de archivos que
conforman la web. El administrador manipula estos archivos y también dispone de un espacio suficiente
donde guardar la página en un sitio accesible a todos los usuarios de Internet. Ese sitio está en un
ordenador especial que se llama servidor, y el proceso se denomina alojamiento.
2
Los servidores son ordenadores que alijan las páginas web y las ponen a disposición de toda la red.
El proceso de alojamiento de un sitio web y su funcionamiento es el siguiente:
1. ADMINISTRADOR EN EL SITIO LOCAL
Es la persona responsable de mantener el sitio web y actualizar los
contenidos, así como de transferirlos al servidor.
2.
PROGRAMAS DE TRANSFERENCIA DE FICHEROS
Son los programas encargados de comunicar el ordenador local con el
servidor que brinda alojamiento.
3. SITIO REMOTO ALOJADO EN EL SERVIDOR
Para que la página web que tiene el administrador pueda ser vista
por otros usuarios, debe estar situada en un servidor de Internet
4. USUARIOS
Para acceder a las páginas web, los usuarios utilizan un navegador
(Google Chrome, Mozilla Firefox, Internet Explorer, ...) que se
encarga de comunicar cada ordenador con los servidores que
albergan las páginas web, descargar las páginas y mostrarlas
2.. CRITERIOS DE DISEÑO
2.1 PREDISEÑO Y CALSIFICACIÓN
El primer paso para diseñar una web es la fase que podemos llamar prediseño. Debemos analizar qué
objetivos queremos conseguir con nuestra web y posteriormente construirla según la planificación
marcada para que se cumplan esos objetivos. A grandes rasgos, debemos preguntarnos:
3
Prediseño de una web
1.
2.
3.
4.
Objetivo ¿Qué se pretende conseguir con la web?
Público ¿A quién se dirige?
Contenidos ¿Qué contenidos se quieren mostrar?
Directrices ¿Qué especificaciones se usarán en cuanto a forma, organización y
estructura?
5. Tecnología ¿Con qué medios técnicos se cuenta para realizarla?
6. Tiempo ¿De cuánto tiempo se dispone?
7. Presupuesto ¿De cuánto dinero se dispone?
En esta etapa debemos escribir nuestros objetivos, recopilar y organizar contenidos, escribir las
directrices de organización y diseño y establecer un código de colores para los distintos elementos
2.2 ESTRUCTURA DE UNA WEB
La consistencia en el diseño es fundamental para la calidad de nuestra web. Pensando en nuestros
futuros visitantes debemos:





Crear una jerarquía visual clara en cada página
Utilizar las convenciones (lo que se usa de forma mayoritaria en las páginas web)
Dividir las páginas en áreas claramente definidas
Facilitar el acceso a los enlaces
Omitir contenidos innecesarios, es decir, simplificar
Una web tipo tendrá, a grandes rasgos, los siguientes elementos:






Encabezamiento
Marca o logotipo
Menú de navegación
Titular
Contenidos
Pie de página
Todos los elementos del mismo tipo deben ser similares
Los contenidos de una página web pueden ser:
 Texto
 Imágenes
 Gráficos
 Animaciones
 Tablas
 Botones
 Hipervínculos
 Iconos
 Multimedia
4
2.3 ELEMENTOS DE DISEÑO
A la hora de diseñar una web hay que atender a cuestiones tan elementales como el contraste del texto
con el fondo, el tamaño de los caracteres o la elección de los colores. Todo esto, evidentemente,
depende de los gustos del diseñador, de forma que lo que a uno le parece maravilloso a otro le puede
parecer de mal gusto o vulgar. En todo caso, hay que tener en cuenta que en el diseño de las páginas
web, como cualquier ámbito, hay modas y tendencias que siguen todos los sitios profesionales.
En general, se debe usar el sentido común y ponerse siempre del lado del usuario.
PÁGINA WEB GOOGLE AÑO 2009
PÁGINA WEB GOOGLE AÑO 2016
En la evolución de la página inicial de Google se observa una simplificación visual en conjunto. En el
logo se usan colores más planos y puros, una tipografía sencilla y más geométrica y que muestra una
pérdida de volumen. El resultado es un logo más estilizado, limpio y moderno, sin perder la esencia de
Google, que lo considera "simple, amigable y cercano"
Esta sencilla página se ha ido actualizando continuamente y sigue la tendencia actual en el diseño,
como es esperable de cualquier página web de referencia.
En la fase de diseño entran en juego dos conceptos diferenciados: la maquetación y la interfaz.


La maquetación se encarga de organizar espacios y contenidos escritos, visuales y
audiovisuales. Abarca los aspectos semánticos y formales de una aplicación digital.
ELEMENTOS DE MAQUETACIÓN:
 Elementos gráficos y tipográficos: Son, por ejemplo, la tipografía, el punto, la línea, la
forma y el color. Ninguna maquetación digital puede pasar sin ellos.
 Elementos de imagen: Las fotografías, ilustraciones, símbolos e iconos atraen las
miradas en cualquier maquetación
 Elementos funcionales: Convierten una maquetación digital en la interfaz de un medio
digital. Son los elementos que pueden seleccionarse entre las herramientas del editor
o bien diseñarse. Por ejemplo, los botones, los hipervínculos.
La interfaz es el conjunto de comandos y métodos que facilitan la interacción entre el usuario y
el sistema (el sitio web). Debe tenerse en cuenta el dispositivo de salida: ordenador, teléfono
móvil, tableta digital, ....
5
Caso práctico. Análisis del diseño del sitio web de Google
Google es una web optimizada para realizar búsquedas, en la
que priman la sencillez, la funcionalidad y la velocidad.
Vamos a analizar la página principal y las páginas interiores,
atendiendo a distintos aspectos: prediseño, elementos
gráficos y tipográficos, elementos de imagen y elementos
funcionales.
pretende
con la
Prima la sencillez. Básicamente se trata de una caja de texto (dónde
se introducen las palabras de la búsqueda) y un botón para
comenzar el proceso de búsqueda. Está diseñada con fondo blanco y
únicamente destaca el colorido diseño de su logotipo, que es la
imagen de marca del buscador.
La sencillez de su diseño permite que todo tipo de público utilice
este buscador. La variedad de público que lo visita es una de las
características que sustentan su modelo de negocio basado en la
publicidad.
PÚBLICO
¿A quién se dirige?
CONTENIDOS
¿Qué contenidos se
quieren mostrar?
El contenido básico, una vez hecha la búsqueda, está formado por
los resultados, que son frases descriptivas y enlaces a las páginas
encontradas. Los contenidos se ordenan en función de un algoritmo
de Google y cambian con cada criterio de búsqueda establecido.
DIRECTRICES
¿Cuáles se usarán en
cuanto a forma.
organización
y
estructura?
Tiene una estructura lineal de páginas (página siguiente, página
anterior). En cuanto a la organización, tiene una cabecera en la cual
destaca el logo y que contiene enlaces a otras aplicaciones de
Google. Los contenidos ocupan la parte principal de la página. No
dispone de un menú de navegación
4
2
OBJETIVO
¿Qué se
conseguir
web?
3
1
 ANÁLISIS DEL PREDISEÑO
_____________________________________________________________________________________
5
 ANÁLISIS DE ELEMENTOS GRÁFICOS Y TIPOGRÁFICOS
_____________________________________________________________________________________
TIPO DE LETRA
Google utiliza, en sus páginas anteriores, una letra estándar, de
tamaño normal. Básicamente, se utiliza el color negro para los textos,
el azul para los enlaces descriptivos y el verde para las direcciones
URL. El subrayado sirve para los enlaces y no se emplea la cursiva.
Para facilitar la lectura, en la página de resultados se resaltan con
negrita las palabras buscadas.
 ANÁLISIS DE ELEMENTOS DE IMAGEN
_____________________________________________________________________________________
6
6
7
USO DE COLORES
El uso de colores es muy reducido. Se utiliza el blanco para el fondo
de todas las páginas, y colores básicos para mostrar el texto (negro
para el texto, azul y verde para los enlaces y rojo para destacados).
USO DE ICONOS,
IMÁGENES
E
ILUSTRACIONES
En las páginas de Google hay un claro predominio del texto
(descripción y enlaces). Prácticamente se renuncia al uso de
imágenes, salvo en el logotipo y en los enlaces de paginación.
8
DE
Google permite realizar búsquedas de diversos tipos. Las habituales
búsquedas de texto se complementan con un buscador de imágenes
y un buscador de vídeos, entre otros.
CAMBIO
DE
TAMAÑO DE LETRA
O ALTO CONTRASTE
Google no dispone de una opción específica de cambio de tamaño
de texto o de alto contraste (más allá de su propio diseño de fondo
blanco con los textos en color oscuro)
PERSONALIZACIÓN
DE
CONTENIDOS,
CAMBIO DE IDIOMA
Google permite una personalización muy avanzada de contenidos a
través de su herramienta iGoogle. Desde ella puedes hacer cosas
como personalizar noticias, recibir información del tiempo o habilitar
un acceso a Gmail. También permite el uso de varios idiomas.
10
DISPONE
BUSCADOR
9
 ANÁLISIS DE ELEMENTOS FUNCIONALES
_____________________________________________________________________________________
2.4 ESTÁNDARES DE ACCESIBILIDAD DE LA INFORMACIÓN
Según la legislación española, las páginas web de organismos públicos deben satisfacer los estándares
de publicación referidos a navegabilidad y accesibilidad para personas discapacitadas. Existe un
compromiso para que los sitios web cumplan unas normas que les permitan ser visitados y utilizados por
el mayor número posible de personas. Se trata de minimizar el efecto de las limitaciones físicas y
técnicas de los posibles visitantes.
ESTÁNDARES DE PUBLICACIÓN MÁS BÁSICOS:







UTILIZAR HOJAS DE ESTILO
ASEGURARSE DE QUE LA PÁGINA WEB SE VE BIEN EN DISTINTOS NAVEGADORES
USAR LAS ETIQUETAS DE TEXTO ALTERNATIVO PARA DESCRIBIR LA FUNCIÓN DE
LOS ELEMENTOS VISUALES
DISEÑAR TABLAS DE FORMA QUE SE PUEDAN LEER LÍNEA A LÍNEA
ORGANIZAR LAS PÁGINAS USANDO ENCABEZADOS, LISTAS Y UNA ESTRUCTURA
CONSISTENTE
FACILITAR LA TRANSCRIPCIÓN DE LOS FICHEROS DE SONIDO Y LA DESCRIPCIÓN
DE LOS VÍDEOS
REVISAR Y VALIDAR EL CÓDIGO HTML
7
3..HERRAMIENTAS DE PUBLICACIÓN: GESTORES DE CONTENIDOS
Las herramientas de publicación son herramientas relativamente fáciles de usar que permiten al
usuario crear sus propios contenidos y publicarlos en Internet sin la necesidad de contar con
conocimientos técnicos de diseño o programación. De acuerdo con las características de los contenidos
que se vayan a tratar, se pueden utilizar distintas herramientas.
Un gestor de contenidos es una herramienta de publicación que permite generar contenidos web y
editarlos y actualizarlos online sin necesidad de contar con conocimientos técnicos de diseño o
programación.
Los gestores de contenidos se basan en plantillas ya definidas que el usuario puede adoptar y
personalizar según sus gustos, lo cual abarata los costes de creación de las páginas web y ahorra tiempo
en su elaboración. Además, el uso de plantillas proporciona un diseño común y una apariencia
homogénea a todos los contenidos publicados. El usuario puede acceder a ellos mediante un
navegador.
Con un gestor de contenidos podremos crear blogs y wikis:
Una wiki es un sitio web de construcción colectiva sobre un tema específico. La más conocida
mundialmente es wikipedia.
Los blogs, que son como diarios en Internet, constituyen otra herramienta de expresión y comunicación.
En ellos e publican de manera instantánea entradas que se organizan cronológicamente empezando por
la más reciente. Los lectores pueden publicar comentarios en cada una de las entradas
Algunos gestores de contenidos
WORDPRESS
Aunque permite elaborar cualquier tipo de sitios web, se utiliza
principalmente para la creación de blogs.
JOOMLA
Es menos eficiente que Wordpress para la creación de blogs pero resulta
muy atractivo para el diseño de revistas digítales
8
DRUPAL
Es una opción muy recomendable si nuestra página web va a recibir muchas
visitas, porque admite más que Wordpress. Está orientado a comunidades y
permite definir varios perfiles de usuarios con permisos y accesos
diferentes. Es muy seguro.
4..EL LENGUAJE HTML
El uso de gestores de contenido facilita la creación de páginas web para un usuario poco experto. Sin
embargo, los diseñadores de páginas web se centran en la creación de páginas a partir del lenguaje en el
que están escritas: el lenguaje HTML.
La función de los navegadores que utilizamos habitualmente (Chrome, Mozilla, Explorer, ... ) es
interpretar ese lenguaje y transformarlo en la página web que se nos muestra.
El HTML es el lenguaje usado para la construcción de páginas web. Los archivos de formato HTML
usan la extensión .htm o .html
Una página web se puede crear directamente escribiendo en este código en cualquier editor de textos y
guardándolo con la extensión adecuada, pero no se suele hacer así más que con fines educativos. En la
práctica se utilizan editores de páginas web, que permiten diseñar webs de una forma más sencilla e
intuitiva.
5..EL LENGUAJE JAVASCRIPT
Javascript y HTML son los lenguajes más antiguos para el desarrollo de páginas web.
Javascript es un lenguaje dinámico que se ejecuta en local en el ordenador, es decir, es el propio
navegador (Internet Explorer, Mozilla, Chrome, ...) el que se encarga de la ejecución de las instrucciones
de este lenguaje. La diferencia con HTML es que, con éste, el navegador presenta la información,
mientras que con Javascript podemos interactuar con la página, es decir, el navegador interpreta y
ejecuta el código.
6..EDITORES DE LA PÁGINA WEB
Los editores de páginas web son aplicaciones que permiten crear páginas web.
Los editores NVU y Kompozer son editores avanzados, libres y multiplataforma.
El entorno de trabajo de ambos es muy similar, así que para empezar a utilizar un editor de páginas web
nos vale cualquiera de ellos. El entorno de trabajo de estos editores es el siguiente:
9
7..ALOJAMIENTOS DE SITIOS WEB
7.1 Alojamientos de sitios web
El último paso para que la página web que hemos creado pueda ser vista por otros usuarios es situarla
en un servidor de Internet. Desde ese momento debemos mantener el sitio web y actualizar sus
contenidos en la medida en que sea necesario.
En estos sitios nos debemos conformar con la URL que nos asignen para nuestra página, pero también la
posibilidad de comprar su dominio con el nombre que queramos, algo usual para la mayoría de las
empresas e incluso muchos particulares.
Desde el inicio de Internet, los nombres de dominio han generado toda una industria a su alrededor. Los
dominios más codiciados son aquellos que contengan palabras como juegos, viajes, vuelos, ... Algunos
de ellos fueron comprados por particulares con visión de negocio en Internet y posteriormente se
vendieron por miles e incluso millones de dólares.
Para que en el alojamiento se identifique la página principal, el archivo que la constituye debe
llamarse de una forma especial que deberemos comprobar en el alojamiento (normalmente será
index.html)
7.2 Transferencia de archivos
Los programas de transferencia de ficheros son los encargados de comunicar nuestro ordenador con el
servidor que nos brinda alojamiento, de forma que ese conjunto de archivos que componen nuestro
sitio web y que manipulamos en nuestro ordenador local puedan sustituir, cuando sea necesario, a los
que aloja el servidor.
En el tema utilizaremos FileZilla, programa de transferencia de archivos libre y multiplataforma.
10
Todos estos programas funcionan de forma similar. Tienen una barra de direcciones en la que se debe
introducir la dirección del servidor con el que quiere conectar, el nombre de usuario y la contraseña
cuando sea necesario. También contiene dos paneles:
1.
2.
El de la izquierda, con el árbol de archivos del ordenador local
El de la derecha, en el que una vez conectados aparecerán las carpetas en nuestro sitio web
remoto.
BARRA DE
DIRECCIONES
SITIO
LOCAL
SITIO
REMOTO
11
................................. PRÁCTICAS ...................................
Práctica 1. CREACIÓN DEL SITIO "APPS EDUCATIVAS" CON WORDPRESS

EJERCICIO 1. Crear una página web
1. Accede a Wordpress (es.wordpress.com) en tu navegador y haz clic en CREAR SITIO WEB
2. Escoge el diseño EDIN. Elige como nombre de dominio tu nombre y apellidos. Tendrá la forma
nombreapellido.wordpress.com .
3. A continuación selecciona el plan gratuito e introduce tu dirección de correo electrónico. Escribe una
contraseña y haz clic en CREAR MI CUENTA. Recibirás en tu cuenta de correo electrónico un mensaje de
confirmación de la página creada, que tendrás que activar
4. Sigue el enlace que te llevará a MI SITIO. Ahí, haz clic en el icono de la parte superior para ver la
apariencia de tu página
 EJERCICIO 2. Completar el sitio web "Apps educativas"
1. Abre otra pestaña en el navegador y escribe tu dominio seguido de "wp-admin"
(nombreapellido.wordpress.com/wp-admin). De esta manera, tendrás pestañas: una con la página web
y otra con el escritorio del gestor de contenidos (para poder ver al instante los cambios que hagas en la
página web). Todas las modificaciones se harán en la pestaña del escritorio del gestor de contenidos.
2. En la pestaña del escritorio ve a APARIENCIA/TEMAS. En el buscador de temas escribe "Twenty
fourteen" y haz clic en Activar para seleccionar ese tema. Observa la apariencia de tu página ahora con
la otra pestaña del navegador.
3. Por defecto, Wordpress crea una página llamada About. Vamos a cambiarle el nombre. Para ello, ve a
Páginas / Todas las páginas y, en la página About, haz clic en Editar. Cambia el nombre About por Apps
Educativas y pulsa Actualizar.
4. Crea ahora tres páginas nuevas. Se llamarán Mirando el cielo, Apps de electricidad y Apps
matemáticas. Para ello, en el escritorio de Wordpress, accede a Páginas / Todas las páginas / Añadir
Nueva y después de escribir el nombre haz clic en Publicar.
5. Ve ahora a Apariencia / Menús. Teclea como nombre de menú "Apps" y haz clic en Crear Menú. En
la parte izquierda selecciona todas las páginas creadas y haz clic en Añadir al menú.
6. Dentro de las Opciones del menú en el apartado Ubicación del tema marca la opción Menú principal
y haz clic en Guardar menú.
7. En el escritorio del gestor , en el menú de la izquierda, ve a Configuración / Lectura. En Página
frontal muestra elige Una página estática. Como página inicial selecciona la página Apps Educativas
como página de entradas, la página Mirando el cielo. De esta forma, la página Apps Educativas será la
12
página de partida y en la página Mirando el cielo podrás escribir sobre apps relacionadas con el cielo.
Haz clic en Guardar cambios.
8. Edita cada una de las páginas. Accede a Páginas / Todas las páginas, selecciona una página y haz clic
en Editar. Busca información sobre las Apps educativas y escribe textos en cada apartado. Modifica a tu
gusto el texto con los atributos que aparecen: color, tipo de letra, ... Pulsa Añadir Multimedia y sube
imágenes a las páginas.
9. Captura la pantalla de una página de tu sitio web. Guarda el documento como P1_nombreapellido.
Práctica 2. CREACIÓN DEL BLOG "BUSCANDO QUE ESTUDIAR" CON BLOGGER

EJERCICIO 1. Empezar con Blogger
1. Accede a Blogger desde tu correo de Gmail pulsando la opción Aplicaciones, luego Más y por último
Blogger. Vuelve a introducir la contraseña de Gmail cuando te los solicite.
2. En la siguiente pantalla puedes modificar los elementos de tu perfil, poner una imagen, ... . Pulsa
Continuar en Blogger.
3. Haz clic en Nuevo Blog. Asigna un título al blog, "BUSCANDO QUE ESTUDIAR" y una dirección URL
que esté disponible. Blogger te indicará si es posible poner ese nombre o no está disponible.
4. En la misma pantalla, elige una plantilla y pulsa Crear blog.

EJERCICIO 2. Publicar una entrada
1. Haz clic en el icono Crear entrada nueva (icono de un lápiz arriba a la derecha) o en Empezar a
publicar entradas.
2. En la ventana de edición puedes iniciar la creación de entradas. Para ello, escribe en Título de la
entrada "Bienvenidos a mi blog" y en el cuerpo pon "Aquí comienza mi blog, que comienzo en mi último
año de Bachillerato, en el que recogerá la información que vaya recopilando para decidir qué estudiaré
el curso que viene". Usando la barra de herramientas, dale formato al texto (fuente, color , tamaño,
viñetas, ...)
3. A continuación haz clic en Vista previa y visualiza tu primer entrada. Se te abrirá el blog en una nueva
pestaña del navegador, para qué compruebes como será la web.
4. Vuelve a la ventana Edición. Busca el corrector ortográfico y comprueba la ortografía de tu texto. No
olvides hacer esto siempre antes de publicar una entrada.
5. Por último, haz clic en Publicar.

EJERCICIO 3. Enlaces, fotos, vídeos
1. En la ventana de edición, busca el icono que te permite insertar enlaces a otros sitios web, el icono de
insertar imágenes y el icono insertar vídeos. Inserta un contenido de cada tipo relacionado con los
trabajos que has relacionado durante todo el curso y publica el contenido.
13
2. Para que el profesor pueda comprobar tu trabajo, pulsa la tecla Impr pant para capturar la imagen de
las entradas que has hecho en Blogger. Guarda la práctica como P2_nombre y apellidos.
Práctica 3. CREACIÓN DE LA WEB "IMPRESIÓN 3D" CON GOOGLE SITES

EJERCICIO 1. Crear un sitio web: "Impresión 3D"
1. Entra en Google Sites desde tu correo de Gmail pulsando la opción Aplicaciones, luego Más y luego
Aún más de Google. Por último busca en grupo Hogar y oficina la opción Sites.
2. Pulsa Crear para comenzar a elaborar tu página web. Te ofrecerá una plantilla para usar en tu sitio
web. Escoge la plantilla en blanco.
3. En la misma página, indica un nombre para ti sitio web (por ejemplo, impresión 3D). Anota la URL
completa en tu cuaderno.
4. Introduce el código captcha que te pide y haz clic en Crear sitio. Las demás opciones las puedes
configurar más delante.

EJERCICIO 2. Crear una página y editar páginas nuevas
1. En la página principal verás que se ha añadido un buscador para el sitio y que tienes los botones
Editar página y Crear página.
2. Haz clic en Editar página y aparecerá un editor similar al que has utilizado en Drive en otras unidades.
3. Teclea un texto de presentación en el recuadro principal; por ejemplo: "Esta es la página principal de
mi web sobre la impresión 3D". Busca información relacionada para completar la página principal y
luego haz clic en Guardar.
4. Para crear la segunda página del sitio, haz clic en Crear página y selecciona la plantilla Página web.
Titúlala "Impresoras 3D". Haz clic en el botón Crear para empezar a editarla.
5. Haz clic en Diseño (en el menú superior izquierdo) y comienza a diseñar a tu gusto esta página, en la
cual deberás incluir contenidos sobre las impresoras 3D actuales.
6. Completa otras páginas, cada una con los siguientes títulos y contenidos propuestos que pueden
guiarte:
HISTORIA DE LA IMPRESORA 3D: primeras
impresoras, desarrollo, ...
PROGRAMAS: diseño y laminado
REPOSITORIOS: YouMagine, ...
FUTURO DE LA IMPRESIÓN 3D: en medicina, en
el hogar, en el espacio, ...
7. Cuando hayas acabado, accede a un navegador y escribe la URL que has anotado en el ejercicio
anterior. Verás tu web publicada.
14
8. Guarda la URL en un documento de texto que se llame P3_nombreapellido .
Práctica 4. CREACIÓN DE UNA WIKI DE FOTOGRAFÍA CON WIKISPACES

EJERCICIO 1. Crear el sitio
1. Entra en www.wikispaces. com y selecciona la opción Education como tipo de wiki. En la siguiente
pantalla, selecciona la solapa Teachers y escribe un nombre de usuario, tu correo y una contraseña.
Pulsa el botón Create Classroom
2. En la siguiente pantalla escribe el nombre de la wiki. Es importante ponerle un nombre representativo
del tema de que va a tratar, la fotografía. Puedes escribir también tu curso. Pulsa Crear.
3. Ya tenemos la wiki creada. La dirección que escribiremos en el navegador para acceder será
http://nombredelawiki.wikispaces.com

EJERCICIO 2. Crear una página wiki
Hasta ahora solo hemos creado el espacio Wiki y únicamente disponemos de la página principal (home)
1. En el menú de iconos que hay en la página, selecciona Página (icono de una página de documento)
2. Escribe el nombre de la nueva página (por ejemplo "Retoque fotográfico"). Las etiquetas (tags)
ayudan a catalogar la página y saber de qué tema tratan. Escribe "mapa de bits" y "retoque". Pulsa
Crear.
3. Se abre la página de edición. Aquí vamos a poder escribir el texto y darle formato. Añade textos, links
e imágenes sobre el tema "Retoque fotográfico" (en qué consiste, principales programas ...). Pulsa el
botón SAVE y comprueba cuál es la apariencia final.
4. La finalidad de una wiki es que sea construida por un colectivo de personas de forma colaborativa.
Pulsa Miembros, para invitar a otros usuarios e invita a varios compañeros de clase (tres).
5. Completa (o completad) otras páginas dentro de la misma wiki, cada una con los siguientes títulos y
contenidos, y con muchas imágenes:
GIMP: principales herramientas de edición
Tipos de fotografía: retrato, paisaje, submarina, ...
Planos fotográficos: general, entero, americano, ....
Parámetros básicos: luminosidad, tiempo de exposición
y sensibilidad
Cámaras fotográficas: cámara réflex y cámaras
compactas
Fotógrafos famosos de los siglos XX y XXI
6. Copia la URL de tu wiki en un documento de texto y guarda el archivo P4_nombreapellido.
Práctica 5. EL LENGUAJE DE LAS PÁGINAS WEB: HTML

EJERCICIO 1. Cómo son las páginas web por dentro
Podemos conocer fácilmente cómo es el lenguaje en que está escrita una página web. Para ello basta
con seguir estas sencillas instrucciones:
1. Abre cualquier navegador (por ejemplo, Internet Explorer)
2. Accede a cualquier web (por ejemplo, la de la Agencia Espacial Europea: www.esa.int)
15
3. Sitúa el ratón en cualquier parte de la web (que no sea una imagen o un enlace) y pulsa el botón
derecho. Aparecerá un menú emergente con varias opciones. Selecciona Ver código fuente
4. A continuación se abrirá una pantalla en la que podrás ver el aspecto del código HTML con que está
escrita esta página.

EJERCICIO 2. El bloc de notas para crear un documento HTML
1. Abre el bloc de notas yendo a Inicio / Todos los programas / Accesorios / Bloc de notas.
2. Copia en el bloc de notas las etiquetas básicas que siempre debe tener una página. Respeta el orden y
los huecos. Añade el título ("Mi primera página", sin comillas) entre las etiquetas <title> y </title>.
Luego añade el contenido de la página ("Aprendiendo HTML", sin comillas) entre las etiquetas <body> y
</body>.
3. En el menú Archivo elige la opción Guardar como. En la opción Tipo selecciona Todos los archivos y
en Nombre escribe "P5_nombreapellido.htm". Es tu primer archivo de código fuente. Ten cuidado de
no guardarlo como .txt
4. Accede a la carpeta donde está guardado
5. Haz doble clic sobre el archivo que acabas de crear. Se abrirá el navegador que tengas establecido
como predeterminado y te aparecerá el resultado.
6. Observa que el texto que está entre las etiquetas <head> y </head> aparece en la barra de título del
navegador. Observa dónde aparece el contenido.
7. No cierres no el bloc de notas ni el navegador para continuar con la práctica siguiente.
16
Práctica 6. EMPEZAR A PROGRAMAR EN HTML
Empezar a trabajar con HTML no es complicado, pero hay que ser muy cuidadoso a la hora de introducir
etiquetas y atributos. Cualquier error hará que la página que estamos construyendo no se visualice
correctamente en el navegador. Si es así, analiza el código e intenta localizar el error.
1. Abre el bloc de notas accediendo a Inicio / Todos los programas / Accesorios / Bloc de notas
2. Copia en el bloc de notas las etiquetas básicas que siempre debe tener una página. Respeta el orden y
los huecos
3. Añade el título "Estoy empezando" (sin comillas) entre las etiquetas <title> y </title>. Luego añade el
contenido de la página "No está mal para ser la primera" (sin comillas) entre las etiquetas <body> y
</body>
4. En el menú Archivo escoge la opción Guardar como. En la opción Tipo selecciona Todos los archivos y
en Nombre escribe "P6_nombreapellidos.htm"
5. Accede a la carpeta donde está guardado.
6. Haz doble clic sobre el archivo que acabas de crear. Se abrirá el navegador que tengas establecido
como predeterminado y te aparecerá el resultado.
7. Observa que el texto que está entre las etiquetas <head> y <head> aparece en la barra de título del
navegador. Observa dónde aparece el contenido.
8. Sin cerrar no el bloc de notas ni el navegador, vamos a añadir un encabezado. Para ello introduce el
siguiente elemento justo después de la etiqueta <body>:
<h1>Estoy poniendo un encabezado</h1>
9. Guarda el archivo. Actualiza la página web en el navegador pulsando F5 y observa el resultado
10. Sin cerrar ni el bloc de notas ni el navegador, vamos a modificar la etiqueta anterior haciendo que el
encabezado aparezca en rojo. Para ello introduce la etiqueta <font> con su atributo color con la sintaxis
adecuada, como se indica a continuación
<h1><font color="red">Estoy poniendo un encabezado</font></h1>
11. Observa que los valores de los atributos se escriben entre comillas después del signo igual. Y fíjate
que, para cada etiqueta de apertura hay una de cierre.
12. Guarda el archivo. Actualiza la página web en el navegador pulsando F5 y observa el resultado
13. Sin cerrar ni el bloc de notas ni el navegador, vamos a introducir un párrafo y alinearlo a la derecha.
Para ello, introduce las etiquetas <p align="right"> y <p> antes y después del texto "No está mal para
ser la primera".
<p align="right">No está mal para ser la primera</p>
14. Guarda el archivo. Actualiza la página web en el navegador pulsando F5 y observa el resultado
Práctica 7. DAR FORMATO A UN TEXTO
El archivo de texto que vamos a usar en esta práctica es un extracto del artículo "Linux para estudiantes"
de Alejandro Valero, publicado en la web del Observatorio Tecnológico del CNICE.
Linux para estudiantes. "Quiero hacer aquí una pequeña introducción práctica para que los estudiantes aprendan a
utilizar el sistema operativo GNU/Linux en sus estudios, en su trabajo futuro y en su ocio. Simplemente quiero
mostrar cómo se puede empezar con Linux utilizando versiones live de Ubuntu, la distribución actual más viva, y
17
de MAX, la distribución de mi comunidad, Madrid, aunque espero que el contenido pueda aplicarse también en otros
casos. Este trabajo lo he realizado ya con mis alumnos en clase de Tecnologías de la Información, y espero que sirva
para difundir Linux en otras aulas"
1.1. Linux y Windows como sistemas operativos
Linux es parecido a Windows en muchos aspectos, pues ambos son sistemas operativos, es decir, un conjunto de
aplicaciones que permiten interactuar con el ordenador y realizar en él tareas de todo tipo. Básicamente, un sistema
operativo se compone de lo siguiente:
1. Una base o núcleo de código, que en Linux se llama kernel, y que permite poner en funcionamiento todos
los componentes del PC o hardware, así como asignar los recursos.
2. Un sistema de archivos que organiza y jerarquiza el sistema, donde se incluyen los archivos que contienen
las configuraciones del sistema, y donde los usuarios guardan sus archivos creados.
3. Un conjunto de aplicaciones que nos permite configurar el sistema o realizar modificaciones, además de
instalar todo tipo de hardware o de programas.
4. Un conjunto de programas externos al sistema, es decir, que no se necesitan para que éste funcione, pero
que nos permiten realizar tareas prácticas como escribir una carta o conectarnos a internet. Y aquí la
diferencia entre Windows y Linux es evidente, porque Linux incluye en sus distribuciones una enorme
cantidad de programas ya instalados y otros que guarda en bancos o repositorios de programas a los
que podemos acceder de forma gratuita.
1.2. Qué es una distribución live
Una distribución live es la versión de una distribución Linux que no se instala en el disco duro para su
funcionamiento, sino que ya trae el sistema instalado en el disco en el que se presenta la distribución, ya sea CD o
DVD, e incluso en un pendrive. Para hacerla funcionar hay que introducir el disco en el dispositivo, y después
tenemos que indicar al sistema que arranque desde ese dispositivo, y no desde el disco duro, como suele ocurrir.
Los ordenadores recientes que no tienen disquetera comienzan el arranque del sistema examinando los lectores de
CD y DVD, y por tanto no hay que realizar cambios.
1. Busca en la página este artículo
2. Cambia la extensión del archivo a htm y guárdalo como P7_nombreapellido.htm
3. Accede a la carpeta donde lo has guardado
4. Haz doble clic sobre el archivo que acabas de crear. Se abrirá el navegador que tengas establecido
como predeterminado. Observa que el texto aparece sin formato y que es interpretado por el
navegador a pesar de no tener ninguna etiqueta.
5. Vamos a incluir las etiquetas correspondientes en el bloc de notas. Para ello incluye las etiquetas
<html>, <head>, <title>, </title>, </head>, <body>, </body> y </html> en el lugar correspondiente. El
texto debe ir entre las etiquetas <body> y </body> .
6. Añade el título "Estoy dando formato" entre las etiquetas <title> y </title>
7. Guarda el archivo. Actualiza la página web en F5 y observa el resultado.
8. Comenzamos a dar formato. Para ello introduce las etiquetas <h1> y <font> con su atributo color en
el encabezado.
<h1><font color="red">Linux para estudiantes</font></h1>
9. Ahora señalaremos los encabezados de segundo orden. Para ello introduce los encabezados de
segundo orden. Para ello introduce las etiquetas <h2> y <font> con su atributo color en los dos
encabezados de segundo orden
<h2><font color="blue">1.1. Linux y Windows como sistemas operativos</font></h2>
<h2><font color="blue">1.2. Qué es una distribución live</font><h2>
10. Señala los distintos párrafos incluyéndolos entre las etiquetas <p> y </p>. Por ejemplo, el primer
párrafo:
<p>Quiero hacer (...) también en otros casos</p>
18
11. Guarda el archivo. Actualiza la página web.
12. Introduce saltos de línea de forma que en el navegador el texto no ocupe toda la pantalla. Para ello
usa la etiqueta <br>. Por ejemplo, el primero quedaría así:
(...) utilizar el sistema operativo<br>GNU/Linux en sus estudios (...)
Observa que no se usa etiqueta de cierre
13. Justifica los tres primeros párrafos añadiendo el atributo align en la etiqueta de párrafo. Por
ejemplo:
<p align="justify<Quiero hacer aquí (...) también en otros casos</p>
14. Señala como elementos de una lista los que aparecen en los componentes de un sistema operativo,
introduciendo las etiquetas <li> y </li>. Por ejemplo, la primera sería:
<li>Una base o núcleo (...) asignar los recursos.</li>
15. Guarda el archivo y actualiza la página.
Práctica 8. CREAR UNA PÁGINA WEB CON TEXTO, IMAGEN Y VÍNCULOS

EJERCICIO 1. Mejorar el aspecto con nuevos atributos
Al olmo viejo, hendido por el rayo
y en su mitad podrido,
con las lluvias de abril y el sol de mayo
algunas hojas verdes le han salido.
¡El olmo centenario en la colina
que lame el Duero! Un musgo amarillento
le mancha la corteza blanquecina
al tronco carcomido y polvoriento.
No será, cual los álamos cantores
que guardan el camino y la ribera,
habitado de pardos ruiseñores.
Ejército de hormigas en hilera
va trepando por él, y en sus entrañas
urden sus telas grises las arañas.
Antes que te derribe, olmo del Duero,
con su hacha el leñador, y el carpintero
te convierta en melena de campana,
lanza de carro o yugo de carreta;
antes que rojo en el hogar, mañana,
ardas de alguna mísera caseta,
al borde de un camino;
antes que te descuaje un torbellino
y tronche el soplo de las sierras blancas;
antes que el río hasta la mar te empuje
por valles y barrancas,
olmo, quiero anotar en mi cartera
la gracia de tu rama verdecida.
19
Mi corazón espera
también, hacia la luz y hacia la vida,
otro milagro de la primavera.
Antonio Machado, 4 de mayo de 1912
1. Busca el texto de Antonio Machado en internet
2. Cambia la extensión del archivo a htm y guárdalo como P8_E1_nombreapellido.htm
3. Incluye las etiquetas imprescindibles en una web <html>, <head>, <title>, <body>, ..., en el lugar
correspondiente
4. Añadir el título "Web de Antonio Machado" entre las etiquetas <title> y </title>
5. Asignar la etiqueta <h1> al nombre de la poesía
6. Introduce saltos de línea usando la etiqueta <br>. Cuando sea necesario introduce dos seguidos
<br><br>
7. Escribe las etiquetas <b> y </b> delante y detrás de Antonio Machado para que aparezca el nombre
en negrita
8. Completa la etiqueta <body> con el atributo margin para expresar el tamaño del margen en píxeles.
Así:
<body topmargin="10"leftmargin="10">
9. Añade las etiquetas <font> y </font> con los atributos size y face para que el texto aparezca del
tamaño y tipo de letra indicado, justo después de la etiqueta <body>:
<body topmargin="10"leftmargin="10">
<font size="3"face="arial">Al olmo viejo (...) 4 de mayo de 1912<font></body>
10. Guarda el archivo como P8_E1_nombreapellido.txt y también con extensión htm.

EJERCICIO 2. Insertar una imagen
1. Vamos a colocar una imagen de un olmo de fondo de página. Para ello guarda la imagen en la misma
carpeta donde está el documento P8_E1_nombreapellido.htm
2. A continuación añade el atributo background a la etiqueta <body>:
<bodybackground="P8_E2_olmo.jpg" topmargin (...)>
Es importante que dejes un espacio entre el cierre de comillas y la etiqueta siguiente
3. Guarda el archivo como P8_E2_nombreapellidos.htm. Actualiza la página con F5 y observa el
resultado
4. Escribe lo siguiente justo después de la etiqueta </h1>
<div align="left">
<img src="P8_E2_olmo.jpg"/>
</div>
5. Guarda el archivo de nuevo. Actualiza la página web y observa el resultado. Comprobarás que la
imagen está separada del texto. Mira qué pasa si cambias los valores del atributo align a "center" y
"left"

EJERCICIO 3. Otras etiquetas
20
1. Añade a la etiqueta <body> el atributo bgcolor de la siguiente forma y comprueba el resultado:
<body bgcolor="green" background (...) >
2. En HTML, los colores se expresan por sus valores RGB (tres números comprendidos entre el 0 y 255,
correspondientes a la cantidad de rojo, verde y azul, respectivamente). Hay colores que se pueden
indicar por su nombre en inglés, como "red", "blue" y el resto se deben codificar. Busca en Internet,
para el fonso, el código RGB de un color que te parezca más apropiado que el del punto y sustituye la
palabra "green" por ese código.
3. Los comentarios son palabras o frases que facilitan el trabajo de la persona que realiza la web en
HTML. El navegador no las tiene en cuenta, es decir, no se visualizan en la página web creada. Para
insertar comentarios hay que utilizar la siguiente sintaxis
<!--comentario que se quiera-->
Inserta comentarios que expliquen cada una de las etiquetas introducidas en una de las páginas web
que hemos creado.
Práctica 9. HOJAS DE ESTILO EN UNA REVISTA DIGITAL ESCOLAR

EJERCICIO 1. Diseñar y realizar la estructura de la revista. Prediseño
Vamos a crear una revista escolar en una página web. En ella mostraremos el trabajo que hemos
realizado a lo largo del curso. En esta práctica cada uno realizará su propis revista digital, siguiendo las
mismas pautas de diseño para cuando las unamos en un único sitio web.
1. Crea una carpeta que se llame P9_Revista_nombreapellido. Introduce en ella archivos que hayas
realizado durante el curso.
2. La estructura de nuestra revista será la de la siguiente figura, (forma de tabla y colores)
Icono
Nombre del
centro
Entrar en mi
blog
Contactar
La Revista TIC de Nombre y Apellidos
Presentación
Noticias:
- ...
- ...
Destacado:
- ...
- ...
Imagen
Audio
Crea con un procesador de texto un documento que contenga los textos que aparecen en la revista. Este
documento tiene que parecerse lo máximo posible a la revista definitiva,
3. En el apartado Presentación escribe un párrafo de bienvenida en el que cuentes de forma resumida lo
que has hecho este curso en la asignatura de TIC II.
4. En el apartado Noticias escribe cuatro o cinco noticias relacionadas con las TIC que hayan ocurrido
durante este curso.
5. En el apartado Destacado escribe cuatro o cinco aspectos que destacarías de las cosas que has
realizado ("Usamos tal aplicación para ...")
6. Guarda el documento como P9_E1_nombreapellido
21

EJERCICIO 2. Comenzar a trabajar con tablas
La mejor forma de distribuir el contenido sobre la página que vamos a crear es usar tablas
1. Abre Kompozer haciendo
22