PHP y MySQL

PHP y MySQL

En el video tutorial  jQuery AJAX para Realizar Consultas con PHP y MySQL aprendimos a realizar llamadas asíncronas a nuestro servidor web a través de una ventana de diálogo jQuery UI y la función $.ajax() de jQuery, en esta ocasión vamos a desarrollar toda la interfaz de usuario de una aplicación web.

Para este tutorial utilizaremos HTML5, CSS3, jQuery, jQuery UI, Twitter Bootstrap, PHP y MySQL, además de el plugin jQuery Validator, este lo hemos usado el la mayoría de los tutoriales jQuery, no estaría por demás los leyeran para que se familiaricen con su uso.

Definición de interfaz de usuario

Conocida como GUI por sus siglas en inglés (Graphical User Interface), es básicamente un software que se desempeña como Interfaz de Usuario permitiendo la interacción visual de forma sencilla con servidores de bases de datos, web, etc., en nuestro caso es basado en web y será desarrollada con tecnologías como jQuery, PHP y MySQL.

Objetivo de la interfaz de usuario con jQuery, PHP y MySQL

El objetivo principal de este tutorial es facilitar una guía  paso a paso para el diseño y desarrollo de una interfaz de usuario basada en web utilizando jQuery, PHP y MySQL como principales tecnologías, comenzando desde el diseño del mockup, pasando por la maquetación, diseño y creación de la base de datos con MySQL WorkBench y terminando en la programación de un par de módulos.

Por lo general cuando desarrollamos una aplicación web con acceso restringido, la página de inicio de sesión es típicamente un formulario al centro donde se solicita usuario y contraseña, para este video tutorial se me ocurre enfocar el inicio a una aplicación empresarial mostrando un carousel de imágenes y tres columnas con diferentes temas o accesos y un menú superior con la opción login, todo esto de la mano de Twitter Bootstrap para darle un toque responsivo.

MockUp UI Web APP

De forma inicial este tutorial se conformará de los siguientes videos, estos pueden ir variando dependiendo de las necesidades que vaya teniendo nuestro desarrollo:

  • Video 1 Introducción y presentación de mockup
  • Video 2 Estructura de directorios y recursos a utilizar
  • Video 3 Maquetación y preparación de plantillas para integración con twig
  • Video 4 Implementación de Login parte I
  • Video 5 Implementación de Login parte II
  • Video 6 Implementación de recuperación de contraseñas Parte I
  • Video 7 Implementación de recuperación de contraseñas Parte II
  • Video 8 Tres Formas de cargar contenido

Si bien es cierto en la mayoría de los casos los desarrollos web con jQuery, PHP y MySQL se llevan a cabo de forma individual sobre todo en el plano de los desarrolladores freelance, inclusive en las empresas no existe un equipo de diseño y desarrollo web como tal, lo que hace que dependa en un 100% del desarrollador proporcionar al usuario final una Interfaz Gráfica dinámica, sencilla y a la vez robusta.

En lo personal sugiero se rodeen de gente conocedora de diferentes temas como administración de servidores web, diseño web, diseño de bases de datos, etc., esto reducirá significativamente tiempos de desarrollo y en la mayoría de los casos implementación de nuevas tecnologías e ideas para con el cliente, que al final del día se traducirán en ganancias, aprendizaje y porque no calificar para proyectos grandes con mayor presupuesto.