Frontend

Generalidades y conceptos

• ¿Qué es un navegador web?
• ¿Qué es una URL?
• ¿Qué es un dominio?
• ¿Qué es un hosting?
• ¿Qué es FTP?
• Estructura de un sitio web

¿Qué es un navegador web?

Un navegador o navegador web es el programa o aplicación que te permite acceder a los sitios web que visitas a diario como Google, facebook, youtube, etc, ya que éste interpreta su estructura y te los muestra como el diseñador lo ha planeado. Entre los ejemplos más populares de navegadores web tenemos a Google Chrome, Apple Safari, Mozilla Firefox, Opera e Internet Explorer.

En la actualidad existen gran variedad de navegadores, a diferencia de hace algunos años donde eran muy pocas las opciones para navegar en la web, Microsoft llego a tener un monopolio con su navegador Internet explorer.

Los navegadores tienen un motor (engine), el cual es un programa que se encarga de interpretar contenido representado en html, asignarle un look & feel gráfico usando css y agregando interacción por medio de js

No todos los motores son iguales, por tanto un sitio web, se puede ver de manera diferente en determinados navegadores, desde hace tiempo y gracias a navegadores como Chrome y Firefox, se a procurado un estandar en la interpretación o render de las reglas gráficas y visualización de contenido con la creación de html5

Procurando mayor accesibilidad, los grandes portales y aplicaciones han promovido que los usuarios se muden a navegadores modernos, ya que si se ingresa a aplicaciones como youtube, facebook... desde un navegador obsoleto.

El sitio por lo general no funciona y además aparece un mensaje invitando al usuario a mudarse a un navegador que soporte las nuevas actualizaciones del estandar html5.

¿Cómo es un servidor? (data center)

¿Qué es una URL?

La URL es la dirección específica que se asigna a cada uno de los recursos disponibles en la red con la finalidad de que estos puedan ser localizados o identificados.

Hay un URL para cada uno de los recursos (páginas, archivos, carpetas) que hay en la World Wide Web.

El URL sirve para que podamos encontrar aquello que estamos buscando en la red: una página, un sitio, un archivo, un documento, etc.

URL o ruta absoluta: Incluyen todas las partes de la URL (protocolo, servidor y ruta) por lo que no se necesita más información para obtener el recurso enlazado.

URL o ruta relativa: Prescinden de algunas partes de las URL para hacerlas más breves.

Dominio y hosting

¿Qué es un dominio?

Los dominios son los «nombres» de las páginas en Internet así de simple. Cuando quieres entrar a una página, normalmente escribes el nombre.

Por ejemplo: www.xacarana.com

El nombre de dominio está compuesto por dos partes:

El nombre: El nombre que llevará tu página

TLD: La terminación. Que puede ser .com, .org, .net, .tv y muchas otras opciones. Ésta terminación ayuda a indicar el giro de tu empresa y ubicación: .com-> comercial; .com.mx -> comercial en México; .org-> asociación civil u organización sin fines de lucro; .tv -> canal de televisión

¿Qué es un hosting?

El alojamiento web (en inglés web hosting) es el servicio que provee a los usuarios de Internet un sistema para poder almacenar información, imágenes, vídeo, o cualquier contenido accesible vía web. Es una analogía de «hospedaje o alojamiento en hoteles o habitaciones» donde uno ocupa un lugar específico

¿Qué es FTP?

Es un protocolo de intercambio de archivos, se usa con un programa SFTP te permite subir archivos para tu página web a tu espacio web. También puedes crear una copia de seguridad del sitio web con SFTP. Para ello, copia los datos del espacio web localmente en tu ordenador.

Con un programa SFTP también puedes borrar ficheros y/o carpetas enteras. Si borras contenidos, estos ya no aparecerán para los visitantes de tu página web.

¿Qué es FTP?

Estructura de un documento web

Recomendaciones:

• No usar caractéres especiales (ñ,tildes, simbolos, espacios) para nombras carpetas o archivos.
• Nombras los archivos usando minúscula
• Usar nombres nemotécnicos, es decir que tengan implícito su significado
• Utilice rutas relativas, cuando trabaja de manera local

Estructura de un documento web

Ruta Absoluta

