domingo, 13 de enero de 2019

Clase Especial: Presentación Accesibilidad en la Web


Accesibilidad en la Web



Según las estádisticas un 10,53% de la población tiene alguna discapacidad, por lo tanto la necesidad de crear programas que permitan que estás discapacidades no sean una barrera para que el usuario disfrute del contenido de un sitio web es fundamental para los desarrolladores como una forma de fomentar la igualdad.

Ventajas

Mayor usabilidad
simplificacion del sitio web
posicionamiento SEO

¿Qué es SEO?

El posicionamiento en buscadores u optimización de motores de búsqueda es el proceso de mejorar la visibilidad de un sitio web en los resultados orgánicos de los diferentes buscadores. También es frecuente nombrarlo por su título inglés, SEO (Search Engine Optimization).



Discapacidades visuales


- imagenes sin texto alternativo
- videos sin descripción textual o sonora
- tablas cuyo contenido no tiene sentido si se lee secuencialmente
- texto añadido mediante imagenes
- uso del color en texto e imágenes
- espaciado entre elementos
-tamaño de letra

Discapacidades auditivas

- Falta de transcripción de los contenidos sonoras
- contenido complejo

Discapacidades motoras 

- Iconos, botones, enlaces o elementos de interacción
- Timepos de respuesta limitados

Pautas de la W3C

La W3C creó una serie de pautas o estándares en los elementos web para mejorar su usabilidad y simplicidad a la hora de ser mostradas.
Estás pautas pueden ser revisadas en un sitio web mediante una serie herramientas de evaluación como las siguientes

Evaluación automática


  • HeadingsMap
  • WCAG Contrast Checker
  • Web Developer
  • Wave


Evaluación manual


  • Falsos positivos
  • Análisis completo y fiable de la accesibilidad web
  • Errores leves, pero fatales
Publicadas por a la/s No hay comentarios.:

Clase 11: Jueves 3 de Enero




PHP, acrónimo recursivo en inglés de PHP: Hypertext Preprocessor (preprocesador de hipertexto), es un lenguaje de programación de propósito general de código del lado del servidor originalmente diseñado para el desarrollo web de contenido dinámico. Fue uno de los primeros lenguajes de programación del lado del servidor que se podían incorporar directamente en un documento HTML en lugar de llamar a un archivo externo que procese los datos. El código es interpretado por un servidor web con un módulo de procesador de PHP que genera el HTML resultante.

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

PHP tal y como se conoce hoy en día es en realidad el sucesor de un producto llamado PHP/FI. Creado en 1994 por Rasmus Lerdorf, la primera encarnación de PHP era un conjunto simple de ficheros binarios Common Gateway Interface (CGI) escritos en el lenguaje de programación C. Originalmente utilizado para rastrear visitas de su currículum online, llamó al conjunto de scripts "Personal Home Page Tools", más frecuentemente referenciado como "PHP Tools". Con el paso del tiempo se quiso más funcionalidad, y Rasmus reescribió PHP Tools, produciendo una implementación más grande y rica.

Código

Una de los mayores beneficios de PHP es poder ingresar código en un archivo de HTML por ejemplo 

index.php

<!DOCTYPE html>
<html>
<head>
<title>Hola</title>
</head>
<body>
<?php 
phpInfo();
?>
</body>
</html>

La cual muestra información información de PHP

las variables de php se identifican porque inician con $ ejemplo:

$username = "joseph";


conexión a base de datos MySQL


Normalmente los servidores en PHP corren mediante Apache y existe un conjunto de herramientas para servidores PHP llamada XAMPP, la cual significa:
X: cualquier sistema operativo, WAMPP para Windows, LAMPP para Linux, MAMPP para Mac
A: Apache
M: MySQL o MariaDB
P: PHP
P: Perl

Por lo tanto la conexión a una base de datos MySQL es muy importante en PHP

Código de conexión de ejemplo



$conn = new mysqli($servername, $username, $password, $dbname);

    // Check connection
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }

$sql = "INSERT INTO Usuarios(nombre,correo,contrasenna,imagen,puntaje,tipo_usuario_id,created_at,updated_at) VALUES ('".$name."','".$email."','".$pwd."','".$imagen."',0,".$cat.",'2018-12-28 01:37:05','2018-12-28 01:37:05')";
        if (mysqli_query($conn, $sql)) {
          echo "New record created successfully";
        } else {
          echo "Error: " . $sql . "<br>" . mysqli_error($conn);
        }



Publicadas por a la/s No hay comentarios.:

viernes, 4 de enero de 2019

Clase 9: Viernes 20 de Diciembre

Conversor de Monedas



En esta clase veremos un pequeño proyecto el cual utiliza JavaScript y Node JS, la idea es tener una lista de países con sus monedas oficiales y poder hacer conversiones entre ellas. Adicionalmente de todas las monedas solo se podrán hacer conversiones con las monedas asignadas como favoritas. la idea es que las conversiones se hagan sin la necesidad de crear un botón que haga submit.


Esta es la vista del HTML, se utiliza Costa Rica como base.
Se tiene un archivo JSON que tiene los datos de cada país


Entre los datos se tiene uno en especial llamado valor el cual es la conversión de 1 colón a todas las demás monedas.

Backend


En el Backend se pueden ver dos funciones, con rutas, "/" y "/convert", la función get del "/" toma los datos del json y los carga en un archivo EJS, anteriormente en una de las clases se vio JSP, como html parseado para Java, EJS es su gemelo pero con Node.
El get de "/convert" a diferencia lo que hace es obtener como parámetro un id, un valor y una lista de ids de paises los cuales son el id del país que consultó una conversión, el valor a convertir y la lista de paises de todos los favoritos del usuario.
Para cada uno de estos paises se hace la conversión y se guarda en un array el cual es enviado como respuesta.

Frontend


El html del frontend tiene un archivo JavaScript el cual tiene dos funciones.

  1. hrefcheck: Esta se encarga de ver si el país del id enviado está chequeado o no en el checkbox del menú lateral, para así eliminarlo o agregarlo del panel principal. Utiliza el JSON para asignar los datos del valor así como las imágenes.
  2. convert: La función convert llama a la función convert del backend el cual retorna una lista con los valores nuevos a mostrar y estos son asignados a los inputs utilizando jquery.

Ejemplos:

agregar nuevos paises


convertir 2000 colones a otras monedas

convertir 100 dólares a otras monedas

Publicadas por a la/s No hay comentarios.:

Clase 8: Miercoles 19 de Diciembre


Node.js es un entorno en tiempo de ejecución multiplataforma, de código abierto, para la capa del servidor (pero no limitándose a ello) basado en el lenguaje de programación ECMAScript, asíncrono, con I/O de datos en una arquitectura orientada a eventos y basado en el motor V8 de Google. Fue creado con el enfoque de ser útil en la creación de programas de red altamente escalables, como por ejemplo, servidores web. Este utiliza JavaScript como lenguaje de programación.

const http = require('http');

 const hostname = '127.0.0.1';
const port = 1337;

 http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello World\n');
}).listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

Normalmente node utiliza un archivo JS como principal, en este caso este anterior.
Este define el host, puerto y que hará el servidor a la hora de ser creado. Este ejemplo devuelve un texto plano que dice Hello World.

Package.json

  > npm init --yes
  Wrote to /home/ag_dubs/my_package/package.json:

  {
    "name": "my_package",
    "description": "",
    "version": "1.0.0",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "repository": {
      "type": "git",
      "url": "https://github.com/ashleygwilliams/my_package.git"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "bugs": {
      "url": "https://github.com/ashleygwilliams/my_package/issues"
    },
    "homepage": "https://github.com/ashleygwilliams/my_package"
  }

El archivo package.json se encarga del control inicial del servidor, en este se puede ver información general del servidor.



Express

Express es el framework web más popular de Node, y es la librería subyacente para un gran número de otros frameworks web de Node populares. Proporciona mecanismos para:

  • Escritura de manejadores de peticiones con diferentes verbos HTTP en diferentes caminos URL (rutas).
  • Integración con motores de renderización de "vistas" para generar respuestas mediante la introducción de datos en plantillas.
  • Establecer ajustes de aplicaciones web como qué puerto usar para conectar, y la localización de las plantillas que se utilizan para renderizar la respuesta.
  • Añadir procesamiento de peticiones "middleware" adicional en cualquier punto dentro de la tubería de manejo de la petición.
ejemplo:

const app = express();

//manejo de middlewares y motores de vista como EJS
app.set('port', PORT); // set express to use this port
app.set('views', __dirname + '/views'); // set express to look in this folder to render our view
app.set('view engine', 'ejs'); // configure template engine
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json()); // parse form data client
app.use(express.static(path.join(__dirname, 'public'))); // configure express to use public folder
app.use(fileUpload()); // configure fileupload


