Category: Programación

Efecto Inclinado (Skew Effect) HTML + CSS

La inclinación de bordes con CSS (css skew effect) es el efecto en el que los laterales (izquierda y/o derecha) aparecen inclinados. Ejemplo:

El efecto lo logramos utilizando la propiedad transform: skew.  Con esto y un poco más de estilos obtenemos el resultado.

HTML:

<div id="user-config-1" class="square-skew square-dark-blue text-white">
<span>
<label>Config 1</label>
<i type="btn" class="edit-config fas fa-pencil-alt" title="Editar"></i>
<i type="btn" class="remove-config fa fa-times"></i>
</span></div>

CSS:

.square-skew {
    -ms-transform: skew(-30deg, 0deg);
    -webkit-transform: skew(-30deg, 0deg);
    transform: skew(-30deg, 0deg);
    padding: 0.2rem 0;
    position: relative;
    left: 10px;
    float: left;
}

.square-skew label {
    margin: 0 !important;
    font-weight: bold;
}

.square-skew span {
    -ms-transform: skew(30deg, 0deg);
    -webkit-transform: skew(30deg, 0deg);
    transform: skew(30deg, 0deg);
    display: inline-block;
    font-size: 0.625rem;
    padding: 0 0.5rem;
    text-transform: uppercase;
}

.square-dark-blue {
    background-color: #007cb6;
    margin-right: 0.625rem;
}

CSS Media Queries

Una media query consiste de un media type y una o más expresiones, que implican media features, que se resuelve en true o false. El resultado de la consulta es verdadero si el media type especificado en el media query coincide con el tipo de dispositivo sobre el que el documento está siendo mostrado y todas las expresiones del media query son verdaderas. Cuando un media query es verdadero, se aplica la hoja de estilo correspondiente o las reglas de estilo, siguiendo las reglas normales en cascada.

Media Types

screen Intended for non-paged computer screens.

tty Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities.

tv Intended for television-type devices (low resolution, color, limited scrollability).

projection Intended for projectors.

handheld Intended for handheld devices (small screen, monochrome, bitmapped graphics, limited bandwidth).

print Intended for paged, opaque material and for documents viewed on screen in print preview mode.

braille Intended for braille tactile feedback devices.

aural Intended for speech synthesizers.

all or empty value Suitable for all devices.

Ejemplo de Media Queries

TinyMCE + Responsive File Manager

TinyMCE + Responsive File Manager

Todo el mundo conoce TinyMCE, el editor de texto WYSIWYG que funciona en la mayoría de aplicaciones web en la que utilizando unas cuantas opciones personalizadas podemos obtener un editor según nuestras necesidades.

Hasta aquí bien, pero ¿Qué pasa cuando necesitamos añadir un archivo a nuestro texto? Creo que existe una función sencilla pero yo he utilizado un plugin externo que me pareció interesante. El problema es que este plugin se ha actualizado a una nueva versión y no he tenido tiempo de verificar si esto funciona en la nueva versión. Dejaré un enlace para descargar la versión que yo utilizo para poder trabajar con ella.

La Versión de TinyMCE  que estamos utilizando es la V3 pero confirmo que se puede utilizar la V4.

El plugin que añadiremos para gestionar la subida de ficheros será Responsive FileManager.

Instalación

Al descargar el archivo comprimido, lo colocaremos en la carpeta donde tengas instalado el TinyMCE.

Al descomprimir verás una carpeta que dice TinyMCE. Dentro está  una carpeta responsivefilemanager. «Cortamos» para moverlo.

Buscamos la carpeta de TinyMCE > carpeta plugins y «pegamos».

Podríamos meter todo desde la misma carpeta del tinymce, pero preferí separar las cosas para tenerlo mejor controlado.

Iniciar el Plugin

Para iniciar el plugin con el TinyMCE tendremos que añadirlo a la función .init junto a las opciones que tengamos establecidas:

plugins: ['todosNuestrosPlugins responsivefilemanager'],
toolbar: ['nuestrasOpcionesPersonalizadas responsivefilemanager']
external_filemanager_path: root_folder+"js/responsivefilemanager/filemanager/",
filemanager_title:"Gestor de Archivos",
external_plugins: { "filemanager" : root_folder+"tinymce/plugins/responsivefilemanager/plugin.min.js"},

