domingo, 23 de diciembre de 2018

Sesión 7

Agenda


  • ¿Qué es NodeJS y para que sirve?
  • Escalabilidad en NodeJS
  • Operaciones asíncronicas
  • La importancia de los eventos en NodeJS
  • JavaScript como la base de su semántica 
  • Gestor de bibliotecas Node Package Manager
  • Ventajas de  NodeJS
  • Desventajas de NodeJS
  • Aplicación conversor de monedas.
  • Bibliografía


¿Qué es NodeJS y para que sirve?


JavaScript es un sólo un lenguaje de programación del lado del cliente que se ejecuta en el navegador,Ahora ya no. Node.js es una forma de ejecutar JavaScript en el servidor, además de mucho más. Node.js es un entorno Javascript del lado del servidor, basado en eventos. Node ejecuta javascript utilizando el motor V8, desarrollado por Google para uso de su navegador Chrome. Aprovechando el motor V8 permite a Node proporciona un entorno de ejecución del lado del servidor que compila y ejecuta javascript a velocidades increíbles. El aumento de velocidad es importante debido a que V8 compila Javascript en código de máquina nativo, en lugar de interpretarlo o ejecutarlo como bytecode. Node es de código abierto, y se ejecuta en Mac OS X, Windows y Linux.

Node.js es una biblioteca y entorno de ejecución de E/S dirigida por eventos y por lo tanto asíncrona que se ejecuta sobre el intérprete de JavaScript creado por Google V8.
Lo cierto es que está muy de moda aunque no es algo nuevo ya que existen bibliotecas como Twisted que hacen exactamente lo mismo pero si es cierto que es la primera basada en JavaScript y que posee un gran rendimiento.



En resumen NodeJs es un entorno en tiempo de ejecución multiplataforma, de código abierto, para la capa del servidor basado en el lenguaje de programación ECMAScript, asíncrono, con I/O (entrada/salida) de datos en una arquitectura orientada a eventos y basado en el motor V8 de Google.

En resumen NodeJS nos sirve para para generar páginas dinámicas, crear, abrir, leer, escribir, borrar y cerrar archivos del servidor, recolectar datos de un formulario y operaciones transaccionales de base de datos. El mismo esta orientado a eventos, es decir, solicitudes que deben ser atendidas cuando alguien trata de accesar el puerto del servidor, esto implica que el servidor deba inicializarse antes de iniciar para que pueda procesarlas.

Escalabilidad en NodeJS


Node.js fue formulado para generar una sistema escalable y que tuviese la consistencia suficiente como para poder generar un elevado número de conexiones de forma simultánea con el servidor. Generalmente cuando se crea un gran número de conexiones el rendimiento y la velocidad de las aplicaciones y páginas web se ven perjudicados. Esto se debe a que la gran mayoría de tecnologías que trabajan desde el lado del servidor accionan las peticiones de forma aislada y mediante hilos independientes. Por eso, cuando la cantidad de solicitudes que se hacen van en incremento, los recursos y el consumo de los mismos también se incrementan. 

A este tipo de limitaciones que se generan en el propio servidor también es necesario sumar todas aquellas que posee el cliente (desde la velocidad de su conexión a internet o la memoria RAM de su dispositivo por ejemplo). La cantidad de solicitudes así como los procesos entrantes y salientes se convierten en uno de los factores limitantes y Node.js ha sido concebido para optimizar este handicap.


Operaciones asíncronicas


Un servidor se encarga de ejecutar diferentes tareas para facilitar la comunicación con los diferentes clientes. Estas tareas se aglutinan bajo las siglas I/O que hacen referencia a aquellas que están destinadas a la entrada (input) y a la salida (output) de información. En los lenguajes clásicos de programación como Java este tipo de tareas se desarrollaban de una forma sincrónica. ¿Qué quiere decir esto? Que todas se ejecutaban de una forma lineal por lo que hasta que no se llevaba a cabo un proceso no se podía ejecutar el siguiente. Esto trae bastantes inconvenientes como por ejemplo el alargamiento innecesario de los procesos de trabajo y la tendencia a que se produzcan bloqueos. Sin embargo NodeJS emplea un I/O de tipo asíncrono. Esto significa que todas las tareas que se desarrollan por el servidor se hacen de forma paralela por lo que pueden efectuarse de forma simultánea y sin que se produzca ningún tipo de bloqueo en el flujo de trabajo. 


El resultado es una ventaja competitiva considerable que proporciona a la arquitectura de las aplicaciones web una mayor potencia y velocidad de procesamiento.

Además de la alta velocidad de ejecución de JavaScript , el verdadero potencial de Node.js es algo que se llama Bucle de Eventos(Even Loop).




Al estar basado en un bucle, nuestra principal tarea como desarrolladores de Node.js es mantener ese bucle funcionando y sin procesos que lo ralenticen o que lo bloqueen.

Para escalar grandes vólumenes de clientes, todas las operaciones intensivas en Node.js se llevan a cabo de forma asíncrona. El enfoque tradicional para generar código asíncrono es engorroso y crea un espacio en memoria no trivial para un gran número de clientes(cada cliente genera un hilo, y el uso de memoria de cada uno se suma.)


