{Desarrollo para Internet}

Dr. Alfredo de Jesús Gutiérrez Gómez

Temas

  • Presentación
  • Temas de la materia
  • Políticas de clase
  • Lineamientos de clase
  • Descripción de las actividades
  • Actividad
  • Recomendaciones para actividades
  • ¿Preguntas?
  • ¿Qué es el html?
    • Definiendo.
      • Resumen
      • Actividad de aprendizaje
      • ¿Cómo lo definimos entonces?
      • ¿Dudas?

Presentación

  1. Cada uno dirá su nombre completo.
  2. Con la inicial de su primer nombre elija un animal que inicie con su inicial y complete la siguiente frase: mi nombre es ____ y he venido en un ______ a la esc.
  3. Responder a la pregunta:
    1. ¿Qué me gusta de la carrera hasta ahora?
    2. ¿Por qué la estudio?

{Temas}

Unidad I:

1 Introducción

1.1 Historia de HTML y JavaScript

1.2 versiones

{Temas}

Unidad II:

2 Elementos básicos

2.1 Formato de texto

2.2 Encabezados

2.3 Párrafos

2.4 Listas, Enumeraciones y Tablas

{Temas}

Unidad III:

3. Imágenes

3.1 Imágenes

3.2 Mapas de imágenes

{Temas}

Unidad IV:

4. Formularios

{Temas}

Unidad V:

5. Frame

5.1 Iframe

{Temas}

Unidad VI:

6. Hojas de estilo

{Temas}

Unidad VII:

7. Elementos básicos de JS

{Temas}

Unidad IIX:

8. Objetos en JS

8.1 Cadena de caracteres

8.2 Fechas

{Temas}

Unidad IX:

9. Arreglos

{Temas}

Unidad X:

10. Expresiones regulares

{Temas}

Unidad XI:

11. Validación de formularios

{Temas}

Unidad XII:

12. Animaciones

{Temas}

Unidad XIII:

13. Dom

13.1 Nodos

13.2 Métodos

13.3 Eventos

{Políticas de clase}

  1. Teléfono móvil en modo silencio.
  2. Las llamadas urgentes /prio se contestan fuera del salón.
  3. Turnos de una sola persona para ir al baño.
  4. Dos faltas a la semana sin justificante perderían derecho a las cuestiones de aprendizaje.
  5. Levantar la mano para participar.
  6. Respetar la participación de cada alumno.

{Lineamiento de clase}

  • Mantenerse informado acerca de las lecturas, actividades y tareas del curso asistiendo por lo menos dos veces por semana, durante la duración del curso.

  • Cumplir dentro del aula virtual con todas las tareas, foros y actividades detalladas por el programa académico y el profesor, en el tiempo y forma establecidos.

  • El incumplimiento de las tareas en tiempo y forma llevarán a una no aprobación del curso.

{Lineamiento de clase}

  • Realizar el seguimiento evaluativo personal desde el Portafolio del Aula Virtual.

  • Estar pendiente de los resultados de las evaluacion/es parcial/es y final/es.

  • Notificar al tutor por escrito, con copia a la coordinación académica, si, por alguna razón excepcional, se encontrara en una circunstancia especial que le impidiera continuar con el curso y recibir así indicaciones de cómo proceder a partir de ese momento.

{Descripción de las actividades}

Unidad I

  • Línea del tiempo (30 %)
  • Glosario de términos (30 %)
  • Tabla descriptiva (10 %)
  • Cuestionamientos de aprendizaje (30 %)

{Descripción de las actividades}

Unidad II

  • Solución de ejercicios 
  • Cuestionamiento de aprendizaje 

{Descripción de las actividades}

Unidad III

  • Solución de ejercicios 
  • Cuestionamiento de aprendizaje 

{Descripción de las actividades}

Unidad IV

  • Solución de ejercicios 
  • Cuestionamiento de aprendizaje 

{Descripción de las actividades}

Unidad V

  • Solución de ejercicios 
  • Cuestionamiento de aprendizaje 