Teniendo en cuanta la estructura de archivos del ejemplo anterior, cuando se ubica un recurso desde la raíz del disco, se debe especificar todo el recorrido hasta llegar a él.

Ruta Absoluta

El recorrido realizado para encontrar el recurso, se indica por medio de los números.

Ruta Relativa

La ruta relativa, se calcula con base a una ubicación actual, para este caso se usa la carpeta sitio, esto facilitará subir la estructura de carpetas a un servidor y no habran problemas de rutas.

HTML

Es un código que utiliza etiquetas para representar la estructura de un documento, una etiqueta es un contenedor con un nombre semántico que representa su contenido. Es una herramienta muy antigüa, pero a pasado por diferentes versiones para mantenerse vigente, según las necesidades de los usuarios y el avance de la tecnología.
Actualmente usamos el estandar html5, el cual esta relacionado directamente con html5, pero se debe entender como la unión de varias tecnologías, como javascript, css3 y la inclusión de nuevas etiquetas html.

HTML

El código html, definirá por tanto los cimientos del proyecto, donde se estructura el contenido usando principalmente texto e imágenes. Esta etapa de la creación de un programa se considera la obra negra, porque todo el contenido aparece con su apariencia gráfica por defecto y carece de detalles como color, tamaño, posicionamiento, entre otros. El estandar XHTML fue muy importante, porque empieza a crear una visión por capas, donde se debe mantener el html como estructura "pura" que refleje solo el contenido del proyecto, sin tener dependencias.

HTML

El código html, es por tanto el soporte para cualquier aplicación, funciona como una capa independiente, a la cual se le puede extender su funcionalidad por medio de otros elementos como las hojas de estilo y javascript.

HTML

Para crear un código html escalable y bien construído se recomienda prestarle atención a los siguientes pasos:

No se deben escribir atributos en las etiquetas que modifiquen su apariencia gráfica. (Excepción width, height)

Cada etiqueta debe abrirse y cerrarse.

HTML

Se deben usar las etiquetas correctas para representar el contenido, por ejemplo un párrafo debe usar la etiqueta p y no un div, funcionan parecido, pero semánticamente p es más representativo.

Las tablas solo se usan para mostrar datos relacionados, no se debe usar para maquetar una interfaz.

Usar el doctype estandar definido por htlml

							
								<!doctype html>
							
						

HTML

Usar el conjunto de caractéres correcto

Algunas etiquetas importantes: p, div, a, img, iframe, span, entre otras. Para una completa referencia se recomienda visitar el sitio w3schools

CSS

Son las reglas gráficas que pueden ser aplicadas a los diferentes contenidos, por medio de los estilos se define propiedades como el color, el tamaño, la posición y un sin número de propiedades que manipulan la presentación de un elemento en el documento html.
Se considera por tanto una capa dependiente de la existencia del html, pero debe crearse completamente desacoplada del código, para poder cambiar el look de la aplicación sin alterar su contenido o funcionamiento.

CSS

El estandar html5, extendio la funcionalidad para manipulación de la interfaz gráfica y se incluyeron nuevas reglas denominadas CSS3.

CSS - USOS

Existen varias formas de crear y usar hojas de estilos o reglas de estilos en un documento html, a continuación se analizarán sus pros y contras.

CSS - USOS

Es responsabilidad de los implicados en la elaboración del código html y las hojas de estilo, mantener aislada una cosa de la otra, es decir no mezclar la capa de html con la capa de css. Por tanto se debe procurar siempre tener un archivo html y un archivo css (main.css). Su forma de relacionarse debe ser solamente a través de un vínculo o referencia.

CSS - USOS

Pros

• Mantiene una independencia entre el código html y las hojas de estilos
• Permite cambiar el look de la estructura html, con solo cambiar el nombre del archivo de estilos
• Se puede desarrollar en paralelo el html y el look del documento
• Mantiene el proyecto ordenado
• Centraliza la escritura de reglas gráficas

CSS - USOS

Contras

• Si el archivo de estilos no carga, el código html tendrá problemas de render de la interfaz gráfica
• Si la hoja de estilos es un archivo pesado el render del documento tendrá una visualización lenta dependiendo de la condiciones de conexión a internet y navegador usado para visualizar el documento
• El abuso de vínculos a diferentes hojas de estilo, impacta el performance del documento, porque por cada vínculo se requiere crear una petición con el servidor

