Bootstrap 

¿Qué es Bootstrap?

Fue desarrollado inicialmente por Twitter en 2010 y permite crear interfaces de usuario limpias y compatibles con todo tipo de dispositivos. Entre las ventajas que tiene Bootstrap es que favorece el design responsive, el cuál se utiliza para mejorar la experiencia de los usuarios en el sitio web y en consecuencia el posicionamiento. Para estandarizar las herramientas de la compañía. Inicialmente, se llamó Twitter Blueprint. 

El framework combina CSS y JavaScript para estilizar los elementos de una página HTML. Permite mucho más que, simplemente, cambiar el color de los botones y los enlaces. Esta es una herramienta que proporciona interactividad en la página, por lo que ofrece una serie de componentes que facilitan la comunicación con el usuario, como menús de navegación, controles de página, barras de progreso y más.

Además de todas las características que ofrece el framework, su principal objetivo es permitir la construcción de sitios web responsive para dispositivos móviles. Esto significa que las páginas están diseñadas para funcionar en desktop, tablets y smartphones, de una manera muy simple y organizada. un poco más tarde, en 2011, se transformó en código abierto y su nombre cambió para Bootstrap. Desde entonces fue actualizado varias veces y ya se encuentra en la versión 4.4.

¿Cómo funciona Bootstrap?

Bootstrap está constituido por una serie de archivos CSS y JavaScript responsables de asignar características específicas a los elementos de la página. Hay un archivo principal llamado bootstrap.css, que contiene una definición para todos los estilos utilizados. Básicamente, la estructura del framework se compone de dos directorios: css: contiene los archivos necesarios para la estilización de los elementos y una alternativa al tema original.

js: contiene la parte posterior del archivo bootstrap.js (original y minificado), responsable de la ejecución de aplicaciones de estilo que requieren manipulación interactiva. Para asignarle una característica a un elemento, simplemente debemos informar la clase correspondiente en la propiedad “class” del elemento que será estilizado, como mostramos e el siguiente ejemplo:

texto alternativo. En este ejemplo, fue asignado el contenido "rounded-sm" para una propiedad de imagen. Es un estilo que agrega bordes redondeados y no un elemento. Por lo tanto, al cargar la imagen, se aplicarán al elemento las características que se refieren a esta clase.

Biblioteca de componentes

Otra interesante función de este framework es la cantidad de componentes que pueden ser usados para proporcionar una mejor interacción y perfeccionar la comunicación con el usuario.

Alertas

O Bootstrap permite una configuración simple y rápida de diferentes tipos de alertas, con colores específicos, según la situación.

Para mostrarle al usuario un alerta que indique atención, por ejemplo, simplemente debemos usar .alert-danger y aparecerá un cuadro de texto con un fondo rojo:

¡Atención! ¡Cuidado mensaje de alerta!

Carrusel

Un componente ampliamente utilizado en Bootstrap es el Carrusel, una presentación de diapositivas, es decir, una herramienta que permite la visualización de imágenes de manera receptiva.

También permite la inclusión de efectos especiales para la transición de imágenes y controles de visualización, como por ejemplo los indicadores de “siguiente” y “anterior”.

Barra de navegación

Otro poderoso componente de la estructura es la NavBar (barra de navegación), que permite la construcción de un sistema de navegación sensible.

Es posible configurar diferentes formas de presentar el menú, elegir entre posicionamiento lateral o superior y, también, definir una forma de visualización que se pueda extender o contraer.

También es posible determinar cómo mostrar los enlaces del menú, que pueden ser en forma de botón, enlace, menú suspenso, entre otras configuraciones, para facilitar la implementación de la navegación del sitio.

Características principales

El framework Bootstrap combina los lenguajes de programación CSS y JavaScript para estilizar los elementos de una página HTML. Por eso, ofrece muchas más funcionalidades que, simplemente, cambiar la forma y el color de botones y enlaces. Bootstrap destaca por las siguientes características:  

Interactividad. Bootstrap ofrece una gran interactividad en la página, gracias a una serie de componentes que facilitan la interacción con el usuario, como menús de navegación, barras de progreso y controles de página.

 

Diseño responsive. El objetivo principal de este framework es construir sitios web responsive para dispositivos móviles. De una forma muy sencilla y organizada, permite diseñar páginas especialmente adaptadas para funcionar en smartphones, tablets y desktop.

  

Biblioteca de componentes. Otra interesante función de Bootstrap es la cantidad de componentes que ofrece para mejorar la comunicación con el usuario: diferentes tipos de alerta; carrusel de diapositivas para facilitar la visualización de imágenes; y una barra de navegación que permite múltiples configuraciones. 

Origenes

Bootstrap, originalmente llamado Blueprint de Twitter, fue desarrollado por Mark Otto y Jacob Thornton de Twitter, como un marco de trabajo (framework) para fomentar la consistencia entre las herramientas internas. Antes de Bootstrap, se usaron varias bibliotecas para el desarrollo de interfaces de usuario, lo que generó inconsistencias y una gran carga de trabajo en su mantenimiento. Según el desarrollador de Twitter, Mark Otto, frente a esos desafíos:

El primer desarrollo en condiciones reales ocurrió durante la primera «Semana de Hackeo (Hackweek) de Twitter».5​ Mark Otto mostró a algunos colegas cómo acelerar el desarrollo de sus proyectos con la ayuda de la herramienta de trabajo. Como resultado, decenas de temas se han introducido en el marco de trabajo.

Después de unos meses de desarrollo por parte de un pequeño grupo, muchos desarrolladores de Twitter comenzaron a contribuir al proyecto como parte de una haackweek, una semana estilo hackatón para el equipo de desarrollo de Twitter. Se renombró de Twitter Blueprint a Bootstrap y se lanzó como proyecto de código abierto el 19 de agosto de 2011.9​ Mark Otto, Jacob Thornton y un pequeño grupo de desarrolladores principales, así como una gran comunidad de contribuyentes.

