viernes, 11 de enero de 2019

Sesión 9

Agenda


  • Introducción a PHP
  • Sobre PHP
  • Características
  • Competidores
  • ¿Quién lo usa?
  • Sobre su orientación programada
  • Sobre servicios
  • Evolución de PHP
  • Sobre la instalación
  • Manipulación de formularios con PHP
  • Conectando a la base de datos
  • Ejemplo de un CRUD que usa PHP

Introducción a PHP

Sobre PHP


Características

Lenguaje de lado servidor más extendido en la web, potente y simple. Posee un gran soporte en la mayoría de los servidores de hosting. Es open source: pertenece a la comunidad.

Competidores

Se destacan ASP.NET-ASP estándar, NodeJS, Ruby, Java, Python entre otros.

¿Quién lo usa?

CMS populares: WordPress, Joomla!, Drupal.
Sistemas de comercio electrónico:  Prestashop, Woocommerce, Magento.

Sobre su orientación programada


Multiplataforma.
Estilo de programación totalmente libre.
Programación estructurada (funciones).
Programación Orientada a Objetos (clases y objetos).
Actualmente se están incorporando características de la programación funcional.

Filosofía de código abierto.
Multitud de herramientas, librerias, frameworks gratuitos.
El núcleo del lenguaje con nutrida cantidad de funciones para hacer todo tipo operaciones.

Sobre servicios


Funciones de correo electrónico.
Gestión de bases de datos.
Gestión de archivos.
Tratamiento de imágenes.
Funciones básicas de aspectos de internet (manejo de sesiones, cookies, url).
Funciones básicas de propósito general.

En este caso, nos interesa la conexión de PHP con alguna base de datos (MySQL) para mostrar información en una página WEB.

Evolución de PHP


Rasmus Lerdorf en 1994.
Nace como un CGI escrito en C que permitía la interpretación de un número limitado de comandos. El sistema fue denominado Personal Home Page Tools. Luego PHP/FI -Form Interpreter.

Versión 3: 1997 con nuevas funcionalidades de soporte a protocolos de Internet / soporte a mayoría de bases de datos.

Versión 4: compilado => más velocidad, independencia del servidor WEB, más API's.

Versión 5. mejorada la integración con el paradigma de POO (estable por 11 años y aunque no es la última es la más madura).

Versión 6 y 7: mejoras en rendimiento, pero aún no se ajusta a todos los servidores.


Ventajas 

  • PHP puede ser usado con cualquier sistema operativo virtual y cualquier tipo de servidor.
  • Las aplicaciones se pueden programar orientadas al procedimiento o al proyecto.
  • HTML, imágenes, PDFs, o archivos flash pueden ser generados dinámicamente con PHP.
  • PHP soporta un agran cantidad de bases de datos diferentes, por lo que este lenguaje de scripting es ideal para la creación de webs basados en bases de datos.
  • PHP ofrece soporte completo para la comunicación del servidor con otros protocolos.

Desventajas


  • Genera URLs que normalmente son crípticas para los usuarios y proporcionan menos palabras clave para los motores de búsqueda.
  • Como es un lengueje que se interpreta en ejecución para ciertos usos puede resultar un inconveniente que el código fuente no pueda ser ocualtado. La ofuscación es una técnica que puede dificultar la lectura del código pero no la impide y, en ciertos casos, representa un costo en tiempos d ejecución.

Sobre la instalación  


PHP, el propio lenguaje.
Una base de datos, que suele ser MySQL pero que podría ser cualquier otra.
Un servidor WEB, que puede ser usualmente Apache o Nginx.

Además, PHP  lo más normal es que se instale como módulo de un servidor WEB, de modo que las páginas generadas por el servidor se puedan procesar mediante PHP. 
Formas de instalar:
  Paquetes todo en uno.
  Todos los programas por aparte.
  Virtualización.
  Editores onLine.

Instalación en Linux






















En la carpeta donde se desean tener los fuentes:    $php -S localhost:8080

Manipulación de formularios en PHP


