Entra al mundo tech creando tu CV
En FirebaseMX creemos en acortar la brecha de la inclusión femenina en tecnología, tú también puedes diseñar, programar y crear tecnología, para prueba basta un post.
No hay mejor manera de entrar al mundo de la programación que hacerlo de golpe, y es por ello que vamos a crear la primera parte de nuestro Curriculum (hoja de vida) virtual con HTML5 (HTML, CSS3, JS).
Las herramientas
Para este pequeño ejercicio vamos a utilizar un par de herramientas geniales, que nos permiten crear paginas web de forma instantanea (de golpe).
¿Qué es HTML?
Con HTML vamos a “maquetar” nuestro CV, esto es: colocar la estructura de la pagina web, para determinar que secciones va a tener y cual es su contenido, además de colocar las etiquetas adecuadas.
HTML es un lenguaje de marcado de hipertexto. uff, ¿qué es todo esto?, simplemente es texto pero que una vez que es interpretado por el navegador se convierte en una pagina web.
Vamos a escribir las secciones de nuestro CV:
Existen muchas etiquetas que se ocupan para diferentes propósitos, sin embargo podríamos escribirlo todo con la etiqueta más común: <div></div>`, la mayoría de las etiquetas abren y cierran, pero algunas se cerrarán a si mismas como <img />`, escogeremos las que nos hagan más sentido para nuestro CV, con esto estaremos utilizando “semantica”, esto es que al leerlo podamos entenderlo sin siquiera ver el resultado interpretado.
<section>
<div id="poligon" ></div>
<h2>Héctor BlisS</h2>
<img src=”linkATuFoto" alt=”bliss”>
<p>Fullstack developer</p>
</section>El resultado de esto es nuestra portada de CV, maquetada, por ahora no se ve genial, pero es un principio.
¿Qué es CSS3?
Es hora de ponerlo bonito.
CSS es la herramienta diseñada específicamente para poner bonito el html, es una herramienta muy extensa, en esta ocasión vamos a usar solo algunos de sus atributos y selectores para entender cómo funciona. El selector que vamos a utilizar para nuestro CV va a ser el “selector de clase”, el “selector de etiqueta” y el “selector de id” lo cual consiste en seleccionar las etiquetas HTML en base a la clase que contienen, el tipo de etiqueta que es o su identificador.
Una clase será un nombre a un grupo de propiedades que cambiarán la etiqueta y se coloca en la palabra class=”” de la etiqueta HTML
Teniendo esto en mente comenzaremos colocando un tamaño fijo a nuestra portada en el section con el selector section, y colocaremos también un background de color.
section{
height:250px;
background: linear-gradient(to left, orange, red);
text-align:center;
padding-top:10px;
}Agregamos también un `padding-top`, esto nos ayuda a dar un espacio entre el borde superior del section y el contenido.
Toma en cuenta que existen muchos atributos y que aprenderlos todos es muy difícil, pero la practica te ayudará a descubrir algunos muy interesantes, al final de este post te dejo algunos recursos que te gustarán.
Ahora vamos a embellecer nuestro tipo de letra, simplemente cambiando el font-family así como cambiar el color de la letra en el “section” de la siguiente manera:
section{
height:250px;
background: linear-gradient(to left, orange, red);
text-align:center;
padding-top:10px;
font-family:Avenir;
color:white;
}Nuestro resultado es algo así:
¡Pero no hemos terminado!
Vamos a poner aún más bonita nuestra imagen y agregar una figura como card a nuestra portada:
Primero vamos a seleccionar nuestra imagen con CSS usando el selector de etiqueta img y así poder manipularla redondeando sus bordes y dandole grosor y color.
img{
border-radius:50%;
width:100px;
border:5px solid white;
}Observa que también agregamos un ancho fijo a nuestra imagen para evitar que sea o muy pequeña o muy grande.
Es hora de agregar un polígono:
#poligon{
width:300px;
height:270px;
background: black;
clip-path: polygon(10% 0, 100% 27%, 90% 79%, 0 89%);
position:absolute;
left:calc(50% — 150px);
}Observa cómo agregamos una propiedad position:absolute la cual nos permite acomodar el polígono en cualquier parte de nuestra pantalla, pero lo hemos centrado con la propiedad left: y hemos agregado un calculo, queremos que el polígono este perfectamente centrado, así que le dijimos que se colocara al 50%, el problema es que lo coloca desde su lado izquierdo, y necesitamos sea colocado desde el centro, es por ello que le restamos al 50% la mitad de lo que mide el ancho del polígono. ¿Super smart verdad?
Pero una vez que hemos utilizado la propiedad position:absolute es importante usar la misma propiedad pero position:relative en su contenedor padre esto es, en la etiqueta section:
section{
height:250px;
background: linear-gradient(to left, orange, red);
text-align:center;
padding-top:10px;
font-family:Avenir;
color:white;
position:relative;
}Con esto logramos que el polígono se centre solo con respecto de su contenedor padre.
Aunque esto no es exactamente lo que esperábamos:
Tenemos que decirle al polígono cual es su nivel y esto lo hacemos con una propiedad bastante avanzada a la que muchos temen, pero nosotros no le tenemos miedo, y la usaremos: z-index
#poligon{
width:300px;
height:270px;
background: black;
clip-path: polygon(10% 0, 100% 27%, 90% 79%, 0 89%);
position:absolute;
left:calc(50% — 150px);
z-index:-1; // Estamos indicando que esto va atras
}section{
height:250px;
background: linear-gradient(to left, orange, red);
text-align:center;
padding-top:10px;
font-family:Avenir;
color:white;
position:relative;
z-index:1; // y esto va por delante
}
¡Ahora si lo logramos, no es lo más bonito pero lo haz hecho tu misma!
¿Qué es JavaScript?
Hemos llegado a la parte más emocionante y no precisamente la más difícil, ya que CSS puede ser bastante retador, no solo comprenderlo si no, explorarlo pues tiene tantos atributos que pueden combinarse que es difícil recordarlos todos.
Con JavaScript tenemos acceso a programar acciones en nuestras páginas web, y en esta ocasión vamos a programar un comportamiento en nuestra portada, manipulando la etiqueta section, a esto que estamos a punto de hacer se le conoce como “manipulación del DOM” y lo que conocemos como DOM es justo el HTML que escribimos pero que ya vive en el navegador.
Empezaremos por manipular la etiqueta section de la siguiente manera:
let section = document.querySelector(‘section’)Si te fijas estamos almacenando en esta “variable” toda la etiqueta section. Esto nos va a permitir cambiar cualquiera de sus atributos directamente, hagamos un experimento; vamos a cambiar el color de fondo de nuestra etiqueta section accediendo directamente a este atributo:
let section = document.querySelector(‘section’)
section.style.background = "purple"Observa cómo podemos manipular la etiqueta directamente con JavaScript y además estamos modificando el CSS aplicado estilos directamente con JavaScript, cool ha?, para esto fue creado JavaScript y es muy poderoso.
Entonces, ahora que sabemos que tenemos mucho poder con JavaScript, vamos a conocer un par de elementos más de este hermoso lenguaje y crearemos un efecto de cambio de color:
let colors = [“red”,”orange”,”yellow”, “darkorange”]
let section = document.querySelector(‘section’)
let counter = 0Hemos agregado 2 variables más; una para almacenar una lista de colores (Array) y otra para almacenar un contador de posiciones (Number), debemos entender que las posiciones en esta lista tienen un indice que comienza en cero:
Sabiendo esto, vamos a recorrer el array para utilizar uno por uno los colores, pero para lograr esto necesitamos crear una función que se repita y esto vamos a hacerlo con una herramienta más de JavaScript y que además utiliza asincronicidad (wow, ya estás manejando conceptos super pro).
setInterval(changeColors,300)Con esto vamos a llamar a la función changeColors cada 300 mili segundos,
Una función es una porción de código que se puede utilizar en cualquier momento que se invoque o se ejecute
Es hora de escribir la función changeColors y pensar cómo recorreremos los colores, así cómo modificar el background de nuestra etiqueta section
function changeColors(){
if(counter>2) counter=0 // contamos hasta 3 y volvemos a 0
else counter++
let color = colors[counter] // con este indice tomamos un color
section.style.background = color; // usamos el color
}Listo, si probamos este código junto queda de la siguiente manera:
let colors = [“red”,”orange”,”yellow”, “darkorange”]
let section = document.querySelector(‘section’)
let counter = 0
setInterval(changeColors,300)function changeColors(){
if(counter===3) counter=0
else counter++
let color = colors[counter]
section.style.background = color;
}
Y el resultado es hermoso =3
Conclusiones
¿Ya te diste cuenta?, haz creado una página web por tu cuenta, y haz aprendido muchos conceptos avanzados en muy poco tiempo. Claro que esto es solo el principio y cómo lo dijimos antes entramos “de golpe”, pero es un gran inicio para ti.
¿De las 3 piezas de HTML5 (CSS, HTML, JS) cual te ha gustado más?, no importa cuál sea tu respuesta en cada una de estas piezas hay muchísimo más que aprender y hay cosas super interesantes y espectaculares que descubrir. No pierdas más tiempo, es hora de que entres al mundo de la tecnología y desarrollo web.
Date una palmada por lo que haz logrado, ¡no ha sido fácil!
Pero tú puedes con todo. Feliz día internacional de la mujer. #FirebaseMX
¡muéstraselo a tus amigos!
