Curso de Programación con Python y Javascript

Índice

Introducción
Programación Web
HTML (Lenguaje de Marcado de Hipertexto)
Meta Tags
Cheat Sheet HTML
Propiedades aria

Introducción

Visual Studio Code,Sublime Tex,Atomy Vim

Pero hay muchas opciones más para elegir!

Programación Web

Temas del curso: Entraremos en más detalles más adelante, pero aquí tienes un resumen breve de en qué estaremos trabajando durante este curso:

HTML y CSS (un lenguaje de marcado utilizado para estructurar una página web y un procedimiento para hacer que nuestros sitios sean más atractivos visualmente).
Git (utilizado para el control de versiones y colaboración).
Python (un lenguaje de programación ampliamente utilizado que usaremos para hacer que nuestros sitios sean más dinámicos).
Django (un popular marco de trabajo web que utilizaremos para la parte trasera de nuestros sitios).
SQL, Modelos y Migraciones (un lenguaje utilizado para almacenar y recuperar datos, y métodos específicos de Django que facilitan la interacción con bases de datos SQL).
JavaScript (un lenguaje de programación utilizado para hacer que los sitios web sean más rápidos y interactivos).
Interfaces de usuario (métodos utilizados para que un sitio web sea lo más fácil de usar posible).
Pruebas, CI, CD (aprender sobre diferentes métodos utilizados para asegurarse de que las actualizaciones en las páginas web se realicen sin problemas).
Escalabilidad y Seguridad (asegurarnos de que nuestros sitios web puedan ser accedidos por muchos usuarios a la vez y que estén protegidos contra intenciones maliciosas).

HTML (Lenguaje de Marcado de Hipertexto)

HTML es un lenguaje de marcado que define la estructura de una página web. Es interpretado por tu navegador web (Safari, Google Chrome, Firefox, etc.) para mostrar contenido en tu pantalla.
Vamos a comenzar escribiendo un simple archivo HTML

html

1<!DOCTYPE html>
2<html lang="es">
3<head>
4<title>Hola soy el Título de la pestaña!</title>
5</head>
6<body>
7  Hola, Neo!
8</body>
9<html>

Cuando abramos el archivo en el navegador vamos a obtener ésto:

Imagen previa de nuestro HTML, url de la imagen: /images/html-title-preview.png

Ahora, tomemos un momento para hablar sobre el archivo que acabamos de escribir, que parece ser bastante complicado para una página tan simple.

En la primera línea, estamos declarando (para el navegador web) que estamos escribiendo el documento en la última versión de HTML: HTML5.
Después de eso, la página consta de elementos HTML anidados (como html y body), cada uno con una etiqueta de apertura y cierre marcada con<element>para una apertura y</element>para un cierre.
Observa cómo cada uno de los elementos internos está indentado un poco más que el anterior. Aunque esto no es necesariamente requerido por el navegador, será muy útil mantener este estilo en tu propio código.
Los elementos HTML pueden incluir atributos, que proporcionan al navegador información adicional sobre el elemento. Por ejemplo, cuando incluimos lang="en" en nuestra etiqueta inicial, le estamos indicando al navegador que estamos utilizando el español como nuestro idioma principal.
Dentro del elemento HTML, típicamente queremos incluir tanto una etiqueta head como una etiqueta body. La etiqueta head contendrá información sobre tu página que no necesariamente se muestra, y la etiqueta body contendrá lo que es visible para los usuarios que visitan el sitio.
Dentro de la etiqueta head, hemos incluido un título para nuestra página web, que notarás se muestra en la pestaña en la parte superior de nuestro navegador web.
Finalmente, hemos incluido el texto "¡Hola, Neo!" en el body, que es la parte visible de nuestra página.

El DOM (Document Object Model) es una forma conveniente de visualizar la manera en que los elementos HTML se relacionan entre sí utilizando una estructura similar a un árbol. Arriba tienes un ejemplo del diseño del DOM para la página que acabamos de escribir.

Más Elementos HTML

Hay muchos elementos HTML que es posible que desees utilizar para personalizar tu página, incluyendo encabezados, listas y secciones en negrita. En el siguiente ejemplo, veremos algunos de estos en acción.
Una cosa más que debes tener en cuenta:
nos permite agregar comentarios en HTML, por lo que lo utilizaremos a continuación para explicar algunos de los elementos.

html