Escribe un título


Un script PHP se escribe en cualquier parte del documento HTML. 

Inicia con <?php y termina con?>
No es sensitivo a mayúsculas a excepción de las variables.
Las variables se inician con $.
Las instrucciones deben terminar con ;








Tipos de datos, variables y constantes


PHP es tipado.

Tipos: String, Integer, Float (floating point numbers - also called double), Boolean, Array, Object, NULL, Resource.

La variables toman el tipo de su definición. Las cosntantes se declaran por medio de la función define() y tienen alcance global.


Operadores aritméticos y de comparación







Declaración y llamado de funciones




Arreglos e invocación a ordenamientos





Arreglos estándar y arreglos asociativos y su forma de recorrido o acceso.

Manejo y validación de formularios


$_SERVER["PHP_SELF"] es una variable de entorno que contiene el nombre del archivo del script en php en ejecución.

$_POST["name"]  devuelve el contenido del campo del formulario que etiquetado con el nombre del argumento.














Conectando a la Base de Datos


Para establecer la conexión con la BD


Se utilizan las funciones disponibles en la biblioteca MySQLi:

mysqli()

Se indican el servidor, usuario, password y esquema de base de datos.

conn->close()

Para desconectar la comunicación luego de la transacción.





Para consultar registros en una BD


Se utilizan las funciones disponibles en la biblioteca MySQLi:

query($elSQL):

Se indica la sentencia de SQL a recuperar y luego se itera sobre el resultado.






Ejemplo de un CRUD que usa PHP


Para este ejemplo se hizo uso del framework Laravel el cual es de código abierto para desarrollar aplicaciones y servicios web con PHP 5 y PHP 7. Su filosofía es desarrollar código PHP de forma elegante y simple.

El presente ejemplo implementa un gestor de categorías(creación, consulta, edición y eliminación) para un sistema que ofrece servicios de salud y cuido.

Ventana de inicio con las opciones de consultar y crear categorías.




Ventana para registrar una nueva categoría de servicios.


Ventana para consultar los servicios previamente registrados y poder editarlos si se desea dando clic en el botón amarillo.


Ventana para editar una categoría de servicios.






Al volver a la ventana de consulta de servicios podemos eliminar una categoría dando clic en el botón rojo de eliminar.







Se dice que Laravel usa un modelo MVC, pero en el fondo realmente no es así, en vez de eso maneja un modelo que se acerca más al de N-Capas donde el componente HTTP almacena los controladores y las vistas de la aplicación. Luego los demás componentes manejan los comandos, los controladores del API lo que se le conoce como "Business Layer", el modelo de dominio y la capa de acceso de datos la cual tiene una interación directa con la base de datos.





Para más información sobre la verdadera arquitectura de Laravel consultar el siguiente enlace:

 Porque Laravel no es MVC


A continuación se muestra el "Scope" de los elementos más importantes de como se estructura la aplicación del gestor de categorías:



Referencias 








jueves, 10 de enero de 2019

Sesión 8

Agenda

  • Estadísticas
  • Importancia de la accesibilidad web
  • Ventajas adicionales de la accesibilidad web
  • Discapacidad y sus barreras de acceso
  • ¿Quién desarrolla las pautas?
  • Evaluación automática
  • Evaluación manual
  • Experiencia de desarrollo web accesible

Validación de accesibilidad en sitios Web





Estadísticas 


10,53% de la población enfrenta una situación de discapacidad, es decir, 452849 son personas con discapacidad.
Censo Nacional de Población 2011




Según UNESCO a nivel mundial existen más de 1000 millones de personas con alguna condición de discapacidad.

Importancia de la accesibilidad web

  • Relevancia actual de la web.
  • Fomentar igualdad de oportunidades.
  • Derecho de acceso a la información.
                        - Ley 7600, 7948, 8661.

  • La accesibilidad Web significa que personas con algún tipo de discapacidad van poder hacer uso de la Web, permitiendo que estas personas puedan percibir, entender, navegar e interactuar con la Web, fomentando la igualdad de oportunidades y cumpliendo con el derecho del acceso a la información.
  • La accesibilidad Web también beneficia a otras personas, incluyendo personas de edad avanzada que han visto mermadas sus habilidades a consecuencia de la edad.