La importancia de los eventos en NodeJS


Su arquitectura se basa en eventos y gracias a ella es posible generar un tipo de procesamiento asíncrono de operaciones de entrada y salida. Está basada en un único hilo de procesos capaz de contener todos los eventos que se producen. A medida que se van produciendo eventos su sistema es capaz de trabajar con ellos a diferentes niveles mediante su función callback.

Los diferentes procesos no se desarrollarán en un mismo nivel. De este modo, aunque todos los eventos formen parte de un mismo hilo de procesos, se trabajará con ellos mediante funciones paralelas dentro del mismo bucle. Cuando una tarea en segundo plano se ejecuta la función “callback” resuelve la entrega del resultado y puede ser entregado al cliente en un tiempo muy reducido.



JavaScript como base de su semántica 


Para generar una conexión entre dos o más dispositivos lo más normal es que exista un elemento llamado servidor cuya función es mediar entre los diferentes usuarios que inician la conexión. Estos usuarios o clientes establecen una comunicación directa con el servidor y reciben una información que puede ser de cualquier tipo: Desde una página web a cualquier tipo de notificación o mensaje emitido por cualquier otro cliente.

Para gestionar y construir este tipo de conexiones existen diferentes tipos de lenguajes. Algunos de ellos se ejecutan directamente en el servidor (php es un ejemplo), mientras que otros se ejecutan del lado del cliente (por ejemplo JavaScript).

Gestor de bibliotecas Node Package Manager


Uno de los puntos fuertes de nodeJS es su Node Package Manager (uno de los paquetes NPM). Una especie de gestor que da acceso a un conjunto de librerías muy extenso que además son gratuitas y generadas a partir de la colaboración de los usuarios de su comunidad. Algunos de los paquetes más conocidos que podrás encontrar en su plataforma son React, Gulp, Browserify, Grunt-cli, Bower, Grunt, Express, Cordova o Forever.

NPM sebe instalarse en el computador (ya sea cuando se instala Node.js o por aparte)


NPM crea un folder llamado "node_modules", donde se alojan los paquetes descargados.

C:\Users\MyName\node_modules\upper-case



Resultado:



Se recomienda tener conocimiento previo en AJAX además de las otras tecnologías anteriormente mencionadas en el presente blog.
Para obtener más información al respecto consultar:    npmjs

Ampliando un poco más sobre los módulos en Node js, estos son como bibliotecas en Javascript, se incluyen a través de la instrucción :   require('nombreModulo').

Ejm:     var http = require('http');

Se pueden crear módulos propios usando exports para que las funciones puedan usarse fuera del mismo.

Ejm: myFirtsModule.js

  exports.myDateTime = function ()
{
    return Date();
};

Sobre el módulo URL

Permite dividir la línea de URL en partes legibles y manejables. Método parse retorna un objeto tipo URL con cada una de sus secciones como propiedades.
Método query que retorna los parámetros como un objeto con propiedades atributo-valor.



Ventajas de NodeJS


  • Se puede utilizar en la gran mayoría de servidores.
  • Linkedin y Paypal fueron desarrolladas a partir de NodeJS, las cuales son fieles indicadores de la calidad y la potencialidad.
  • Garantiza un elevado rendimiento. No sólo puede arquitecturas sólidas y potentes sino que además reduce de una forma muy drástica el ratio de errores.
  • Al estar inspirado en JavaScript cuenta con una semántica muy fácil de digerir, aprender y aplicar por cualquier programador.
  • Capacidad de soportar miles de solicitudes a un único servidor de forma simultanea.
  • Capacidad de gestionar grandes cantidades de información. Ejemplo Facebook.
  • Comunidad bastante amplia que permite establecer lazos  de colaboración.

Desventajas de NodeJS


  • Dificultad de implementar en alojamientos existentes.
  • Relativamente inestable, ya que usualmente en cada actualización se require de cambios en el código fuente para que se mantenga funcionando correctamente.
  • Falta de una biblioteca estándar
  • Falta de bibliotecas en general debido a su poca madurez.
Para profundizar más desde una perspectiva práctica consultar el siguiente video que muestra un curso introductorio de NodeJS para principiantes: Curso NodeJs



Aplicación conversor de divisas


El siguiente ejemplo implementa una página que realiza una conversión de monedas, ingresando una modena de origen y luego la cantidad a convertir. En la misma esta realizada mediante el uso de HTML, CSS, Javascript con JQuery.

Conversor de divisas : Enlace para consultar la página de la aplicación.



Inicio de la aplicación:






Elegir moneda origen y luego la cantidad a convertir:






Luego se tiene la opción de otras monedas, para consultar todas las moneas vigentes en la actualidad:





Finalmente si no le gusta el tema negro se puede optar en la ventana incial seleccionar la opción de "Tema blanco" e ingresando otros parametros así tenemos:





Bibliografía









sábado, 22 de diciembre de 2018

Sesión 6