1<!DOCTYPE html>
2<html lang="es">
3    <head>
4        <title>Elementos HTML</title>
5    </head>
6    <body>
7        <!-- Podemos crear encabezados usando etiquetas h1 a h6. -->
8        <h1>Un Encabezado Grande</h1>
9        <h2>Un Encabezado Más Pequeño</h2>
10        <h6>El Encabezado Más Pequeño</h6>
11
12        <!-- Las etiquetas strong e i nos proporcionan negritas e itálicas respectivamente. -->
13        Una palabra <strong>en negrita</strong> y una palabra <i>en cursiva</i>!
14
15        <!-- Podemos enlazar a otra página (como la página de NeoTecs) usando la etiqueta a. -->
16        Visita el <a href="https://neotecs.netlify.app/">Sitio web de NeoTecs</a>!
17
18        <!-- Usamos ul para una lista desordenada y ol para una ordenada. Ambas listas contienen li,
19        o elementos de lista. -->
20        Una lista desordenada:
21        <ul>
22            <li>foo</li>
23            <li>bar</li>
24            <li>baz</li>
25        </ul>
26        Una lista ordenada:
27        <ol>
28            <li>foo</li>
29            <li>bar</li>
30            <li>baz</li>
31        </ol>
32
33        <!-- Las imágenes requieren un atributo src, que puede ser la ruta a un archivo en tu 
34        computadora o el enlace a una imagen en línea. También incluye un atributo alt, que proporciona 
35        una descripción en caso de que la imagen no se pueda cargar. -->
36        Una imagen:
37        <img src="../../images/neo.npg" alt="Imagen de Neo, mi mascota">
38        <!-- También podemos ver arriba que para algunos elementos que no contienen otros, las 
39        etiquetas de cierre no son necesarias. -->
40
41        <!-- Aquí, usamos la etiqueta br para agregar espacio en blanco en la página. -->
42        <br/> <br/>
43
44        <!-- Se necesitan varias etiquetas diferentes para crear una tabla. -->
45        <table>
46            <thead>
47                <th>Océano</th>
48                <th>Profundidad Promedio</th>
49                <th>Profundidad Máxima</th>
50            </thead>
51            <tbody>
52                <tr>
53                    <td>Pacífico</td>
54                    <td>4280 m</td>
55                    <td>10911 m</td>
56                </tr>
57                <tr>
58                    <td>Atlántico</td>
59                    <td>3646 m</td>
60                    <td>8486 m</td>
61                </tr>
62            </tbody>
63        </table>
64    </body>
65</html>

Para visualizarlo les doy dos extensiones de ejemplo:

Esta extensión es de Microsoft llamadaLive Preview
Esta otra extensión para Visual Studio Code llamadaLive Server

Cuando se renderiza esta página, veremos algo como ésto:

Elementos HTML, url de la imagen: /images/html-elements-commit.png

En caso de que te preocupe, ten en cuenta que nunca tendrás que memorizar estos elementos. Es muy fácil simplemente buscar algo como "imagen en HTML" para encontrar la etiqueta img. Un recurso que es especialmente útil para aprender sobre estos elementos esW3 Schools.

Formularios

Otro conjunto de elementos que es realmente importante al crear un sitio web es cómo recopilar información de los usuarios. Puedes permitir que los usuarios ingresen información utilizando un formulario HTML, que puede contener varios tipos diferentes de entradas. Más adelante en el curso, aprenderemos cómo manejar la información una vez que se ha enviado un formulario.
Al igual que con otros elementos HTML, no es necesario memorizarlos, y W3 Schools es un excelente recurso para aprender acerca de ellos.

html

1<!DOCTYPE html>
2<html lang="en">
3<head>
4<title>Forms</title>
5</head>
6<body>
7<form>
8<input type="text" placeholder="First Name" name="first">
9<input type="password" placeholder="Password" name="password">
10<div>
11    Color Favorito:
12    <input name="color" type="radio" value="blue"> Azul
13    <input name="color" type="radio" value="green"> Verde
14    <input name="color" type="radio" value="yellow"> Amarillo
15    <input name="color" type="radio" value="red"> Rojo
16
17</div>
18<input type="submit">
19</form>
20</body>
21</html>

Meta Tags

Las etiquetas<meta>en HTML se utilizan para proporcionar información adicional sobre la página web. Estas etiquetas no tienen contenido visible directo en la página, pero son interpretadas por los navegadores web y otros servicios en línea para diversos propósitos. Algunas de las funciones más comunes de las etiquetas<meta>incluyen:

