JavaScript

¿Qué es JavaScript?

Javascript es un lenguaje de programación que permite a los desarrolladores crear acciones en sus páginas web. Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas​ aunque existe una forma de JavaScript del lado del servidor (Server-side JavaScript o SSJS). Su uso en aplicaciones externas a la web, por ejemplo en documentos PDF, aplicaciones de escritorio (mayoritariamente widgets) es también significativo.

Características de JavaScript

• Conozcamos ahora las características de JavaScript que haces de este lenguaje, uno de los más populares en la actualidad.
• Es Liviano.
• Multiplataforma, ya que se puede utilizar en Windows, Linux o Mac o en el navegador de tu preferencia.
• Es Imperativo y estructurado, mediante un conjunto de instrucciones indica al computador qué tarea debe realizar.
• Prototipado, debido a que usa prototipos en vez de clases para el uso de herencia.
• Orientado a objetos y eventos.

• Es Interpretado, no se compila para poder ejecutarse.

Diferencias entre Java y JavaScript

Dada la similitud de nombre suelen considerarse como sinónimos o muy similares cuando existen diferencias apreciables entre las que cabe destacar: * Java es un lenguaje de programación y JavaScript no, aunque ambos comparten la misma sintaxis.

• JavaScript no es un lenguaje compilado. JavaScript se integra directamente en las páginas HTML y es interpretado (sin estar compilado) por el cliente (navegador). Es decir, el programa fuente (página web) se ejecuta directamente.
• JavaScript está basado en objetos, mientras que Java es un lenguaje de programación orientado a objetos (OOP). JavaScript no utiliza clases, herencias o técnicas habituales en la OOP.
• No existe la declaración de tipos de variables a utilizar. JavaScript se encarga de ello automáticamente.
• Las referencias a los objetos se comprueban en tiempo real durante la ejecución. En los lenguajes compilados como Java esa comprobación se efectúa al compilarse.
• JavaScript no puede (no sabe) escribir en el disco duro (excepto cookies). Por ello puede considerarse como un lenguaje seguro en Internet, en el sentido que desde las páginas web, con JavaScript, no se pueden “gastar bromas”.

Formas de Incluir JavaScript

La primera forma de insertar JavaScript en HTML es directa. Puedes hacerlo utilizando la etiqueta <script> </script> que debe envolver todo el código JS que escribas. Se puede agregar el código JS:

entre las etiquetas <head>

entre las etiquetas <body>

Estructura Básica de JavaScript

1. Pre. Comentario informativo de lo que vamos a programar y de que esperamos que haga el programa.
2. Declaración de variables. Una variable es un espacio de memoria que sirve para alojar una información. Un dato como por ejemplo una cadena de texto o un número. En javascript no es necesario declarar las variables, pero es una práctica recomendada para no hacer sufrir a los ordenadores en exceso.
3. Declaración de funciones. Una función es un tipo especial de variable que almacena un cálculo o una acción y que puede o no devolver un resultado.
4. Las funciones a su vez pueden volver a tener todos los pasos del 1 al 6 que se mencionan en este escrito.
5. Declaración de instrucciones. Aquello que queremos que ejecute el script.
6. Dar un resultado o cálculo. Como ejemplo de resultado podríamos tener un texto escrito, un resultado numérico, una modificación de una página web, … etc
7. Post. Enunciado explicativo de lo que ha hecho el programa y que resultado y de que tipo y valor devuelve el programa.

Colocar Comentarios en JavaScript

JavaScript permite insertar comentarios en el código, al igual que la mayoría de los lenguajes de programación. En concreto hay dos tipos de comentarios permitidos, los comentarios en línea que comienzan con una doble barra: //, y los comentarios multilínea, que comienzan con /* y terminan con */.

Tipo de Datos en JavaScript

• Sin definir ( undefined )
• Nulo ( null )
• Lógicos ( boolean )
• Numérico ( number )
• Cadena ( string )
• Símbolo ( symbol )

Variables, Constantes e Identificadores

Variables

Las variables se usan como nombres simbólicos para valores en tu aplicación. Los nombres de las variables, llamados identificadores, se rigen por ciertas reglas.

Un identificador en JavaScript tiene que empezar con una letra, un guión bajo (_) o un símbolo de dólar ($); los valores subsiguientes pueden ser números. Debido a que JavaScript diferencia entre mayúsculas y minúsculas, las letras incluyen tanto desde la "A" hasta la "Z" (mayúsculas) como de la "a" hasta la "z".

Constantes

Puede crear una de solo lectura, llamada constante con la palabra clave const. La sintaxis del identificador de la constante es el mismo como para un indentificador de variable: debe de empezar con una letra, guión bajo(_) o símbolo de dollar($) y puede contener alfabéticos, numéricos o guiones bajos.

Identificadores

Los identificadores de un lenguaje son la ristra de caracteres que le asignamos a los nombres de variables, constantes, funciones, objetos, etc..., que nosotros definimos en dicho lenguaje, estos son necesarios para poder invocar a dichos elementos en lugares posteriores a su definición.

Los identificadores deben seguir las siguientes reglas:

El identificador debe empezar por una letra o por el caracter '_'.

Los caracteres siguientes, además de letras o el caracter '_', pueden ser cifras.

Recordar que le uso de mayúsculas o minúsculas no es importante porque JavaScript no diferencia de los nombres de mayúsculas o minúsculas en los identificadores. Veamos algunos ejemplos de nombres de variables:

Num_linea

aux1

_exit

Palabras Reservadas en JavaScript

Expresiones y Operadores en JavaScript

Operadores

JavaScript tiene los siguientes tipos de operadores. Esta sección describe dichos operadores y contiene información sobre el orden de los mismos:

Operadores de asignación

Operadores de comparación

Operadores aritméticos

Operadores bit a bit

Operadores lógicos

Operadores de cadena de caracteres

Operador condicional (ternario)

Operador coma

Operadores unarios

Operadores relacionales

JavaScript tiene operadores binarios y unarios, y un operador ternario especial, el operador condicional. Un operador binario requiere dos operandos, uno antes del operador y otro después de este.