CSS - USOS

Existe otra forma de incluir estilos directamente en el encabezado ("head") del documento html, se debe procurar solo usar esta forma de escribir cuando se quiere probar propiedades de estilos mientras se construye el sitio. Una vez probada y validada la funcionalidad, se deben poner las reglas en la hoja de estilos a parte del html.

CSS - USOS

Pros

• Permite escribir y probar rápidamente reglas en el documento actual
• Permite tener un panorama del documento e interactuar mejor con él
• Se requiere un solo archivo para mantener la información del documento

CSS - USOS

Contras

• Los estilos dependen de la vista, si es necesario modificar una propiedad del documento se debe modificar la vista específica
• No permite cambiar fácilmente el look de un documento
• Crea desorden en el proyecto
• Incrementa el peso del documento html

CSS - USOS

Todas las etiquetas html, tienen un atributo que permite definir reglas de estilos directamente en la etiqueta. Esta es la forma que crea más acoplamiento entre la vista y la estructura del código html, se debe evitar su uso. En la práctica, solo se usa esta forma de poner estilos cuando se esta construyendo un boletín o newsletter que será enviado por correo electrónico. (El correo electrónico puede ser visualizado en diferentes herramientas limitadas gráficamente y sin interacción)

CSS - USOS

Pros

• Las reglas de estilo, viajan con el html
• Sobreescribe reglas directamente en el elemento html
• Permite validar reglas gráficas en tiempo de contrucción
• No requiere del uso de selectores para aplicar reglas de estilo

CSS - USOS

Contras

• Se vuelve muy complicado modificar el look del documento, ya que se debe cambiar etiqueta por etiqueta el estilo
• Encontrar errores es una tarea complicada
• El código html se vuelve difícil de leer

CSS - Selectores

Para mantener la independencia de la aplicación de estilos de la estructura del documento, se debe relacionar el html con el css solamente a través de selectores.
Como su nombre lo indica, los selectores permiten seleccionar que parte de la estructura va a ser afectada por una regla gráfica. Es muy sencillo de aplicar este concepto, pero es responsabilidad de los contructores del documento de usar correctamente los selectores como enlace entre la estructura del documento y el look de presentación.

CSS - Selectores

Identificador: Es un selector para seleccionar un único elemento html. Se usa un nombre para identificar el elemento, se espera que el creador del documento cree un nombre único por elemento. Si se usa el mismo nombre para varios elementos, los resultados pueden ser inesperados.

CSS - Selectores

En el html

En el CSS

CSS - Selectores

Clase: Permite seleccionar un conjunto de elementos que compartan la misma clase. El selector de clase por tanto agrupa bajo una clase elementos del html los cuales pueden ser incluso diferentes.

CSS - Selectores

En el html

En el CSS

CSS - Selectores

Tipo: Utiliza el nombre de la etiqueta para crear las reglas, que serán aplicadas a todos los elementos del tipo definido por el estilo en el documento. Se debe usar con precaución y casi siempre es el último recurso, ya que en documentos muy grandes su uso puede tener resultados inesperados.

CSS - Selectores

En el html

En el CSS

Otras formas de seleccionar

En CSS Diner puedes practicar los selectores explicados anteriormente y además aprender otras formas de seleccionar elementos html.

CSS - Funcionamiento

El motor del navegador, se encarga de leer de arriba hacia abajo el archivo de reglas gráficas y aplicarlas "inmediatamente", por tanto es posible redefinir una regla gráfica con solo usar el identificador y cambiar las reglas aplicadas.

CSS - Funcionamiento

Aplicación corriente de una regla a un elemento html

Html

CSS

Resultado

CSS - Funcionamiento

Sobreescritura de una regla, por orden de lectura

Html

CSS

Resultado

CSS - Funcionamiento

Sobreescritura redefiniendo la clase

Html

CSS

Resultado

CSS - Funcionamiento

Es posible darle prioridad a una regla, para evitar que sea sobreescrita o para evitar que se sobreescriba

Html

CSS

Resultado

*Los estilos de un selector se deben asignar en un solo sitio

CSS - Propiedades

display: Define como va a ser interpretada la visualización del elemento html por parte del navegador, existen diferentes tipos de display, vamos a revisar algunos de los más importantes.