{Descripción de las actividades}

Unidad VI

  • Solución de ejercicios 
  • Cuestionamiento de aprendizaje 

{Descripción de las actividades}

Unidad VII

  • Solución de ejercicios 
  • Cuestionamiento de aprendizaje 

{Descripción de las actividades}

Unidad IIX

  • Solución de ejercicios 
  • Cuestionamiento de aprendizaje 

{Descripción de las actividades}

Unidad IX

  • Solución de ejercicios 
  • Cuestionamiento de aprendizaje 

{Descripción de las actividades}

Unidad X

  • Solución de ejercicios 
  • Cuestionamiento de aprendizaje 

{Descripción de las actividades}

Unidad XI

  • Solución de ejercicios 
  • Cuestionamiento de aprendizaje 

{Descripción de las actividades}

Unidad XII

  • Solución de ejercicios 
  • Cuestionamiento de aprendizaje 

{Descripción de las actividades}

Unidad XIII

  • Solución de ejercicios 
  • Cuestionamiento de aprendizaje 

{Actividad de encuadre}

Responde francamente a lo siguiente:

¿Qué esperas que se enseñe en esté curso?

Duración: cinco minutos

{Actividad de encuadre}

Responde francamente a lo siguiente:

A ¿qué te comprometes en esté curso?

Duración: cinco minutos

{Actividad de encuadre}

Responde francamente a lo siguiente:

¿Qué deseas aprender en esté curso?

Duración: cinco minutos

{Recomendaciones para las actividades}

Trabajos:

Párrafos:

  • Presentación / portada
  • Introducción
  • Conclusión
  • Mayores a tres líneas
  • Menores a ocho líneas
  • Coherencia entre párrafos
  • Acentuación.
  • Evitar redundancia.
  • Pleonasmos.

Ortografía y Gramática

{Recomendaciones para las actividades}

Referencias:

Lista de bibliografía:

*Usar bitácora digital:

  • Al menos tres referencias en los trabajos.
  • En formato APA 7ma edición.
  • Al menos tres.
  • Debe coincidir con las referencias.
  • Formato APA 7ma edición
  • Un blog de cualquier tecnología:
  • Wordpress.
  • blogger
  • Medium

{Preguntas}

¿Qué es el html?

Definiendo

W3C

lenguaje de marcado utilizado para crear documentos web. Estos documentos son accesibles desde cualquier navegador web y pueden contener texto, imágenes, enlaces y otros elementos interactivos.

1.

2.

Mozilla Developer Network.

lenguaje de marcado que se utiliza para describir la estructura y el contenido de un documento web

3.

Techopedia

lenguaje de marcado que se utiliza para crear y estructurar el contenido de una página web. Se compone de una serie de etiquetas que se utilizan para definir diferentes elementos en una página, como títulos, párrafos, imágenes y enlaces

# CHAPTER 2

HTML es un lenguaje de marcado utilizado para crear páginas web y describir su contenido y estructura. Está compuesto por etiquetas que se utilizan para definir diferentes elementos en una página, como texto, imágenes y enlaces.

Resumiendo

¿Qué es el html entonces?

Se define como

Lenguaje de marcado que permite visualizar documentos sin dependencia de sistema operativo, solo con una aplicación que pueda visualizarlos como los navegadores.

{Conociendo el html}

Presentando sintaxis del Codigo

<html>
  <head>
    <title> título de la pagina </title>
  </head>
  <body>
    <p>
      Esto es un párrafo que contiene <b>negritas</b> o mas letras en <strong>negritas</strong> también incluye un salto<br> de linea
    
      Ahora se enlaza a otra página <a href='www.frexus.dev'>aquí</a> <br>
      aca se tiene un enlace a otra págian pero abriendola en una ventana nueva <a href="www.iudy.edu" target="_blank">aca</a>
    </p>
    <h1>
      esto es un título
    </h1>
    <h2>
      este es otro título
    </h2>
    <h3>
      un tipo de título más
    </h3>
  </body>
