Unidad 2
-
Actividad 2.1:
La primera página web.
El propósito es conocer (o reafirmar si ya lo conoces) el funcionamiento del lenguaje HTML a partir de un ejemplo básico.
-
Actividad 2.3:
Hipervínculos y encabezados.
Para continuar estudiando el lenguaje HTML, en esta ocasión revisaremos la estructura básica de un documento HTML además de las etiquetas para encabezados, y las etiquetas para hipervínculos.
-
Actividad 2.4:
Imágenes y listas.
Para continuar estudiante el lenguaje HTML, en esta ocasión revisaremos la estructura básica de un documento HTML además de las etiquetas para listas, y las etiquetas para imágenes.
-
Actividad 2.7:
Tablas en HTML.
El propósito de esta actividad es que conozcas la etiqueta table, así como las etiquetas que la acompañan tr y td, para crear tablas en una página web.
-
Actividad 2.9:
Formularios.
La intención de esta actividad es conocer y utilizar las etiquetas básicas para la construcción de formularios, los cuales son necesarios para la construcción de aplicaciones web.
-
Actividad 2.11:
Formularios y viniculación interna.
En esta actividad continuamos revisando dos componentes más que podemos agregar a los formularios: los textarea y los select. Además de estos componentes veremos en esta actividad, cómo hacer vinculaciones dentro de un mismo documento, para acceder a las diferentes secciones que lo componen.
-
Actividad 2.12:
Componentes HTML 5.
En esta actividad veremos los componentes que trajo consigo HTML 5, los cuales permiten la introducción especializada de datos, añadiendo además, mecanísmos de validación que no permiten enviar información inválida a través de un formulario. El propósito de esta actividad, es conocer y utilizar algunos de estos componentes.
-
Actividad 2.13:
Etiqueta Meta y Datalist
En esta actividad revisaremos dos etiquetas adicionales más. La primera es la etiqueta meta, que sirve como su nombre lo dice, para especificar metadatos, es decir, información sobre el contenido de la página. La otra etiqueta, datalist, nos sirve para crear listas de sugerencias para el llenado de un input. La actividad tiene como propósito entonces, saber utilizar estas dos etiquetas en una página web.
-
Actividad 2.14:
Estructura HTML5
HTML en su quinta versión, presenta una serie de etiquetas que ayudan a estructurar de forma más organizada el esqueleto de un documento web. De esta manera nos encontramos con etiquetas que especifican el contenido del encabezado de la página, el pie de la página, el contenido principal, las secciones de este contenido principal, etc. El propósito de esta actividad es conocer dichas etiquetas estructurales, y utilizarlas para mejorar la distribución de nuestra página web.
-
Actividad 2.17:
Finalización de la página
Para terminar con la estructura HTML de la página que hemos construido en la unidad, es necesario hacer unos ajustes finales, a continuación se muestra la estructura terminada para esta unidad.
Unidad 3
-
Actividad 3.1:
Primera página con CSS
Las hojas de estilo (CSS) nos ayudan a separar la estructura de un página web (HTML), del formato que tendrán los objetos de dicha página. Esta separación permite que una sola hoja de estilo se pueda aplicar a varias páginas web, ahorrando así trabajo y esfuerzo, tanto en la definición como en la modificación de formato. El propósito de la actividad es empezar a crear y utilizar hojas de estilo básicas.
-
Actividad 3.2:
Margen y relleno, bordes, sombras, listas y fuentes
Continuando con CSS, en esta actividad veremos cómo modificar los bordes y márgenes de las cajas de los elementos HTML. También revisaremos cómo agregar sombra a dichas cajas. Finalmente conoceremos cómo especificar un tipo o una familia de fuentes, para desplegar en el documento web.
-
Actividad 3.3.1:
Selectores de Elemento HTML y Clase
Usar reglas de estilo que abarcan todas las etiquetas de un mismo tipo como hemos hecho hasta ahora, puede ser limitante; por ejemplo, qué sucede si se quiere tener párrafos con diferentes formatos en una misma página. Afortunadamente CSS es lo suficientemente flexible para brindar una gran variedad de formas y combinaciones para especificar reglas de estilo. El propósito de esta actividad, es conocer más formas de especificar el formato que habrá de aplicarse a los objetos HTML.
-
Actividad 3.3.2:
Selectores de Elemento HTML y Clase
Al igual que en la actividad anterior, continuaremos con la modificación de la página principal que hemos estado haciendo, esta vez modificando el encabezado y el pie de la misma.
-
Actividad 3.4:
Repaso CSS.
En este cuestionario completarás código CSS y HTML según sea necesario para presentar una página web determinada, para resolverlo utilizarás lo que has aprendido en esta unidad hasta ahora.
-
CSS para Actividad 3.4:
Repaso CSS.
En este cuestionario completarás código CSS y HTML según sea necesario para presentar una página web determinada, para resolverlo utilizarás lo que has aprendido en esta unidad hasta ahora.
-
Actividad 3.5:
Fuentes externas y propiedad float.
Originalmente para utilizar fuentes en las página web, solo se tenían disponibles las fuentes que el usuario tuviera en su sistema, lo que obligaba al diseñador de la página, a utilizar fuentes comunes que cualquiera pudiera tener instaladas en su computadora. Con CSS3 se puede resolver esta limitante usando fuentes externas o webfonts. En esta actividad revisaremos cómo incluir en nuestros diseños esta clase de fuentes.
Por otro lado, revisaremos la propiedad float de los elementos HTML, la cual permite acomodar dichos elementos en una forma distinta a la que éstos tienen por default.
-
Actividad 3.6:
Construyendo menú desplegable.
Los menús desplegables han existido en las aplicaciones de escritorio desde hace mucho tiempo, y por esta razón se han convertido en una herramienta indispensable también en las aplicaciones web. Con la introducción de CSS, es posible crear un menú desplegable sin la necesidad de ingresar código de programación. En esta actividad construiremos un menú de este tipo, y de esta manera aprenderemos a la vez, algunas propiedades de los elementos HTML que podemos modificar a través de los selectores de estilo.
-
Actividad 3.7:
Menú para la página "Palitroche"
En la actividad pasada aprendimos a construir menús desplegables mediante CSS, el propósito de esta actividad es aplicar lo visto en la actividad 3.6, para agregar un menú a la página que hemos estado realizando en estas dos últimas unidades.
-
Actividad 3.8:
Formato de cajas, fuentes y animaciones
Continuando con CSS, en esta ocasión veremos algunas otras propiedades para cambiar la estética de las cajas que contienen los elementos HTML. De esta manera revisaremos las propiedades para redondear las esquinas de las cajas, rellenarlas con gradientes o imágenes, y finalmente cómo hacerlas transparentes o semitransparentes. El propósito de esta actividad será entonces conocer y utilizar algunas de estas propiedades visuales.
-
Actividad 3.9.1:
Flexbox
En actividades pasadas vimos cómo hacer para que más de un elemento compartiera el mismo "renglón" utilizando la propiedad float de css. Existen otras maneras de lograr un efecto similar, por ejemplo agregando en valor inline a la propiedad display de los elementos html. Pero una mejor forma de llevar a cabo esto, es utilizando un contenedor (por ejemplo un div) con la propiedad display con el valor flex. De esta manera podemos hacer que los elementos que estén dentro del contenedor compartan un mismo renglón o una misma columna, controlando también la distribución y alineación de dichos elementos. En esta actividad veremos algunas de las propiedades que nos ayudan a logra lo expuesto en esta introducción.
-
Actividad 3.9.2:
Flexbox aplicada a "Palitroche"
Aplicaremos lo aprendido en la actividad pasada, ahora en la página que se está construyendo de Palitroche.
-
Actividad 3.10.1:
Grid Layout - Columnas
El Grid de CSS nos permite realizar acomodos de componentes html de forma más sencilla de forma similar a como lo hace el flexbox. Por medio del Grid de CSS podemos especificar una cuadrícula y después indicar en qué parte de esa cuadrícula estará cada elemento. En esta actividad iniciaremos con una introducción al Grid, donde utilizaremos esta cuadrícula de forma similar a como lo hicimos con el flexbox.
-
Actividad 3.10.2:
Grid Layout - Múltiples Columnas
En la actividad pasada vimos cómo podemos dividir el espacio del navegador en varias columnas, y cómo agregar cada elemento html a un columna; en esta actividad veremos cómo especificar que un elemento html puede ocupar más de una columna.
-
Actividad 3.10.3:
Grid Layout - Renglones y Columnas
Mediante el grid de css, además de poder señalar cuántas columnas abarca un elemento html, también podemos especificar cuántos renglones abarca dicho elemento, proporcionando así mayor control sobre el posicionamientos de dichos elementos html.
-
Actividad 3.10.4:
Grid - Áreas
Tal vez la manera más sencilla de agregar y manipular el grid css, es mediante áreas. En este método, por medio de texto se definen áreas dentro del grid, de tal manera que podemos indicar fácilmente el área que habrá de ocupar un elemento html. En esta actividad veremos cómo utilizar el grid mediante el uso de áreas.
-
Actividad 3.10.5:
Grid - Áreas en Palitroche
En esta actividad aplicaremos los que hemos aprendido sobre el Grid de CSS en la página "Palitroche".
-
Actividad 3.11.1:
Páginas Responsivas y Media Query
La gran cantidad de dispositivos que pueden acceder a Internet hoy en día, presenta el reto de crear páginas que puedan responder a las necesidades de resolución de cada dispositivo. De esta manera, no se puede tener un mismo acomodo de elementos HTML cuando nuestra página se está visualizando a través de una pantalla LCD de alta resolución de una PC, a cuando dicha página está siendo visitada a través de un teléfono celular de gama baja. En esta actividad utilizaremos el grid de css y los Media Query, para crear una página que cambie de "forma" dependiendo de la resolución del dispositivo que la visite, es decir, que sea responsiva.
-
Actividad 3.11.2:
Media Queries en Palitroche
En la siguiente actividad utilizaremos lo aprendido sobre los Media Query, para agregar puntos de quiebre para modificar el encabezado de la página que hemos estado realizando.
-
Actividad 3.11.3:
Menú Responsivo
Ahora que la página que tenemos es responsiva, continuaremos ahora con la modificación del menú actual, con la finalidad de que este también sea responsivo, para esto utilizaremos un Media Query y algunas cuestiones más que ya hemos aprendido en esta unidad.