PÁGINAS WEB

1) Lenguaje de marcas html

Práctica 1: introducción, estructura de una página html y formato básico



Práctica 2: párrafos, colores y tipos de letra


Más cosas que necesitas saber:


Práctica 3: enlaces
Lee con detenimiento esta página en la que se explican los tipos de enlaces que puede haber en una página html. Leela varias veces y ve el vídeo para comprenderlo mejor. Después haz lo siguiente:
  1. Anota en tu cuaderno todos los tipos de enlaces que puede haber en una página html y qué etiquetas hay implicadas en cada uno.
  2. Haz un documento html de nombre "paginaenlaces.html" que incluya:
  • Un enlace a una página externa de la wikipedia.
  • Un enlace a otra página web que tengas en tu PenDrive, por ejemplo a "primerapractica.html" (o como hayas llamado a la página que hiciste en la primera práctica).
  • Un enlace que al pinchar en él te escriba un correo electrónico a tu dirección de email con el asunto "enlace a email".
  • Un enlace que al pinchar en él descargue un archivo que tengas en la misma carpeta donde guardas todas las prácticas de html (previamente tendrás que poner el archivo: puede ser una imagen, un documento word de alguno de tus trabajos, etc. Cuando hagas el enlace y vayas a poner el nombre del archivo, recuerda incluir la extensión!!).
  • Después pon este texto (puedes copiar y pegar para no tener que teclearlo), pero haciendo que cada párrafo tenga: 1) una alineación diferente (center, justify, right y left); 2) un tipo de letra diferente (tú eliges los tipos, pero que sean diferentes); 3) un color del texto diferente (de nuevo: tú eliges, pero que sean 5 colores distintos); y 4) un tamaño de letra diferente (tamaños 1, 3, 5 y 7).
  • Un enlace interno al final de la página que te lleve al principio de la misma.


Práctica 4: imágenes
Busca en Internet como trabajar con imágenes en html y crea una página web que contenga lo siguiente:
  1. Una imagen centrada con el texto arriba y abajo pero no a los lados.
  2. Una imagen que tenga el texto a la derecha.
  3. Una imagen que tenga el texto a la izquierda.
  4. Una imagen centrada (como en el punto 1) que al pinchar en ella te lleve a una página que tengas en tu Pen Drive.
  5. Una imagen centrada (como en el punto 1) que al pinchar en ella te lleve a una página externa (la wikipedia en ruso, por ejemplo).

Puedes usar las imágenes que quieras, pero asegurate de que algunas estén en tu Pen Drive y otras se cogen directamente de Internet. Siempre que sea una imagen que no hayas hecho tú, tienes que poner el origen de la información (con la URL de la página donde la hayas encontrado, de momento, es suficiente).


Práctica 5: incrustar objetos externos
Escucha la explicación del profesor sobre cómo incrustar elementos externos (vídeos, mapas, presentaciones, audios...) en un documento html. Si te la perdiste, puedes consultar esta página para aprender a hacerlo.

Elige un tema y crea una página web en la que incrustes cinco tipos de elementos externos que tengan que ver con ese tema (un vídeo de Youtube/Vimeo/etc, un mapa de Google Maps o similares, una presentación de SlideShare o similar, más dos tipos de elementos de tu elección). Añade el texto, imágenes y diseño que sea necesario para que se entienda el conjunto.

Práctica 6: Proyecto
Se trata de hacer un conjunto de páginas relacionadas (un website) sobre un tema. El trabajo se realizará en parejas.
A) TEMAS: el profesor te asignará uno de los siguientes temas.
  1. Derechos de autoría y licencias de uso.
  2. Software libre y software privativo
  3. Historia de la informática
  4. Robótica
  5. Impresión 3D