Descripción de la Página:
html
```
1<meta name="description" content="..." />
```
Proporciona una breve descripción del contenido de la página. Los motores de búsqueda a menudo utilizan esta descripción en sus resultados.
Descripción del Autor:
html
```
1<meta name="author" content="..." />
```
Indica el nombre del autor de la página.
Etiquetas Open Graph:
html
```
1<meta property="og:..." content="..." />
```
Se utilizan para controlar cómo se muestra el contenido de una página cuando se comparte en redes sociales. Esto incluye la imagen, el título, la descripción, etc.
Íconos:
html
```
1<link rel="shortcut icon" href="..." /> y <link rel="apple-touch-icon" href="..." />
```
Establecen los íconos que se mostrarán en la pestaña del navegador y en dispositivos Apple, respectivamente.
Color de Tema
html
```
1<meta name="theme-color" content="..." />
```
Define el color de tema principal de la página web, que puede influir en la apariencia de la interfaz del navegador en dispositivos móviles. En definitiva esto cambia el color de la pestaña del navegador en la cual se está visualizando la página.
Tarjeta de Twitter
html
```
1<meta name="twitter:..." content="..." />
```
Similar a Open Graph, pero específico para Twitter. Permite personalizar cómo se muestra el contenido cuando se comparte en esta plataforma.

¿Por qué es importante la metainformación?

La metainformación juega un papel significativo en mejorar el SEO de una página web, haciéndola más accesible y comprensible para los motores de búsqueda y las plataformas de redes sociales. La metainformación adecuada ayuda a los motores de búsqueda a indexar eficazmente las páginas web, mejorando su clasificación en los resultados de búsqueda. Además, la metainformación como Open Graph mejora la apariencia de los enlaces compartidos en las redes sociales, haciendo que el contenido sea más atractivo e informativo para los usuarios.

Otros Meta Tags:

Metainformación de palabras clave: Esta metainformación incluye las palabras clave relacionadas con el contenido de la página web, lo que ayuda a los motores de búsqueda a indexar la página.

html

1<meta name="keywords" content="palabra_clave1, palabra_clave2, palabra_clave3" />

Metainformación de Open Graph: Esta metainformación mejora la forma en que se representa una página web cuando se comparte en plataformas de redes sociales, proporcionando información como el título, la descripción y la imagen previa.

html

1<meta property="og:title" content="Título aquí" />
2<meta property="og:description" content="Descripción aquí" />
3<meta property="og:image" content="url_de_la_imagen_aquí" />

Cheat Sheet HTML

Mejora la legibilidad semántica recordando las etiquetas con este Cheat-Sheet de HTML

html

