Crea un manejador de imágenes con PHP

• Conectarnos a Bootstrap

• Hacer librerías

• Crear las carpetas

• Crear librerías

• Crear las estructuras de las clases

• Poblar la barra de navegación

• Crearemos dos tablas: una para las imágenes y otra para las etiquetas.

• Crearemos una tercera para la tabla pivote.

• Los métodos para la base de datos serán:

  • query(): lee sólo un registro.

  • querySelect(): regresa un arreglo con arreglos asociativos.

  • queryNoSelect(): regresa un valor booleano para los procesos Insert, Update o Delete.

  • recuperaId(): recupera el identificador del último Insert.

  • close(): cierra la base de datos.

• Por medio de la clase RecursiveDirectoryIterator leemos los archivos y las carpetas de una ruta en particular.

• Con el método setFlags() modificamos la lectura de los mismos.

• Con la clase RecursiveIteratorIterator() leemos los contenidos recursivamente de los contenidos de las carpetas.

• isFile(): Regresa verdadero si es un archivo.

• getPath(): Regresa el camino o ruta del archivo.

• getFilename(): Regresa el nombre del archivo.

• getSize(): Tamaño de los archivos en bytes.

• getATime(): Regresa la fecha de último acceso en formato UNIX.

• getType(): Regresa el tipo del archivo.

• Añadir los estilos en cascada.

• Añadir eventos JavaScript.

• Modificar los títulos.

• Eliminar el iterador.

• Existe la imagen en la tabla?

  • NO: Insertamos la imagen en la tabla

    • Recuperamos el identificador

  • SI: Recuperamos el identificador

• Regresamos el identificador

• Insertamos en el arreglo

• Insertamos en el detector de eventos (JavaScript)

• Existe la imagen en la tabla?

  • NO: Insertamos la imagen en la tabla

    • Recuperamos el identificador

  • SI: Recuperamos el identificador

• Regresamos el identificador

• Insertamos en el arreglo

• Insertamos en el detector de eventos (JavaScript)

• Crear la estructura de la página y desplegar la imagen.

• Crear el menú.

• Crear el menú.

• Título dinámico de la página.

• Condicionar el nav.

• Detallar la carátula.

• Crear el un mensaje antes de borrar la imágen.

• Borrar el archivo

• Borrar los datos en la tabla de imágenes.

• Borrar los datos en la tabla imagenEtiqueta.

• Crear una caja de entrada con un datalist.

• Crear un campo oculto con hidden.

• Enviar la información del formulario con POST.

• Verifica si la etiqueta ya existe.

  • NO:

    • Insertamos en etiquetas.

    • Insertamos en imagenEtiqueta.

  • SI:

    • Verificamos la existencia de la llave imagen-etiqueta

    • Insertamos la imagenEtiqueta

• Regresa mensaje

• Leeremos las etiquetas para desplegarlas en las listas.

Leemos como referencia las etiquetas de la tabla pivote imagenEtiqueta con la información de la tabla etiquetas.

• Recibimos los parámetros.

• Lo borramos de la tabla imagenEtiqueta dentro de la clase Etiqueta.

• Terminamos el proceso de inserción en el caso de que la etiqueta ya exista.

• Crear una lista para el porcentaje de optimización.

• Nombre de la nueva imagen.

• Obtener la información de la imagen.

• Calcular nuevo tamaño.

• Crear nuevo objeto con imagecreatefrom().

• Crear lienzo con imagecreatetruecolor().

• Optimizar con imagecopyresample().

• Crear el archivo con imagejpeg().

• Obtener la información de la imagen.

• Calcular nuevo tamaño.

• Crear nuevo objeto con imagecreatefrom().

• Crear lienzo con imagecreatetruecolor().

• Optimizar con imagecopyresample().

• Crear el archivo con imagejpeg().

• Aceptar solamente archivos de tipo jpg, jpeg, gif y png.

• Guardar en la optimización en el mismo formato

• Crear una librería de funciones.

• imagecolortransparent: Definir un color como transparente.

• imagecolorallocatealpha: Asignar un color para una imagen.

• imagealphablending: Establece el modo de mezcla para una imagen

• imagesavealpha: Establecer la bandera para guardar la información completa del canal alfa (como oposición a la transparencia de un simple color) cuando se guardan imágenes PNG.

• Con la misma rutina podemos optimizar por un tamaño fijo en forma proporcional.

• Nos servirá como paso previo a crear viñetas de las imágenes.

• Creamos una carpeta fuera de la carpeta de las imágenes para las miniaturas.

• Creamos una librería para funciones generales.

• Verificamos si existe el archivo. Si no existe, creamos la viñeta y la desplegamos.

• Mostrar las viñetas

• Borrar viñetas

• Ajustar la carátula

• Crear una lista para el seleccionar un filtro.

• Nombre de la nueva imagen.

• Crear la estructura para leer el archivo en un objeto en memoria (resource).

• Aplicar el filtro con la función imagefilter().

• Utilizamos la función imagecopy() para poblar el lienzo.

• Vaciamos la información a disco.

• Tratamiento de transparencia para png.

• Filtros de color.

• Podemos tener los diferentes filtros por medio de las constantes.

• Para el filtro sepia primero debemos cambiar la imagen a blanco y negro y luego cambiar el color.

• Tienen diferentes parámetros, rangos y pequeños trucos.

• El primer parámetro es el tamaño del bloque.

• El segunda parámetro es la pixelación avanzado (true) o desactivado (false) default.

• Rotamos la imagen con el comando

imagerotate ( resource $image , float $angulo , int $bgd_color [, int $ignorar_transparencia = 0 ] ) : resource

• Podemos voltear (flip) una imagen con:

imageflip ( resource $image , int $mode ) : bool

Donde el modo es:

• IMG_FLIP_HORIZONTAL Voltea la imagen horizontalmente.

• IMG_FLIP_VERTICAL Voltea la imagen verticalmente.

• IMG_FLIP_BOTH Voltea la imagen tanto horizontal como verticalmente.

• Por medio de las etiquetas podemos seleccionar las imágenes.

• Desplegar las etiquetas por medio de una lista.

Por medio de las etiquetas y nuestras tablas de la base de datos, podemos seleccionar imágenes específicas.

Es muy similar al desplegado del Iterador.

• Por medio de una nube de etiquetas podemos identificar, de forma visual, a las etiquetas que han sido más utilizadas y cuáles menos.

• Crearemos el query para saber el número de etiquetas que tenemos en la base de datos dentro de la tabla pivote.

Necesitamos encontrar el valor relativo entre la etiqueta más utilizadas a la menos utilizada para asignarle un estilo de cascada.

Necesitamos crear una regla de estilos en cascada para cada número relativo.

• header('Content-Description: File Transfer');

• header('Content-Type: application/octet-stream');

• header('Content-Disposition: attachment; filename='.basename($img));

• header('Content-Transfer-Encoding: binary');

• header('Expires: 0');

• header('Cache-Control: must-revalidate, post-check=0, pre-check=0');

• header('Pragma: public');

• header('Content-Length: ' . filesize($img));

• ob_clean();

• flush();

• readfile($img);

ColorZilla es una herramienta que nos permita detectar un color de un elemento de una página web.

Herramientas para armonizar colores en web.

Páginas para descargar fuentes e iconos

Crear gradientes de forma sencilla por medio de dos herramientas

Herramientas para las Cajas  flexibles

Herramientas para objetos SVG y Curvas Bezier Cuadráticas

Herramienta para diseños display: grid;

Con este video concluimos el curso. Hasta pronto.

Seguir aprendiendo...