todosNuestrosPlugins se refiere a los plugins que tengamos cargados manualmente.

nuestrasOpcionesPersonalizadas se refiere a las opciones que queremos mostrar en el toolbar.

plugins buscará el nombre del plugin responsivefilemanager en la carpeta de plugins (Tal como lo hemos creado y llamado anteriormente)

toolbar es el sistio donde queremos que aparezca nuestro plugin en la barra de herramientas que se mostrará al cargarse el editor.

external_filemanager_path es donde se cargará la librería. (Dónde la hemos instalado junto al TinyMCE)

external_plugins es el sitio donde hemos instalado el plugin en el tinymce para que la magia se haga realidad.

Para controlar la acción del botón de Búsqueda / Browse de la imagen, crearemos un callback function que realizará la acción de abrir el dialog donde se cargará el responsive file manager.

El código lo añadimos al .init igual que las opciones anteriores:

file_browser_callback: function(field_name, url, type, win) {
var filebrowser = root_folder+"js/responsivefilemanager/filemanager/dialog.php?type=1&fldr=source_"+source_id+"&field_id="+field_name;
tinymce.activeEditor.windowManager.open({
title : "Insertar Fichero",
width : 850,
height : 500,
url : filebrowser,
id : 'tinyMceFileBrowser'
},{
window : win,
input : field_name
});
return false;
}

Ahora les explico qué parametros nos da el callback de TinyMCE. Pero quiero aclarar que hay un parámetro que puede que nos resulte confuso.

Hay un parámetro TYPE que veremos en la URL de «var filebrowser». Yo en un principio pensaba que lo que venía entre los parámetros del callback era lo que había que meter en la URL (pensando que el plugin estaba preparado para interpretarlo) pero no es así.

Lo que nos devuelve el parámetro type del callback del TinyMCE son 3 opciones (‘image’, ‘media’ or ‘file’) y se utiliza en su función nativa
El parámetro que añadimos en la url de «var filebrowser» pueden ser 3: (1:images files 2:all files 3:video files)

Por lo que no tiene nada que ver con lo que nos da el TinyMCE. Hay que tenerlo en cuenta para no confundirlo.

file_browser_callback

Esta opción habilita el buscador de archivos en las opciones de TinyMCE que utilicen la función de buscar/cargar.

Si esta opción está configurada, habilita un botón de «buscar / browse» en los dialogs de «insertar/editar link» o en el de «insertar/editar imagen».

El formato de la función:

fileBrowser(field_name, url, type, win)

field_name es el id/nombre del elemento del formulario (textarea) donde se insertará la url o el archivo.

url es el link del elemento actual (si estuvieses editando uno o quisieses eliminarlo). Por ejemplo al clicar un enlace o imagen dentro del TinyMCE.

type es el tipo de «buscador» que se utilizará. El valor puede ser ‘image’, ‘media’ o ‘file’, dependiendo desde que dialog se esté llamando la función.

win hace referencia al dialog/window que está ejecutando la función.

Configuración para Separar Usuarios

Una de las cosas que era necesario implementar era que cada usuario pueda ver su propia carpeta. Para ello, añadiremos unas cuantas opciones en las sesión. Creo que no hace falta decir que debe añadir estas opciones cuando el usuario incie sesión, pero por si acaso LO CONFIRMO. Estas opciones las cargará automáticamente el plugin, y podemos ver como se utiliza en el archivo de dialog.php y ajax_calls.php

// CARPETA POR DEFECTO PARA SUBIR IMAGENES/FICHEROS DEL EDITOR DE TINYMCE
$_SESSION['RF']["verify"] = "RESPONSIVEfilemanager"; // Verificación para el plugin de File Manager
$_SESSION['RF']['subfolder'] = 'source_'.$_SESSION['user_id'];
$_SESSION['RF']['language'] = $_SESSION['user_lang']; // Tenemos 3 idiomas configurados español (es), inglés (en), italiano (it)
if($sss['lang_entidad'] == 'en') $idioma = 'en_EN'; // Si entramos en la carpeta de responsivefilemanager/lang veremos los distintos idiomas
else $idioma = $_SESSION['user_lang'];
$_SESSION['RF']['language_file'] = 'lang/'.$idioma.'.php'; // Cargamos la configuración según el idioma