1<!-- CHEAT SHEET HTML -->
2
3<html>...</html> <!-- El elemento raíz (root). Indica que una página web está escrita en HTML5. -->
4
5<head>...</head> <!-- Esta etiqueta para contener información del documento. -->
6
7<title>...</title> <!-- Para colocar el título de la página. -->
8
9<body>...</body> <!-- Contiene todo el contenido que se muestra en la UI (Interfaz de Usuario). -->
10
11<!-- Los comentarios se envuelven en ésta etiqueta. -->
12
13<!-- ESTRUCTURA DE LA PAGINA -->
14
15<h1>...</h1> => <h6>...</h6> <!-- Desde el encabezado de página más importante hasta el menor que es 6. -->
16
17<p>...</p> <!-- Define un párrafo. -->
18
19<section>...</section> <!-- Crea una sección para contener elementos. -->
20
21<div>...</div> <!-- Crea un contenedor de elementos. -->
22
23<span>...</span> <!-- Crea un contenedor alineado (inline-block). -->
24
25<br/> <!-- Crea un espacio en blanco. -->
26
27<hr/> <!-- Crea una regla o línea horizontal visible, usada para dividir o separar contenidos. -->
28
29<!-- METADATA -->
30
31<meta /> <!-- Contiene metadata acerca del documento. -->
32
33<link/> <!-- Define la relación entre el documento actual y un recurso externo -->
34
35<style>...</style> <!-- Define la información de estilos del documento. -->
36
37<script>...</script> <!-- Embeber o incorporar algún script del lado del cliente. -->
38
39<!-- TEXTO -->
40
41<strong>...</strong> <!-- Define un texto importante, y muestra en negrita (bold). -->
42
43<b>...</b  <!-- Crea texto en negrita (bold). -->
44
45<em>...</em> <!-- Define el texto con enfatizado. -->
46
47<i>...</i> <!-- Texto en "italics" / También se pueden definir íconos dentro de ésta etiqueta. -->
48
49<strike>...</strike> <!-- Muestra un texto tachado. -->
50
51<!-- IMAGENES Y VIDEOS -->
52
53<img /> <!-- Embebe una imágen al documento. -->
54
55<video /> <!-- Embebe videos. -->
56
57<map>...</map> <!-- Crea un mapa de imágenes con áreas para hacer clicks. -->
58
59<area /> <!-- Especificar un áerea dentro del mapa de imágenes. -->
60
61<!-- LISTAS & TABLAS -->
62
63<ul>...</ul> <!-- Lista desordenada. -->
64
65<ol>...</ol> <!-- Lista ordenada numerada. -->
66
67<li>...</li> <!-- Crea una lista de ítems dentro de sus padres <ol> o <ul>. -->
68
69<table>...</table> <!-- Un contenedor para un formulario o tabla. -->
70
71<caption>...</caption> <!-- Crea una descripción de texto para la tabla. -->
72
73<thead>...</thead> <!-- Agrega los encabezados de la tabla. -->
74
75<tbody>...</tbody> <!-- Contenido principal del cuerpo de la tabla. -->
76
77<tr>...</tr> <!-- Crea una fila para contener datos. -->
78
79<th>...<th> <!-- Crean un simple ítem de encabezado. -->
80
81<td>...</td> <!-- Crea una celda simple para la tabla. -->
82
83<!-- FORMULARIOS -->
84
85<forms>...</forms> <!-- Crea una sección dónde se atribuyen como debe operar un formulario. -->
86
87<fieldset>...</fieldset> <!-- Define un número de campos del formulario -->
88
89<label>...</label> <!-- Crea una etiqueta de un campo con entrada(input). -->
90
91<input /> <!-- Crea un campo para entrada de datos. -->
92
93<legend>...</legend> <!-- Se utiliza en conjunto con <fieldset> para descripción o título de un 
94                      grupo de elementos. -->

Propiedades aria

Es importante destacar que las propiedades aria:Accessible Rich Internet ApplicationsenHTMLse utilizan para mejorar la accesibilidad de las páginas web, especialmente para personas con discapacidades, incluidas las personas con discapacidad visual que utilizan lectores de pantalla. Estas propiedades proporcionan información adicional sobre los elementos de la página que puede no ser evidente solo con el marcadoHTMLestándar.

Aquí hay algunas razones clave por las cuales se utilizan las propiedadesaria:

Accesibilidad: Las propiedades aria permiten mejorar la accesibilidad de los elementos de la página web al proporcionar información adicional sobre su función, estado o significado. Esto ayuda a los lectores de pantalla y otros dispositivos de asistencia a interpretar correctamente la página y a comunicar su contenido a los usuarios con discapacidades.
Semántica mejorada: AunqueHTML5proporciona una gran cantidad de elementos semánticos, a veces no es suficiente para describir completamente la estructura y el propósito de una página web, especialmente en aplicaciones web complejas. Las propiedades aria complementan esta semántica al proporcionar más detalles sobre la función y el comportamiento de los elementos.
Compatibilidad con tecnologías de asistencias: Al utilizar propiedades aria, se mejora la compatibilidad con tecnologías de asistencia como lectores de pantalla, navegadores de voz y otras herramientas de apoyo utilizadas por personas con discapacidades.

Algunos ejemplos comunes de propiedades aria incluyenaria-label,aria-labelledby, aria-describedby,aria-hidden,aria-checked, entre otros. Estas propiedades se utilizan para describir la relación entre los elementos de la página, su estado actual y su función.

Es importante utilizar las propiedadesariade manera adecuada y significativa para garantizar una experiencia de usuario accesible y comprensible para todos los usuarios, independientemente de sus capacidades.

Cabe destacar que:

Estas propiedades no son parte del lenguajeHTMLper se, sino que son parte de un conjunto de estándares desarrollados por elWorld Wide Web Consortium (W3C)para mejorar la accesibilidad de las aplicaciones web. Aunque son utilizadas principalmente en el contexto deHTML, también pueden ser utilizadas en otros lenguajes de marcado web, comoXHTML y XML.

¡Eso concluye nuestro contenido por aquí! ツ

Curso de Programación con Python y Javascript

Índice

Otros Meta Tags:

Compartir en las redes: