15/7/2024
VISUAL STUDIO CODE
Es un espacio de trabajo, equipado donde preparamos nuestro código de manera eficiente y
organizada. La barra lateral izquierda es la organización de las herramientas. Depuración
integrada, con visual studio code podemos pausar la ejecución del código, inspeccionar
variables y seguir el flujo de ejecución para encontrar errores. Además, nos ofrece un control
de versiones, tenemos la integración de IT q nos permite registrar cada cambio que hacemos
en el código, para poder replicarlos.
En visual se instalan PLUG INS: son componentes de software que agregan funcionalidades
adicionales al programa principal sin la necesidad de modificar nuestro código fuente. Son
utilizados en los editores de código, navegadores web, y otros programas para poder extender
las capacidades y personalizar las experiencias de usuario.
ICONO DEL PANEL IZQUIERDO – EXTENSIONES:
AUTO RENAME TAG: simplificar. Nos autocompleta el mismo tag o etiqueta donde estábamos
parados.
LIVE SHARE: sirve directamente para cuando queremos ejecutar un servidor local para abrir
nuestra página y poder ver los cambios en tiempo real sin tener que estar actualizando la
pagina cada dos segundos.
O LIVE SERVER
AUTOPREFIXER: este nos ayuda a completar planillas de css.
CODESNAP: para sacar captura al código. Para consultar dudas sobre códigos, es mucho más
fácil mostrarles el código a los profes.
MATERIAL ICON THEME: librería de iconos. Es estético
PRETTIER – CODE FORMATTER: herramienta de formato de código.
CSS MODULES: para trabajar con módulos de css.
BUENAS PRÁCTICAS DE PROGRAMACION
Nos van a ayudar a escribir código que sea más fácil de entender, mantener y corregir.
Creamos el código que pueda ser reutilizado en diferentes partes del proyecto o en proyectos
futuros, es una herramienta versátil.
Y también escribir código que funcione bien sin consumir recursos innecesarios, nos va a a dar
la eficiencia que necesitamos. Esto nos permite ser eficientes, un código ineficiente puede
consumir más tiempo y recursos de lo necesario.
Escribir el código claro y bien estructurado.
En un equipo de trabajo para una aplicación, si me dedico en frontend junto con mi
compañero, tal vez trabaje en el código que escribió mi compañero, y viceversa. Es por eso que
tiene que ser bien entendible el código.
¿Por qué son necesarias las buenas practicaS?
Porque en equipos grandes un código bien escrito y documentado es más fácil de entender y
trabajar. Por ejemplo, un código claro y bien estructurado tiende a tener menor errores y es
mas fácil de depurar. ¿Qué es depurar en programación? Identificar y corregir errores en el
código, parte crucial del desarrollo del software. Las buenas practicas nos ayudan a ahorrar
tiempo a largo plazo.
Introduction al HTML
DOM document object model
Es una representación a través del árbol de tu pagina web en el navegador.
Es la pantalla del navegador donde tengo cargada mi página, (los botones, el titulo, las
imágenes). Cuando yo cargo mi pagina se empieza a cargar en el dom, lo que se conoce como
un árbol invertido, porque la raíz en vez de estar abajo está arriba. Nuestra raíz en todos los
proyectos va a ser una etiqueta o elemento llamado HTML.
HTML
HEAD BODY
META TITLE HEADER FOOTER
nav MAIN
article
Todo proyecto web arranca con este elemento HTML. Desde el html comienzan a aparecer
varias ramas. HEAD Y BODY
HEAD es un elemento html que contiene información de la pagina o del proyecto, del archivo
que el usuario no está viendo. En esta rama nosotros vamos a configurar algunos datos
necesarios para que el proyecto funcione bien. Cuando veamos el código, vamos a configurar
un elemento llamado head que va a ser una rama que viene del html.
También tiene otras ramas, META Y TITLE.
BODY, es otra rama. Elemento de html donde vamos a construir lo que el usuario si va a ver. Si
pongo algo fuera de body el navegador que está interpretando todo esto no va a saber qué es.
Necesito mandarlo dentro de body, ya sea una imagen, texto, botón, etc.
También tiene sus ramas, HEADER, MAIN Y FOOTER.
HEADER, dentro de el se encuentra el elemento llamado NAV, es donde vamos a definir la
barra de navegación, es decir, el menú. Viene de navigation.
MAIN: donde están las secciones principales de nuestra pagina web.
Puede existir dentro el main, el elemento llamado ARTICLE (y varios más) que puede contener
dentro párrafos, textos o imágenes.
Cuando creamos una pagina web, esta va a tener ARCHIVOS, depende de cuantos archivos con
extensión html tengamos, cada archivo va a ser un DOM distinto.
Para armar todo este árbol, necesitamos ETIQUETAS o TAG. ¿Qué son? Usada para crear
contenido en la página. ¿Como se escribe una etiqueta con su contenido? Entre signo menor y
signo mayor <nombre>
Pueden ser contenedoras o no. Las que se abren y cierran son CONTENEDORAS. Una etiqueta
se abre con la barra inclinada /
<nombre>Contenido</nombre>
Lo que hay en el medio(contenido) es el contenido que se va a ver. La etiqueta NO SE VA A
VER, le va a decir al navegador este contenido como lo va a presentar.
Puede haber etiquetas contenedoras que tengan otras etiquetas, o simplemente un contenido.
También existen ETIQUETAS SEMÁNTICAS. Algunas como header, main y footer. Porque
tienen una función especial, le dicen al navegador que, por ejemplo si yo utilice la etiqueta
header, esa parte que ocupé con la etiqueta header, le dicen al navegdor que esa es la
cabecera de mi pagina, si ocupo la etiq footer, esa le dice al navegador q esa va a ser el pie de
la página.
Después hay otras etiquetas que ya no tienen ninguna función semántica, se pueden usar para
cualquier cosa, pero ya el navegador los va a ver como un bloque de código.
EJEMPLO DE ETIQUETAS. Todas se escriben con minúscula SIEMPRE.
Etiquetas que se abren y cierran:
<p>Esto es un Parrafo</p>
La etiqueta P es para agregar un párrafo a nuestra pagina.
Etiquetas que se cierran en si misma:
<img src=”imagen/fullstack.jpg” alt=”imagen”>
Esta es la etiqueta img, para agregar una imagen, pero a su vez tiene ATRIBUTOS, por ejemplo
tiene un atributo llamado SRC(source) y otro llamado ALT (alternativo). Y se cierra en si misma.
Algunas etiquetas tienen propiedades como esta. Esta necesita para mostrar la imagen que yo
le mande dentro de la propiedad SRC (que viene de la palabra source), la dirección donde
tengo la imagen. En este caso la dirección indica q la imagen fullstack.jpg está dentro de una
carpeta llamada imagen. Cuando diga imagen/nombredelarchivo.extension jpg, png, gif, icon
(extensiones de imagen).
Esa dirección donde tengo la imagen dentro de mi proyecto se la tengo que mandar a la
propiedad siempre (src) porque sino la etiqueta img no sabe donde está la imagen.
Y la etiqueta ALT, viene de alternativo. Aquí tengo que ponerle un texto alternativo a esta
imagen, por ejemplo si pongo el logo de mi empresa, en texto alternativo debería decir logo de
la empresa. Tiene que ser un texto siempre entre comillas
Todos los valores que pongo dentro de una propiedad VAN ENTRE COMILLAS.
PROPIEDAD alt Y VALOR “imagen” va entre comillas.}
Ponerle un texto alternativo a una imagen es una buena practica. ¿por qué? Por
ACCESIBILIDAD. Que tiene que ver con que nuestra pagina web sea accesible al mayor numero
de personas posible. Y si hay una persona q tenga por ej alguna discapacidad visual, pueda
navegar también, pero etsas personas usan un navegador de pantalla, a medida q va
recorriendo la pagina le va leyendo lo que va en la pagina, si ponemos una imagen no la va a
ver pero si va a poder escuchar cuando el lector de imagen lea el texto alternativo que
pusimos.
También sirve por si usamos una imagen de una dirección de internet con una URL y la han
borrado de ese servidor, aparecerá como una imagen rota pero el texto seguirá estando.
Accesibilidad web se refiere a la práctica de desarrollar y diseñar sitios web para que sean
utilizables por el mayor numero de personas posibles, incluidas aquellas personas con
capacidades diferentes.
Un buen diseño de UXUI accesible asegura que todos los elementos de la pagina web sean
fáciles de ver, entender y de usar. En un HTML semántico, usar etiquetas de html de manera
correcta y significativa nos va a ayudar a que los lectores de pantalla puedan interpretar y leer
el contenido correctamente.
*VISUAL STUDIO CODE
Cuando estamos creando una página web y después tenemos que dejarla online, todos los
navegadores incluso también, lo que hacen es buscar el archivo que se llame INDEX, Y este
archivo va a tener una extensión, HTML. (index.html).
Cuando trabajamos con HTML, tenemos que crear una estructura. Esta comienza con una
etiqueta en particular, la abrimos con el signo de mayor < y signo de admiración de cierre ! y
escribimos DOCTYPE <!DOCTYPE >
Esta etiqueta tiene un atributo más, siempre con un espacio y que esté separado al nombre
del tag. El atributo es HTML.
Esta etiqueta lo que hace es declarar el tipo de documento y la versión del html. (VERSION 5 en
este momento)
De aqui sacamos dos raíces:
En la etiqueta HEAD donde vamos a tener metadatos, el titulo de la página, enlaces a hojas de
estilo, y script de los links a javascript.
Y en el BODY vamos a tener todo el contenido visible del navegador.