Expresiones

Una expresión es cualquier unidad válida de código que resuelve un valor.

Cada expresión sintáctica válida resuelve a algún valor, pero conceptualmente, hay dos tipos de expresiones: las que tienen efectos secundarios (por ejemplo: aquellas que asignan un valor a una variable) y las que de alguna manera son evaluadas y resuelven un valor.

La expresión x = 7 es un ejemplo del primer tipo. Esta expresión usa el operador = para asignar el valor siete a la variable x. La expresión en sí misma evalúa a siete.

El código 3 + 4 es un ejemplo del segundo tipo de expresiones. Esta expresión usa el operador + para sumar tres y cuatro sin asignar el valor (siete) a ninguna variable.

JavaScript cuenta con las siguientes categorías de expresiones:

• Aritméticas: evalúan a un número, por ejemplo 3.14159. (Usos generales Operadores aritméticos.)
• Cadenas de caracteres: evalúan a una cadena de caracteres, por ejemplo, "Juan" o "234". (Usos generales Operadores de cadenas de caracteres.)
• Lógicas: evalúan a true o false. (A menudo involucran a los Operadores lógicos.)
• Expresiones primarias: Palabras clave básicas y expresiones generales en JavaScript.
• Expresiones al lado izquierdo: Los valores izquierdos son el destino de una asignación.

Estructuras de Control y Manejo de Errores

Control de Flujo

Sentencia de Bloque: a sentencia de bloque es el tipo de sentencia más básico y se utiliza para agrupar sentencias. El bloque se delimita entre un par de llaves:

{ 

  sentencia_1;

  sentencia_2;

  . 

  . 

  . 

  sentencia_n; 

}

Sentencias Condicionales: Una sentencia condicional es un conjunto de comandos que se ejecutan si una condición es verdadera. JavaScript soporta dos sentencias condicionales: if...else y switch.

Se utiliza la sentencia if para comprobar si la condición lógica es verdadera. Se utiliza la opción else para ejecutar un sentencia si la condición es falsa. A continuación se muestra un ejemplo de if...else:

if (condición) {

    sentencia_1;

} else { 

    sentencia_2;

}

Manejo de Excepciones

Puedes lanzar excepciones usando la sentencia throw y manejarlas usando las sentencias try...catch.

Sentencia Throw: Prácticamente cualquier objecto puede ser lanzado en JavaScript. Sin embargo, no todos los objetos lanzados son creados igual. Mientras que es bastante común para lanzar números o strings como errores, frecuentemente son más efectivos utilizar uno de los tipos de excepciones específicamente creados para este proposito:  

Try... Catch: La sentencia try...catch marca un bloque de instrucciones a intentar que pueden causar alguna excepción, y declarar una o más respuestas en caso de que una excepción sea arrojada. Si una excepción es arrojada, la sentencia try...catch se encarga de atraparla.

Bloque Catch: Un bloque catch es usado para manejar todas las excepciones que pueden ser generadas en el bloque try.

catch (catchID) {

  instrucciones

}

Bloque Finally: El bloque finally contiene instrucciones para ejecutar luego de la ejecución del bloque try y el bloque catch pero antes de las instrucciones ubicadas luego de la sentencia try...catch. El bloque finally se ejecuta cuando se haya arrojado o no una excepción. Si una excepción es arrojada, las instrucciones en el bloque finally se ejecutan incluso si no existe un bloque catch que maneje la excepción.

Funciones en JavaScript

¿Qué es una función en JavaScript?

En términos generales, una función es un "subprograma" que puede ser llamado por código externo (o interno en caso de recursión) a la función. Al igual que el programa en sí mismo, una función se compone de una secuencia de declaraciones, que conforman el llamado cuerpo de la función. Se pueden pasar valores a una función, y la función puede devolver un valor.

Partes de una Función

Tipos de Funciones

Funciones con Parámetros

los parámetros nos sirven para llamar a nuestras funciones con unos datos específicos para que los procese. Y en cada llamada, podemos darle unos parámetros diferentes, que harán que pueda comportarse de forma diferente, si ese es el comportamiento que le hemos programado.

Funciones Recursivas

Las funciones recursivas son aquellas que se llaman a sí mismas. Existen multitud de técnicas para desarrollar este tipo de funciones, ya que sus usos son muy diversos, pero fundamentalmente hay que tener en consideración que son funciones peligrosas, porque si no controlamos su ejecución, se estarán ejecutando indefinidamente, como en el caso de los bucles infinitos. La diferencia con los bucles infinitos es que dependiendo de la implementación del intérprete de JavaScript, es posible que rompamos la pila de memoria.

Funciones Flecha

Una expresión de función flecha (también conocida como función flecha gruesa o fat arrow function en inglés) tiene una sintaxis más corta comparada con las expresiones de función y not tiene su propio this, arguments, super o new.target. Las funciones flecha son siempre funciones anónimas. Véase también esta entrada en el blog hacks.mozilla.org : "ES6 In Depth: Arrow functions" (en inglés).

¿Qué es un Parámetro?

En JavaScript, los parámetros de funciones están establecidos por defecto a undefined. Sin embargo, en ciertas situaciones puede ser útil establecerlos a un valor suministrado por defecto diferente.  Es entonces cuando los parámetros por defecto pueden ayudar.

En el pasado, la estrategia general para establecer los parámetros por defecto era comprobar los valores de éstos en el cuerpo de la función y asignar un valor si estos eran undefined. Si en el siguiente ejemplo ningún valor es suministrado para b durante el llamado, su valor sería undefined cuando se evalúe a*b; y la llamada de  multiply  retornaría NaN. Sin embargo, esto se evita con la segunda línea en este ejemplo:

Funciones Predeterminadas

Funciones Útiles para Cadenas de Textos

length, calcula la longitud de una cadena de texto (el número de caracteres que la forman)

var mensaje = "Hola Mundo";
var numeroLetras = mensaje.length; // numeroLetras = 10

+, se emplea para concatenar varias cadenas de texto

var mensaje1 = "Hola";
var mensaje2 = " Mundo";
var mensaje = mensaje1 + mensaje2; // mensaje = "Hola Mundo"

Además del operador +, también se puede utilizar la función concat()

var mensaje1 = "Hola";
var mensaje2 = mensaje1.concat(" Mundo"); // mensaje2 = "Hola Mundo"

Las cadenas de texto también se pueden unir con variables numéricas:

var variable1 = "Hola ";
var variable2 = 3;
var mensaje = variable1 + variable2; // mensaje = "Hola 3"

Cuando se unen varias cadenas de texto es habitual olvidar añadir un espacio de separación entre las palabras:

var mensaje1 = "Hola";
var mensaje2 = "Mundo";
var mensaje = mensaje1 + mensaje2; // mensaje = "HolaMundo"

Los espacios en blanco se pueden añadir al final o al principio de las cadenas y también se pueden indicar forma explícita:

var mensaje1 = "Hola";
var mensaje2 = "Mundo";
var mensaje = mensaje1 + " " + mensaje2; // mensaje = "Hola Mundo"

toUpperCase(), transforma todos los caracteres de la cadena a sus correspondientes caracteres en mayúsculas:

var mensaje1 = "Hola";
var mensaje2 = mensaje1.toUpperCase(); // mensaje2 = "HOLA"

toLowerCase(), transforma todos los caracteres de la cadena a sus correspondientes caracteres en minúsculas:

var mensaje1 = "HolA";
var mensaje2 = mensaje1.toLowerCase(); // mensaje2 = "hola"

charAt(posicion), obtiene el carácter que se encuentra en la posición indicada:

var mensaje = "Hola";
var letra = mensaje.charAt(0); // letra = H
letra = mensaje.charAt(2);     // letra = l

indexOf(caracter), calcula la posición en la que se encuentra el carácter indicado dentro de la cadena de texto. Si el carácter se incluye varias veces dentro de la cadena de texto, se devuelve su primera posición empezando a buscar desde la izquierda. Si la cadena no contiene el carácter, la función devuelve el valor -1:

var mensaje = "Hola";
var posicion = mensaje.indexOf('a'); // posicion = 3
posicion = mensaje.indexOf('b');     // posicion = -1

Su función análoga es lastIndexOf():

lastIndexOf(caracter), calcula la última posición en la que se encuentra el carácter indicado dentro de la cadena de texto. Si la cadena no contiene el carácter, la función devuelve el valor -1:

var mensaje = "Hola";
var posicion = mensaje.lastIndexOf('a'); // posicion = 3
posicion = mensaje.lastIndexOf('b');     // posicion = -1

La función lastIndexOf() comienza su búsqueda desde el final de la cadena hacia el principio, aunque la posición devuelta es la correcta empezando a contar desde el principio de la palabra.

substring(inicio, final), extrae una porción de una cadena de texto. El segundo parámetro es opcional. Si sólo se indica el parámetro inicio, la función devuelve la parte de la cadena original correspondiente desde esa posición hasta el final:

var mensaje = "Hola Mundo";
var porcion = mensaje.substring(2); // porcion = "la Mundo"
porcion = mensaje.substring(5);     // porcion = "Mundo"
porcion = mensaje.substring(7);     // porcion = "ndo"

Si se indica un inicio negativo, se devuelve la misma cadena original:

var mensaje = "Hola Mundo";
var porcion = mensaje.substring(-2); // porcion = "Hola Mundo"

Cuando se indica el inicio y el final, se devuelve la parte de la cadena original comprendida entre la posición inicial y la inmediatamente anterior a la posición final (es decir, la posición inicio está incluida y la posición final no):

var mensaje = "Hola Mundo";
var porcion = mensaje.substring(1, 8); // porcion = "ola Mun"
porcion = mensaje.substring(3, 4);     // porcion = "a"

Si se indica un final más pequeño que el inicio, JavaScript los considera de forma inversa, ya que automáticamente asigna el valor más pequeño al inicio y el más grande al final:

var mensaje = "Hola Mundo";
var porcion = mensaje.substring(5, 0); // porcion = "Hola "
porcion = mensaje.substring(0, 5);     // porcion = "Hola "

split(separador), convierte una cadena de texto en un array de cadenas de texto. La función parte la cadena de texto determinando sus trozos a partir del carácter separador indicado:

var mensaje = "Hola Mundo, soy una cadena de texto!";
var palabras = mensaje.split(" ");
// palabras = ["Hola", "Mundo,", "soy", "una", "cadena", "de", "texto!"];

Con esta función se pueden extraer fácilmente las letras que forman una palabra:

var palabra = "Hola";
var letras = palabra.split(""); // letras = ["H", "o", "l", "a"]

Funciones Útiles para Arrays

length, calcula el número de elementos de un array

var vocales = ["a", "e", "i", "o", "u"];
var numeroVocales = vocales.length; // numeroVocales = 5

concat(), se emplea para concatenar los elementos de varios arrays

var array1 = [1, 2, 3];
array2 = array1.concat(4, 5, 6);   // array2 = [1, 2, 3, 4, 5, 6]
array3 = array1.concat([4, 5, 6]); // array3 = [1, 2, 3, 4, 5, 6]

join(separador), es la función contraria a split(). Une todos los elementos de un array para formar una cadena de texto. Para unir los elementos se utiliza el carácter separador indicado

var array = ["hola", "mundo"];
var mensaje = array.join(""); // mensaje = "holamundo"
mensaje = array.join(" ");    // mensaje = "hola mundo"

pop(), elimina el último elemento del array y lo devuelve. El array original se modifica y su longitud disminuye en 1 elemento.

var array = [1, 2, 3];
var ultimo = array.pop();
// ahora array = [1, 2], ultimo = 3

push(), añade un elemento al final del array. El array original se modifica y aumenta su longitud en 1 elemento. (También es posible añadir más de un elemento a la vez)

var array = [1, 2, 3];
array.push(4);
// ahora array = [1, 2, 3, 4]

shift(), elimina el primer elemento del array y lo devuelve. El array original se ve modificado y su longitud disminuida en 1 elemento.