Array limpio de valores vacíos en PHP

Para poder dejar un array limpio de valores vacíos, en PHP utilizaremos la función nativa array_filter. Esta función lo que hace es recorrer el array y en el caso de que exista valor devuelve un «true» junto con el valor. En caso de que devuelva «false», el indice y valor vacío es eliminado.

Al eliminar estos indices con valor vacío, lo que obtendremos al final es un array con saltos de indice. Si necesitamos reinicar estos indices, utilizaremos otra función nativa de PHP: array_values la cual recorrerá todo el array de nuevo y volverá a indexarlo numéricamente.

$newArray = array_values(array_filter($OldArray))

Descargar un archivo con CURL PHP

A veces necesitamos procesos que nos ayuden a simplificar una tarea. En este caso el proceso se encargará de descargar un archivo desde una URL especifica. Para ello utilizaremos CURL de PHP.

Sólo necesitamos la URL de llamada y la URL de destino donde se guardará el archivo.

curl_setopt($ch, CURLOPT_SSLVERSION,3);

$origen = "http://urldedescarga.com";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $origen);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_SSLVERSION,3);
$data = curl_exec ($ch);
$error = curl_error($ch);
curl_close ($ch);
$destino = $path_raiz."/export/archivo.extension";
$archivo = fopen($destino, "w+");
fputs($archivo, $data);
fclose($archivo);

Error Excel: Carácter xml no válido. Línea 2, columna XXXX

Hace poco me encontré un error ultra extraño a la hora de exportar datos a un archivo XLSX desde la base de datos. Estos datos se muestran en un sistema de gestión de datos y éste utiliza una librería de Excel que lo único que hace es por cada registro de un array guardarlo en una respectiva celda. Nada raro.

Hasta ahora todo funciona correctamente y no es un error de la librería ni mucho menos. El excel ha detectado que hay un carácter extraño entre todos los registros y directamente devuelve un error. Si lo descargo directamente de la base de datos con PHPMYADMIN no se ve ningún dato raro.

Cuando quise abrir el excel el error que me da es el siguiente:

Se han detectado errores en el archivo «C:\Users\XX\Desktop\Archivo.xlsx»

Excel ha completado la validación y reparación en nivel de archivo. Puede que se hayan reparado o descartado algunas partes de este libro.

Parte quitada: /xl/sharedStrings.xml parte con error de XML. (Cadenas) Carácter xml no válido. Línea 2, columna 8471.

Registros quitados: Información de celda de /xl/worksheets/sheet1.xml parte

Al leer esto me sonaba todo a chino y directamente busqué en google y en principio no encontré nada que me sirviera para reparar el problema ya que lo que quería era saber que registro es el que me estaba dando error.

Hasta que encontré una solución:

Hay algo que pocos saben (incluyendome a mi hasta ahora) y es que el formato XLSX es un archivo comprimido. Sabiendo esto ya sabes lo que viene 😉

Hacemos una copia del archivo dañado. Modificamos el archivo copiado y cambiamos la extensión a .zip y lo descomprimimos.

Lo que habíamos leído antes en el error ahora tiene sentido ya que podemos encontrar entre los archivos descomprimidos una carpeta llamada «xl» en el que se encuentra un archivo llamado «sharedStrings.xml».

Abrimos este archivo xml con el NotePad++ y utilizando las herramientas de búsqueda de línea (CTRL+G), elegimos la opción «Desplazamiento» y nos vamos a la línea donde nos ha dado el error, que en mi caso era la 8471.

Desplazamiento NotePad++

Cuando hagamos clic en «Ir» puede que no veas el cursor, lo mejor es moverte con las flechas de izquierda / derecha del teclado para ver donde está y desplazarnos de igual manera hasta encontrar algún carácter extraño. Suele estar marcado de alguna manera como en mi caso, aparecía un «null» en negrita lo que me dió la pista para entrar a la base de datos, revisar el dato y descubrir que había un salto de línea en ese registro.

Registro SharedStrings.xml

