PERFILES – WEB DEVELOPER

FRONT-END: ES LA PARTE DE UN PROGRAMA O DISPOSITIVO A LA QUE UN USUARIO PUEDE

ACCEDER DIRECTAMENTE . SON TODAS LAS TECNOLOGIAS DE DISEÑO Y DESARROLLO WEB
QUE CORREN EN EL NAVEGADOR Y QUE SE ENCARGAN DE LA INTERACTIVIDAD CON LOS
USUARIOS.

ESTANDARES: HTML – CSS – JS

FRAMEWORKS DE CSS:

Lossy : Con perdida / imágenes no pesados

1. JPG/JPEG
2.

Lossless: Sin perdida / imágenes pesados

1. Gift
 2. Png8: paleta de 256 colores
3. SVG – VECTOR

ETIQUETA IMG Y FIGURE

<img> nos permite solo colocar una imagen y <figure> permite colocar varias <img> con una
descripción opcional.

OPTIMIZACION DE IMÁGENES

70kb como máximo debe pesar una imagen

Opciones para trabajar con imágenes

Para mejorar el tamaño de las imágenes, utilizar Tiny PNG

Elimina los metadatos de una imagen para hacerlo mas ligera ,utilizar verefix

ETIQUETA DE FORMULARIOS E IMPUT

: Crea cuadros de texto.

<div>
            <input type="text">
            <input type="text">
            <input type="text">
            <input type="text">
            <input type="text">      
        </div>
PLACEHOLDER: RENOMBRAR

ETIQUETA DE VIDEO

La etiqueta control para ver los controles del video y preload ayuda a que el video pueda
cargar de manera más rápida

La etiqueta source , nos permite seleccionar todos los formatos de los videos
La etiqueta <source>, se puede colocar dentro de una etiqueta <video> varias veces, para
especificar diferentes rutas. Esto para asegurar que cualquier navegador pueda mostrar el
video.

CTRL K+CRTL U: PARA CONVERTIR A COMENTARIO

ETIQUETA CALENDARIO

SUBMIT = BOTON ENVIAR

INPUT: TYPE DATETIME-LOCAL : FECHA Y TIEMPO

TYPE MONTH: MES

TYPE WEEK ; SEMANA

TYPE DATE: DIA

TYPE TIME: HORA

ETIQUETA SELECT
INPUT TYPE SUBMIT : lo utilizaremos solo en los formularios

INPUT TYPE BUTTON : lo utilizaremos en cualquier otro tipo de botón .

CSS: documento que aplica todos los estilos personalizados

LINK : Nos permite referenciar donde esta el archivo de CSS que tenemos que jalar

Style: agregar estilos

<p style="font-size: x-large;">soy un texto</p> ( tamaño de la letra)

<p style="color: blue;">soy un texto</p (color de la letra)

 article: diferencia partes del contenido que pueden vivir por sí mismas.
 nav: para hacer menús de navegación.
 aside: contenido menos relevante, como publicidad, etc.
 section: sirve para diferenciar las secciones principales del contenido.
 header: cabecera del documento.
 footer: pie de página del documento.
 h1 - h6: títulos de nuestro sitio web.
 table: tablas de contenidos, similar a la estructura de las hojas de
calculo.
 ul y ol: listas de items.
 div: cualquier división para organizar el contenido.
 h1 a h6: son etiquetas para indicar títulos con un estilo que destaca del
resto.
 article: es la parte de nuestro contenido que puede vivir por sí mismo.
Pueden haber tantos artícle como proyectos o eventos tenga nuestro
portafolio.
 p: define el texto de un párrafo.
 small: aplica una apariencia de texto reducido en tamaño.
 strong: aplica al texto un formato de negritas.
 a: corresponde a un ancla o enlace a una url interna o externa del
documento.
 img: con esta etiqueta podemos enlazar imágenes en el documento.
 figure: le da un contexto semántico a las imágenes.