Función y estructura

Bootstrap es modular y consiste esencialmente en una serie de hojas de estilo LESS que implementan la variedad de componentes de la herramienta. Una hoja de estilo llamada bootstrap.less incluye los componentes de las hojas de estilo. Los desarrolladores pueden adaptar el mismo archivo de Bootstrap, seleccionando los componentes que deseen usar en su proyecto.

Los ajustes son posibles en una medida limitada a través de una hoja de estilo de configuración central. Los cambios más profundos son posibles mediante las declaraciones LESS. El uso del lenguaje de hojas de estilo LESS permite el uso de variables, funciones y operadores, selectores anidados, así como clases mixin.

Desde la versión 2.0, la configuración de Bootstrap también tiene una opción especial de «Personalizar» en la documentación. Por otra parte, los desarrolladores eligen en un formulario los componentes y ajustes deseados, y de ser necesario, los valores de varias opciones a sus necesidades. El paquete consecuentemente generado ya incluye la hoja de estilo CSS compilada previamente.

¿Qué son las herramientas de Bootstrap?

Antes de entrar en las sugerencias de herramientas, vamos a hablar de lo que son las herramientas de bootstrapping y por qué son importantes. Empezar un negocio, incluso uno de Bootstrapping, es caro. Pero no se puede construir una gran empresa de SaaS o de comercio electrónico sin la ayuda de herramientas digitales. 

Por desgracia, las mejores herramientas suelen ser prohibitivas para las empresas con un presupuesto ajustado.La buena noticia es que hay un montón de herramientas digitales gratuitas, freemium o asequibles que puedes utilizar en su lugar. Estas herramientas suelen ser tan potentes como las de nivel empresarial, que también ayudan a mantener un flujo de caja positivo y a maximizar los beneficios.

Wrike es una herramienta de gestión de proyectos versátil y completa, perfecta para startups y empresas de todos los tamaños. Tiene todas las características que se esperan de una herramienta de gestión de proyectos SaaS, incluyendo diagramas de Gantt, tableros Kanban, informes y formularios de solicitud.

Herramientas de Bootstrap

Asana

Esta herramienta ofrece un sólido paquete de gestión de proyectos con características que varían según el nivel de la cuenta. Su versión gratuita incluye tareas ilimitadas por equipo, proyectos en la vista de tablero o de lista, almacenamiento ilimitado de archivos, un registro de actividades y más.

Trello

Esta herramienta es muy popular en la gestión de proyectos que ofrece una versión básica gratuita. Su versión gratuita ofrece 10 «tableros» (vistas de proyectos) por equipo, «tarjetas» (tareas) ilimitadas y 10 MB por archivo adjunto.

Paymo

Paymo ofrece su plan más económico por 9,95 dólares al mes por usuario. Con este plan puedes acceder a funciones como vistas de tareas, seguimiento del tiempo, plantillas de proyectos y tareas recurrentes.

Microsoft Projects

Ofrece vistas de cuadrícula, tablero y línea de tiempo; coautoría y comunicación en las tareas; y planificación y programación de proyectos.

¿Qué es responsive desing?

El Responsive Design o diseño adaptativo, es la técnica que se usa en la actualidad para tener una misma web adaptada a las diferentes plataformas que nos brinda la tecnología: ordenador, tablet y Smartphone.

Consiste en una serie de hojas de estilo en CSS3, que usando el atributo “mediaquery” convierten una web ordinaria en una web multiplataforma capaz de adaptarse a todos los tamaños que existen, ofreciendo una experiencia para el usuario mucho más amena y cubriendo las necesidades de nuestro público. Atrás quedan las webs que vistas en un Smartphone se tenían que ampliar para poder leer algo.

La traducción podría ser "Responsivo", que sí se encuentra en el diccionario de la Real Academia Española y significa "Perteneciente o relativo a la respuesta". Sin embargo en términos de una página web sería más adecuado usar la palabra "Adaptable", pues la página es capaz de adaptarse al dispositivo u ordenador donde se encuentra. En fin, el término es suficientemente conocido en inglés como para usar la palabra "Responsive" y que todos los que vayan a leer este texto capten perfectamente a qué nos referimos.

¿POR QUÉ TU WEB DEBERÍA SER RESPONSIVE?

Las ventajas del Responsive Design son muchas y leyendo cuales son, seguro que te convences para convertir tu web en una web multiplataforma:

Mejor experiencia de usuario. Eso repercute en la opinión que los usuarios tienen de tu sitio web y el uso que le darán a ella. Mejorará tanto tu imagen de marca como el tiempo de permanencia en la web y aumentará la tasa de rebote entre páginas de tu web.

Se acabaron los contenidos duplicados. Si usabas una versión móvil para que los usuarios que accedían a tu web vieran el contenido adaptado al dispositivo, era perjudicial para tu SEO, ya que eso creaba contenido duplicado y por lo tanto Google penalizaba a tu web. Un diseño Responsive evita este problema ya que es el mismo contenido que se organiza de manera distinta según el dispositivo en el que se vea.

Se reducen los costes de desarrollo y mantenimiento de la web. Al usar la misma plantilla para todas las plataformas, se reduce la inversión en mantenimiento y desarrollo, ya que un sólo cambio repercute en todas las versiones.

Aumenta la viralidad. Un reciente estudio certifica que el 70% de los accesos a las redes sociales se hacen a través de dispositivos móviles, eso significa que si un usuario accede a nuestra web a través de un Smartphone, seguramente tenga las aplicaciones sociales abiertas y si quiere compartir algo, es mucho más rápido y natural.

 JavaScript

  ¿Qué es JavaScript?