Como veréis no es un problema de programación, pero como desarrollador nos encontramos a veces con este tipo de situaciones en el que necesitamos ser resolutivos y muchas veces no encontramos por donde empezar. Espero le sirva a alguien ;).

Nueva línea en textarea (HTML, PHP)

Para crear un salto de línea en PHP en una variable de tipo STRING que estamos concatenando, simplemente añadiremos la función nativa de PHP: PHP_EOL (END OF LINE).

Por ejemplo:

$nombresParticipantes = '';

foreach ($participantes as $participante){

$nombresParticipantes .= $participante[‘nombre’].’  ‘ $participante[‘apellidos’].PHP_EOL;

}

<textarea><?php echo $nombresParticipantes ?></textarea>

Para añadir una nueva línea vía HTML utilizaremos el código html:
<textarea>Manuel Prieto &#13;&#10; Enrique Prieto</textarea>
Esto nos mostrará en el textarea un texto tipo listado:

Instalar Laravel 5.5 en 1and1

Para crear nuestro proyecto con Laravel en 1and1.com necesitamos revisar que nuestro servicio contratado cumple los requisitos mínimos.

  • PHP >= 7.0.0
  • OpenSSL PHP Extension
  • PDO PHP Extension
  • Mbstring PHP Extension
  • Tokenizer PHP Extension
  • XML PHP Extension

En principio la mayoría de estos requisitos los cumplimos. Pero puede ser que la versión de PHP no la tengamos bien configurada. Para ello sigue los pasos de Cambiar la Configuración de PHP en 1and1.

 

Una vez revisado estos puntos vamos a proceder a crear nuestra carpeta de proyecto. Simplemente puedes entrar con el Filezilla y crearla en el raíz o dentro de la carpeta clickandbuilds. No importa donde sea, lo importante es que recuerdes donde lo has creado.

Instalar Composer en 1and1

Nos conectaremos vía SSH con nuestras credenciales vía PUTTY. Las podemos encontrar en la misma sección de «Hosting» en el menú de 1and1 y suelen ser las mismas de acceso FTP.

Una vez dentro buscamos nuestra carpeta de proyecto e instalamos el composer con el siguiente comando:

curl -sS https://getcomposer.org/installer | /usr/bin/php7.1-cli

NOTA: Utilizo la versión 7.1 porque la 7.0 no se encontraba en mi directorio bin. Puedes comprobar si tienes esta versión instalada listando los archivos del directorio: ls -l /usr/bin/ | grep "php7"

Esto nos descargará el composer.phar que es un ejecutable de php para buscar las dependencias de nuestro proyecto.

Ahora ejecutamos el composer por primera vez: /usr/bin/php7.1-cli composer.phar

Para mantenernos actualizados podemos hacerlo con la opción selfupdate: /usr/bin/php7.1-cli composer.phar selfupdate

Crea una BBDD en 1and1

En el menú de la izquierda entramos a la pestaña de «Base de Daots Mysql». Las bases de datos se crean con un nombre que proporciona 1and1. No es personalizable, pero puedes añadir una descripción para diferenciarlas. Introduce tu contraseña y recuerda que esta debe ser lo más segura posible. 1and1 ya nos da un nivel de seguridad según la clave que introducimos.

El proceso de creación tardará unos minutos. Puedes ver el estado de creación en la lista de BBDD.

 

Crear Proyecto Laravel

Puedes crear tu proyecto Laravel en LOCAL (TU PC) o directamente en el servidor conectandonos vía SSH utilizando el composer.

Yo prefiero hacerlo desde LOCAL para trabajar en el entorno habitual de DESARROLLO y PRODUCCIÓN.   (Ver instalación)

Una vez instalado, súbelo a la carpeta de tu proyecto en 1and1 vía Filezilla.

Suponiendo que ya conoces el archivo de conexión .env de laravel, continuaremos con la modificación de éste.

Ya que utilizamos nuestra base de datos en MySql, buscamos la línea de conexión y modificaremos los datos con los que nos da 1and1 para conectarnos a nuestra BBDD de PRODUCCIÓN. Estos datos los puedes encontrar haciendo clic en el nombre de la bbdd dentro del listado.

DB_CONNECTION=mysql
DB_HOST=db709977146.db.1and1.com
DB_PORT=3306
DB_DATABASE=db709977146
DB_USERNAME=dbo709977146
DB_PASSWORD=»Password que has introducido al crearla«