CSS - Propiedades

El documento html, se puede ver como una página de un cuaderno, llena de reglones, que van desde el principio de la margen izquierda hasta el final de la margen derecha.

• ¿Cómo saber la diferencia entre displays?
• Entender CSS display

CSS - display

in-line: Indica que el elemento tiene las siguientes características:

• Horizontalmente ocupa el tamaño definido por su contenido
• Se pueden mostrar varios elementos en línea, siempre y cuando el ancho del contenido no supere el ancho total del documento
• El tamaño vertical del reglón donde se muestra el elemento, se determina por el alto mayor de alguno de los elemento en el mismo reglón

CSS - in-line

• Para saltar de línea o crear un nuevo reglón se debe usar la etiqueta break line, ya que un enter en el código html no es tenido en cuenta
• Si el ancho del documento cambia, los elementos en línea tienen en cuenta el nuevo ancho para redistribuirse en el reglón al cual pertenencen
• El elemento debe tener contenido para poder ser visualizado
• Simula el comportamiento que tiene la mínima expresión de información conocida como un carácter en un documento.
• Pueden haber múltiples caracteres en el mismo reglón

CSS - in-line

Html

CSS

Resultado

CSS - display

block: Indica que el elemento tiene las siguientes características:

• Horizontalmente siempre ocupa el ancho total del documento
• Solo se muestra un elemento por reglón
• El tamaño vertical depende del contenido del elemento

CSS - block

• Hay un salto de línea cada vez que se crea un elemento con este display
• Si el ancho del documento cambia, el contenido se adapta horizontalmente
• El elemento no necesita contenido para poder ser visualizado
• Simula el comportamiento de un parrafo en un documento.

CSS - block

Html

CSS

Resultado

CSS - display

none: Sin visualización, esto permite que el elemento no se muestre, pero esta presente dentro de la estructura del archivo html.

Visibility