</html>
# PRESENTING CODE

Actividad

En un bloc de notas escribe:

1. tu definición de html

2. las respuestas a las preguntas de la actividad de encuadre.

3. ahora de la sintaxis anterior redacta en el bloc de notas con marcas de html.

Temas

  • Repasando conceptos
    • Actividad de aprendizaje
  • Introducción al html
    • Actividad de aprendizaje
  • Historia del html
  • Versiones del html
    • Actividad de aprendizaje
  • Elementos básicos del html
    • Actividad de aprendizaje
  • Formato de texto
    • Actividad de aprendizaje
  • Encabezados
    • Actividad de aprendizaje

Temas

  • Párrafos
    • Actividad de aprendizaje
  • Listas, enumeraciones y tablas
    • Ejemplo de uso de lista
      • Actividad de aprendizaje
    • Enumeraciones
      • Ejemplo
      • Actividad de aprendizaje
    • Tablas
      • Ejemplo
      • Actividad de aprendizaje
  • Imágenes
    • atributos
    • Ejemplo
    • Actividad de aprendizaje

Repasando conceptos

Actividad de aprendizaje

  • Recuerdas ¿cuál fue el concepto de html de la clase anterior?

Introducción al html

HyperText Markup Language) es el lenguaje de marcado estándar utilizado para crear páginas web.

Conjunto de etiquetas que se utilizan para estructurar el contenido de una página web, como texto, imágenes, videos, enlaces, formularios, entre otros elementos.

Las etiquetas pueden tener atributos que especifican características adicionales para el elemento, como la clase, el id, el estilo, etc.

Se puede combinar con otros lenguajes como CSS (Cascading Style Sheets) y JavaScript para crear páginas web más dinámicas y atractivas.

Introducción al html

La última versión de HTML es HTML5

Nuevas características y elementos para mejorar la funcionalidad y la accesibilidad de las páginas web

Proporciona un mayor soporte para contenido multimedia, como videos y audio.

Actividad de aprendizaje

  • Genera una investigación sobre los diferentes usos que se puede dar al html.
  • Genera un archivo html que lleve el nombre de Usos_html.html
  • Escribe dentro del fichero creado el código adecuado para crear una página que tenga cuatro párrafos, un título en tamaño h1 centrado y dentro de los párrafos en negritas las palabras claves que consideres importantes.

Historia del html

Desarrollado por el físico británico Tim Berners-Lee en la década de 1980

Se buscaba una manera de compartir información entre científicos de todo el mundo que utilizaran diferentes sistemas informáticos.

Lenguaje de marcado para estructurar la información en la web

El primer borrador de HTML se creó en 1990, y la primera versión oficial de HTML (HTML 2.0) se publicó en 1995.

El auge de la web y el creciente interés en la creación de sitios web, HTML se convirtió en un estándar de la industria y es uno de los lenguajes de programación más utilizados en la actualidad

Historia del html

Evolucionando con cada nueva versión que agregan características y elementos nuevos y mejorados.

HTML es un estándar de la industria y uno de los lenguajes de programación más utilizados en la actualidad para la creación de sitios web.

Versiones de Htm

HTML 1.0:

  • Publicado en 1993.
  • Muy básico y limitado, ya que sólo permitía describir documentos simples.
  • No incluía características como tablas, formularios o imágenes.

HTML 2.0:

  • Publicado en 1995.
  • Incluyó nuevas características como formularios, tablas, imágenes y mapas de imágenes.

Versiones de Htm

HTML 3.2:

  • Publicado en 1997.
  • Agregó nuevas características como hojas de estilo en línea y en cascada, soporte para tablas complejas, y mejoras en la compatibilidad con navegadores.

HTML 4.01:

  • Publicado en 1999.
  • Mejoró la semántica del lenguaje y añadió nuevas etiquetas para formularios y multimedia.
  • Introdujo marcos y capas, que permiten organizar y mostrar contenido en la página.

Versiones de Htm