JavaScript es el lenguaje de programación encargado de dotar de mayor interactividad y dinamismo a las páginas web. Cuando JavaScript se ejecuta en el navegador, no necesita de un compilador. El navegador lee directamente el código, sin necesidad de terceros. Por tanto, se le reconoce como uno de los tres lenguajes nativos de la web junto a HTML (contenido y su estructura) y a CSS (diseño del contenido y su estructura).

JavaScript es un lenguaje de programación que los desarrolladores utilizan para hacer páginas web interactivas. Desde actualizar fuentes de redes sociales a mostrar animaciones y mapas interactivos, las funciones de JavaScript pueden mejorar la experiencia del usuario de un sitio web. Como lenguaje de scripting del lado del servidor, se trata de una de las principales tecnologías de la World Wide Web. Por ejemplo, al navegar por Internet, en cualquier momento en el que vea un carrusel de imágenes, un menú desplegable “click-to-show” (clic para mostrar), o cambien de manera dinámica los elementos de color en una página web, estará viendo los efectos de JavaScript.

No conviene confundir JavaScript con Java, que es un lenguaje de programación muy diferente. La confusión proviene del nombre, registrado por la misma empresa creadora de Java (Sun Microsystems). JavaScript (JS) se creó posteriormente, y la empresa norteamericana lo que hizo simplemente fue cambiar el nombre que le habían puesto sus creadores al comprar el proyecto (LiveScript). El lenguaje de programación Java está

¿Para qué sirve JavaScript?

Con este lenguaje de programación del lado del cliente (no en el servidor) podemos crear efectos y animaciones sin ninguna interacción, o respondiendo a eventos causados por el propio usuario tales como botones pulsados y modificaciones del DOM (document object model). Por tanto, nada tiene que ver con el lenguaje de programación Java, ya que su principal función es ayudar a crear páginas webs dinámicas.

El código de programación de JavaScript se ejecuta en los navegadores, ya sean de escritorio o móviles, ya sean Android o Iphone. Sirve para exactamente lo mismo, da igual en el tipo de dispositivo que se ejecute el navegador.

JavaScript es capaz de detectar errores en formularios, de crear bonitos sliders que se adapten a cualquier pantalla, de hacer cálculos matemáticos de forma eficiente, de modificar elementos de una página web de forma sencilla. Pero también JS es el encargado de que existan herramientas como Google Analytics, Google Tag Manager, Facebook Pixel y tantas otras, que son claros ejemplos de JavaScript.

Historia de JavaScript

La historia de JavaScript empieza a comienzos de los 90, cuando los usuarios llegan a Internet y acceden a la Web gracias a los navegadores. Las conexiones entre los usuarios y las webs se hace a través de líneas muy lentas. Cuando el usuario quiere enviar información al servidor, si es incorrecta, tarda un tiempo en saberlo…y pierde la información.

Los programadores tratan de conseguir validaciones en el navegador y así tener siempre envíos positivos y minimizar la pérdida de información. Esto fue una de las primeras motivaciones para crear JS, validar los formularios.La relación entre JavaScript y Java es puramente comercial, no hay relación a nivel de programación, no tienen nada que ver. Simplemente, la confusión surge por la compra de los creadores de Java del navegador Nestcape.

El programador Brendan Eich comienza a colocar tareas del servidor en el navegador en una nueva versión de Netscape Navigator 2.0 (del año 95). Esta tarea cada vez fue más ambiciosa, y recibió el nombre de LiveScript. Cuando posteriormente Sun Microsystems compró Nestcape, le puso el nombre de JavaScript, muy parecido al nombre del lenguaje del lado del servidor (Java) que no tiene absolutamente nada que ver.

Nacimiento de JavaScript

JavaScript fue desarrollado originalmente por Brendan Eich de Netscape con el nombre de Mocha, el cual fue renombrado posteriormente a LiveScript, para finalmente quedar como JavaScript. El cambio de nombre coincidió aproximadamente con el momento en que Netscape agregó compatibilidad con la tecnología Java en su navegador web Netscape Navigator en la versión 2002 en diciembre de 1995. La denominación produjo confusión, dando la impresión de que el lenguaje es una prolongación de Java, y fue considerada por muchos como una estrategia de mercadotecnia de Netscape para obtener prestigio e innovar en el ámbito de los nuevos lenguajes de programación web.9​

Microsoft dio como nombre a su dialecto de JavaScript «JScript», para evitar problemas relacionadas con la marca. JScript fue adoptado en la versión 3.0 de Internet Explorer, liberado en agosto de 1996, e incluyó compatibilidad con el Efecto 2000 con las funciones de fecha, una diferencia de los que se basaban en ese momento. Los dialectos pueden parecer tan similares que los términos «JavaScript» y «JScript» a menudo se utilizan indistintamente, pero la especificación de JScript es incompatible con la de ECMA en muchos aspectos.

Para evitar estas incompatibilidades, el World Wide Web Consortium diseñó el estándar Document Object Model (DOM, o Modelo de Objetos del Documento en español), que incorporan Konqueror, las versiones  de Internet Explorer y Netscape Navigator, Opera la versión, Mozilla Application Suite y Mozilla Firefox desde su primera versión.[cita requerida]

En 1997 los autores propusieron1 JavaScript para que fuera adoptado como estándar de la European Computer Manufacturers 'Association ECMA, que a pesar de su nombre no es europeo sino internacional, con sede en Ginebra. En junio de 1997 fue adoptado como un estándar ECMA, con el nombre de ECMAScript. Poco después también como un estándar ISO.

Creador

Brendan Eich es un programador estadounidense conocido por inventar el lenguaje de programación JavaScript, así como el navegador Brave. Brendan Eich recibió su Bachiller en matemáticas y ciencias de la computación en la Universidad de Santa Clara. Recibió su maestría en 1986 de la Universidad de Illinois en Urbana-Champaign.