var array = [1, 2, 3];
var primero = array.shift();
// ahora array = [2, 3], primero = 1

unshift(), añade un elemento al principio del array. El array original se modifica y aumenta su longitud en 1 elemento. (También es posible añadir más de un elemento a la vez)

var array = [1, 2, 3];
array.unshift(0);
// ahora array = [0, 1, 2, 3]

reverse(), modifica un array colocando sus elementos en el orden inverso a su posición original:

var array = [1, 2, 3];
array.reverse();
// ahora array = [3, 2, 1]

Funciones Útiles par Números

NaN, (del inglés, "Not a Number") JavaScript emplea el valor NaN para indicar un valor numérico no definido (por ejemplo, la división 0/0).

var numero1 = 0;
var numero2 = 0;
alert(numero1/numero2); // se muestra el valor NaN

isNaN(), permite proteger a la aplicación de posibles valores numéricos no definidos

var numero1 = 0;
var numero2 = 0;
if(isNaN(numero1/numero2)) {
  alert("La división no está definida para los números indicados");
}
else {
  alert("La división es igual a => " + numero1/numero2);
}

Infinity, hace referencia a un valor numérico infinito y positivo (también existe el valor –Infinity para los infinitos negativos)

var numero1 = 10;
var numero2 = 0;
alert(numero1/numero2); // se muestra el valor Infinity

toFixed(digitos), devuelve el número original con tantos decimales como los indicados por el parámetro digitos y realiza los redondeos necesarios. Se trata de una función muy útil por ejemplo para mostrar precios.

var numero1 = 4564.34567;
numero1.toFixed(2); // 4564.35
numero1.toFixed(6); // 4564.345670
numero1.toFixed(); // 4564

Funciones Anidadas en JavaScript

Se puede anidar una función dentro de una función. La función anidada (interna) es privada a su función contenedora (externa). También forma un cierre. Un cierre, es una expresión (típicamente una función) que puede tener variables libres junto con un entorno que ata esas variables (que "cierra" la expresión).

Dado que una función anidada es un cierre, esto significa que una función anidada puede "heredar" los argumentos y variables de su función contenedora. En otras palabras, la función interna contiene el ámbito de la función externa.

En resumen:

• La función interna sólo se puede acceder a partir de sentencias dentro de la función externa.
• La función interna forma un cierre: la función interna puede utilizar los argumentos y variables de la función externa, mientras que la función externa no puede utilizar los argumentos y las variables de la función interna.

Framework CSS

¿Qué es un Framework?

Un framework, entorno de trabajo​ o marco de trabajo​ es un conjunto estandarizado de conceptos, prácticas y criterios para enfocar un tipo de problemática particular que sirve como referencia, para enfrentar y resolver nuevos problemas de índole similar.

En el desarrollo de software, un entorno de trabajo es una estructura conceptual y tecnológica de asistencia definida, normalmente, con artefactos o módulos concretos de software, que puede servir de base para la organización y desarrollo de software. Típicamente, puede incluir soporte de programas, bibliotecas, y un lenguaje interpretado, entre otras herramientas, para así ayudar a desarrollar y unir los diferentes componentes de un proyecto.

Representa una arquitectura de software que modela las relaciones generales de las entidades del dominio, y provee una estructura y una especial metodología de trabajo, la cual extiende o utiliza las aplicaciones del dominio.

Responsive Web Design

En lugar de construir una website para cada tipo de dispositivo (smartphone, tablet, ordenador desktop, laptop e incluso, hoy en día, para smart TV), se crea una sola website utilizando CSS3 media queries y un layout con imágenes flexibles. De esta forma, la website detecta desde qué clase de dispositivo está accediendo el usuario y muestra la versión más optimizada para ese medio, reorganizando los elementos de la web e incluso discriminando algunos de ellos (menos imágenes, más ligeras, redistribución de las columnas en el diseño, menos texto, etc.).

Ventajas de un Framework

Las principales ventajas que nos aporta son las siguientes:

• Acelera el desarrollo de las páginas web, ya que conociendo un poco el framework CSS, se pueden desarrollar las páginas de una manera más rápida que si lo hacemos desde cero.
• Facilita el trabajo en equipo, ya que si hemos desarrollado una página y sus estilos usando un framework, si posteriormente otra persona necesita modificarlos y conoce ese framework, puede mantener la misma línea de desarrollo de las hojas de estilo y esa página web.
• Garantiza que todo lo que se desarrolle sea compatible con todos los navegadores, lo que si tuviéramos que hacer nosotros mismos supondría más tiempo y esfuerzo.
• Los frameworks son mantenidos y evolucionados por la comunidad, por lo que los posibles errores son corregidos y sus funciones van ampliándose.

Desventajas de un Framework

A la hora de utilizar un framework no todo son ventaja, ya que hay una serie desventajas que hay que tener en cuenta. Las principales son estas:

• Al emplear un framework estamos utilizando muchos estilos y muchas librerías y no las estamos empleados todas. Este uso de una gran cantidad elementos hace que nuestra página web pese más y tarde más en descargarse.
• Si utilizamos un framework CCS, salvo que lo personalicemos, lo que requiere más conocimientos, nuestra página web se va a parecer mucho a millones de páginas web diferentes que se han hecho con el mismo framework.
• Un framework CSS tiene una curva de aprendizaje, por lo que si queremos utilizarlo primero tenemos que aprender a hacerlo.
• Otra desventaja muy importante, aunque pueda no parecerlo, es que si utilizamos un framework sin haber aprendido CSS, no vamos a saber hacer cualquier modificación sin el framework, ya que vamos a desconocer la base sobre la que funciona.

Frameworks más utilizados

• Boolstrap
• Foundation
• Bulma
• Milligram
• UI
• Semantic UI
• Materialize
• Pure.css
• Kube

Boolstrap

El framework de desarrollo más conocido y más utilizado en la actualidad, este framework proporciona una gran cantidad de componentes y estilos preestablecidos, un grid responsive de 12 columnas para que organices los componentes de tu sitio web, y una documentación extensa, clara y completa.