Agenda 

  • ¿Qué es JavaScript?
  • Historia
  • Glosario básico
  • Sintaxis
  • Posibilidades y limitaciones
  • Introducción
  • Variables 
  • Tipos de datos
  • Condicionales
  • Ciclo For
  • Ciclo While
  • Funciones
  • Scope de JavaScript
  • Métodos y propiedades para las cadenas de texto
  • Introducción al DOM(Document object model)
  • Bibliografía


¿Qué es JavaScript?

Es un lenguaje de programación que se utiliza principalmente para crear páginas web dinámicas.

Para entrar en contexto una página dinámica es aquella que incorpora efectos como texto que aparece y desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de avisos al usuario.

Se puede decir que JavaScript es un lenguaje de programación interpretado, por lo que no es necesario compilar los programas para ejecutarlo. 

Historia


A principios de los años 90, la mayoría de usuarios que se conectaban a Internet lo hacían con modems a una velocidad máxima de 28.8 kbps. En ese tiempo se empezaban a desarrollar las primeras aplicaciones web y por tanto, las páginas web comenzaban a incluir formularios complejos.

Estas aplicaciones web cada vez más complejas y con una velocidad de navegación tan lenta, surgíó la necesidad de un lenguaje de programación que se ejecutará con el navegador del usuario. De esta forma, si el usuario no rellenaba correctamente un formulario, no se le hacía esperar mucho tiempo hasta que el servidor volviera a mostrar el formulario indicando los errores existentes.

Brendan Eich, un programador que trabajaba en Netscape, pensó que podría solucionar este problema
adaptando las tecnologías de ese momento, surgiendo así lo que se conoce como LiveScript.
Posteriormente, Netscape le cambio el nombre a JavaScript. La razón de cambio fue exclusivamente por marketing, ya que Java estaba de moda en el mundo informático en esa época.

Glosario básico

Script:

cada uno de los programas, aplicaciones o trozos de código creados con el lenguaje JavaScript. Unas pocas líneas de código forman un script y un archivo de miles de líneas de código JavaScript también se considera un script.

Sentencia:

Cada una de las instrucciones que forman un script.

Palabras reservadas:

Son las palabras que se utilizan para construir las sentencias de JavaScript y que por lo tanto no pueden ser utilizadas libremente. Las palabras actualmente reservadas por este lenguaje son:
break, case, catch, continue, default, delete, do ,else, finally, for, function, if, in, instanceof, new, return, switch, this, throw, try, typeof, var, void, while y with.


Sintaxis

Las normas básicas que definen la sintaxis de JavaScript son las siguientes:

No se tienen en cuenta los espacios en blanco y las nuevas líneas


Como sucede con XHTML, el intérprete de JavaScript ignora cualquier espacio en blanco sobrante, por lo que el código se puede ordenar de forma adecuada para entenderlo mejor (tabulando las líneas, añadiendo espacios, creando nuevas líneas,etc.)

Se distinguen las mayúsculas y minúsculas


Al igual que sucede con la sintaxis de las etiquetas y elementos XHTML. Sin embargo, si en una página XHTML se utilizan indistintamente mayúsculas y minúsculas, la página se visualiza correctamente, siendo el único problema la no validación de la página. Por otro lado, si en JavaScript se intercambian mayúsculas y minúsculas el script no funciona.

No se define el tipo de las variables


Al crear una variable, no es necesario indicar el tipo de dato que almacenará. De esta forma, una misma variable puede almacenar diferentes tipos de datos durante la ejecucución del script.

No es necesario terminar cada sentencia con el carácter de punto y coma

En la mayoría de los lenguajes de progamación, es obligatorio terminar cada sentencia con el carácter (;). Aunque JavaScript no obliga a hacerlo, es conveniente seguir la tradición de terminar cada sentancia con el carácter del punto y coma.

Se pueden incluir comentarios

Los comentarios se utilizan para añadir información en el código fuente del programa. Aunque el contenido de los comentarios no se visualiza por pantalla, si que se envía al navegador del usuario junto con el resto del script, por lo que es necesario extremar las precauciones sobre la información incluida en los comentarios.


Posibilidades y limitaciones 


Desde su aparición, este lenguaje siempre fue utilizado de forma masiva por la mayoría de sitios de internet. La aparición de Flash disminuyó su popularidad, ya que Flash permitía realizar algunas acciones imposibles de llevar cabo en JavaScript. No obstante, la aparición de las aplicaciones AJAX programadas con JavaScript le ha devuelto una popularidad sin igual dentro de los lenguajes de programación web.

En cuanto a las limitaciones, JavaScript fue diseñado de forma que se ejecutara en un entorno muy limitado que permitiera a los usuarios confiar en la ejecución de los scripts.

De esta forma, los scripts de JavaScript no pueden comunicarse con recursos que no pertenezcan al mismo dominio desde el que se descargó el script. Además estos tampoco pueden cerrar ventanas que no hayan abierto esos mismos scripts. Las ventanas, que se crean no pueden ser demasiado pequeñas ni demasiado grandes ni colocarse fuera de la vista del usuario(los detalles concretos dependen de cada navegador).
También los scripts no pueden acceder a los archivos del ordenador del usuario y tampoco pueden leer o modificar las preferencias del navegador.