Eich comenzó su carrera en Silicon Graphics, trabajando por siete años en el sistema operativo y código de la red. Luego trabajó por tres años en MicroUnity Systems Engineering escribiendo el micronúcleo y el código de DSP, y en hacer el primer port de GCC para la MIPS R4000.

Tras trabajar en Silicon Graphics, pasó por varias empresas hasta llegar a Netscape Communications Corporation en abril de 1995, trabajando en el desarrollo del lenguaje JavaScript (originalmente llamado Mocha, luego denominado LiveScript) para el navegador web Netscape Navigator. A principios de 1998 ayudó a fundar la Fundación Mozilla, sirviendo como principal arquitecto. Cuando AOL cerró la unidad del navegador Netscape en julio de 2003, Eich ayudó a hacer girar a la Fundación Mozilla.

¿Cómo funciona JavaScript?

Antes de escribir JavaScript, es importante saber cómo funciona bajo el capó. Hay dos piezas importantes que aprender: cómo funciona el navegador web y el modelo de objetos de documento (DOM). El navegador web carga una página web, analiza el HTML y crea lo que se conoce como Modelo de objetos de documento (DOM) a partir de los contenidos. El DOM presenta una vista en vivo de la página web a su código JavaScript.

El navegador capturará todo lo vinculado al HTML, como imágenes y archivos CSS. La información de CSS proviene del analizador de CSS. El HTML y CSS son ensamblados por DOM para crear la página web primero. Luego, el motor JavaScript de los navegadores carga archivos JavaScript y código en línea, pero no ejecuta el código inmediatamente. Espera a que HTML y CSS terminen de cargarse.

Una vez hecho esto, JavaScript se ejecuta en el orden en que se escribe el código. Esto da como resultado que el DOM sea actualizado por código JavaScript y representado por el navegador. El orden aquí es importante. Si JavaScript no espera a que termine el HTML y CSS, no podrá cambiar los elementos DOM.

Importancia

De entre todos los lenguajes de programación web y de entre todas las opciones que encontramos en el mercado, hay una que destaca por lo que aporta a los programadores y profesionales, además de por su utilidad en el mercado, en internet y entre los usuarios. Tiene muchas ventajas y existen muchas razones por las que los informáticos, programadores y los profesionales en general deben formarse en ello y dominar para su terreno de trabajo y para las tareas que desempeñan. Tanto es así que vemos todo tipo de cursos de formación y ciclos enfocados en la enseñanza de JavaScript y de su implementación, así como personas de todo tipo que buscan crecer en este terreno y dominar este y otros lenguajes de programación web que puedan abrirle las puertas de un futuro próspero y exitoso, además de avance en su carrera laboral.

A continuación comentaremos los aspectos generales por los que JavaScript tiene una gran relevancia y se ha vuelto tan importante para empresas y profesionales. Además, comentaremos brevemente algunas de esas ventajas que hemos nombrado en el párrafo superior y trataremos de asesorar a quienes se plantean crecer en este terreno e introducirse en el mercado laboral de la programación junto con una formación y un conocimiento elevado en el lenguaje de programación web JavaScript, el estándar que tantos usuarios, con sus ordenadores y sus equipos, usan quizás sin ser conscientes de ello.

Para muchos es muy recomendable y se vuelve una tarea imprescindible para la tarea que desempeñan o para lo que requieren de cara a trabajar en diferentes proyectos de programación web o en empresas de todo tipo. Como hemos visto y comentado más arriba y a lo largo de los párrafos anteriores, la formación en JavaScript aporta toda una serie de ventajas y de beneficios tanto a los estudiantes como a los profesionales que buscan ampliar sus conocimientos o a las empresas y las compañías que podrán beneficiarse de ello y lograr grandes proyectos digitales así como una página web y un contenido de calidad que satisfaga sus necesidades y les lleve a lograr los objetivos fijados de forma previa para con el marketing online y la parte que incluye la programación y la publicación de contenido en su página web.

Características de JavaScript

Lenguaje del lado del cliente:

Cuando se dice que un lenguaje es del lado del cliente, nos referimos a que se ejecuta en la máquina del propio cliente a través de un navegador. Algunos de estos lenguajes son el propio javascript, HTML, CSS o Java.

Esta categoría de lenguajes se diferencia de la otra gran categoría: los lenguajes del lado del servidor. Estos lenguajes se ejecutan e interpretan por el propio servidor y necesitan un tratamiento antes de mostrarlos al usuario final. Algunos de los lenguajes de programación del lado del servidor más conocidos son PHP, ASP o PERL.

Lenguaje orientado a objetos:

JavaScript es un lenguaje orientado a objetos. Que un lenguaje esté orientado a objetos quiere decir que utiliza clases y objetos como estructuras que permiten organizarse de forma simple y son reutilizables durante todo el desarrollo. Otros lenguajes orientados a objetos son Java, Python o C++.

De tipado débil o no tipado:

Que un lenguaje sea de tipado débil quiere decir que no es necesario especificar el tipo de dato al declarar una variable. Esta característica supone una gran ventaja a la hora de ganar rapidez programando, pero puede provocar que cometamos más errores que si tuviéramos esa restricción que poseen los lenguajes de tipado fuerte como C++ o Java.

De alto nivel:

Que Javascript sea un lenguaje de alto nivel significa que su sintaxis es fácilmente comprensible por su similitud al lenguaje de las personas. Se le llama de “alto nivel” porque su sintaxis se encuentra alejada del nivel máquina, es decir, del código que procesa una computadora para ejecutar lo que nosotros programamos. 

Un lenguaje de alto nivel como Javascript permite que su barrera de entrada y su curva de aprendizaje se acorte drásticamente. Un ejemplo podría ser que la sentencia condicional empiece por “IF” que significa “si…” en inglés, permitiendo asociar rápidamente su funcionamiento y significado. Otro lenguaje de alto nivel muy utilizado y uno de los mejores para iniciarse en programación por esta característica es Python.

Lenguaje interpretado:

Javascript es un lenguaje interpretado porque utiliza un intérprete que permite convertir las líneas de código en el lenguaje de la máquina. Esto tiene un gran número de ventajas como la reducción del procesamiento en servidores web al ejecutarse directamente en el navegador del usuario, o que es apto para múltiples plataformas permitiendo usar el mismo código. 

Además de JS, otros ejemplos de lenguajes interpretados son C#, Ruby, Java o Python.

Muy utilizado por desarrolladores:

A la hora de elegir si aprender o no un nuevo lenguaje, no sólo hay que informarse sobre el tipo de lenguaje o su curva de aprendizaje, si no también su demanda en el mercado. Javascript es en la actualidad uno de los lenguajes más demandados de los últimos años por su versatilidad y su infinita capacidad para crear plataformas cada vez más atractivas. 

Librerías de JavaScript

Javascript posee un amplio repertorio de librerías para diversas funcionalidades gracias a su amplia comunidad de desarrollo. A continuación, incluimos algunas de las librerías o frameworks más utilizadas en el mercado y cuales son sus características principales:

jQuery

La librería jQuery es una de las librerías más conocidas para programar en javaScript, y cuenta con una gran comunidad de usuarios y desarrolladores. Una de sus principales características es que es se trata de una librería open source, es decir, de código abierto. La filosofía de jQuery se basa en realizar órdenes de codificación simples y escuetas, programando en una o dos líneas lo que en javaScript llevaría 20 líneas. Esta característica simplifica enormemente el trabajo de desarrollo, haciéndola muy popular en el sector. 

Además, esta librería cuenta con una gran cantidad de extensiones o plugins que permiten añadir más funcionalidades al core, dotando al desarrollador de una gran flexibilidad y capacidades a la hora de afrontar un proyecto en javaScript. Empresas tan importantes como Google, WordPress e IBM confían en jQuery para varios de sus proyectos

React

Junto con jQuery, React JS es otra librería clave de Javascript para los desarrolladores web. React fue creada por Facebook en 2011 y planeada explícitamente para construir interfaces de usuario dinámicas, rápidas e interactivas. Al igual que jQuery, también es una librería de código abierto centrada en la parte frontend de una aplicación.

Ha ganado una gran popularidad en el sector debido a que se necesita menos código que si se utilizase únicamente javascript, y sus resultados y funcionalidades son excelentes. Además, su uso de VirtualDOM permite agilizar el proceso de actualización, ya que sólo afecta a los componentes modificados y no actualiza todos los componentes como en el desarrollo convencional.

AngularJS

AngularJS es un framework desarrollado por Google en 2009 y de código abierto. Al igual que React, esta librería se centra en el desarrollo frontend. AngularJS utiliza una versión de Javascript llamada Typescript. Es una de las librerías más utilizadas junto con React o Vue por sus sencillas implementaciones y su multitud de herramientas, así como su integración y utilización del HTML evitando muchos quebraderos de cabeza a los desarrolladores.

Vue.js

Con total seguridad, Vue es el framework de Javascript que más ha crecido en popularidad. Su flexibilidad y sencillez han convertido a Vue en la librería preferida de muchos desarrolladores amateur y profesionales al enfrentarse a un proyecto de desarrollo web. Al igual que las librerías anteriores, Vue es de código abierto y se creó en 2014 por el mismo que desarrolló el framework AngularJS en Google unos años antes. La característica principal que ha lanzado a Vue es su desacoplamiento en diferentes módulos, permitiendo agregar módulos y funcionalidades a la librería central de forma fácil e intuitiva.

Node js

Node.js es la librería opensource más utilizada para el desarrollo backend con millones de desarrolladores en todo el mundo. Este framework surgió como respuesta a la necesidad de ejecutar aplicaciones con javascript no sólo en un navegador si no también en una máquina. Utiliza el entorno V8 de Chrome, haciendo al framework muy eficiente y seguro ante posibles bloqueos para aplicaciones que necesitan un flujo de datos en tiempo real.

Os.js

OS.js es un entorno que se ejecuta en el navegador web en el que se ofrecen las funciones más comunes en los sistemas operativos de hoy en día. Aunque las siglas OS inducen a pensar que se trata de un sistema operativo, la realidad es que está muy lejos de realizar las funciones propias de tal software ya que no tiene gestionar absolutamente nada relacionado con el sistema.

A pesar del nombre OS.js, en la web del proyecto no se habla en ningún momento de un sistema operativo sino más bien de una especie de entorno de escritorio para el navegador.

Incluye un sistema de archivos virtual en el que se pueden copiar, leer y modificar los datos del usuario, enlazándolo a varios servicios de almacenamiento en la nube como Dropbox, Google Drive y OneDrive. 

Como cualquier sistema operativo actual, viene con una colección de programas que permiten realizar tareas básicas: • Gestor de archivos. • Reproductor de audio y video. • Visor y editor de imágenes. Calculadora. . Editor de textos. Este también permite "descargar" otras aplicaciones desde el repositorio del sistema.

Índice

 ¿Qué es HTML?

HTML 5

Orígenes del HTML

Estructura de HTML

Etiquetas en HTML

¿Qué es un hosting?

Tipos de Hosting

El DNS

El internet

JavaScript

Bootstrap

El internet y la WWW (World Wide Web)

¿Qué es el Internet?

Internet es un neologismo del inglés que significa red informática descentralizada de alcance global. Se trata de un sistema de redes interconectadas mediante distintos protocolos que ofrece una gran diversidad de servicios y recursos, como, por ejemplo, el acceso a archivos de hipertexto a través de la web.

Internet es un anglicismo que se forma por la abreviación del término International Network of Computers, que en español se podría traducir como ‘Red Internacional de Computadoras’, o también como ‘Red de redes’.

En español, la palabra internet está considerada como un nombre propio. La Real Academia Española (RAE), en su diccionario, admite que se escriba con o sin mayúscula inicial. De allí que, preferentemente, se utilice sin artículo, aunque en caso de usarlo, se recomienda el uso femenino (la), ya que el nombre equivalente en español vendría a ser ‘red’, que es femenino.

Origen de internet

Existen dos versiones sobre el inicio de internet. La más popular señala su creación como una respuesta del Departamento de Defensa estadounidense, quienes en los años 60 buscaban la forma en la que todos los ordenadores que se utilizaban dentro de la organización funcionaran en red, aún y cuando una de las computadoras sufriera una falla debido a un ataque enemigo.

Sin embargo, otra versión menos extendida señala que en esa misma época, en la Oficina para Tecnologías de Procesado de la Información (IPTO), un hombre llamado Robert Taylor ( quien se estrenaba como director de la oficina) tuvo la idea de generar un sistema que permitiera que los investigadores pudiesen compartir recursos a través de la utilización de enlaces.

Si esta idea funcionaba, les permitiría hacer más eficiente su trabajo y evitar la compra innecesaria de más computadoras, considerando que para esa época eran sumamente costosas y complicadas de trasladar e instalar.

El proyecto fue inicialmente aprobado para su desarrollo por ARPA, (Agencia de Proyectos de Investigación Avanzados), que aunque en principio se dedicaba a la financiación de investigaciones académicas, luego pasó a ser parte del Departamento de Defensa estadounidense, llamándose DARPA. Para muchos, de allí se extiende la creencia de que la internet fue un proyecto desarrollado con fines militares, cuando en realidad se trató de una solución diseñada y financiada con fines civiles y de investigación.

Internet y world wide web (www o web)

En ocasiones, ambos términos se utilizan de forma indistinta, aunque técnicamente no tienen el mismo significado. Internet es el medio de transmisión que utiliza la world wide web o www (en español se suele utilizar el término web). De esta forma, uno de los servicios que Internet permite utilizar es la web, entendida como un conjunto de protocolos que permite el acceso a distancia de archivos de hipertexto (contenido con enlaces a otros textos).

Internet como medio de comunicación

Las posibilidades que brinda internet como fuente de acceso a información y conocimiento en múltiples formatos son casi ilimitadas. De allí que en las últimas décadas, los medios de comunicación tradicionales se hayan visto impulsados a ofrecer plataformas y soluciones adaptadas a nuevos tiempos y consumidores de información.

 

El DNS

 ¿Qué es el DNS?

El sistema de nombres de dominio (DNS) es el directorio telefónico de Internet. Las personas acceden a la información en línea a través de nombres de dominio como nytimes.com o espn.com. Los navegadores web interactúan mediante direcciones de Protocolo de Internet (IP). El DNS traduce los nombres de dominio a direcciones IP para que los navegadores puedan cargar los recursos de Internet.

El proceso de solución de DNS supone convertir un nombre de servidor (como www.ejemplo.com) en una dirección IP compatible con el ordenador (como 192.168.1.1). Se da una dirección IP a cada dispositivo en Internet, y esa dirección será necesaria para encontrar el dispositivo apropiado de Internet, al igual que se usa la dirección de una calle para encontrar una casa concreta. Cuando un usuario quiere cargar una página, se debe traducir lo que el usuario escribe en su navegador web (ejemplo.com) a una dirección que el ordenador pueda entender para poder localizar la página web de ejemplo.com.

Para entender el proceso de la resolución de DNS, es importante conocer los diferentes componentes de hardware por los que debe pasar una consulta de DNS. Para el navegador web, la búsqueda de DNS se produce "en segundo plano" y no requiere ninguna interacción del ordenador del usuario, aparte de la solicitud inicial.

La asignación de nombres a direcciones IP es ciertamente la función más conocida de los protocolos DNS. Por ejemplo, si la dirección IP del sitio Google es 216.58.210.163, la mayoría de la gente llega a este equipo especificando www.google.com y no la dirección IP. Además de ser más fácil de recordar, el nombre es más fiable.

​ La dirección numérica podría cambiar por muchas razones, sin que tenga que cambiar el nombre del sitio web. Incluso, en el caso de que una página web utilice una red de distribución de contenidos (Content delivery network o CDN, por sus siglas en inglés) por medio del DNS el usuario recibirá la dirección IP del servidor más cercano según su localización geográfica (cada CDN a su vez tiene sus propios servidores DNS).

DNS en el mundo real

Los usuarios generalmente no se comunican directamente con el servidor DNS: la resolución de nombres se hace de forma transparente por las aplicaciones del cliente (por ejemplo, navegadores, clientes de correo y otras aplicaciones que usan Internet). Al realizar una petición que requiere una búsqueda de DNS, la petición se envía al servidor DNS local del sistema operativo. 

El sistema operativo, antes de establecer alguna comunicación, comprueba si la respuesta se encuentra en la memoria caché. En el caso de que no se encuentre, la petición se enviará a uno o más servidores DNS, 

el usuario puede utilizar los servidores propios de su ISP, puede usar un servicio gratuito de resolución de dominios o contratar un servicio avanzado de pago que por lo general son servicios contratados por empresas por su rapidez y la seguridad que estos ofrecen.

¿Cuál es la diferencia entre un servidor de DNS autoritativo y un solucionador de DNS recursivo?

Ambos conceptos se refieren a servidores (grupos de servidores) que son fundamentales para la infraestructura de DNS, pero cada uno desempeña un papel diferente y se encuentra en diferentes ubicaciones dentro del trayecto de una consulta de DNS. Una forma de entender la diferencia es que el solucionador recursivo está al inicio de la consulta DNS y el servidor de nombres autoritativo al final.

Tipos de Hosting

¿Qué tipos de hosting existen?

La mayoría de los proveedores de alojamiento ofrecen diferentes tipos de hosting web -tanto alojamiento web gratis como de pago- para poder satisfacer las necesidades de diferentes clientes, ya sea que desees crear un blog personal simple o ser dueño de un gran negocio en línea. Estas son las opciones disponibles más populares:

• Hosting Compartido

• Hosting VPS (Servidor virtual privado)

• Alojamiento en la nube (Cloud Hosting)

• Hosting con servidor dedicado

Lo mejor es comenzar de a poco y cuando tu sitio alcance números de tráfico más altos, cambiarte a un tipo de plan más avanzado. En cualquier caso, vamos a describir cada uno con más detalle. 

Hosting Compartido

Los proveedores de hosting web suelen ofrecer más de un plan para cada tipo de alojamiento. Por ejemplo, aquí en Hostinger, nuestros servicios de hosting web compartido vienen con tres planes de alojamiento diferentes.

Este tipo de alojamiento web es una de las opciones más elegidas para responder a las necesidades de hosting web y una excelente solución para la mayoría de las pequeñas empresas y blogs personales. Con este tipo de alojamiento web, compartes un servidor con otros clientes. Los sitios web alojados en el mismo servidor comparten todos los recursos, como la memoria, el poder de cómputo, el espacio en disco y otros.

Pros:

• Bajo costo, perfecto para páginas web de negocios pequeños.

• No se necesitan conocimientos técnicos específicos.

• Servidor pre-configurado.

• Panel de control fácil de usar (hPanel).

• El mantenimiento y la administración del servidor son realizados por el proveedor.

Contras:

• Poco o ningún control sobre la configuración del servidor.

• Los aumentos del tráfico en otros sitios web pueden ralentizar tu sitio.

Hosting VPS

Cuando usas un servidor virtual privado, o VPS para abreviar, todavía estás compartiendo un servidor con otros usuarios. Sin embargo, tu servidor web te asigna una partición completamente separada en ese servidor. Esto significa que obtienes un espacio de servidor dedicado y una cantidad reservada de recursos y memoria.

De hecho, el alojamiento VPS puede ser excelente para empresas medianas con un número de páginas web y tráfico en rápido crecimiento.

Pros:

• Espacio de servidor dedicado.

• Los aumentos de tráfico en otros sitios web no afectan para nada tu rendimiento.

• Acceso raíz al servidor.

• Fácilmente escalable y altamente personalizable.

Contras:

• Más caro que otros tipos de alojamiento web.

• Debes tener conocimientos técnicos y de administración de servidores web.

Cloud Hosting

El cloud hosting es actualmente la solución más confiable del mercado. Con el alojamiento en la nube, tu proveedor te brinda un grupo de servidores y tus archivos y recursos se replican en cada servidor.

Cuando uno de los servidores en la nube está ocupado o encuentra un problema, tu tráfico se enruta automáticamente a otro servidor en el clúster. Esto resulta en poco o ningún tiempo de inactividad, lo cual es excelente si posees un sitio web muy ocupado.

Pros:

• Poco o ningún tiempo de inactividad.

• Las fallas del servidor no afectan a tu sitio.

• Asigna recursos según demanda.

• Pago sobre la marcha (solo pagas por lo que usas).

• Más escalable que otros tipos de hosting.

Contras:

• Es difícil estimar los costos.

• No siempre se brinda acceso raíz.

Servidor dedicado

Un host web con servidor dedicado significa que tienes tu propio servidor físico dedicado exclusivamente para tu sitio. Por lo tanto, el alojamiento dedicado te brinda una flexibilidad increíble para manejar tu página web. Puedes configurar tu servidor como quieras, elegir el sistema operativo y el software que quieres utilizar, y configurar todo el entorno de hosting según tus propias necesidades.

De hecho, alquilar un servidor dedicado es tan poderoso como tener tu propio servidor in-situ, pero además viene con el soporte profesional de tu proveedor. Por lo general, esto está más orientado a las grandes empresas en línea que se ocupan de un tráfico pesado.

Pros:

• Control total sobre la configuración del servidor.

• Alta confiabilidad y opciones de seguridad.

• Acceso root a tu servidor.

Contras:

• Alto costo, más orientado a empresas más grandes.

• Se requieren conocimientos técnicos y de administración de servidores.

¿Que es un hosting?

Un hosting es un servicio de alojamiento online que te permite publicar un sitio web en Internet. Cuando contratas un servicio de hosting, básicamente alquilas un espacio en un servidor físico donde puedes almacenar todos los archivos y datos necesarios para que tu sitio web funcione correctamente.

¿Cómo funciona el hosting o alojamiento web?

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

Cuando decides crear una página web nueva, tienes que encontrar una empresa de hosting que te proporcione espacio en un servidor. Tu proveedor de hosting almacena todos tus archivos, medios y bases de datos en el servidor. Cada vez que alguien escribe tu nombre de dominio en la barra de direcciones de su navegador, tu servidor transfiere todos los archivos necesarios para atender la solicitud.

Puedes alojar tú mismo tu sitio web, pero requiere amplios conocimientos técnicos. El autoalojamiento implica instalar y configurar un servidor web desde cero, incluyendo el equipo, la infraestructura, el hardware y el software. Además, tendrás que encargarte del mantenimiento.

Un proveedor de servicios de alojamiento web garantiza que tu sitio web funcione de forma óptima y con mejores protocolos de seguridad. Además, simplifica los numerosos y complejos aspectos del alojamiento de un sitio web, desde la instalación del software hasta el soporte técnico.

Orígenes del HTML

 Los orígenes del HTML

El origen de HTML se remonta a 1980, cuando el físico Tim Berners-Lee, trabajador del CERN (Organización Europea para la Investigación Nuclear) propuso un nuevo sistema de "hipertexto" para compartir documentos.