Ventajas

• Bootstrap es soportado por la mayoría de navegadores web.
• Framework apoyado por una gran comunidad de desarrollo detrás.
• Muchas plantillas y componentes disponibles están creadas en Bootstrap.
• Buena documentación.

Desventajas

• Utiliza clases CSS no semánticas que “ensucian” tu HTML.
• Tiene la necesidad de utilizar jQuery.
• Si no personalizas tu sitio, se parecerá a muchas webs que utilizan este framework, debido a que es el framework más utilizado en estos momentos.

Foundation

Foundation fue durante mucho tiempo, el rival directo de Bootstrap, actualmente la adopción de este framework no es tan alta como lo es la de Bootstrap, pero esto no significa que Foundation no sea un framework CSS a tener en cuenta.

Ventajas

• Gran cantidad de componentes muy personalizables.
• Extensa y detallada documentación con tutoriales en vídeo en algunas secciones.
• Las clases CSS utilizadas son semánticas, por lo que no ensucian tu HTML.

Desventajas

• La comunidad de Foundation no es tan grande como la de Bootstrap.
• No hay tantos recursos externos disponibles para Foundation.
• Es más complejo que otros frameworks disponibles.

Bulma

Bulma CSS es un framework de desarrollo relativamente nuevo, pero ya ha capturado la atención de una gran número de desarrolladores, Bulma CSS se centra en crear un framework CSS ligero y simple utilizando Flexbox para su sistema de rejilla.

Ventajas

• Una sintaxis semántica, hace que nuestro código sea más comprensible.
• Es un framework ligero, por lo que tu web se verá recompensada a la hora de cargar con rapidez.
• Fácil de usar.
• Muy personalizable y modular, con la posibilidad de exportar solamente los componentes que necesites.
• Un grid responsive basado en flexbox.

Desventajas

• Al ser relativamente nuevo la comunidad que lo apoya no es muy grande, pero crece con fuerza.
• Debido a su temprana edad falta corregir algunos bugs.
• No es una buena opción para navegadores Internet Explorer(pero a quién le importa Internet Explorer).

Milligram

El framework CSS Milligram, con un estilo minimalista y limpio, dice tener un tamaño de solo 2kb, su objetivo es ofrecer un rendimiento alto debido a su tamaño, con una alta productividad, al no tener la necesidad de añadir muchas clases a los elementos HTML para aplicar los diferentes estilos disponibles.

Ventajas

• Un diseño limpio y minimalista.
• Tamaño de solamente 2kb.

Desventajas

• Falta de personalización en los elementos.
• Comunidad pequeña.

UIKit

El siguiente en la lista es UIKit, con un tamaño pequeño, modular, como lo es Bulma CSS y con un estilo minimalista y limpio. UIKit es una buena opción, a tener en cuenta cuando se trata de frameworks CSS en el 2018 para crear tus proyectos web.

Ventajas

• Modular.
• Un tamaño ligero.
• Aspecto cuidado sin necesidad de añadir tu propio CSS.
• Muy Personalizable.

Desventajas

• La nomenclatura de las clases no es muy elegante.
• Falta de una comunidad más grande.

Semantic UI

Semantic UI como su propio nombre indica, está enfocado en un código de programación legible para el programador. En mi opinión Semantic UI es para los desarrolladores que deseen un diseño elegante por medio de un código de programación con un lenguaje natural.

Ventajas

• Carga solamente los elementos que necesitas.
• Amplia gama de elementos muy personalizables.
• Clases realmente semánticas.
• Diseño elegante.

Desventajas

• Un tamaño de archivos demasiado grande comparándolo a su competencia.
• Uso excesivo de Javascript.

Materialize

Si el proyecto con el cual estás involucrado, desea un diseño al estilo material desing como el que tiene Android, no hay ninguna duda de que tu elección debe ser el framework CSS Materialize.

Ventajas

• Gran librería de componentes con un diseño Material Desing.
• Facilidad de uso.
• Buena documentación.

Desventajas

• Un tamaño de archivos grande.

Pure.css

Para diseños web simples una de las opciones disponibles es Pure.css. Todos sus componentes tienen como denominador común la simplicidad, Lo que no es para todos los públicos, Pero no hay duda que si buscas una opción con un tamaño reducido y un estilo sencillo, Pure.css es un buen candidato.

Ventajas

• Una fácil personalización.
• Un tamaño ligero.

Desventajas

• Documentación un poco confusa.
• Falta de estilos en sus componentes, esto puede ser una ventaja o desventaja, depende del gusto de cada uno.

Kube

Kube no es un framework CSS muy usado, pero su estilo me parece muy refinado, por lo que decidí añadirlo a esta lista rodeado de los mejores, y de esta forma dispones de alguna opción más con un diseño diferente a los nombrados más arriba.

Ventajas

• Los archivos CSS son de un tamaño reducido.
• Proyecto estéticamente sólido.

Desventajas

• La comunidad es realmente pequeña, por no decir que no existe.

CSS

¿Qué es CSS3?

El nombre hojas de estilo en cascada viene del inglés Cascading Style Sheets, del que toma sus siglas. CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML).

¿Para qué sirve?

El CSS sirve para definir la estética de un sitio web en un documento externo y eso mismo permite que modificando ese documento (la hoja CSS) podamos cambiar la estética entera de un sitio web, el mismo sitio web puede variar totalmente de estética cambiando solo la CSS, sin tocar para nada los documentos HTML o jsp o asp que lo componen. 