Ventajas adicionales de la accesibilidad Web

  • Mejora de la usabilidad.
  • Simplificación del desarrollo y mantenimiento.
  • Posicionamiento SEO.
Los buscadores Web se comportan como usuarios ciegos, por lo que implementar la accesibilidad Web ayuda al posicionamiento SEO.


Discapacidades y sus barreras de acceso


Discapacidades visuales (Seguera y baja visión)

Barreras de acceso

  • Imágenes sin texto alternativo.
  • Videos sin descripción textual o sonora.
  • Tablas cuyo contenido resulta incomprensible si se lee de manera secuencial.
  • Texto añadido mediante imágenes.
  • Uso del color en texto e imágenes.
  • Espaciado entre elementos.
  • Tamaño de letra.

Existen productos de apoyo: lectores de pantalla, navegadores de voz y teclados como dispositivo de entrada.


Discapacidades auditivas (Sordera/ Hipoacusia)

 Barreras de acceso

  •  Falta de transcripción de los contenidos sonoros.
  •  Contenido complejo.


 Existen productos de apoyo: videos co intérpretes o avatares y contenido de fácil entendimiento.


Discapacidades motoras (Distrofia/ Distonía/ Parkinson)


Barreras de acceso 

  • Iconos, botones, enlaces o elementos de interacción muy pequeños.
  • Poca adaptabilidad del uso con el teclado.
  • Tiempos de respuesta limitados.

Existen productos de apoyo: ratones especiales, teclados alternativos, ratones de cabeza, unicornio o adaptador de boca. Además de software con reconocimiento de voz y sistemas de seguimiento de ojos.



¿Quién desarrolla las pautas?

  • Organismo que define estándares para la Web.
  • Desarrollo por múltiples partes internacionales.
El máximo organismo dentro de la jerarquía de Internet que se encarga de promover la accesibilidad es el W3C, es especial suu grupo de trabajo WAI (Web Accesibility Initiative).
El W3C es el World Wide Web Consortium, un organismo internacional que tiene como objetivo "guiar la Web hacia su máximo potencial a través del desarrollo de protocolos y pautas que aseguren el crecimiento futuro de la Web".




Evaluación automática


La evaluación automática nos permite realizar una evaluación rápida, nos ayuda a tener una primera impresión de la accesibilidad de una página web.

  • HeadingMap, al activar la herramienta hace un mapa de títulos de 1 - 3.
  • WCAG Contrast checker, al activar la herramienta analiza el contraste de colores, e indica si la combinación del Foreground color y Background color, pasa los niveles de AA y AAA.
  • Web developer: 
           - En imágenes, activar display alt atributes, para verificar las descripciones de las imágenes.
           - En CSS, activar disable all styles, para observar la estructura de la página.
  • Wave, permite ver las pautas de la WCAG 2.0 que se están incumpliendo. 


También existe otra página adicional para la verificación de la accesibilidad de las páginas Web:

Tawdis.net



Evaluación manual


Falsos positivos. 
Análisis completo y fiable de la accesibilidad Web.
Errores leves, pero fatales.

La evualuación automática no proporciona un análisis definitivo y fiable, ya que puede no detectar errores importantes o señalar errores que realmente no existen (falsos positivos).
Solamente yn análisis manual por parte de un experto puede ofrecer un análisis completo y fiable de la accesibilidad web de una página.

También, permite detectar errores leves, pero fatales. Un ejemplo es que un análisis automático puede arrojar un 98% de accesibilidad, lo que daría la impresión de que esta bastante bien la página, sin embargo, si el error fuera un botón no etiquetado de cerrar sesión, sería un error grave de accesibilidad.

Desarrollo Web accesible






Disponible en.  estadística nacional





Referencias


Material de referencia: Validación de la accesibilidad 





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