A pesar de todo, existen alternativas para poder saltarse algunas de las limitaciones anteriores. La alternativa más usada y conocida consiste en firmar digitalmente el script y solicitar al usuario el permiso para realizar esas acciones.


 Introducción

Para empezar a trabajar se recomienda usar un editor de texto de preferencia. Luego para al tener nuestro archivo HTML creado, procedemos a importar nuestro archivo de JavaScript, el se recomienda colocarlo al final antes del body, como se muestra a continuación:




Variables 

En JavaScript las variables se representan de la siguiente manera:

ejemplo:

var x = 5;
var y = 6;
var z = x + y;

Como podemos observar en el ejemplo anterior se usa la palabra "var" antes del nombre de la variable no obstante podemos omitir esta palabra y de igual forma nuestra variable funciona, sin embargo no se recomienda omitirla ya que tendríamos variables globales y nos podría generar problemas con el scope.

Algunos elementos adicionales:

 alert(""): El cual nos ayuda a mostrar mensajes en la página en forma de alerta.

prompt(text, value):  Nos permite almacenar un texto y un valor en forma de input desde el teclado.El value es opcional solo sirve para colocar dentro de la entrada un texto por defecto.

document.write(var): Similar al alert pero muestra directamente el mensaje en la página.

console.log(var): Muestra mensajes como un alert y un document.write pero en la consola del inspector de elementos del navegador.


Comentarios: JavaScript usa para comentar una línea de código  "//" y para bloques
                        de código "/*     */".


Tipos de datos



Ejemplos







                     

Condicionales


Ejemplo del uso de condicionales if y else.




Una variante agregando el operador lógico && que es el y lógico. También tenemos el || para el o lógico. Ejemplos:







Ejemplo donde se usa el else if:






Ciclo FOR

Estructura que nos permite repetir nuestro código o estructura n veces. A continuación se muestra un ejemplo del uso de esta estructura en la que se imprimen en pantalla los días de la semana, esto mediante el ciclo for que recorre el arreglo de días del inicio.




Ciclo WHILE

Similar al anterior pero usado dependiendo del problema a resolver, se diferencia porque usualmente usa serie de condicionales dentro de su estructura. Adicionalmente tenemos el "do" el cual funciona para ejecutar un ciclo al menos una vez.Siguiendo el ejemplo anterior tenemos de mostrar en pantalla los días de la semana tenemos.



Funciones

Son fragmentos de código que podemos reutilizar cuantas veces se quiera, para darle un enfoque más dinámico a los programas desarrollados. Como ejemplo tenemos una función que resibe como entrada dos números y retorna el mayor de estos.



Scope de JavaScript


Determina la accesibilidad del código(variables) se calsifican en globales y locales.

Global: Podemos acceder a ellas desde cualquier parte del código.

Local: Varriables creadas dentro de una función, solo pueden ser accedidas desde su función o una función anidada.


Métodos  y propiedades para cadenas de texto

length:

Retorna la longitud de una cadena de texto(string).


indexOf():

Retorna el índice de (la posición de ) la primera aparición de un texto especificado en una cadena.

lastIndexOf():

Devuelve el índice de la última aparición de un texto especificado en una cadena.


search():

Busca una cadena para un valor específico y retorna la posición de la coincidencia.


slice():

Extrae una parte de una cadena y retorna la parte extraída en una nueva cadena. El método toma 2 parámetros: la posición inicial y la posición final(final no incluido).En este caso mostrando un ejemplo donde se corta una parte de un string desde la posición 7 a la posición 12 (13-1).



El resultado sería : Banana

substring():

Similar al slice(), la diferencia es que la sub cadena no puede aceptar índices negativos.


substr():

Similar al slice(), la diferencia es que el segundo parámetro especifica la longitud de la parte extraída.


replace():

Reemplaza un valor especificado con otro valor en una cadena. Ejemplo:


toUpperCase():

Una cadena de texto se convierte a mayúsculas con toUpperCase().

toLowerCase():

Una cadena de texto se convierte a minúsculas con toLowerCase().


concat():

Une dos o más cadenas, se puede usar como sustituto del operador más para el caso de strings.


string.trim():

Elimina los espacios en blanco de ambos lados de una cadena.


charAt():


Retorna el carácter en un índice (posición) específico de un string.


charCodeAt():

Devuelve el código Unicode del carácter en un índice especificado en una cadena:


split():

Converter un string en una mariz. Ejemplo:



DOM(Document Object Model)


Nos permite acceder y poder manipular los elementos de nuestro sitio web. El DOM es la estructura del sitio web conforma por elementos llamadas nodos. Consta de dos elementos primarios el head y el body.
Su objetivo es poder acceder a los elementos con JavaScript y poder obtener valores y trabajar con ellos. Para entender mejor el concepto consultar el siguiente video:  Introducción al DOM


Bibliografía


