// Manejo de Rutas
app.get('/', getHomePage);
app.post('/', [login, getMain]);
app.get('/visor', getVisor);


// Manejo de listen del puerto
app.listen(PORT, () => {
    console.log(`Server running on port: ${PORT}`);
});


Publicadas por a la/s No hay comentarios.:

Clase 7: Martes 18 de Diciembre

JavaScript

Anteriormente se habló un poco de JavaScript, al igual que de CSS y HTML. En esta clase se verá más a fondo el tema de JavaScript

DOM(Document Object Model)

Una de las caracteristicas más interesantes de Javascript es la forma en que puede controlar los elementos de un HTML. Los elementos se almacenan de forma jerárquica por lo cual un nodo puede tener un nodo padre y n nodos hijos por ejemplo si se tiene el siguiente código HTML
HTML tiene dos nodos llamados HEAD Y BODY.
HEAD dos nodos llamados TITLE y SCRIPT...
LI tiene un padre llamado UL y este a su vez es hijo de BODY.

De esta forma se puede acceder a los elementos del html en javaScript
Un nodo se puede obtener utilizando el método getElementBy... de 3 formas diferentes
  • getElementById: Se da como parámetro un id como por ejemplo "myH1"
  • getElementsByClassName: Se da como parámetro una clase y retorna un array de elementos con esa clase ejemplo "ListElement"
  • getElementByTagName: Se da como parámetro un tag y retorna un array de elementos con ese tag como por ejemplo "li"
Ahora se hará un pequeño ejemplo para mostrar el uso de los elementos en JavaScript.
El código anterior da como resultado la siguiente vista.
En esta se puede apreciar un h1, h2, 2 inputs, 3 li en un ul y 2 botones

Ejemplo 1

La idea es usando DOM poder hacer que al precionar el boton se los inputs intercambiar el texto del h1 y h2 por el de los inputs y viceversa. El siguiente código muestra como se hace. Recuerda revisar los ids de los elementos en el HTML anterior.
Como resultado al ingresar los datos HELLO WORLD en ambos inputs y presionando el botón da el siguiente resultado.


ejemplo 2

Este es un poco más complejo ya que se usan funciones como childNodes y parentNode para obtener los nodos padres y nodos hijos. lo recomendable es revisar el HTML y ver quien es padre de quien y quien es hijo de quien.

La idea de este ejemplo es al presionar uno de los números este será eliminado de la lista y al presionar el botón este agregará un nuevo número aumentando el de más abajo. O sea si se presiona el botón aparecerá el número 4 y  luego el 5...

El código se dividirá en dos, la función de eliminación

la función de inserción
Cabe destacar que se le añadió un adicional el cual hace que la lista cambie de color a la hora de agregar o eliminar un elemento.

Este es el resultado a la hora de eliminar el 2 y agregar un nuevo valor




JQuery

JQuery es una biblioteca adicional de JavaScript la cual se puede decir que se utiliza para facilitar la codificación. tiene ciertas características como que todos sus comandos deben iniciar con el signo de $.

document.getElementById("id").innerHTML se puede traducir a Jquery como  $("#id").html
document.getElementById("id").value se puede traducir a Jquery como  $("#id").val

 
    $('#boton').click(function(){
      //código
    });
Forma de asignar una función al darle click al elemento del id boton




$.ajax({







  url: "/api/getWeather",







  data: {







    zipcode: 97201







  },







  success: function( result ) {







    $( "#weather-temp" ).html( "<strong>" + result + "</strong> degrees" );







  }







});

función de ajax para hacer consultas a una url, el resultado puede retornar un JSON o un XML como por ejemplo.



Publicadas por a la/s No hay comentarios.:
Suscribirse a: Entradas (Atom)