En el ámbito de la informática, el "hipertexto" permitía que los usuarios accedieran a la información relacionada con los documentos electrónicos que estaban visualizando.

De cierta manera, los primitivos sistemas de "hipertexto" podrían asimilarse a los enlaces de las páginas web actuales.

Tras finalizar el desarrollo de su sistema de "hipertexto", Tim Berners-Lee lo presentó a una convocatoria organizada para desarrollar un sistema de "hipertexto" para Internet.

Antes de la aparición de HTML, existían dos sistemas de vinculación de documentos electrónicos: los hipervínculos o enlaces y el SGML, un lenguaje de etiquetas. En 1989, un investigador del CERN (la Organización Europea para la Investigación Nuclear), Tim Berners-Lee, asegura que está trabajando en un sistema nuevo de hipertexto para compartir documentos.

Cuando su proyecto estuvo listo, lo presentó a una convocatoria para el desarrollo de un sistema de hipertexto para internet. Después, se alió con Robert Cailliau, un ingeniero de sistemas, y juntos presentaron la WorldWideWeb (W3). Esta fue la propuesta ganadora de la convocatoria.

HTML 1

En 1991 se publica formalmente, bajo el nombre de “HTML Tags”, el primer documento con la descripción de HTML.

En 1993 se propone oficialmente que HTML sea un estándar. Esta propuesta la lleva a cabo el IETF (Internet Engineering Task Force). Ninguna de las dos primeras versiones (HTML y HTML+) consiguió ser el estándar oficial, pero los avances logrados por estas fueron muy significativos: se definieron las etiquetas para tablas, para imágenes y para formularios.

HTML 2

A finales de 1993 se empieza a trabajar en la segunda versión de HTML, la llamada HTML+. En un principio la idea era diseñar un superconjunto de HTML que evolucionase poco a poco desde la primera versión. La primera propuesta oficial de HTML+ recibió la nomenclatura de versión 2 para distinguirla de otras propuestas anteriores no oficiales.

HTML3

A partir de 1996, los estándares de HTML los publica el organismo W3C. HTML 3.0 apareció, en forma de borrador, en marzo de 1995. Esta versión contenía nuevas capacidades, como facilidades para hacer tablas, funciones para que el texto fluyese alrededor de las figuras o mostrar elementos matemáticos complejos.

HTML 4

En 1997 aparece, por recomendación del W3C, HTML 4.0, una versión con novedades importantes, como las hojas de estilos CSS, la mejora de la accesibilidad de las páginas diseñadas, tablas complejas, la posibilidad de incluir pequeños programas o scripts y mejoras en los formularios.

En 1999 aparece la última versión oficial de HTML: HTML 4.01, una revisión de la propuesta anterior en la que no se incluyen novedades importantes.

HTML5

A partir de entonces, el W3C centró sus esfuerzos en el desarrollo del estándar XHTML. Sin embargo, en 2004, empresas como Mozilla, Ópera y Apple decidieron organizarse en la WHATWG (Web Hypertext Application Technology Working Group) para centrarse en el estándar HTML5. Debido a las presiones de este grupo, el W3C decidió retomar su actividad estandarizadora de HTML.

Etiquetas de html

 ¿Para empezar, que son las etiquetas en html?

HTML es un markup language, lo que significa que está escrito con códigos que puede leer una persona sin que sea necesario compilarlo primero. En otras palabras, el texto en una página web está «marcado» con estos códigos para dar instrucciones al navegador web sobre cómo mostrar el texto. Estas etiquetas de marcado son las propias etiquetas HTML.

Cuando escribes código en HTML, estás escribiendo etiquetas HTML. Todas las etiquetas HTML están hechas con un número de partes específicas, incluyendo:

El carácter “menor que” <
Una palabra o carácter que determina qué etiqueta se está escribiendo
Cualquier número de atributos HTML que se quiera usar, escritos de la forma nombre =”valor”
El carácter “mayor que” >

En la actualidad existen 142 etiquetas HTML disponibles que permiten la creación de varios elementos. A pesar de que algunos ordenadores nuevos ya no admiten algunas de estas, es importante tener constancia de la existencia de ellas.

¿Cuáles son las etiquetas HTML básicas?

Hay una serie de etiquetas que son las más usadas para crear cualquier documento HTML, a continuación las explicamos:

• <body> para el contenido
• <head> para información sobre el documento
• <div> división dentro del contenido
• <a> para enlaces
• <strong> para poner el texto en negrita
• <br> para saltos de línea
• <H1>…<H6> para títulos dentro del contenido
• <img> para añadir imágenes al documento
• <ol> para listas ordenadas, <ul> para listas desordenadas, <li> para elementos dentro de la lista
• <p> para parágrafos
• <span> para estilos de una parte del texto

Estructura de HTML

 

¿Para qué sirve conocer la estructura HTML? 

La estructura HTML hace uso de etiquetas y atributos predefinidos para indicarle al navegador cómo mostrar su contenido; es decir, en qué formato, estilo, tamaño de fuente, imágenes o videos se debe configurar. Básicamente, su función es describir la estructura general de una página y organizar la forma en que los usuarios podrán visualizarla. 

Es importante recalcar que el lenguaje HTML no es un lenguaje de programación, sino de marcado. Esto significa que solo sirve para crear páginas web estáticas. Sin embargo, sí es posible combinar este lenguaje con otros para desarrollar sitios mucho más dinámicos y atractivos. 

Una vez que conoces las definiciones más relevantes sobre el lenguaje y la estructura HTML, te diremos cómo se integran y te damos un ejemplo para que comprendas mejor su contenido. 

Ejemplo estructura externa de HTML

Esta es la distribución general que se debería de realizar en el  desarrollo  de una pagina web  o cualquier documento con una estructura similar.