sábado, 15 de diciembre de 2018

Sesión 5

Agenda



  • HTML

   - Definición
   - Evolución del lenguaje
   - Estándares según W3c.org
   - Radiografía de cualquier elemento HTML
   - Distintas especificaciones
   - Validación de especificaciones
   - Sintaxis de elementos HTML
   - Lo nuevo en HTML5


  •  CSS

    - ¿Qué es CSS?
    - Sintaxis de un elemento CSS
    - ¿Cómo enlazar HTML con CSS?



HTML(HTML-HyperText Markup Languaje)


Es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes.
El HTML se escribe en forma de <<etiquetas>>, rodeadas por corchetes angulares (<,>).
HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script(por ejemplo javaScript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML. Además da a los autores los medios para:

  • Publique documentos en línea con encabezados, texto, tablas, listas, fotos, etc.
  • Recupere información en línea a través de enlaces de hipertexto, con el clic de un botón.
  • Diseñar formularios para realizar transacciones con servicios remotos, para usar en la búsqueda de información, hacer reservaciones, ordenar productos, etc.
  • Incluya hojas de cálculo, videoclips, clips de sonido y otras aplicaciones directamente en sus documentos.
  • Con HTML, los autores describen la estructura de las páginas utilizando el marcado. Los elementos del lenguaje etiquetan partes del contenido, como "párrafo", "lista", "tabla", etc.

Evolución de HTML

Se ilustra la evolución de HTML desde 1990 al 2009:






























HTML es un estándar definido por el Consorcio World Wide Web (W3C) enlace

Estándares provistos por W3C en el diseño WEB y aplicaciones


  • HTML & CSS
  • Audio y Video
  • Web Móvil
  • JavaScript Web APIs
  • Accesibilidad
  • Privacidad
  • Gráficos
  • Internacionalización
  • Matemáticas en la Web
Definiendo los conceptos de W3C:






















Se puede consultar en :  w3.org

Radiografía de un elemento HTML













Distintas especificaciones

Con la evolución del HTML se van generando distintas especificaciones de la sintaxis del lenguaje de marcas.


Esto es HTML4
















Esto es XHTML














Diferencia entre HTML/XHTML



  • Lenguaje de marcado de hipertexto extendible
  • XHTML esta basado en XML. 

                 - Sintaxis más estricta y limpia que HTML

  • XHTML es casi idéntico que HTML 4.01
  • Un documento XHTML tiene solo un elemento raíz

Validación de especificaciones


La validación de una página web es el proceso para asegurar que las páginas del sitio web se ajustan a los estándares definidos por varias organizaciones, principalmente el W3C.

El W3C ofrece de forma gratuita el servicio de validación de Marcado.

La validación es muy importante, porque asegura que las páginas web son interpretadas de la misma forma por software diferente.












Consultar en : Validador de W3C

Sintaxis de elementos HTML



Lo nuevo en HTML5

HTML5 es la nueva versión de HTML, la cual tiene más etiquetas y por lo tanto más opciones de diseño.
Cabe agregar que no todo nuestros contenidos de las páginas en HTML5 sirven en todos los navegadores por ejemplo en Intenet Explorer.

En HTML5 hay algunos nuevos elementos semánticos:

<header>
<hgroup>
<nav>
<article>
<section>
<asine>
<time>
<mark>
<footer>

Hay cuatro nuevos elementos multimedia>

<audio>
<canvas>
<source>
<video>

Y hay dos nuevos elementos para estructurar el contenido>

<details>
<summary>


Ejemplo del uso de <details>


























Representación del HTML anterior:







CSS (Cascading Style Sheet)

Es un lenguaje de estilo de hojas usado para describir la representación de las páginas web. CSS permite la separación del contenido del documento de la presentación del documento (disposición, colores, fuentes, etc).

Sintaxis de un elemento CSS












CSS 2.1 tiene más de 90 propiedades. La última especificación es CSS 3.

¿Cómo enlazar HTML con CSS?


Enlazándose a una hoja de estilo externa. Una hoja de estilo externa puede ser enlazada a un documento HTML mediante el elemento LINK de HTML:







La etiqueta <LINK> se coloca en la cabecera HEAD del documento. El atributo opcional TYPE se usa para especificar un tipo de medio --text/css para una hoja de estilo en cascada-- permitiéndole a los navegadores omitir los tipos de hoja de estilo que no soportan.
Cabe agregar que es una buena idea configurar el servidor para enviar text/css como Content-type para archivos CSS.


Las hoja de estilo externas no debrían contener ninguna etiqueta HTML como <HEAD> o <STYLE>. La hoja de estilo solo debería consistir simplemente de reglas de estilo o sentencias. Un archivo que solo consista de:

P { margin: 2em }

podría usarse como una hoja de estilo externa.

El atributo REL se usa para definir la relación entre el archivo enlazado y el documento HTML. REL=StyleSheet especifica un estilo persistente o preferido mientras que REL="Alternate StyleSheet" define un estilo alterno. Un estilo persistente es aquel que siempre se aplica si están activas las hojas de estilo. 
La ausencia del atributo TITLE, como en la primera etiqueta <LINK>






En este ejemplo, tres hojas de estilo son combinadas en un estilo "Contemporaneo" que se aplica como una hoja de estilo preferido. Para combinar múltiples hojas de estilo en un estilo único, se debe usar el mismo TITLE con cada hoja de estilo.

Una hoja de estilo externa es ideal cuando el estilo se aplica a muchas páginas. Con una hoja de estilo externo, un autor podría cambiar la apariencia de un sitio completo mediante el cambio de un solo archivo. Además, la mayoría de navegadores guardan en caché las hojas de estilo externas, evitando así una demora en la presentación una vez que la hoja de estilo se ha guardado en caché.


Elementos HTML presentes:


<head> :  provee información general (metadatos) acerca del documento, incluyendo su título y enlaces a scripts y hojas de estilos.

<div> : sirve para crear secciones o agrupar contenidos

<nav> : sirve para crear un menú de navegación. Contiene enlaces a las diferentes secciones de la Web.

<p> : elemento apropiado para distribuir texto en párrafos.

<link> :  especifica la relación entre el documento actual y un recurso externo. Los usos posibles de este elemento incluyen la definición de un marco relacional para navegación. Este elemento es más frecuentemente usado para enlazar hojas de estilos.

<ul> : listas no ordenadas. Cada punto que queramos añadir a la lista, lo haremos dentro de la etiqueta <li> y su cierre.

<!--comment--> : elemento para realizar comentarios dentro del HTML para explicar de mejor   manera sus secciones.

<script> : Los scripts ofrecen la posibilidad de extender los documentos HTML de manera activa e interactivas.

<a> :genera vínculos de hipertexto para enlazar con ellos todos sus documentos en web. Para generar un enlace a otro documento necesitamos el nombre de un archivo (o su dirección URL) y el texto que servirá de punto de activación del otro documento.

<img> :  El elemento img representa a una imagen, lo cual es un recurso externo que puede ser incrustado en el cuerpo de un documento. La ubicación de dicho recurso externo debe especificarse en el atributo src.

Elementos CSS presentes:


@media: se usa en consultas de medios para aplicar diferentes estilos para diferentes tipos de dispositivos.

body : representa una sección en la que podemos hacer cambios de estilo a todo el cuerpo del documento HTML.

p : representa la sección de párrafos del documento en la que podemos hacer los respectivos cambios de estilo.

font size : nos permite cambiar el tamaño de la fuente dentro del body.

padding :  se utilizan para establecer de forma abreviada el valor de una o más propiedades individuales. La propiedad padding es tan poderosa que permite establecer una, dos, tres o las cuatro zonas de relleno de forma simultánea.


Bootstrap:

Elementos que se deben incluir en la sección <head>



Manejo de los div con los tipos class=container y container-fluid.

Contenedores

Bootstrap requiere un elemento contenedor para envolver los contenidos del sitio y alojar nuestro sistema de rejilla(grid). Se debe tener en cuenta que debido al padding y otros elementos, ninguno de los contenedores es anidable.

Container : para un contenedor de ancho fijo responsive



Container-fluid : para un contenedor de ancho completo, que abarque todo el ancho del viewport.




Referencias



Sesión 4

Agenda

  • Ciclo de desarrollo de una aplicación web
  • Stack application y web stack application
                       - Elementos que las conforman
                       - La arquitectura cliente-servidor la base de las aplicaciones web
                       - Herramientas de desarrollo web y recursos
  • Criterios de selección tecnologías para aplicaciones web



Fases del ciclo del desarrollo una aplicación WEB


Enlistando las fases del ciclo de desarrollo de una aplicación web tenemos:

  • Identificación del modelo de negocio
  • Análisis de proceso de negocio 
  • Propuesta técnica y revisión
  • Diseño
  • Desarrollo de la aplicación
  • Monitoreo y control
  • Puesta en producción y capacitaciones
  • Mantenimiento y soporte
A continuación se establece un mapa mental que define las fases del ciclo de desarrollo de una aplicación web:





Stack application y web stack application


En términos generales una Stack application abarca desde la manera en que nos referimos al hardware de un computador y cómo los programas tradicionales se ejecutan.

De esta manera se define los siguientes conceptos:

Modelo tradicional: este modelo contiene las siguientes capas:


  • Capa de hardware
  • Sistema Operativo, que controla el acceso a esos recursos de hardware y su ejecución.
  • Lenguajes de Programación, 
  • Aplicación

Modelo WEB:     

El enfoque es sobre lo que está corriendo encima del sistema operativo. No se presta mucha atención al hardware ni al sistema operativo.

Web Stack Tools:

Herramientas necesarias para construir una aplicación Web en arquitectura cliente-servidor.

Una Stack application Web se encuentra en la parte superior del sistema operativo y el hardware, ejecutando código desde los requerimientos de negocio hasta los datos.

¿Cuáles son los elementos que forman una Stack application ?

Los requerimientos de la aplicación se convierte en un prototipo funcional, que luego se convierte en una aplicación escalable y posteriormente los datos se tratan en gran escala. La conforma:


User Interface/ User Experience Design (UX/UI DESIGN)

Toma los requerimiento de negocio y produce composiciones, diagramas de Photoshop o diagramas de croquis para el equipo de Front-end. 
Crean un marcado o maquetado no ejecutable de cómo debería funcionar esa aplicación.
Su objetivo es definir como el cliente desea interactuar, qué tipo de datos tendrá y su sus procesos dentro de la aplicación.

Front End 

Toma los elementos del concepto anterior y produce un prototipo funcional en HTML y CSS, con algo de JavaScript. No obstante, esta no es una aplicación lista para la puesta en producción.

Back End

Toma el prototipo funcional del equipo de front-end y lo integra en un sistema que pueda sobrevivir a cientos o miles de solicitudes por minuto. Aquí se profundiza más en la arquitectura del software real en el desarrollo de la lógica del sistema. 

Ops + Data

El equipo de back-end produce una aplicación escalable, pero luego necesita que el equipo de operaciones realmente haga que la aplicación se ejecute en el servidor, mantenga el código y reinicie si el código falla. Luego de una gran cantidad de datos producidos por los usuarios del sistema, aquí es donde la ciencia de datos comienza a trabajar con los datos que se almacenan desde el back-end.

 Esquema que resume los puntos anteriores:













Roles + Títulos de trabajo














Si se desea ampliar más sobre los aspectos explicados anteriormente consultar: Can a Full Stack Developer Exist?

La arquitectura cliente servidor es la base de una aplicación web


Repasando conceptos previos en el modelo cliente-servidor, la lógica de negocio esta inmersa dentro de la aplicación que realiza la interfaz de usuario en el lado cliente y el servidor administra los datos.

Ilustrando lo anterior y relacionando con el contexto de esta sesión tenemos:















Cabe agregar que es vital entender el proceso de desarrollo web antes de escoger las herramientas de la pila de tecnologías modernas a utilizar.















FRONT END                            BACK END


Profundizando un poco más lo que se necesita del lado cliente para empezar a desarrollar aplicaciones web es:

HTML (Hypertext Markup Languaje): es un lenguaje de marcas que provee la estructura de las páginas web.

CSS(Cascanding Style Sheets): define cómo se ve el HTML e indica al browser los formatos como deben ser desplegados los elementos de información.

Javascript: lenguaje de programación que provee el comportamiento del HTML.


Lo mejor y lo peor de ser un desarrollador web es que el entorno cambia constantemente. Si bien esto es emocionante, también significa que los desarrolladores web siempre deben ser proactivos en el aprendizaje de nuevas técnicas o lenguajes de programación, adaptarse a los cambios y estar dispuestos por aceptar nuevos desafíos.

Si se desea profundizar más sobre esta sección además de saber ejemplos de conjuntos de tecnologías  usadas para  plataformas consultar:  technology-stack-for-web-development
  

Algunas herramientas y recursos de desarrollo web del 2018 recomendadas para esta sesión


Bibliotecas de JavaScript


  • JQuery: Una biblioteca de JavaScript rápida, pequeña y con muchas funciones.
  • BackBone.JS: Proporciona una red con modelos, vistas, colecciones y eventos.
  • D3.js: Biblioteca para manipular documentos basados en datos.
  • React: La biblioteca de JavaScript de Facebook desarrollada para construir interfaces de usuario.
  • JQuery UI: Un conjunto de interacciones de interfaz de usuario, efectos, widgets y temas.
  • jQuery Mobile: Sistema de interfaz de usuario basado en HTML5 diseñado para crear sitios web responsive.
  • Underscore.js: Ayuda para la programación funcional sin extender ningún objeto incorporado.
  • Moment.js: Analizar , validar, manipular y mostrar fechas en JavaScript.
  • Lodash: Una biblioteca de utilidades moderna que ofrece modularidad, rendimiento y extras.
  • Vue.js : Un marco de JavaScript de código abierto utilizado para crear interfaces de usuario.

Marcos front-end


Bootstrap: HTML, CSS y un marco JS para desarrollar primeros proyectos responsive adaptables en la web.
Foundation: familia de marcos front-end responsive que facilitan el diseño de sitios web, aplicaciones y correos electrónicos responsive que se ven increíbles en cualquier dispositivo.
Semantic UI: marco de desarrollo que ayuda a crear diseños hermosos y sensibles utilizando HTML amigable para los humanos.
uikit: un framework de front-end ligero y modular para desarrollar interfaces web rápidas y potentes.


Preprocesadores CSS


Un preprocesador de CSS es básicamente un lenguaje de scripting que extiende CSS y luego lo compila en CSS normal.

Sass: Una extensión de CSS de grado profesional muy madura, estable y potente.
Less: Es como una extensión de CSS que también es compatible con CSS. Esto hace que el aprendizaje de Less sea más sencillo.
Stylus: un nuevo lenguaje, que proporciona una forma eficiente, dinámica y expresiva de generar CSS. Soporta tanto una sintaxis con sangría como un estilo CSS regular.


Editores de texto y código


Atom: Editor de texto moderno y accesible.
SublimeText: Editor de texto sofisticado para código, marcado y prosa con un gran rendimiento.
Notepad ++: Editor de código fuente gratuito que admite varios lenguajes de programación.
Visual Studio Code: Edición de código redefinida y optimizada para construir y depurar aplicaciones web y de nube modernas. 
WebStorm: IDE ligero pero potente, perfectamente equipado para el desarrollo complejo del lado cliente y el desarrollo del lado servidor con Node,js
Brackets: Editor de texto moderno, ligero y potente; escrito en JavaScript, HTML y CSS.

Git Clientes/Servicios


Git es un sistema de administración de código fuente para software y desarrollo web conocido por el control de revisión distribuido. Al trabajar con equipos, usar un cliente git para impulsar cambios de código de desarrollo a producción es una forma de mantener el caos y asegurar que las cosas se prueben para que no rompan su aplicación web en vivo o sitio.

SourceTree: Un cliente gratuito de Git y Mercurial para Windows o Mac, además de Bitbucket.
GitKraken: Un cliente multiplataforma gratuito, intuitivo, rápido y hermoso.
GitHub Client: Una forma perfecta de contribuir a proyectos en GitHub.
GitLab: Aloja tus proyecto de software privado y público de forma gratuita.

Para saber sobre más herramientas consultar la página:  100+ Awesome Web Dev Tools and Resources

Criterios de selección para escoger y no escoger una tecnología de una aplicación web


Cómo No escoger una tecnología WEB para un desarrollo de una aplicación



Criterios para escoger un stack de tecnología WEB





Como dato adicional la Ciberdelincuencia le costará a las empresas más de $2 billones en 2019
La investigación asociada titulada "El futuro de la ciberdelincuencia y la seguridad: amenazas de mitigación financiera y corporativa", encontró que la mayoría de estas violaciones provendrán de la infraestructura de res y de TI existentes. Mientras que las nuevas amenazas dirigidas a dispositivos móviles y la Internet de las cosas se informa que tendrá a un ritmo creciente. 
para mayor información consultar el siguiente enlace: Enlace cibercrimen

  
Referencias adicionales 
























domingo, 9 de diciembre de 2018

Sesión 3

Agenda 


  • Práctica construcción de una aplicación usando JSP y Servlet
  • Referencias

Redacción del caso trabajo :  Enunciado

Construcción realizada 


Se crea un proyecto web en Java en este caso usamos el IDE de NetBeans EE versión 8.2, el servidor incorporado de Glassfish y el navegador Google Chrome para correr la aplicación.

Estructura de la aplicación la cual tiene tres archivos .jsp que son el index(inicio), login y registro.

Luego más abajo tenemos el Source Package que contiene los servlets de login, registro, abrir login, abrir registro.


Contenido del index.jsp la cual hace uso de la directiva @page y se define mediante código HTML los botones de inicio de sesión y registro.


Contenido del login.jsp que de forma análoga al anterior jsp usa la directiva @page y crea un par de entradas para ingresar las credenciales de usuario para iniciar sesión.


Contenido del register.jsp. Similar a las páginas anteriores pero en esta se establece el formulario para registrarse para posteriormente poder iniciar sesión. 


Contenido del login.java. Aquí definimos nuestro servlet mediante una clase pública, donde el request forma un papel fundamental para el manejo de los datos ingresados por el usuario y posteriormente mediante condicionales validamos las credenciales ingresadas en caso de que no se este registrado previamente.


Contenido del register.java.  Aquí definimos nuestro servlet mediante una clase pública, donde el request forma un papel fundamental para el manejo de los datos ingresados por el usuario. Además se hace uso del objeto HtppSession explicado en la sesión anterior y posteriormente mediante condicionales validamos la completitud y correctitud de la contraseña ingresada al momento de realizar un registro.



Contenido del openLogin.java y openRegister.java, aqui simplemente estos servlets se encargan de redireccionar la página al login y registro respectivamente de acuerdo al flujo que podría seguir la aplicación web de acuerdo a los datos ingresados por el usuario.



Ejecución de la aplicación


Ahora vamos a ejecutar la aplicación la cual usa el navegador de google Chrome por defecto si se desea cambiar el navegador le damos clic derecho al proyecto dentro del netbeans, seleccionamos properties y luego Build ahí nos aparece el navegador que usamos por defecto para ejecutar nuestras aplicaciones web con Java.


Ahora seleccionamos la opción de Registrarse 

Ahora llenamos el formulario con nuestros datos y le oprimimos el botón de registrar:

Ahora somos redireccionados a la página de inicio de sesión y se nos muestra un mensaje de que nos registramos de forma exitosa. 


Ahora ingresamos nuestras credenciales de usuario que elegimos para el registro anterior y seleccionamos el botón de Ingresar.



Luego se nos muestra que iniciamos la sesión de forma correcta.



Finalmente validamos el usuario ingresado al ingresar la contraseña de forma incorrecta.


Referencias