XHTML 1.0:

  • Publicado en 2000.
  • Es una versión más estricta y sintácticamente correcta de HTML, que sigue las reglas de XML.
  • Introdujo el uso de documentos bien formados, que requieren el cierre adecuado de todas las etiquetas y el uso de comillas en los atributos.

Versiones de Htm

HTML5:

  • Publicado en 2014.
  • Incluye muchas nuevas características, como etiquetas semánticas para estructurar el contenido, soporte para multimedia sin necesidad de plugins, y mejoras en formularios y gráficos.
  • Permite una mayor flexibilidad y modularidad en la creación de sitios web.
  • Introdujo la capacidad de crear aplicaciones web y juegos en línea.

Actividad de aprendizaje

  • Genera una investigación sobre todas las versiones de html.
  • Selecciona las ventajas y desventajas de cada versión
  • Genera un archivo con el nombre versiones_html.html 
  • Dentro del fichero versiones_html.html incluye un párrafo para cada versión donde incluyas sus ventajas y desventajas.

Elementos básicos del html

Las etiquetas son los elementos fundamentales de HTML y se utilizan para marcar el inicio y el final de un elemento o componente en una página web.

Las etiquetas están escritas entre corchetes angulares "<" y ">" y tienen una sintaxis específica que indica qué tipo de elemento es. Por ejemplo, la etiqueta "<p>" indica que el contenido que sigue es un párrafo.

Elementos básicos del html

Los atributos son propiedades que se utilizan para proporcionar información adicional sobre un elemento.

Los atributos se escriben dentro de las etiquetas y especifican diferentes características de un elemento. Por ejemplo, el atributo "src" se utiliza para indicar la URL de una imagen en la etiqueta "<img>".

Elementos básico del html

Ejemplos de elementos básicos de HTML incluyen:

  • Etiqueta "<html>": marca el inicio y el final del documento HTML.
  • Etiqueta "<head>": se utiliza para incluir información adicional en el documento, como el título de la página o enlaces a hojas de estilo.
  • Etiqueta "<body>": marca el inicio y el final del contenido principal de la página web.
  • Etiqueta "<p>": se utiliza para crear párrafos de texto.
  • Etiqueta "<img>": se utiliza para insertar imágenes en una página web.
  • Etiqueta "<a>": se utiliza para crear enlaces a otras páginas web o recursos.
  • Etiqueta "<div>": se utiliza para agrupar otros elementos HTML en una sección lógica y separada de la página.
  • Etiqueta "<span>": se utiliza para aplicar estilos específicos a un fragmento de texto dentro de una página web.

Actividad de aprendizaje

  • Investiga que elemento básicos falta en la lista anterior.
  • Agregalos a un fichero que tenga un párrafo por cada elemento básico de html. 
  • El nombre del fichero debe de ser Elementos_basicos.html

Formato - Texto

HTML proporciona una variedad de etiquetas que permiten dar formato al texto dentro de una página web.

A continuación, se describen algunas de las etiquetas más comunes para dar formato al texto

Formato - Texto

  • Etiqueta "<b>": se utiliza para hacer que el texto se vea en negrita.
  • Etiqueta "<i>": se utiliza para hacer que el texto se vea en cursiva.
  • Etiqueta "<u>": se utiliza para subrayar el texto.
  • Etiqueta "<s>": se utiliza para tachar el texto.
  • Etiqueta "<sub>": se utiliza para crear un texto subíndice.
  • Etiqueta "<sup>": se utiliza para crear un texto superíndice.
  • Etiqueta "<em>": se utiliza para hacer que el texto tenga énfasis (se muestra en cursiva por defecto).
  • Etiqueta "<strong>": se utiliza para hacer que el texto tenga mayor importancia (se muestra en negrita por defecto).
  • Etiqueta "<small>": se utiliza para hacer que el texto sea más pequeño.
  • Etiqueta "<big>": se utiliza para hacer que el texto sea más grande.
  • Etiqueta "<font>": se utiliza para  especificar el color del texto, mediante el atributo color

