Skip to main content

Operador between en SQL

En el último proyecto que participe necesitamos desarrollar reportes con gráficas, estos reportes eran por un periodo de tiempo, es decir, el usuario seleccionaba el rango de fechas del que quería buscar registros en el sistema y generar dicho reporte usando los datos obtenidos. Para este fin tuve que emplear el operador Between de SQL, en las secciones siguientes se muestran ejemplos de su uso, espero que les sea de utilidad.

Leer más

Usabilidad de una aplicación web

 

El término usabilidad es relativamente reciente. Se puede decir que surgió poco después de la expansión de Internet, a finales de los años 90. Pero realmente la idea que quiere expresar es bastante anterior, aunque se conocía con otros nombres como por ejemplo el Diseño Centrado en el Usuario o Human-Computer Interaction (HCI).

La usabilidad se refiere a la capacidad de un software o sistema interactivo de ser comprendido, aprendido, usado fácilmente y atractivo para un usuario, en condiciones específicas de uso. También es la efectividad, eficiencia y satisfacción con la que un producto permite alcanzar sus objetivos específicos (1).

Conceptos básicos de usabilidad

Facilidad de manejo de la aplicación

Generalmente el diseñador de una aplicación es un usuario subjetivo del programa, por lo que sabe exactamente cómo manejarlo. El problema de esto, es que en ocasiones no se tiene en cuenta el nivel de experiencia de los usuarios medios.

Para solucionar este problema surge la usabilidad. Como se definió anteriormente, la usabilidad se centra en la facilidad e intuitividad en el manejo de las aplicaciones.

Equilibrar diseño y contenido

En muchas ocasiones los diseñadores inexpertos hacen uso de la regla de oro “una imagen dice más que mil palabras”. Esto no es lo adecuado, ya que en un principio podría lucir fascinante el diseño pero no están considerando la carga de todo el contenido multimedia y las limitaciones de algunos usuarios con la velocidad de internet que poseen.

Adaptación de la aplicación al medio

Uno de los problemas que se tiene que enfrentar cuando se diseña una aplicación, es el entorno en donde se ejecutara ya que no se sabe a ciencia cierta en medio donde se desempeñara.

Para afrontar esto, lo principal es preguntar al cliente el tipo de entorno donde se desarrollará; sin embargo esto no aplica para todas las aplicaciones, ya que en la actualidad y con los avances tecnológicos en hardware y con el creciente uso de dispositivos móviles, es indispensable crear aplicaciones independientes a este.

Accesibilidad de la aplicación

Un último aspecto que hace que una aplicación sea usable es que sea accesible para personas con necesidades diferentes. Hemos de centrar especialmente nuestra atención en estos usuarios y nuestra aplicación deberá adoptar ciertas medidas para que puedan utilizarla. Algunas de las medidas que se pueden tomar para alcanzar este objetivo son:

  • Utilizar una correcta combinación de colores.
  • Dar la opción de aumentar el tamaño de la letra o algún tipo de zoom en la aplicación.
  • Proporcionar la opción de imprimir o guardar en disco toda la información que ofrece la aplicación.

Poniendo Audio con HTML5

Si naciste igual que yo en los 90’s o antes, y tuviste computadora conectada a internet , sabrás de que era imposible poder ver videos en el navegador o poner un reproductor en nuestro sitio ya que los navegadores de esa época no eran compatibles con esos formatos, a esta problemática existencial llegaron los famosos archivos FLV ( Flash Video ) , que hasta hace poco era el reino y señor de los contenidos multimedia embebidos en el navegador , pero con la llegada de HTML 5 y sus API para poder tener un reproductor de archivos sonoros con solo una líneas de código o un sencillo pero práctico reproductor de videos que soporta múltiples formatos , han hecho que los desarrolladores implementen esta nueva forma tan sencilla de mostrar contenido multimedia en sus sitios y aplicaciones. Si no me creen que es tan sencillo sigue leyendo este post y aprende como poder tener un reproductor de música funcional en nuestro sitio en menos de 5 min.

Audio.

Para reproducir un archivo de audio en una página web, debemos utilizar la etiqueta <audio>, que en sintaxis mínima e ideal llevaría esta sencilla estructura

 

Pero esto no producirá ningún resultado, ni visual, ni auditivo, ya que estaría faltando definir atributos que controlen la visualización del reproductor y la manera en que se comenzará a reproducir o no el archivo en cuestión. Veamos entonces cuáles son las opciones existentes.

Atributos

Al entrar al sitio web se empezará a reproducir el archivo que hayamos puesto en el atributo src
y es tan simple hacer esto con tan solo definir el atributo autoplay en el tag audio.

 


Otro atributo para el control de esta etiqueta es loop que sirve para que el archivo vuelva a reproducirse cada vez que finalice de manera infinita, un caso de aplicación sería una música de fondo que queremos que escuche nuestro visitante y ambientar nuestro sitio según el enfoque del mismo, por ejemplo para un sitio de algún restaurante o museo de alta categoría se pondría de fondo una canción tranquila como una sinfonía, en cambio para una empresa dedicada a vender equipo de supervivencia usaríamos sonidos parecidos a los de una jungla o escenarios de naturaleza.

En lo personal a mí me gusta usar este atributo pero siempre con la visualización de los controles para que los visitantes puedan parar el sonido en cualquier momento.

Para poder visualizar los controles de stop, play, la barra de tiempo, regulación de sonido, y la duración total tenemos que definir el atributo controls, con esto tendremos listo nuestro reproductor de música sin ningún código extra con solo HTML5.

< audio src="archivo.ogg" autoplay controls loop>

Al usar el tag de audio tenemos tener en cuenta que no todos los navegadores soportan los mismos formatos de archivo de sonido, es por eso que tenemos que poner varias opciones de formato, en la tabla de abajo se muestra el navegador y el formato que soporta. De igual manera algunas versiones de los navegadores no soportan elementos de audio, puedes ver las versiones de los diferentes navegadores que soportan este elemento en la tabla de abajo.

Browser

MP3

WAV

OGG

Internet Explorer

YES

NO

NO

Chrome

YES

YES

YES

Firefox

YES

YES

YES

Safari

YES

YES

NO

Opera

YES

YES

YES

Elemento

Chrome

IE

Firefox

Safari

Opera

<audio>

4.0

9.0

3.5

4.0

10.5

Para definir las diferentes opciones del archivo que queramos reproducir se necesita poner el tag  <source src="horse.ogg" type="audio/ogg">  donde el atributo type se define el tipo de archivo con el cual el navegador identificara cual soporta y ese va a reproducir, este paso quedaría de la siguiente manera.

En esta tabla se muestra como debemos definir los media types según el formato que manejemos, como vieron no es muy complicado tener un reproductor en nuestro sitio,es algo básico pero depués les mostraré como  personalizarlo con algo de CSS3 y javascript para hacer cosas interesantes.

 

Formato del archivo

Media Type

MP3

audio/mpeg

Ogg

audio/ogg

Wav

audio/wav

Código del video Tutorial