Crear Dominio / Subdominio

Para probar que nuestro proyecto funciona tenemos que hacer que un dominio o subdominio apunte a nuestra carpeta del proyecto.

Entramos a la zona de dominios y buscamos el enlace para crear un subdominio.

 

Una vez se haya creado, entramos a la configuración del subdominio y hacemos clic en el enlace «Ajustar directorio de espacio web». Aquí nos mostrará las carpetas que tenemos en nuestro espacio web. Seleccionamos la de nuestro proyecto, buscamos la carpeta public y la seleccionamos. (Esta configuración también tardará lo suyo)

Si todo ha ido bien, al colocar el nombre de nuestro subdominio veremos que nos mostrará la página de inicio de nuestro nuevo proyecto Laravel.

Actualizar versión PHP en 1and1

Para cambiar la Versión PHP en 1and1 tenemos que logearnos con nuestro usuario y buscar en la sección de «MIS PRODUCTOS» del menú la opción de «Hosting«. Aquí buscamos en la sección de «Administrar espacio web» la opción de «Ajustes de PHP«.

Una vez adentro veremos nuestros productos contratados en un listado con los nombres de dominio. Vamos a seleccionar el que nos interesa y haciendo clic en el checkbox y continuaremos haciendo clic en Modificar versión PHP. Como podrás observar yo ya tengo la versión PHP7.0, pero esto es porque yo he seguido estos pasos previamente.

Ahora sólo nos queda utilizar la herramienta para cambiar nuestra versión de PHP. Veremos que tenemos la versión 5.6, 7.0, 7.1  y  7.2. Vamos a elegir la 7.0 porque es la versión más estable.

1&1 PHP Versión 1and1

Con esto ya tendríamos actualizada la versión de PHP en nuestro servicio contratado de 1and1.

Añadir Google Fonts en tu Página Web (CSS)

Todos hemos empezado creando páginas web con nuestras fuentes típicas: Arial, Times New Roman, Century Gothic, Verdana, etc... Estas son las llamadas fuentes seguras. Son accesibles desde cualquier navegador y no necesitan librerías externas para ser cargadas.

Hoy en día podemos encontrar varios recursos que nos facilitan dar un look personalizado a nuestra web instalando otros tipos de fuentes o tipografías.

Google Fonts es la más accesible y fiable. Nos da la posibilidad de utilizar filtros para encontrar el tipo de fuente que buscamos según las necesidades y el tipo de página web que estemos diseñando.

Hasta aquí todo bien, pero también hay que tener en cuenta el lado negativo. Al ser un recurso externo también nos penaliza el tiempo de carga de nuestra web. Lo recomendable es utilizar como máximo 3 fuentes diferentes: una para los títulos, otra para el texto de nuestra web y la última para textos que queremos resaltar o utilizar en casos especiales. Además, la homogeneidad es uno de los principios del diseño web y si empezamos a mezclar tipos de fuentes y tamaños estaremos infringiendo esta ley universal.

Instalar una fuente de Google Fonts es fácil. Utilizaremos como ejemplo la fuente ROBOTO y MODAK. La herramienta ya nos da información de como instalarlo. Lo haremos paso a paso:

INSTALACIÓN STANDARD

Añadiremos a nuestro html entre la etiqueta <head></head> este código:

<link href="https://fonts.googleapis.com/css?family=Modak|Roboto" rel="stylesheet">

INSTALACIÓN VÍA @IMPORT

Esta es la forma más recomendada de hacerlo. Insertamos en primera línea donde tengamos nuestro CSS el código generado:

@import url('https://fonts.googleapis.com/css?family=Modak|Roboto');

 

UTILIZACIÓN

Para el body utilizaremos la fuente ROBOTO:

body { font-family: 'Roboto', sans-serif; }

Para las etiquetas de títulos h1, h2 y h3 la fuente MODAK:

h1, h2, h3 {font-family: 'Modak', cursive;}

RESULTADO

Para los títulos:

Título H1, Título H2, Título H3

Para el body:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a dictum erat. Nullam lobortis non metus eget ultrices. Phasellus commodo dictum purus sed fermentum.