Actividad de aprendizaje

  • Investiga la historia del html.
  • genera un fichero que lleve el nombre de formato_texto.html
  • Genera seis párrafos donde apliques las etiquetas más comunes.

Encabezados

Son etiquetas utilizadas para definir los encabezados o títulos de una página web. Estos encabezados van desde el nivel 1 (más importante) hasta el nivel 6 (menos importante).

Encabezados

  • Encabezado de nivel 1: <h1> - Se utiliza para el título principal de la página web.
  • Encabezado de nivel 2: <h2> - Se utiliza para los títulos secundarios de la página web.
  • Encabezado de nivel 3: <h3> - Se utiliza para los subtítulos y títulos de sección de la página web.
  • Encabezado de nivel 4: <h4> - Se utiliza para los subtítulos y títulos de subsección de la página web.
  • Encabezado de nivel 5: <h5> - Se utiliza para los subtítulos y títulos de subsubsección de la página web.
  • Encabezado de nivel 6: <h6> - Se utiliza para los subtítulos y títulos de menor importancia en la página web.

Encabezados

La importancia de los encabezados radica en: no solo se utilizan para definir la estructura y jerarquía de la información en una página web, sino que también son útiles para la optimización de motores de búsqueda (SEO), ya que ayudan a los motores de búsqueda a entender el contenido y la estructura de la página web.

Actividad de aprendizaje

  • De la investigación previa de las versiones de html.
  • Genera un fichero que lleve el nombre de encabezados_html.html
  • Dentro usa la cantidad de encabezados que consideres para cada versión, se sugiere usar los seis niveles de encabezado

Párrafos

Los párrafos se crean utilizando la etiqueta <p>. Esta etiqueta se utiliza para definir un bloque de texto que forma un párrafo.

Es importante tener en cuenta que la etiqueta <p> debe usarse para cada párrafo individual. Si se desea separar un bloque de texto en varios párrafos, se debe usar la etiqueta <p> para cada uno de ellos.

Existen otras etiquetas que se pueden utilizar para estructurar el texto en una página web, como las etiquetas <h1> a <h6> para encabezados, las etiquetas <ul> y <ol> para listas, y la etiqueta <br> para saltos de línea.

Actividad de aprendizaje

  • De las investigaciones sobre historia y versiones de html.
  • Genera un nuevo fichero que se llame parrafos.html
  • Utiliza los encabezados adecuados, para separar los títulos (historia - versión) crea la cantidad de párrafos adecuados para especificar las ventajas y desventajas de cada momento. No olvides hacer uso de las etiquetas para el formato de texto.

Listas, Enumeraciones y Tablas

En HTML, existen dos tipos de listas: listas ordenadas (<ol>) y listas desordenadas (<ul>). Las listas se utilizan para agrupar elementos relacionados y dar formato a la información de una manera estructurada y legible.

Ejemplo de uso de lista

<ol>
  <li>Primer elemento</li>
  <li>Segundo elemento</li>
  <li>Tercer elemento</li>
</ol>

<ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ul>
# PRESENTING CODE

Se crea una lista ordenada con tres elementos y una lista desordenada con tres elementos.

Actividad de aprendizaje

  • Genera un fichero que lleve el nombre de listas.html.
  • Crea dentro del archivo una lista ordenada donde se muestre cinco cosas que te van gustando de la materia.
  • Crea dentro del mismo fichero una lista desordenada donde se muestre cinco cosas que te gustaría mejorar de la materia.

Enumeraciones

Se crean con la etiqueta <dl> y se utilizan para definir términos y sus definiciones. Cada término se define con la etiqueta <dt> y cada definición se define con la etiqueta <dd>.

Ejemplo de uso de enumeraciones

# PRESENTING CODE
<dl>
  <dt>HTML</dt>
  <dd>Lenguaje de marcado para la creación de páginas web.</dd>
  <dt>CSS</dt>
  <dd>Lenguaje utilizado para dar estilo a las páginas web.</dd>
  <dt>JavaScript</dt>
  <dd>Lenguaje de programación utilizado para agregar interactividad a las páginas web.</dd>
