Hola! Soy Juan, estan por ver los apuntes que yo tome durante la clase para aprobar el curso, espero les sea util y cualquier correccion o critica me la pueden comentar con la mejor 😉
Perfiles de un desarrollador web
Front-end (cliente)
Estándares: HTML; CSS; JavaScript
Frameworks de CSS: Bootstrap; Bulma; Pure
Frameworks y librerías de JS: React; Angular
Preprocesadores de CSS: Less; Stylus; Sass
Compiladores de JS: Babel; Webpack
Back-end (Servidor)
Lenguaje de programación: Node.js; Python; PHP; Go; Java
Frameworks: Django; Laravel; Rails; Express; Spring
Infraestructura: Google cloud; DigitalOcean; AWS; Heroku+
Bases de datos: MongoDB; MySQL; PostgreSQL
Full Stack
Un full stack no debe saber manejar todas las tecnologías del front y del back, solo con entender cómo funcionan las tecnologías de principio a final pudiendo liderar proyectos.
**Paginas estáticas vs dinámicas **
Estáticas: Información en una página que, una vez liberado, no va a cambiar, suelen ser paginas informativas o blogs que dan datos que no cambiaran por mucho tiempo. El cliente no podrá cambiar nada de esta página, ni generar un login, ni nada.
Dinámicas: También llamadas webapps, estas estan conectadas a una base de datos, ya que el cliente puede interactuar con la página y que se guarden dichos cambios, por ejemplo un login, ver productos, etc.
HTML
Anatomía:
Índex y su estructura básica:
SIEMPRE, tu página principal de HTML debe llamarse “índex”. Para acelerar la escritura de toda la estructura de HTML podemos escribir “!” y presionar tabulador
HEAD<head> <meta charset="UTF-8"> <meta name="description" content="Descripcion"> <meta name="robots" content="index, follow"> <tittle>TITULO</tittle> <meta name="viewport" content="width=device-width, inictial-scale-sacle=1.0" <link rel="stylesheet" href="style.css"> </head>
BODY
<body>
<header>
<nav>
</nav>
</header>
<main>
<section>
<article>
<ol>
<li>TEXTO</li>
</ol>
<ul>
<li>TEXTO</li>
</ul>
</article>
</section>
</main>
<footer>
</footer>
<div>
<p>SOY UN PARRAFO</p>
<h1>H1 H1 H1 H1</h1>
<h2>H2 H2 H2 H2</H2>
<h3>H3 H3 H3 H3</h3>
<h6>H6 H6 H6 H6</h6>
<a href="#">LINK</a>
</div>
</body>
Tipos de imágenes
Lossy (Con perdida): en este formato la imagen perderá calidad por cargar mas rápido, lo ideal seria este tipo de imágenes
Lossnes (Sin perdida): la imagen no perderá calidad, pero sera pesada al final y cargara mas lento
Optimización de imágenes
El tamaño promedio de una imagen para la web es de 70kb.
Para esto tenemos herramientas como “Tiny PNG” para mejorar el tamaño de las imágenes. https://tinypng.com/
También “verefix” para retirar metadatos de las imágenes https://www.verexif.com/
Y para convertir imágenes en diferentes formatos esta “Convertio”. https://convertio.co/es/jpg-svg/
Etiqueta IMG
<img src=“URL/Directorio de la imagen” alt=“Nombre de la imagen”> </img>
O se puede hacer un contenedor para la imagen, poniendo la etiqueta IMG dentro de la etiqueta <figure> </figure> y asi es posible crear una descripcion para la imagen con la etiqueta <figcaption> </figcaption>
Etiqueta VIDEO
<video src=“URL/Directorio del video#10,60” controls preload=“auto”> </video>
Con el atributo CONTROLS, el navegador aplica controladores al video y con PRELOAD=“auto” el video empieza a cargar a la vez que la pagina (no a reproducir). Ademas, si en el apartado de src le agregamos #10,60 el video comenzara en el segundo 10 y finalizara en el segundo 60.
La etiqueta <source>, se puede colocar dentro de una etoqueta <video> varias veces para poder especificar diferentes rutas para diferentes tipos de archivos de video y que el navegador elija cual conviene renderizar.
Etiqueta FORM e INPUT
<form action="">
<label for=“nombre”>
<span> Ingrese su nombre </span>
<input type=“text” id=“nombre” placeholder=“nombre”>
<label>
<form>
Todos los tipos de input estan en w3schools
Se puede utilizar aquí el atributo autocomplete="" para que el navegador recuerde la información que anteriormente se habría obtenido.
También existe el atributo “requiered” para que el navegador no deje enviar la información sin rellenar el form que tenga este atributo
Input SUBMIT
Refresca la información del cuestionario y nos envía a una URL linkeada a esas respuestas, esto servirá para JS, este input se pone fuera del label
Input SUBMIT vs BUTTON
<input type=“submit” value=“TEXTO”>
<button type=“submit”> TEXTO </button>
La idea seria usar la etiqueta BUTTON para cualquier boton que necesitemos en nuestro proyecto pero usar SUBMIT para los formularios
Etiqueta OPTION
Opción 1=
<select name="" id=""> </select>
Esta etiqueta es parecida a un FORM, pero con la diferencia que el developer da las opciones a elegir y enviar.
Opcion 2=
<input list=""> <datalist> <option>
Esta etiqueta simula un FORM y a medida que escribimos nos ira dando las determinadas OPTIONS
Comentar código en HTML y CSS
Para comentar un codigo y que no se renderice utilizaremos el atajo CTRL + K -> CTRL + C
EMMET en VS code
Para ahorrar tiempo, se puede utilizar emmet y escribir de la siguiente manera por ejemplo form>label>span+input, y presionamos TAB, el codigo se generara solo. Este atajo tambien sirve para CSS
CSS
¿Qué es CSS?
Le da un estilo personalizado o apariencia a la estructura hecha con HTML, puede dar colores, recortar, agrandar, mover, animar, etc. Es recomendable llamar siempre a nuestro archivo de CSS “style.css”
¿Cómo linkeamos nuestro HTML con nuestro CSS?
En HTML colocamos: <link rel=“stylesheet” href="./style.css">
¿Cómo aplicamos CSS?
Colocamos el (etiqueta, atributo, .class, #id, etc) y a continuacion en {} colocamos los estilos.
Anatomia de una regla de CSS
Class con metodología BEM
BEM es nombrar las clases siguiendo el patron: BLOQUE_ELEMENTO-MODIFICADOR, separando los nombres del bloque y el elemento con doble guio bajo (__), el nombre del modificador del bloque o elemento con un guion bajo (_) y las palabras separadas con un guion (-)
Pseudoclases y pseudoelementos
Se manda a llama a lo que queremos darle estilo, para la pseudoclase, colocamos (:class) (hover, active, etc) y en {} la accion que queremos que pase, para definir el estilo de un estado especial de un elemento. Y para el pseudoelemento, colocamos (::element) (after, before, first-letter) y en {} lo que queremos que pase para definir el estilo de una parte especifica de un elemento.
Modelo de CAJA
TIP: Hay una forma de hacer que CSS calcule el tamaño de un elemento (width o height, por ejemplo), restándole cierta cantidad.
Por ejemplo:
Imagina que quieres colocar 2 cajas dentro de una caja padre y quieres que cada una tome el 50% de ancho, pero que cada una tenga un margen a la izquierda de 10px. Si colocas width de 50% a cada caja y además le colocas margen, esto hará que las cajas queden una arriba de la otra, porque al agregarle 20px de espacio en márgenes, vas a hacer que ya no ajuste el 50% a cada caja.
Para hacer que ambas cajas sigan tomando el 50% contando los márgenes, puedes hacer lo siguiente:
.caja-hijo{
Width: calc(50% - 20px);
}
HERENCIA en CSS
INHERIT: Usa el valor del padre
INITIAL: se dara el valor inicial y predefinido por el navegador
UPSET: si tiene padre, heredara su valor, si no, dara el valor de INITIAL
¿Cómo se controla el orden al declarar CSS?
Primero cargara el estilo que el navegador decida. Luego las declaraciones de nuestro .css. Y por ultimo, declarara los important (!important) en nuestro .css.
Nuestro VS code, cuando colocamos el cursor encima de las declaraciones de nuestro .css nos dira el numero de especifidad.
Conbinadores
Al generar estas combinaciones, tendremos una especifidad mas alta combinando multiples selectores.
El “+” quiere decir que se le pondrán los estilos al adyacente de la primer etiqueta, en el caso del ejemplo, se le darán al p que este debajo de un div
El"~" quiere decir que le aplicara los estilos a todas las etiquetas que esten en la misma linea que la primer etiqueta, en nuestro ejemplo, a todos los p que esten en la misma linea que un div se le aplicaran los estilos
El “>” quiere decir que se le aplicaran los estilos a todas las etiquetas dentro (directamente) de la primer etiqueta, en nuestro ejemplo, se le aplicaran a todos los p directamente dentro de un div
Si ponemos una etiqueta seguida de otra, significa que es descendiente, entonces se le aplicara el atributo a todas las etiquetas llamadas dentro de la primer etiqueta, directa o indirectamente, como en el ejemplo, se le aplicaran a todos los p dentro de algun div.
Medidas
Absolutas: px, cm, mm, in, pc
Relativas: %, em, Rem.
Max/Min height/widgth.
Viewport.
EM
EM es una medida relativa, que es un acronimo “elemento”, osea que va a tomar el tamaño de fuente que tenga el padre directo. Si no tiene padre directo, sera el tamaño del HTML que viene de por defecto 16px, nosotros podemos jugar con esto colocando diferentes tamaños de padre y el em se adaptara según el padre.
REM
Otra medida relativa, que hara lo mismo que EM con la diferencia que REM siempre va a referenciar a el tamaño que tenga el HTML. Pero para facilitar el uso de REM que es lo que deberiamos realizar, un truco es en style.css es colocar al atributo HTML un font-size: 62.5%, con esto significa que 1 REM=10px, y asi sera mas facil
Min/Max width
VW y VH son medidas porcentuales que hablan sobre el tamaño del viewport, ambas medidas se basaran en el tamaño de pantalla, x ejemplo, si a un div le ponemos 80VH tendra el 80% de la altura del viewport.
Cuando usamos el min/max-width/height, el contenedor se hara mas grande o pequeño hasta el limite que nosotros le demos
Border
Estilo de borde CSS
La border-stylepropiedad especifica qué tipo de borde mostrar.
Se permiten los siguientes valores:
dotted - Define un borde punteado
dashed - Define un borde punteado
solid - Define un borde sólido
double - Define un doble borde
groove- Define un borde acanalado en 3D. El efecto depende del valor del color del borde.
ridge- Define un borde ondulado en 3D. El efecto depende del valor del color del borde.
inset- Define un borde insertado en 3D. El efecto depende del valor del color del borde.
outset- Define un borde de inicio 3D. El efecto depende del valor del color del borde.
none - Define sin borde
hidden - Define un borde oculto
La border-stylepropiedad puede tener de uno a cuatro valores (para el borde superior, el borde derecho, el borde inferior y el borde izquierdo).
Display FLEX
Flex: para utilizarlo siempre hay que tener un contenedor padre que usara el display:flex. flex nos ayudara a manejar las cajas de una mejor manera. Se le coloca a un container.
*flex-wrap: wrap; → Acomoda los elementos dependiendo del viewport width del usuario, y si no hay más espacio baja los elementos ya que no caben el ancho.
*justify-content nos permite alinear los elementos de forma horizontal. align-items hace lo mismo pero verticalmente.
*box-sizing: border-box; → Suma el padding y el borde con el width del elemento. Si aumenta el padding o el borde, el width disminuye para no generar un scroll horizontal. Lo mismo al contrario en caso de que aumente width. Esto se hace para que el elemento ocupe lo que le indicamos y no más.
flex-grow → Toma el espacio que sobra para que no haya espacios en blanco. Al darle el valor 1 toma el espacio sobrante que deja otro elemento.
flex-basis → Define el tamaño que tendrá un elemento antes de que se distribuya al tamaño restante.
align-items: strech; → Estira los elementos al 100% del valor de su contenedor padre. Ocupa todo el espacio vertical.
baseline → Toma solo el alto de su contenido. Lo limita a su propia altura.
order → Cambia el orden de los hijos del contenedor padre.
POSITION
Salvo en la position static, en todos podemos empezar a mover los elementos con las etiquetas respectivas a cada direccion
Absolute: pierde su posición en el box y se superpone a los demas
VARIABLES
:root se utiliza para hablar del punto de partida del proyecto y lo utilizaremos siempre para hablar de variables. Luego en las propiedades se colora (–) y se puede colocar por ejemplo:
:root {
–primary-color: red;
–secundary-color: blue;
–header-size: 4rem;
–font: 1.8rem;
}
Luego, en las propiedades de las etiquetas, se utiliza como por ejemplo:
Background-color: var (–primary-color)
WEB FONTS
Las fuentes debemos colocar el (link de google fonts) en el HEAD del HTML y en el CSS debemos colocar el CSS que google font nos da como font-family
Responsive design
Hay muchas tecnicas para hacer responsive design, pero la mas util es “mobile first”, est ase hace empezando a desarrollar el codigo para una aplicación mobil y de ahí escalarla a una desktop.
Esto se puede hacer desde un CSS con la etiqueta
@media (min-width:…)
O desde el HTML linkeando distintos CSS colocado media="screen and (min-width:…)
Mostly Fluid
Se utiliza cuando tenemos contenedores. Se basa en ir de un mobile a una tablet vertical, luego horizontal y luego a desktop.
Layout shifter
Se utiliza cuando tenemos contenedores padres con mas contenedores adentro, limitando el crecimiento del contenedor padre
Column drop
Se basa en ir arrojando los contenedores a medida que crece el viewport.
Recomendación
Separar tus archivos CSS por break point.
Mobile.css/style.css
Tablet.css
Desktop.css
Utilizar MyDevice para los viewports
Usar la etiqueta <picture>, dentro entrara nuestro img y tambien un <source media="(min-width:…)" srcset""> donde colocaremos imágenes para cuando al dispositivo le convenga cargar una imagen mas pequeña
