Elementos de Boostrap

Componentes

Adicional a las diferentes clases que tiene bootstrap para gestionar la visualización y el diseño responsivo, posee una serie de componentes prediseñados con sus respectivas funcionalidades que responden a la interacción del usuario.

Read More

Desarrollo Web

Desarrollo de Software

Secuencia de actividades que realiza un equipo de desarrolladores para generar un conjunto coherente de productos.

El desarrollo de software se refiere al proceso de creación de productos digitales como aplicaciones, páginas web, servicios web, aplicaciones móviles, entre otros. El desarrollo de software no se limita a la programación de un sistema, sino que implica trabajo relacionado con el análisis, planeación, implementación, pruebas, despliegue y mantenimiento de un sistema.

Read More

Metodologías CSS

Priorización de Estilos

Existen diferentes formas de agregar estilos a un documento de HTML y así mismo existen diferentes formas de definir la apariencia y configuración de un elemento HTML. En este sentido, es importante entender cuales estilos tendrán más relevancia que otros:

  1. Estilos por defecto, es decir los estilos específicos de cada navegador definidos por su usuario agente.
  2. Atributos de HTML, como width="" o height="".
  3. Código CSS, ya sea interno o externo, dependiendo el orden de escritura, priorizando el último.
  4. Aplicar estilos a un elemento HTML directamente con el atributo style="".

Aplicar estilos con el atributo style se considera mala práctica, pues no permite la reutilización de estilos a otros elementos

La palabra clave !important se puede agregar a una declaración de css en cualquier regla para priorizar un estilo sobre las demás declaraciones. Esta se considera mala práctica ya que puede llegar a causar una completa reestructuración de código en el futuro. También es sinónimo de que el sistema de clases no está bien definida.

Read More

Selectores Avanzados

Básicos

un selector es la forma en la que seleccionamos los elementos de nuestro html que deseamos modificar, estos selectores pueden hacer referencia a grupos de elementos o a elementos específicos y se puede escribir de diferentes maneras.

CSS Selectors

Selectores CSS

Read More

Storage

Introducción

Las páginas web suelten utilizar una base de datos para almacenar datos persistentes, sin embargo, estas bases de datos al ser tan grandes se guardan en un servidor, y solemante se puede acceder a ellas a traves de una aplicación del lado del servidor, o un servidor web. De esta forma, la parte visual de una página se comunica con el servidor web y éste se encarga de administrar los datos.

Sin embargo, muchas veces una página requiere guardar datos sin necesitdad de una base de datos, esto se utiliza para manejar algunos estados de las vistas de la página (Como autenticación de usuarios o algunas configuraciones y preferencias de sitio), por lo que se utiliza un almacenamiento más pequeño en cada dispositivo donde el usuario acceda a una página.

Este almacenamiento tiene diferentes formas, entre las cuales podemos encontrar las Cookies, que son datos que se envían constantemente a un servidor (como tokens de autenticación o estadisticas de uso de un sitio), el LocalStorage que almacena datos que se mantienen unicamente en el navegador, pero tienen más capacidad (5MB) y no se borran con el tiempo, y el sessionStorage el cuál almacena los datos también en el navegador, pero se limpia cada vez que se finaliza una sesión de la página web.

Este tipo de almacenamiento se basa en un sistema de clave-valor por lo que los datos (valor) están asociados a una clave.

HTML Web Storage API

Cookies vs localStorage

Read More

Formularios

Estructura HTML

Un formulario es una forma de manipular datos del usuario, ya sea un registro a una página, un inicio de sesión o una suscripción, la forma en la que el usuario ingresa esos datos es por medio de inputs y permite su manipulación por medio de botones. Para crear un formulario se utiliza la etiqueta:

  • <form>

Cuando un formulario es completado, usualmente lo datos se envían a un servidor para ser tratados y validados, cuando pasa eso a veces la página se redirige a otra o simplemente aparece un mensaje de validación.

Read More

Estructura HTML/CSS

Estructura de Contenedor / Contenido

Contenedores

Se considera contenedor a cualquier elemento HTML que tenga etiqueta de apertura y cierre, sin embargo según la etiqueta se define el modelo de contenido que puede almacenar.

Los contenedores son espacios de almacenamiento de código HTML, en donde podemos organizar, estructurar y diseñar nuestra página web.

Existen diversos tipos de contenedores, inicialmente tenemos el contenedor Raiz del documento, el cuál se crea con la etiqueta <html> y tenemos el contenedor de todos los elementos visuales, el cual se define con la etiqueta <body>.

Read More

Objetos JavaScript

Introducción

Javascript es un lenguaje multiparadigma, entre los que se encuentra que es basado en objetos (prototipos), esto significa que todo en javascript es un objeto, cada objeto es simplemente una colección de propiedades y funciones. Se puede acceder a dichas propiedades o funciones a través del identificador del objeto, un punto y el identificador de la propiedad o función.

1
2
3
4
5
// console es el objeto, log es una función de dicho objeto
console.log('Hola Mundo')

// document es el objeto, write es una función de dicho objeto
document.write('<h1>Hola Mundo</h1>')
Read More

Javascript

Introducción

JavaScript es un lenguaje de programación y de scripting multiplataforma, multiparadigma y de alto nivel, que es interpretado en un navegador web o en un entorno de ejecución como nodejs.

Un Script se trata de una secuencia de comandos o pequeñas funcionalidades que se interpretan y ejecutan en un ambiente. En páginas web, estos scripts pueden agregar dinamismo al documento y aportar respuesta a la interacción del usuario, para ello JavaScript proporciona métodos que permiten modificar el DOM (Document Object model), manipular datos, utilizar el API de Html y muchas más funcionalidades.

Por otra parte, usando nodejs se puede interpretar el lenguaje del lado del servidor, permitendo crear aplicaciones con un API para comunicarse con otras aplicaciones, así como la posibilidad de conectarse con una base de datos para manipular y procesar la información con alguna lógica de negocio.

Read More