Al asignar el valor none a display, el elemento se oculta y el espacio que ocupa el elemento se colapsa (#box_05). Visibility, oculta el elemento, pero reserva el espacio que ocupa (#box_03)

Html

CSS

Resultado

HTML y CSS - Generalidades

• Comentarios (Desactivar un conjunto de reglas)
• Prefijos
• Modelo de color (RGB)
• Sintaxis correcta
• Combinar clases
• Abreviación de reglas de estilo
• Herramientas de desarrollador

HTML y CSS - Comentarios

El código html y las reglas de estilos, son instrucciones que entiende el motor del navegador y le permite interpretar gráficamente la interfaz de un documento y "pintarla" en el navegador.

HTML y CSS - Comentarios

Cuando se crea un documento, es importante poder realizar ciertas "anotaciones" sobre el archivo html y sobre la hoja de estilos.

• Para reconocer secciones dentro del archivo
• Poner información de autoría
• Información de uso de clases o etiquetas
• Deshabilitar parte de la estructura
• Para evitar que se aplique alguna propiedad gráfica

HTML - Comentario

Para comentar líneas o bloques de código se usa la siguiente sintaxis

Comentario múltiples líneas

Comentario de una sola línea

CSS - Comentario

Para comentar líneas o bloques de reglas de estilo se usa la siguiente sintaxis

Comentario múltiples líneas

Comentario de una sola línea

CSS - Prefijos

El nuevo estandar CSS3, procura que todas las reglas de estilos se apliquen correctamente en los diferentes navegadores propietarios, por tal motivo desarrollo una sintaxis de prefijos, que agregandose a ciertas reglas, se puede espeficar los valores que va a tener la regla en un navegador especifico, como se muestra a continuación.

Modelo de color - RGB

El modelo de color que se debe usar en insumos para internet o para pantallas, es el modelo de color RGB, el cual representa los colores por medio de longitudes de onda primarias, como el rojo, el verde y el azul. Apartir de la adición de estos colores podemos representar 16,7 millones

Modelo de color - RGB

Intente construir colores complementarios utilizando la anterior tabla

Se recomienda usar adobe kuler para encontrar paletas de colores populares. Para consultar los principales códigos de colores quackit.com

Sintaxis correcta

El código html y las hojas de estilos son interpretadas por el motor del navegador, si existe un error el navegador tratara de avisarnos, pero por lo general el control de errores depende del creador del documento, se recomienda seguir algunas buenas prácticas para evitar errores.

• Evitar el uso de caráctes especiales
• Usar entities para representar símbolos como ñ,tíldes..
• No usar espacios para nombrar identificadores o clases
• Escribir todo el código en minúscula

Sintaxis correcta

• Usar palabras nemotécnicas para nombrar identificadores o clases
• Usar un editor de texto que permita validaciones de código
• Prestar atención a los punto y coma para finalizar reglas de estilo
• Identar apropiadamente el código y las reglas de estilo
• Abrir y cerrar llaves

CSS - Combinar clases

Es muy frecuente encontrar en aplicaciones modernas, la combinación de varias clases para lograr ciertas funcionalidades por parte de la interfaz gráfica, permitiendo una modularidad en la implementación.

Clases CSS

Uso en html

Abreviación de reglas

Las reglas de estilo permiten escribir una regla de manera detallada y personalizada por medio de una instrucción específica, por cada detalle (color, fondo, unidades).

Algunas reglas permiten definir de golpe en una sola instrucción varias características gráficas.

• background
• border
• margin
• padding
• font

Background

La propiedad background permite asignar un fondo de color, una imagen de fondo, definir la ubicación del fondo, asignar varias imágenes entre otras características.

Background

En el siguiente ejemplo se puede ver el uso largo o abreviado de la propiedad.

Html

CSS
  

Resultado

Herramientas de desarrollador

• Es una funcionalidad que traen algunos navegadores como chrome o firefox, para poder inspeccionar e interactuar con el html, css y js de cualquier pagina web.
• Permite editar en caliente las propiedades y ver el resultado en el navegador.
• Se accede facilmente, por lo general, simplemente se presiona click derecho en cualquier parte de la pagina web, y luego se selecciona inspeccionar.

Herramientas de desarrollador

Formatos de imágenes

Usar el tipo de imagen correcto, según la información gráfica que se necesita visualizar es clave para una buena experiencia de usuario. Los formatos usados para la web, utilizan un modelo de color RGB creado para pantallas de luz, con respecto a la resolución, depende de una relación entre peso y calidad del archivo.

JPEG Joint Photographic Experts Group

• Estandar de compresión y codificación de archivos e imágenes fijas creado en 1992
• El más usado en la web, pero no necesariamente es el mejor
• Se basa en dos fenómenos visuales del ojo humano: capta mejor cambios de brillo que de color
• Formato con pérdida acumulativa al comprimir, pero muy flexible a la hora de ajustar grado de compresión
• Conveniente para archivos que contengan grandes áreas de colores sólidos

PNG Portable Network Graphics

• Originalmente PNG era un acrónimo recursivo que significa que significa PNG no es GIF
• Desarrollado para solventar las deficiencias del formato GIF, permite almacenar imágenes con una mayor profundidad de contrastes y otros datos importantes
• Imagen para mapa de bits de hasta 24 bits
• Compresión sin pérdida 8bits - 24bits
• En imágenes con mapas de color continuas actúa mejor que JPEG

GIF Compuserve GIF

• Creado en 1987
• Formato de intercambio de datos de imagen para mapas de bits de hasta 256 color (8 bits) como máximo
• Muy buena calidad afinando bien el nivel de color y la compresión (si no, se granula)
• Soporta animación, varias pantallas dentro del mismo archivo y transparencia
• Ideal para imágenes pequeñas, animadas y de pocos colores, como los banners.

Principales usos GIF, PNG y JPG

SVG - Scalable Vector Graphics

Es un lenguaje de marcado XML para describir gráficos vectoriales en dos dimensiones. Básicamente, es a los gráficos lo que HTML es al texto.

SVG - Scalable Vector Graphics

Los gráficos SVG, son livianos, permiten representar una imágen por medio de fórmulas mátematicas llamadas primitivas (circulo, línea, cuadrado), es un formato compatible con programas de diseño como illustrator, affinity, sketch, figma, adobe xd.

Se usa para realizar patrones de fondo, íconos, logos. Funciona similar al formato de las tipografías.

Herramientas para editar y optimizar imágenes

Optimizar los insumos gráficos es una tarea manual que todavía es realizada por los roles que se encargan de la interfaz de usuario. Web UI, maquetador, ingeniero frontend.

Recomendaciones para el uso de imágenes

• Redimensionar las imágenes al tamaño en el cual apareceran en el html, no dejar esta responsabilidad al html o al css
• Optimizar la imagen al formato adecuado y tamaños correctos, según el diseño.
• Diseñe para moviles primero
• Cargue pocos recursos
• Use un CDN para carga de recursos

Optimizar imágenes PNG

El formato png no soporta compresión, para poder optimizar este tipo de archivo es posible recurrir a herramientas en línea como tinypng.com este sitio permite bajar el peso del archivo de una manera muy simple, arrastrar, soltar y luego descargar.

Otras opciones compressor, pngquant y imagekit

APP híbrida

1. Especificaciones técnicas
2. Prueba de ancho
3. Wireframes
4. Single APP / Estructura

Especificaciones técnicas

Para aprender a crear una primera aplicación, recomiendo empezar con los fundamentos del html y css que ya vimos.

Luego conseguir un celular smart phone, con sistema operativo Android pra realizar las primeras pruebas, por su facilidad para crear aplicaciones, y tenerlo como referencia para las medidas, para crear la interfaz gráfica.

Al principio, se debe dar prioridad a que se vea bien y funcione al menos en el dispositivo seleccionado, no es preocupación que se vea bien en varios dispositivos.

Especificaciones técnicas

La interfaz debe verse BIEN y funcionar BIEN en un solo dispositivo (el seleccionado).

Para el diseño la medida más importante es el ancho de la pantalla del celular, el alto no es tan relevante, ya que realizar scroll es un hábito que ya han desarrollado en el usuario aplicaciones como twitter, facebook e instragram.

Centrarse en HTML, CSS y Javascript puro, sin librerías, sin frameworks, ya que estas en un proceso de aprendizaje, usar herramientas por lo general distrae del principal objetivo: Entender como se construye cada parte de la interfaz

Especificaciones técnicas

Se programará la aplicación, usando principalmente selectores, eventos, funciones y variables.

Usar Vanilla Javascript*, es decir javascript nativo el que soporta por defecto cualquier navegador.

NO usar Jquery, ya que esta es una librería,
que además es poco eficiente.

Prueba de ancho

Como ya mencionamos lo más importante para el diseño y funcionamiento de una aplicación es el ancho del dispositivo. No es el ancho de la pantalla, sino el ancho de las aplicaciones dentro de la pantalla es decir el viewport.

Para evitar el dolor de cabeza que requiere hacer que una aplicación funcione correctamente en diferentes dispositivos. Se recomienda empezar con una aplicación que funcione bien en un solo celular, la primera vez es una decisión crucial para tener una aplicación completa.

Prueba de ancho

Cada marca y cada actualización es un mundo diferente, el cual con calma se puede entender, pero hay que ser de la tendencia: app working first.

La prueba del ancho por tanto se puede hacer abriendo esta url en el celular seleccionado, y cambiar los valores de ancho y alto, hasta que el div con color plano de fondo alcance a llenar el ancho de la pantalla.

wireframe

Es un gráfico que permite visualizar las pantallas (vistas) de un sitio web o aplicación, se utiliza como herramienta de comunicación con el equipo y con el cliente.

Se recomienda siempre hacer dos wireframes, uno manual, donde con lapiz y papel se empieza a pensar el contenido (arquitectura de la información" que tendra cada sección.

wireframe

Cuando se finaliza el gráfico manual, se pide la validación del cliente, convirtiendose este documento, en el contrato, el compromiso desde la interfaz con el cliente.

Por último se recomienda volver a hacer el gráfico pero de manera digital, teniendo el wireframe manual como insumo.

El equipo de trabajo se compromete solo a realizar lo que se acuerde en el wireframe, si aparece algo nuevo, se debe volver a ajustar el documento.

Wireframe - Herramientas

Herramientas para editar los gráficos digitales online.

• Mockflow
• Pencil
• Balsamiq
• Visio

Wireframe - Ejemplo

Single APP

Una aplicación debe ser un archivo que debe estar optimizado en tamaño, diseñarlo bien, y ser cuidadosos de los detalles es claves para mantener en lo mínimo el consumo de recursos.

Hay una primera estrategía para aplicaciones pequeñas, de pocas secciones, y son las aplicaciones híbridas.