B) FASES DEL PROYECTO: como en todo proyecto técnico, dividimos todo el proceso en fases
  1. Requisitos: el profesor os explicará los requisitos del proyecto (lo que viene recogido aquí fundamentalmente).
  2. Investigación: se trata de leer sobre el tema que os han asignado, haciéndose una idea de qué información es la más importante, curiosa, atractiva, etc. -> 1 clase + trabajo en casa.
  3. Diseño: se plasma en un papel las ideas que tengáis para vuestra página web: el árbol de paǵinas, qué información va en cada una de ellas, cómo se van a llamar cada una, etc. -> 1 clase.
  4. Planificación: quién hace cada cosa. Escribidlo en un papel. -> 10 min.
  5. Elaboración de las páginas web -> 3 clases y trabajo en casa.
  6. Evaluación: cada persona del grupo escribirá un texto evaluando tanto el resultado (cómo ha quedado la página web), como la forma en la que han trabajado (si se ha distribuido equitativamente el trabajo, si se han organizado bien, etc.).
C) PARTES DEL WEBSITE: deberá incluir, al menos, las siguientes secciones en páginas html diferentes:
  1. Una página de incio que se llame index.html, donde se explique muy brevemente el tema y desde la que se pueda acceder a las siguientes páginas.
  2. Varias secciones desarrollando el tema. Al menos tres, cada una con su página html específica.
  3. Una página html adicional con la evaluación de las dos personas del grupo.
  4. Una página html adicional con los datos de contacto (ojo con qué información personal ponéis).
D) ASPECTOS QUE SE VAN A VALORAR: la nota del proyecto se obtendrá de valorar lo siguiente:
  1. Que la estructura de paǵinas sea adecuada y completa (el diseño en papel).
  2. Que el desarrollo del tema sea lo suficientemente completo.
  3. Que el diseño sea vistoso y atractivo.
  4. Que se utilice variedad de recursos, especialmente gráficos (imágenes, vídeos, mapas, otros documentos...).
  5. Que se incluya una cierta interacción con redes sociales.
  6. Que se indique siempre el origen de la información (tanto para textos como para imágenes, vídeos, etc.).
  7. Que sea original (en el diseño, en el desarrollo del tema, etc.).

Práctica 7: prueba en directo

Práctica 8: publicar una página web en Internet

2) Diseño de páginas web mediante gestores de contenidos: Wordpress

Existen multitud de gestores de contenidos que te permiten crear páginas webs y blogs de una forma muy sencilla y con resultados francamente vistosos. Puedes leer sobre algunos de ellos en esta página: Los seis mejores gestores de contenido (CMS). En nuestro caso vamos a aprender a crear blogs con el gestor de contenidos Wordpress, uno de los más utilizados en el mundo.

Prácticas:
  1. ¿Qué es un blog? Ejemplos de blogs que utilizan Wordpress.
  2. Darse de alta y crear un blog de prueba en wordpress.com
  3. Crear entradas: entrada de texto, entrada de texto+imagen, entrada con vídeo de YouTube
  4. Etiquetas y categorías
  5. Enlaces: un texto con enlace, una imagen con enlace.
  6. Incrustar contenido.
  7. Temas
  8. Páginas estáticas y menús
  9. Otras opciones de "Apariencia"
  10. Otras opciones de "Ajustes"
  11. Widgets

Proyecto:



HARDWARE Y SOFTWARE

1) El hardware de un ordenador


2) Software: sistemas operativos


REDES DE ORDENADORES E INTERNET

1) Funcionamiento de Internet

2) Neutralidad y privacidad en Internet

Actividades basadas en el artículo La red no es neutral y nunca lo ha sido (pero hoy podría empeorar mucho), de Marta Peirano, eldiario.es,13/12/2017)




SEGURIDAD INFORMÁTICA


LICENCIAS Y DERECHOS DE AUTORÍA


TRATAMIENTO DIGITAL DE IMÁGENES

1) Introducción a la imagen digital

2) Edición de imágenes vectoriales con Inkscape


TRATAMIENTO DE VÍDEO


EDICIÓN DE AUDIO



GIMP efecto Andy Warhol


GIMP
GIMP Portatil 2.6.6 - Multilenguaje