</dl>

Se crea una enumeración con tres términos y sus definiciones.

Actividad de aprendizaje

  • De las investigaciones previas realizadas hasta ahora.
  • Crea un fichero que se llame enumeracion.html
  • Dentro selecciona seis conceptos y colocadlos dentro del archivo. No olvidar colocar el término y su definición.

Tablas

Se crean con la etiqueta <table> y se utilizan para mostrar datos en forma de filas y columnas. Cada fila se define con la etiqueta <tr> y cada celda se define con la etiqueta <td>.

# PRESENTING CODE

Código de ejemplo para el manejo de tablas

<table>
  <tr>
    <td>Nombre</td>
    <td>Edad</td>
    <td>Ciudad</td>
  </tr>
  <tr>
    <td>Juan</td>
    <td>25</td>
    <td>Madrid</td>
  </tr>
  <tr>
    <td>Pablo</td>
    <td>30</td>
    <td>Barcelona</td>
  </tr>
</table>

Se crea una tabla con tres filas y tres columnas que muestran el nombre, la edad y la ciudad de dos personas.

Actividad de aprendizaje

  • De las investigaciones previas
  • Genera un fichero con el nombre tabla.html
  • En ese archivo, coloca una tabla de seis columnas y dos filas, en ellas describe las convenientes de cada versión de html. No olvides usar los formatos de texto para resaltar palabras claves. 

Imágenes

Para insertar una imagen en una página HTML, se utiliza la etiqueta <img>. No tiene una etiqueta de cierre, ya que no es un contenedor. En su lugar, utiliza los atributos para especificar la ubicación y otros detalles de la imagen.

Imágenes - atributo de la etiqueta

  • src: Este atributo es obligatorio y se utiliza para especificar la ruta de la imagen en el servidor web. La ruta puede ser una URL absoluta o relativa.

  • alt: Este atributo es obligatorio y se utiliza para proporcionar un texto alternativo para la imagen. El texto alternativo se mostrará si la imagen no se puede cargar o si el usuario está utilizando un lector de pantalla.

  • width: Este atributo se utiliza para especificar el ancho de la imagen en píxeles o en porcentaje del ancho del contenedor.

  • height: Este atributo se utiliza para especificar la altura de la imagen en píxeles o en porcentaje del alto del contenedor.

  • title: Este atributo se utiliza para proporcionar un título para la imagen. El título se mostrará cuando el usuario pase el cursor sobre la imagen.

Imágenes - atributo de la etiqueta

  • class: Este atributo se utiliza para especificar una clase CSS que se aplicará a la imagen. La clase se puede utilizar para aplicar estilos específicos a la imagen.

  • id: Este atributo se utiliza para especificar un identificador único para la imagen. El identificador se puede utilizar para acceder a la imagen desde JavaScript o para aplicar estilos específicos a la imagen.

  • style: Este atributo se utiliza para especificar estilos CSS en línea que se aplicarán a la imagen. Los estilos pueden incluir propiedades como el color de fondo, el borde y el margen.

  • usemap: Este atributo se utiliza para especificar un mapa de imagen que se utilizará para vincular áreas específicas de la imagen con URL específicas.

# PRESENTING CODE

Ejemplo básico de uso de img

<img src="ruta_de_la_imagen.jpg" alt="Texto alternativo de la imagen">

El atributo src se utiliza para especificar la ubicación de la imagen en el servidor web y el atributo alt se utiliza para proporcionar un texto alternativo que se mostrará si la imagen no se puede cargar o si el usuario está utilizando un lector de pantalla.

Actividad de aprendizaje

  • Cree un directorio con el nombre imagen_html
  • Dentro del directorio cree un fichero con el nombre image.html
  • Seleccione una imagen (la que más le agrade), procure que se en formato png 
  • Renombre la imagen a my_imagen.png
  • Dentro del fichero image.html inserte la imagen.