CURSO PYTHON: HTML – CSS [MÚSICA]

CURSO PYTHON: HTML – CSS

[MÚSICA]

BRIAN YU: Muy bien, bienvenidos a todos, a la programación web.

con Python y JavaScript.

Mi nombre es Brian Yu.

Y en este curso, nos sumergiremos en el diseño y la implementación.

de aplicaciones web.

En las conferencias, tendremos la oportunidad de discutir y explorar

muchas de las ideas, herramientas y lenguajes

que son fundamentales para la programación web moderna.

Y a través de proyectos prácticos, tendrá la oportunidad de aprovechar esas ideas

y póngalos en práctica, diseñando múltiples aplicaciones web propias,

culminando en un proyecto final de su propia elección.

A lo largo del trimestre, cubriremos varios temas.

en este mundo de la programación web, comenzando

con HTML5 y CSS3, dos de los lenguajes

que son fundamentales para la comprensión de las páginas web.

HTML es un lenguaje que usaremos para describir la estructura de una página web.

Y CSS es el lenguaje que usaremos para describir

el estilo de una página web, los colores y las fuentes

y los diseños y el espaciado que hacen que la página web se vea

exactamente como queremos que se vea.

Después de eso, centraremos nuestra atención en Git,

una herramienta que no es específica de la programación web en sí misma,

pero que podemos usar para controlar la versión de nuestros programas,

para realizar un seguimiento de los diferentes cambios que realizamos en nuestros programas web,

y permitirnos trabajar en varias partes diferentes de la web

aplicación al mismo tiempo antes de volver a fusionar esas piezas.

Después de eso, echaremos un vistazo a Python, uno de los primeros lenguajes principales

que vamos a explorar en el curso, que

es el lenguaje que usaremos para construir nuestras aplicaciones web.

Específicamente, usaremos Python usando un marco llamado Django.

Django es un marco de programación web escrito en la programación de Python

lenguaje que usaremos para facilitar el diseño y desarrollo de nuestra web

aplicaciones Django en particular facilita el diseño de aplicaciones web

que interactúan con los datos.

Después de eso, centraremos nuestra atención en SQL, un lenguaje

que podemos utilizar para interactuar con bases de datos, en particular buscando

sobre cómo Django nos permite usar modelos y migraciones para interactuar con los datos

y permitir que los usuarios interactúen con los datos con mayor facilidad.

A continuación, centraremos nuestra atención en el segundo de la programación principal.

idiomas que exploraremos en esta clase, JavaScript,

y analizar cómo podemos usar JavaScript para ejecutar en los navegadores web de los usuarios

para hacer que las páginas web sean un poco más interactivas.

En particular, usaremos JavaScript en el contexto de las interfaces de usuario,

mirando interfaces de usuario modernas y explorando

cómo funcionan esas interfaces y cómo

podemos desarrollar esas interfaces de usuario con una combinación de Python

y JavaScript.

A continuación, centraremos nuestra atención en las pruebas.

y CI / CD, o integración continua y entrega continua,

cuáles son las herramientas que podemos utilizar y las mejores prácticas de software para asegurarnos

que podemos diseñar y desarrollar código de manera más eficiente.

Y las pruebas en particular aseguran que a medida que hacemos cambios en nuestro código,

no estamos rompiendo partes existentes de nuestra aplicación web

asegurándonos de tener un conjunto completo de pruebas

que podemos utilizar para asegurarnos de que nuestra aplicación web esté siempre

comportándose como debería.

Y finalmente, centraremos nuestra atención en la escalabilidad y la seguridad.

en internet, pensando en lo que pasa

a medida que nuestra aplicación web crece.

A medida que más y más usuarios diferentes comienzan a utilizar nuestra aplicación web,

¿Cómo equilibramos la carga entre esas personas?

¿Y qué debemos cambiar en nuestra base de datos para asegurarnos de que muchos usuarios

¿Pueden conectarse a nuestra aplicación web al mismo tiempo?

Además, veremos las implicaciones de seguridad.

detrás del diseño de nuestras aplicaciones web.

¿Qué podría hacer un adversario si no tenemos cuidado?

¿Y cómo deberíamos diseñar de forma proactiva nuestra aplicación web?

para asegurarse de que sea seguro?

Pero hoy, comenzamos nuestra conversación con HTML y CSS,

dos de los lenguajes fundamentales para comprender las páginas web

y cómo los navegadores web pueden mostrar esas páginas web.

Y comenzaremos con cada HTML, o lenguaje de marcado de hipertexto,

que es un lenguaje que podemos usar para describir la estructura de la página web,

todos los botones y el texto y los formularios y otras partes de la página web

que el usuario ve e interactúa en última instancia.

Nuestra primera página HTML se verá algo así.

Será un código basado en texto que escribiremos que un navegador web, como Safari

o Chrome o Firefox, puede ver, analizar, comprender,

y mostrar al usuario.

Así que echemos un vistazo a esta página, una línea a la vez.

y comprenda cómo funciona.

Incluso si no comprende todos los matices de la sintaxis,

Probablemente hay un par de cosas que le llaman la atención.

Es posible que notes la palabra título, que probablemente

refleja el título de la página web, por ejemplo, que en este caso

parece ser la palabra hola.

Y luego, más abajo, vemos que tenemos el cuerpo de la página web.

que parece contener las palabras hola mundo.

Entonces, ¿cómo se verá realmente esta página web?

Bueno, echémosle un vistazo.

Seguiremos adelante y abriremos un editor de texto.

Puede utilizar cualquier editor de texto que desee.

Pero para este curso, usaré Visual Studio Code de Microsoft.

Y voy a abrir un nuevo archivo al que llamaré hello.html.

Dentro de hello.html voy a escribir el mismo HTML que acabamos de

vi hace un momento.

Y explicaremos cada una de estas líneas a su debido tiempo.

Pero recuerda que teníamos un título de la página que decía algo como hola

y luego un cuerpo de la página donde dijimos algo como hola mundo,

por ejemplo.

Así que esta es nuestra primera página HTML.

Y si sigo adelante y abro esa página HTML como mi HTML de apertura hello.html,

por ejemplo, dentro de un navegador web, lo que veré es algo como esto.

En el cuerpo de la página, veo las palabras hola mundo.

Y si observa aquí en la parte superior de mi navegador web,

Veo la barra de título, donde tengo el título de esta página, que en este caso

es solo la palabra hola.

Este es nuestro primer programa web que hemos

ha sido capaz de desarrollar usando HTML.

Y ahora exploremos con más detalle cómo funciona exactamente este programa.

Así que aquí estaba de nuevo la página web que estábamos viendo.

Y esta primera línea aquí, DOCTYPE html

es lo que podríamos llamar una declaración DOCTYPE.

Es una forma de decirle al navegador web qué versión de HTML

que estamos usando en esta página web en particular, porque dependiendo

en la versión de HTML, el navegador web puede

desea mostrar información diferente o es posible que deba analizar

la página un poco diferente.

Cada versión de HTML ha tenido una forma ligeramente diferente

de indicar esa versión.

Pero esta línea aquí, DOCTYPE html es nuestro camino

de decir que esta página HTML está escrita usando

HTML5, la última versión de HTML.

Después de eso, nuestra página HTML se estructura como una serie de elementos HTML anidados,

donde un elemento HTML describe algo en la página.

Y podríamos tener elementos que están dentro de otros elementos.

Cada uno de esos elementos está indicado por lo que

vamos a llamar a una etiqueta HTML, encerrada usando esos corchetes angulares.

Y aquí mismo, veremos el comienzo de la etiqueta HTML, que

...