CSS es un lenguaje utilizado para dar estética a un documento HTML (colores, tamaños de las fuentes, tamaños de elemento, con CSS podemos establecer diferentes reglas que indicarán como debe presentarse un documento. Podemos indicar propiedades como el color, el tamaño de la letra, el tipo de letra, si es negrita, si es itálica, también se puede dar forma a otras cosas que no sean letras, como colores de fondo de una pagina, tamaños de un elemento (por ejemplo el alto y el ancho de una tabla. 

Formas de Aplicar CSS

En linea

Esta forma se basa en utilizar el atributo style que las etiquetas HTML permiten. Dentro de este atributo style se colocaría nuestro código CSS3. Ejemplo:

Interna

Para dar solución a los problemas del estilo online, se empezó a generalizar el uso de la etiqueta style. La etiqueta style permite poner en su interior todo el código CSS3 que necesitamos. Puede ser colocada en cualquier parte de nuestro documento HTML y será interpretada por los navegadores, pero tiene que colocarse en nuestro head.

Externo

La etiqueta link sirve para informar de muchas cosas en nuestro HEAD, una de ellas es para indicar al navegador web que tenemos un código CSS3 en un fichero externo que debe ser utilizado para pintar nuestra página.

Con esto conseguimos la independencia entre el HTML y el CSS3, de forma que podemos utilizar el mismo fichero .css para múltiples páginas HTML y cualquier cambio en este fichero CSS se aplicaría a todas las páginas a la vez.

Comentarios en CSS

CSS permite incluir comentarios entre sus reglas y estilos. Los comentarios son contenidos de texto que el diseñador incluye en el archivo CSS para su propia información y utilidad. Los navegadores ignoran por completo cualquier comentario de los archivos CSS, por lo que es común utilizarlos para estructurar de forma clara los archivos CSS complejos.

El comienzo de un comentario se indica mediante los caracteres /* y el final del comentario se indica mediante */, tal y como se muestra en el siguiente ejemplo:

/* Este es un comentario en CSS */

Los comentarios pueden ocupar tantas líneas como sea necesario, pero no se puede incluir un comentario dentro de otro comentario:

/* Este es un
   comentario CSS de varias
   lineas */

Modelo de Cajas en CSS

El modelo de cajas o "box model" es seguramente la característica más importante del lenguaje de hojas de estilos CSS, ya que condiciona el diseño de todas las páginas web. El modelo de cajas es el comportamiento de CSS que hace que todos los elementos de las páginas se representen mediante cajas rectangulares.

Las cajas de una página se crean automáticamente. Cada vez que se inserta una etiqueta HTML, se crea una nueva caja rectangular que encierra los contenidos de ese elemento. La siguiente imagen muestra las tres cajas rectangulares que crean las tres etiquetas HTML que incluye la página:

Los navegadores crean y colocan las cajas de forma automática, pero CSS permite modificar todas sus características. Cada una de las cajas está formada por seis partes, tal y como muestra la siguiente imagen:

Elementos en Linea y de Bloque

Los elementos de bloque ("block elements" en inglés) siempre empiezan en una nueva línea y ocupan todo el espacio disponible hasta el final de la línea. Por su parte, los elementos en línea ("inline elements" en inglés) no empiezan necesariamente en nueva línea y sólo ocupan el espacio necesario para mostrar sus contenidos.

Propiedades Abreviadas en CSS3

Propiedades abreviadas son propiedades CSS que permiten asignar el valor de muchas otras propiedades de CSS al mismo tiempo. Usando una propiedad abreviada ('shorthand'), se pueden escribir hojas de estilo más concisas (y a menudo más legibles), ahorrando tiempo y energía.

Herencia, Cascada y Especificidad en CCS

Herencia

La herencia en CSS es el mecanismo mediante el cual determinadas propiedades de un elemento padre se transmiten a sus hijos. De hecho, se parece mucho a la herencia genética. Si los progenitores tienen los ojos azules, los hijos seguramente también tendrán los ojos azules.

Cascada

CSS significa cascading style sheets (hojas de estilo en cascada) y, por lo tanto, no debería extrañarnos que la cascada sea un concepto importante. Es el mecanismo que controla el resultado final cuando se aplican varias declaraciones CSS contrapuestas al mismo elemento.

Especificidad

La especificidad es algo que todos los autores de CSS deben comprender y tener en cuenta. Puede considerarse una medida de cuán específico es el selector de una regla. Un selector de especificidad baja puede dar como resultado muchos elementos (como *, que da como resultado todos los elementos del documento), mientras que un selector con una especificidad elevada puede que sólo dé como resultado un único elemento de una página (como #nav, que sólo da como resultado el elemento con una id de nav).

Minificar Recursos en CSS

Se entiende por "minificación" el proceso mediante el cual se eliminan datos innecesarios o redundantes de un recurso sin que se vea afectada la forma en que los navegadores lo procesan. Por ejemplo, eliminar comentarios y formato innecesario, retirar código que no se usa, emplear variables y nombres de funciones más cortos, etc.

FlexBox en CSS30 

Hasta hace relativamente poco, podríamos incluso decir “todavía” si tu desarrollo requiere de una alta compatibilidad en versiones antiguas de navegadores, maquetar módulos adaptables para web tales como listados en filas de N bloques suponía crear una larga lista de estilos css que cambiaban según la resolución de los diferentes dispositivos. En ocasiones “flotábamos” los elementos y nos las veíamos con los márgenes laterales, en otras aplicábamos “inline-block” y utilizábamos alguna técnica extraña para no contar con la separación que se creaba entre capas por arte de magia, añadíamos una capa vacía al final del listado para poder justificar el conjunto, y un largo etcétera de desventajas que Flexbox viene a solucionar.

 

Qué es Flexbox y cómo se utiliza.

Flexbox viene de “Flexible Box Layout“, que se puede traducir como “Diseño de caja flexible“, y nos aporta una magnífica solución para todos nuestros desarrollos “responsive”. Lo que nos permite es crear un conjunto de elementos flexibles que se adaptan automáticamente a su contenedor y con el que podemos controlar parámetros tales como la alineación, dirección (horizontal/vertical), ajuste de la fila según tamaños y multitud de posibilidades que vamos a presentar en este artículo.

En cuanto a compatibilidad, Flexbox es actualmente compatible con los navegadores web más importantes y diferentes versiones de los mismos, si bien en algunos debemos utilizar prefijos css para su buen funcionamiento (ver en caniuse.com). Si tenéis problemas con algunas versiones antiguas, podéis probar a utilizar “Autoprefixer“. En los siguientes ejemplos utilizaremos el código css tal cual, sin añadidos, así que espero que vuestro navegador esté actualizado.

La última definición conocida sobre Flexbox del W3C es del 26 de Mayo de 2016 en el momento de escribir este artículo. En el enl

Fundamentos Web

Red de Computadoras

Una red de computadoras (también llamada red de ordenadores, red de comunicaciones de datos o red informática) es un conjunto de equipos nodos y software conectados entre sí por medio de dispositivos físicos o inalámbricos que envían y reciben impulsos eléctricos, ondas electromagnéticas o cualquier otro medio para el transporte de datos, con la finalidad de compartir información, recursos y ofrecer servicios. Como en todo proceso de comunicación, se requiere de un emisor, un mensaje, un medio y un receptor. La finalidad principal para la creación de una red de ordenadores es compartir los recursos y la información en la distancia, asegurar la confiabilidad y la disponibilidad de la información, aumentar la velocidad de transmisión de los datos y reducir el costo. Un ejemplo es Internet, el cual es una gran red de millones de ordenadores ubicados en distintos puntos del planeta interconectados básicamente para compartir información y recursos.

Internet

Red informática de nivel mundial que utiliza la línea telefónica para transmitir la información. El nombre Internet procede de las palabras en inglés ”Interconnected Networks”, que significa “redes interconectadas”. Internet es la unión de todas las redes y computadoras distribuidas por todo el mundo, por lo que se podría definir como una red global en la que se conjuntan todas las redes que utilizan protocolos TCP/IP y que son compatibles entre sí. 

Página Web

Una página web, o página electrónica, página digital, o ciberpágina​ es un documento o información electrónica capaz de contener texto, sonido, vídeo, programas, enlaces, imágenes y muchas otras cosas, adaptada para la llamada World Wide Web (WWW) y que puede ser accedida mediante un navegador web. Esta información se encuentra generalmente en formato HTML o XHTML, y puede proporcionar acceso a otras páginas web mediante enlaces de hipertexto. Frecuentemente también incluyen otros recursos como pueden ser hojas de estilo en cascada, guiones (scripts), imágenes digitales, entre otros. Es frecuente ver a personas referirse con "página web" a un sitio web completo. Siendo rigurosos, esto es incorrecto ya que "página web" se refiere a una página concreta, con una URL específica y no a un sitio completo compuesto por múltiples páginas web con diferentes URL.

Sitio Web

Un sitio web, portal o cibersitio es una colección de páginas web relacionadas y comunes a un dominio de internet o subdominio en la World Wide Web dentro de Internet.

A las páginas de un sitio web se accede frecuentemente a través de un URL raíz común llamado portada, que normalmente reside en el mismo servidor físico. Los URL organizan las páginas en una jerarquía, aunque los hiperenlaces entre ellas controlan más particularmente cómo el lector percibe la estructura general y cómo el tráfico web fluye entre las diferentes partes de los sitios.

Clasificación de los Sitios Web

Por Dinamismo

• Interactivos: El usuario puede influir sobre el contenido del sitio que variará en función de cada usuario y de los objetivos de éste. Normalmente, las páginas se generan cuando el usuario las solicita, personalizando la información que se le ofrece.
• Estáticos: Los usuarios no pueden modificar o añadir nada al sitio, de cuyos contenidos se encargan exclusivamente sus diseñadores.

Por Apertura

• Estructura Abierta: Todos los documentos disponen de su dirección y los usuarios pueden acceder a cualquier punto del WebSite.
• Estructura Cerrada: Limita el acceso a unos pocos puntos de entrada (incluso a uno sólo). Un ejemplo sería un sitio que requiere un registro previo para entrar, el usuario siempre tendría que pasar primero por el registro antes de poder acceder al resto de la página.
• Estructura Semicerrada: A medio camino entre ambas, obliga a los usuarios a acceder por unos puntos específicos, cómo por ejemplo sólo la página principal y las páginas de entrada a las secciones más importantes.

Servicios del Internet

Hoy en día, a través de Internet, es posible realizar muchas operaciones y actividades, ya que son muchos los servicios que ofrece la red. Desde enviar mensajes de correo hasta tener una charla cara a cara, pasando por conversaciones en línea con personas ubicadas en cualquier parte del mundo. Internet nos ofrece una gama de posibilidades que permite mantenernos en contacto e intercambiar información con cualquier persona, sin importar dónde se encuentre. Los servicios en Internet pueden dividirse en dos grandes grupos: los que se ofrecen en tiempo real o síncrono y los que se ofrecen en tiempo diferido o asíncrono. 

• Buscadores
• Correo Electrónico
• Chats
• Foros
• Intercambio de Archivos
• La Videoconferencia

Dominio

Extensión o dominio de Internet es un nombre único que identifica a un sitio web en Internet.

El propósito principal de los nombres de dominio en Internet y del sistema de nombres de dominio (DNS), es traducir las direcciones IP de cada activo en la red, a términos memorizables y fáciles de encontrar. Esta abstracción hace posible que cualquier servicio (de red) pueda moverse de un lugar geográfico a otro en la Internet, aun cuando el cambio implique que tendrá una dirección IP diferente.1​

Sin la ayuda del sistema de nombres de dominio, los usuarios de Internet tendrían que acceder a cada servicio web utilizando la dirección IP del nodo (por ejemplo, sería necesario utilizar http://172.217.10.110/ en vez de http://google.com). Además, reduciría el número de webs posibles, ya que actualmente es habitual que una misma dirección IP sea compartida por varios dominios.

Partes de un Dominio

Se compone de dos partes: el nombre de la web y la extensión del dominio.

Nombre de la Web

Es el nombre con el que quieres identificar a tu web. Puedes elegir el nombre que quieras para tu web, siempre que esté disponible en al menos una de las extensiones de dominio.

Extensión del Dominio

La extensión del dominio es lo que va después del nombre de la web. Hay muchas extensiones de dominio, y cada vez están saliendo más de nuevas, pero la más conocida y la extensión por excelencia sigue siendo “.com”.

Y es la primera opción que tendrías que tener en cuenta a la hora de comprar tu dominio, porque sirve para cualquier tipo de web, porque es la extensión más recordada y porque es la extensión por excelencia en internet.

Tipos de Dominio

Dominios de Nivel Superior Genéricos , (gTLD, generic Top-Level Domain)

Este tipo de dominios son los de uso común y más utlizados a nivel mundial, no se ajustan a un país determinado y sus terminaciones definen el concepto para el cual se utilizan:

• .com = Sitio comercial
• .net = Empresa de servicios de Internet
• .org = Organización sin fines de lucro
• .info = Sitio informativo
• .biz = Sitio de negocios

Dominios de Nivel Superior Geográfico, (ccTLD, country code Top-Level Domain)

Son conocidos también como dominios territoriales y son usados por países o territorios dependientes; se componen de 2 caracteres. Algunos ejemplos de dominios territoriales son:

• .ar - Argentina.
• .br - Brasil.
• .ca - Canada.
• .gt - Guatemala.
• .hk - Hong Kong.
• .jm - Jamaica.

Formas de Almacenar Sitios Web

Hosting

El hosting es un servicio en línea que te permite publicar tu sitio web o aplicación web en Internet. Cuando te registras para un servicio de hosting, básicamente alquilas un espacio en un servidor en el cual puedes almacenar todos los archivos y datos necesarios para que tu sitio web funcione correctamente.

Un servidor es una computadora física que funciona ininterrumpida para que tu sitio web esté disponible todo el tiempo para cualquier persona que quiera verlo. Tu proveedor de hosting es el responsable de mantener el servidor en funcionamiento, protegerlo de ataques maliciosos y transferir tu contenido (texto, imágenes, archivos) desde el servidor a los navegadores de tus visitantes.

Reseller Hosting

Haciendo una traducción simple, podríamos llamarlo como un revendedor de Hosting. Se trata de una persona que contrata un servicio de buena calidad para hospedar  varios sitios web.

VPS

Un servidor virtual privado (VPS, del inglés virtual private server) es un método de particionar un servidor físico en varios servidores virtuales (máquinas virtuales con tareas de servidor) de tal forma que todo funcione como si se estuviese ejecutando en una única máquina. Cada servidor virtual es capaz de funcionar bajo su propio sistema operativo y además cada servidor puede ser reiniciado de forma independiente.

Almacenamiento de la Nube

Almacenamiento en la nube (o cloud storage, en inglés) es un modelo de servicio en el cual los datos de un sistema de cómputo se almacenan, se administran, y se respaldan de forma remota, típicamente en servidores que están en la nube y que son administrados por un proveedor del servicio. Estos datos se ponen a disposición de los usuarios a través de una red, como lo es Internet.

Al hablar de almacenamiento en la nube, se busca mantener las ventajas principales de un sistema en la nube, como son: elasticidad en el espacio que puedes usar, y que sea un servicio por demanda, que en este caso se maneja por bloques de información, por ejemplo puedes contratar 5GB, 10GB, 30GB o 100GB, pero no intermedios.

Google Cloud

Google Cloud (Nube de Google), es una plataforma que ha reunido todas las aplicaciones de desarrollo web que Google estaba ofreciendo por separado. Es utilizada para crear ciertos tipos de soluciones a través de la tecnología almacenada en la nube y permite por ejemplo destacar la rapidez y la escalabilidad de su infraestructura en las aplicaciones del buscador.1​

Google Cloud se refiere al espacio virtual a través del cual se puede realizar una serie de tareas que antes requerían de hardware o software y que ahora utilizan la nube de Google como única forma de acceso, almacenamiento y gestión de datos.

Amazon Web Services (AWS)

Amazon Web Services (AWS abreviado) es una colección de servicios de computación en la nube pública (también llamados servicios web) que en conjunto forman una plataforma de computación en la nube, ofrecidas a través de Internet por Amazon.com. Es usado en aplicaciones populares como Dropbox, Foursquare, HootSuite. Es una de las ofertas internacionales más importantes de la computación en la nube y compite directamente contra servicios como Microsoft Azure y Google Cloud Platform. Es considerado como un pionero en este campo.

Microsoft Azure

Microsoft Azure (anteriormente Windows Azure y Azure Services Platform) es un servicio en la nube ofrecida como servicio y alojado en los Data Centers de Microsoft. Microsoft Azure es una plataforma general que tiene diferentes servicios para aplicaciones, desde servicios que alojan aplicaciones en alguno de los centros de procesamiento de datos de Microsoft para que se ejecute sobre su infraestructura (Cloud Computing) hasta servicios de comunicación segura y federación entre aplicaciones.

Tecnologías Utilizadas para Construcción de Sitios Web

HTML

HTML es un lenguaje de programación que se utiliza para el desarrollo de páginas de Internet. Se trata de la siglas que corresponden a HyperText Markup Language, es decir, Lenguaje de Marcas de Hipertexto. Prácticamente es el que enseña la información.

CSS

CSS, es una tecnología que nos permite crear páginas web de una manera más exacta. CSS son las siglas de Cascading Style Sheets, en español Hojas de estilo en Cascada. En este reportaje vamos a ver algunos de los efectos que se pueden crear con las CSS sin necesidad de conocer la tecnología entera. Prácticamente es para el diseño.

JavaScript

JavaScript (abreviado comúnmente JS) es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos,​ basado en prototipos, imperativo, débilmente tipado y dinámico.

Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas​ aunque existe una forma de JavaScript del lado del servidor (Server-side JavaScript o SSJS). Su uso en aplicaciones externas a la web, por ejemplo en documentos PDF, aplicaciones de escritorio (mayoritariamente widgets) es también significativo.

Tecnología Cliente-Servidor

La arquitectura cliente-servidor es un modelo de diseño de software en el que las tareas se reparten entre los proveedores de recursos o servicios, llamados servidores, y los demandantes, llamados clientes. Un cliente realiza peticiones a otro programa, el servidor, quien le da respuesta. Esta idea también se puede aplicar a programas que se ejecutan sobre una sola computadora, aunque es más ventajosa en un sistema operativo multiusuario distribuido a través de una red de computadoras.