Video curso Material Design Lite

Material Design Lite es un pequeño Framework,  muy similar a la de Bootstrap. Para su instalación debemos agregar a nuestro proyecto 3 elementos: hoja de estilo, archivo javascript y por ultimo la tipografía que contiene los iconos.

Curso Material Design para Bootstrap

Está disponible para su utilización desde dos CDN oficiales.

Imágenes para tu tienda


Recursos para tienda de moda, el proyecto se acompaño de etiquetas, bolsas, elegancia, sofisticación y más....

Como poner tus shorcodes en widgets de texto

Los shortcodes son una personalización muy interesante que WordPress y no suelen poder usarse en widgets de texto.
Esto tiene una solución rápida y sencilla, solo tienes que añadir la siguiente línea de código a tu plugin de utilidades o al archivo functions.php del tema activo.
//Shortodes en widgets de texto
add_filter('widget_text', 'do_shortcode');

Guardas los cambios y ya lo tienes, tus widgets de texto listos para poder aprovechar la sencillez de uso de los shortcodes.

Poner videos HTML5 Video Streaming desde Google Drive

Google Drive es una opción viable para alojar vídeos en flujo continuo? ¡Bueno, la respuesta es sí!

Con el fin de que se puedan reproducir públicamente por cualquier persona tiene que compartir los archivos como "Público en la Web" a través de Google Drive.

Aquí hay un ejemplo usando un MP4 codificado H.264 / AVC, que juega en Chrome, Firefox y Safari, y al parecer Internet Explorer 11 también (no lo he probado):



El código fuente:

<video controls="controls">
<source src="https://drive.google.com/uc?export=download&id=0B0JMGMGgxp9WMEdWb1hyQUhlOWs" type='video/mp4'/>
</video>

Puede ser que google analice los archivos antes de ser descargado por lo que usar como enlace lo siguente
https://drive.google.com/uc?export=download&confirm=-UiM&id=0B0JMGMGgxp9WMEdWb1hyQUhlOWs

Solo debe de cambiar la id de su video

id=0B0JMGMGgxp9WMEdWb1hyQUhlOWs
Espero le sea util

Crear Virtual Host de Apache en Ubuntu vps

Introducción


El servidor web de Apache es uno de los más populares para proveer contenido web en Internet.

La unidad básica que describe un sitio individial o el dominio llamado virtual host.

Estas asignaciones permiten al administrador utilizar un servidor para alojar varios dominios o sitios en una simple interface o IP utilizando un mecanismo de coincidencias.

Cada dominio que es configurado apuntará al visitante a una carpeta específica que contiene la información del sitio.

En esta guía, te diremos como puedes configurar tus virtual hosts de Apache en tu VPS con Ubuntu 14.04.

Requisitos


Además necesitas tener instalado Apache para poder continuar los siguientes pasos. Si no lo has hecho aún, puedes instalar Apache en tu servidor mediante apt-get:
sudo apt-get update
sudo apt-get install apache2

Después de completar estos pasos, podemos empezar.

Para propósitos de ésta guía, mi configuración creará un virtual host para ejemplo.com y otro para pruebas.com. Se hará referencia a ellos en esta guía, pero tu deberías sustituirlos por tus propios dominios durante el proceso.

Paso Uno - Crear la Estructura del Directorio


El primer paso que necesitamos es crear la estructura de directorios que mantendrán la información de nuestro sitio.

Nuestro documento raíz (el directorio principal en el cual Apache busca el contenido para mostrar) será configurado en directorios individuales dentro de la ruta /var/www. Crearemos los directorios aquí para los dos virtual hosts que pretendemos configurar.

Dentro de cada uno de estos directorios crearemos un directorio denominado public_html el cual mantendrá la información pública del sitio y sus respectivos archivos. Esto nos dará más flexibilidad en nuestro alojamiento.

Para asegurarnos, para cada uno de nuestros sitios, vamos a crear los directorios así:
For instance, for our sites, we're going to make our directories like this:
sudo mkdir -p /var/www/ejemplo.com/public_html
sudo mkdir -p /var/www/pruebas.com/public_html

Las marcas en rojo representan el dominio que esperamos que sirva nuestro VPS.

Paso Dos - Otorgar Permisos


Ahora tenemos la estructura de los directorios para neustros archivos, pero el usuario root es el propietario de ellos. Si queremos que nuestro usuario regular pueda modificar los archivos en nuestro directorio web, necesitamos cambiar el propietario haciendo lo siguiente:
sudo chown -R $USER:$USER /var/www/ejemplo.com/public_html
sudo chown -R $USER:$USER /var/www/pruebas.com/public_html

La variable $USER tomará el valor del usuario con el cual actualmente estás identificado. Al hacer esto, nuestro usuario regular ahora es propietario de los directorios public_html donde se almacenará nuestro contenido.

Debemos además modificar los permisos un poco para asegurarnos que el permiso de lectura pueda ser aplicado a archivos y directorios para que las páginas puedan ser desplegadas correctamente:
sudo chmod -R 755 /var/www

Tu servidor ahora tiene los permisos necesarios para mostrar el contenido, y el usuario deberá ser capaz de crear contenido en los directorios a medida que sea necesario.

Paso Tres — Crear una Página de Prueba para cada Virtual Host


Actualmente tenemos la estructura en su lugar. Vamos a crear contenido para mostrar.

Solo vamos a hacer una demostración, así que nuestras páginas serán muy simples. Solo crearemos un archivo index.html para cada sitio.

Empecemos con ejemplo.com. Podemos abrir un archivo index.html mediante un editor escribiendo:
nano /var/www/ejemplo.com/public_html/index.html

En este archivo, crea un documento HTML simple que indicara que el sitio está conectado. Mi archivo quedó así:
<html>
<head>
<title>Bienvenido a Ejemplo.com!</title>
</head>
<body>
<h1>Éxito! El Virtual Host ejemplo.com esta funcionando!</h1>
</body>
</html>

Podemos copiar este archivo y usarlo de base para nuestro segundo sitio escribiendo:
cp /var/www/ejemplo.com/public_html/index.html /var/www/pruebas.com/public_html/index.html

Ahora podemos abrir el archivo y modificar la información relevante:
nano /var/www/pruebas.com/public_html/index.html

<html>
<head>
<title>Bienvenido a Pruebas.com!</title>
</head>
<body>
<h1>Éxito! El Virtual Host pruebas.com esta funcionando!</h1>
</body>
</html>

Paso Cuatro — Crear Nuevos Archivos Virtual Host


Los archivos Virtual Host son archivos que contienen información y configuración específica para el dominio y que le indican al servidor Apache como responden a las peticiones de varios dominios.

Apache incluye un archivo Virtual Host por defecto denominado 000-default.conf que podemos usar para saltarnos al punto. Realizaremos una copia para trabajar sobre ella y crear nuestro Virtual Host para cada dominio.

Iniciaremos con un dominio, configuralo, copialo para el segundo dominio, y después realiza los ajustes necesarios. La configuración por defecto de Ubuntu requiere que cada archivo de configuración de Virtual Host termine en .conf.

Crear el Archivo Virtual Host


Empezando por copiar el archivo para el primer dominio:
sudo cp /etc/apache2/sites-available/000-default.conf /etc/apache2/sites-available/ejemplo.com.conf

Abre el nuevo archivo con tu editor como usuario root:
sudo nano /etc/apache2/sites-available/ejemplo.com.conf

Este archivo se verá algo como esto (he removido los comentarios aquí para hacer el archivo más legible):
<VirtualHost *:80>
ServerAdmin webmaster@localhost
DocumentRoot /var/www/html
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

Como puedes ver, no hay mucho aquí. Personalizaremos los datos aquí para nuestro primer dominio y agregaremos algunas directivas adicionales. Esta sección del Virtual Host coincide cualquier peticion que es solicitada al puerto 80, el puerto por defecto de HTTP.

Primero, necesitamos cambiar la directiva ServerAdmin por un correo del administrador del sitio que pueda recibir correos.
ServerAdmin admin@ejemplo.com

Después de esto, necesitamos agregar dos directivas. La primera llamada ServerName, que establece la base del dominio que debe coincidir para este Virtual Host. Esto será como tu dominio. La segunda, llamada ServerAlias, determina nombres futuros que pueden coincidir y servirse como el nombre base o dominio principal. Esto es útil para host tipo www:
ServerName ejemplo.com
ServerAlias www.ejemplo.com

Lo que resta por cambiar para la configuración básica de un Virtual Host es la ubicación del directorio raíz para el dominio. Ya hemos creado lo que necesitamos, así que solo necesitamos modificar DocumentRootpara apuntarlo al directorio que hemos creado:
DocumentRoot /var/www/ejemplo.com/public_html

En total, nuestro archivo de Virtual Host debe verse así:
<VirtualHost *:80>
ServerAdmin admin@ejemplo.com
ServerName ejemplo.com
ServerAlias www.ejemplo.com
DocumentRoot /var/www/ejemplo.com/public_html
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

Guarda y cierra el archivo.

Copia el primer Archivo Virtual Host y cambialo para el Segundo Dominio


Ahora que tenemos nuestro primer archivo Virtual Host configurado, podemos crear el segundo copiando el primero y realizando los cambios necesarios.

Empecemos por copiarlo:
sudo cp /etc/apache2/sites-available/ejemplo.com.conf /etc/apache2/sites-available/pruebas.com.conf

Abre el nuevo archivo con privilegios root en tu editor:
sudo nano /etc/apache2/sites-available/pruebas.com.conf

Ahora tenemos que modificar todas las piezas de información para referirnos al segundo dominio. Cuando hayas terminado, deberá verse algo así:
<VirtualHost *:80>
ServerAdmin admin@pruebas.com
ServerName pruebas.com
ServerAlias www.pruebas.com
DocumentRoot /var/www/pruebas.com/public_html
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

Guarda y cierra al concluir.

Paso Cinco — Habilita los nuevos Archivos Virtual Host


Ahora que hemos creado nuestros archivos virtual hosts, debemos habilitarlos. Apache incluye herramientas que nos permiten hacer esto.

Podemos usar la herramienta a2ensite para habilitar cada uno de nuestros sitios haciendo esto:
sudo a2ensite ejemplo.com.conf
sudo a2ensite pruebas.com.conf

Cuando hayas concluido, deberás reiniciar Apache para asegurarte de que tus cambios surtan efecto:
sudo service apache2 restart

Deberás recibir un mensaje de información similar a esto:
* Restarting web server apache2
AH00558: apache2: Could not reliably determine the server's fully qualified domain name, using 127.0.0.1. Set the 'ServerName' directive globally to suppress this message

Este mensaje no afecta nuestro sitio.

Paso Seis — Configura Archivos Locales (Opcional)


Si aún no estás utilizando nombres de dominio de tu propiedad para este procedimiento y utilizaste dominios ejemplo en su lugar, puedes al menos hacer pruebas de funcionalidad de este proceso modificando temporalmente el archivo hosts de tu computadora local.

Esto interceptará cualquier petición a los dominios que configures y apunten a tu VPS, solo si estas utilizando dominios registrados.

Esto solo funciona a través de tu computadora, y es simplemente útil para propósitos de prueba.

Asegúrate de estár trabajando en tu computadora local para los siguientes pasos y no en tu VPS. Deberás conocer la contraseña del administrador o ser miembro del grupo administrativo.

Si estas en una Mac o una computadora con Linux, edita tu archivo local con privilegios de administrador escribiendo:
sudo nano /etc/hosts

Los detalles que necesitas agregar son la IP pública de tu VPS seguido del dominio que deseas apuntar a ese VPS.

Para los dominios que utilizamos en esta guía, asumiremos que la IP de nuestro VPS es 111.111.111.111, podemos agregar las siguientes líneas al final del archivo hosts:
127.0.0.1   localhost
127.0.1.1 guest-desktop
111.111.111.111 ejemplo.com
111.111.111.111 pruebas.com

Esto apuntará directamente cualquier petición para ejemplo.com y pruebas.com en nuestra computadora y enviarlas a nuestro servidor en 111.111.111.111. Esto es lo que queremos si no somos propietarios de esos dominios aún, solo con fines de prueba para nuestros Virtual Hosts.

Guarda y cierra el archivo.

Paso Siete — Prueba tus Tesultados


Ahora que tenemos nuestros Virtual Hosts configurados, podemos realizar pruebas de configuración simplemente visitando el dominio que hemos configurado mediante nuestro navegador web:
http://ejemplo.com

http://pruebas.com

Si en ambos sitios funciona bien, entonces has configurado correctamente dos Virtual Hosts en el mismo servidor.

Si necesitas ajustar el archivo hosts de tu computadora, probablemente solo deberás borrar las líneas que has agregado y verificar que tu configuración funciona. Esto previene que tu archivo hosts se llene de entradas que no son necesarias.

Si necesitas acceso constante a estos Virtual Host, considera adquirir dominios para cada sitio y configurarlos para que apunten a tu VPS.

Crear y usar Páginas hijas o secundarias en Wordpress

Para crear una página hija o secundaria, basta con crear o editar una página en WordPress como lo haría normalmente. Atributos de página, elija una página padre desde el menú desplegable.
Para poner un código coto es necesario agregar el código siguiente en un plug-in de sitio específico , o en el functions.php de su tema:
O crear una plantilla de página personalizado en su tema.
En la página, es necesario agregar esta línea de código en el que desea mostrar las páginas hijas.
Ver código

Crear una página solo para usuarios en Wordpress

Crear una página personalizada que el contenido se vea solo para usuarios en Wordpress muy sencillo, aqui dejo el código para crear contenido solo para usuarios.
Para comenzar tienes dos opciones: crear un fichero PHP nuevo o duplicar el clásico page.php que encontrarás en la carpeta de tu theme.

Crear una página con contenido solo para usuarios en Wordpress

La segunda opción es la mejor para así usar los css de tu tema.
En los atributos de página puedes seleccionar la plantilla que has creado.

Recuerda de poner tus clases css de tu tema

Ver código

Conseguir certificados SSL/TLS gratuitos

Conseguir certificados sll gratuitos con Let’s Encrypt en Ubuntu

Introducción

Este tutorial te mostrará cómo configurar un certificado SSL/TLS de cifrado en un servidor Ubuntu 14.04 corriendo Apache como servidor web. También te mostrará cómo automatizar el proceso de renovación de certificado mediante cron job.

Los certificados SSL se utilizan dentro de los servidores web para cifrar el tráfico entre el servidor y el cliente, que proporciona seguridad adicional para los usuarios que acceden a tu aplicación. Let’s Encrypt proporciona una manera fácil de obtener e instalar certificados de confianza de forma gratuita.

Pre-requisitos

  • Un servidor con Ubuntu 14.04

  • Un servidor web Apache con 1 o más dominios configurados correctamente


1 – Actualizamos la lista de paquetes
$ sudo apt-get update

2 – Instalamos git
$ sudo apt-get install git

3 – Descargamos el cliente de Let’s Encrypt
$ sudo git clone https://github.com/letsencrypt/letsencrypt /opt/letsencrypt

4 – Nos movemos a la carpeta donde descargamos el cliente de Let’s Encrypt
$ cd /opt/letsencrypt

5 – Creamos el certificado

Para un solo dominio
$ ./letsencrypt-auto --apache -d tudominio.com

Para un dominio y subdominios
$ ./letsencrypt-auto --apache -d tudominio.com -d www.tudominio.com -d blog.tudominio.com

No olvides que el dominio base (tudominio.com) debe ir al principio y en el caso de que solo quieras www.tudomino.com
$ ./letsencrypt-auto --apache -d www.tudominio.com

 

  • Opción Easy para permitir HTTP Y HTTPS

  • Opción Secure para redirigir todas las peticiones a HTTPS


Si el proceso se realiza correctamente el resultado será tener una clave TLS, una firma SHA-256 y nuestro servidor web estará correctamente configurado para hacer uso de las conexiones seguras HTTPS.

Para verificar el estado de nuestro certificado SSL visitamos la web
https://www.ssllabs.com/ssltest/analyze.html?d=tudominio.com&latest

Nota: No olvides reemplazar tudominio.com

Los certificados de Let’s Encrypt son válidos por 90 días, para renovarlos ejecuta el siguiente comando:
$ ./letsencrypt-auto certonly --apache --renew-by-default -d tudominio.com www.tudominio.com

Si proporcionaste varios nombres de dominio cuando hiciste la instalación del certificado, tendrás que pasar la misma lista de dominios de nuevo en el comando de la renovación, de lo contrario el cliente de Let’s Encrypt va a generar un nuevo certificado en vez de renovar el existente.

Automatizar el proceso de renovación

Una forma práctica para asegurar que tus certificados se renueven automáticamente es crear una tarea programada que se encargue automáticamente de las solicitudes de renovación.

Para facilitar este proceso, vamos a utilizar un script de shell que verifica la fecha de caducidad del certificado para el dominio proporcionado y solicita una renovación cuando el vencimiento es inferior a 30 días. El script será programado para ejecutarse una vez por semana. De esta manera, incluso si falla una tarea programada, hay un tiempo de 30 días para intentarlo de nuevo cada semana.

En primer lugar, descarga el script y hazlo ejecutable. Siéntete libre de revisar el contenido del script.
$ sudo curl -L -o /usr/local/sbin/le-renew http://do.co/le-renew

$ sudo chmod +x /usr/local/sbin/le-renew

Puedes ejecutar el script manualmente
$ sudo le-renew tudominio.com

Si no hay necesidad de renovar el certificado, el script solo nos dirá cuántos días falta para renovarlo

A continuación, vamos a editar el crontab para crear un nuevo cron job que ejecutará este comando cada semana. Para editar el crontab:
$ sudo crontab -e

Incluye el siguiente contenido, todo en una sola línea:
30 2 * * 1 /usr/local/sbin/le-renew tudominio.com >> /var/log/le-renew.log

Guarda los cambios

Nota: Esto creará un nuevo cron job que ejecutará el comando le-renew todos los lunes a las 2:30 am. La salida producida por el comando será canalizado a un archivo de registro ubicado en /var/log/le-renewal.log.

Permitir subir archivos en los comentarios de wp.

¿Desea permitir a los usuarios añadir archivos adjuntos en los comentarios de WordPress?

De forma predeterminada, los comentarios de WordPress se limitan a texto sin embargo se puede permitir a los usuarios subir archivos adjuntos como imágenes y gifs...etc. Vamos a mostrarle cómo permitir a los usuarios añadir archivos adjuntos en los comentarios de WordPress.
Comentarios Adjuntos para WordPress
Lo primero que necesita es instalar y activar el plugin.
Tras la activación, es necesario visitar Ajustes » Comentarios 'para configurar la configuración del plugin.

Eso es todo espero le haya sido de utilidad.

Lo que debes saber sobre el navegador de google Chrome

Google Chrome es el navegador más utilizado.

Que son sobre las URLs secretas de Chrome?

Son direcciones que nos dan acceso a funciones internas del navegador e incluso a funciones reservadas para los desarrolladores.

Las URLs son de tipo  Chrome:// seguido de uno o varias palabras más según la función que habilita.

Copia y pega en la barra de direcciones.

Listado y funciones de las URLs secretas de Chrome



  • chrome://accessibility– Muestra información sobre accesibilidad de cada una de las pestañas abiertas y si la función está activada de forma global.

  • chrome://appcache-internals– Información sobre páginas appcached y el espacio que están ocupando.

  • chrome://apps/– Listado de todas las aplicaciones instaladas.

  • chrome://blob-internals/– Información sobre Binary Large Objects (blobs).

  • chrome://bookmarks– Abre directamente el Administrador de marcadores.

  • chrome://cache– Muestra todos los objetos en cache, las webs, las imágenes y los scripts.

  • chrome://chrome/– Abre la página Información de Google Chrome. Aquí se muestra la versión y la posibilidad de actualizar.

  • chrome://chrome-urls– Muestra el listado de URLs secretas de Chrome.

  • chrome://components/– Listado de todos los componentes de Chrome con la posibilidad de buscar actualizaciones.

  • chrome://conflicts/– En esta página, se incluyen todos los módulos cargados en el proceso principal y los módulos registrados para cargarse más adelante.

  • chrome://crashes/– Muestra un informe de todos los casos en que la página no responde o se cierra.

  • chrome://credits– Los habituales créditos de una aplicación.

  • chrome://device-log/– Registro de dispositivo.

  • chrome://devices/– Dispositivos conectados a Google Chrome como impresoras.

  • chrome://discards/– Listado de pestañas descartadas durante la sesión, esto sucede por falta de memoria RAM.

  • chrome://dns– Si el prefetching está activado, esta página muestra toda la información al respecto.

  • chrome://downloads– Acceso directo al gestor de descargas de Chrome con un historial de todo lo que hemos bajado.

  • chrome://extensions– Muestra todas las extensiones que tenemos instaladas.

  • chrome://flags– Funciones experimentales y de todo tipo que pueden ser activadas o desactivadas desde esta página. Nos permite acceder a funciones experimentales desactivadas por defecto.

  • chrome://flash– Información detallada sobre el plugin Flash integrado en Chrome.

  • chrome://gcm-internals/– Muestra información sobre Google Cloud Messaging.

  • chrome://gpu– Muestra toda la información relacionada con la tarjeta gráfica, como por ejemplo la aceleración por hardware.

  • chrome://help/– Abre la página Información de Google Chrome. Aquí se muestra la versión y la posibilidad de actualizar.

  • chrome://histograms – Histogramas del navegador.

  • chrome://history– Nos abre el gestor del Historial de Chrome donde podemos ver todas las páginas web que hemos visitado y decidir si queremos borrarlo.

  • chrome://indexeddb-internals/– Información IndexedDB para el perfil de usuario.

  • chrome://inspect– Opción para inspeccionar elementos, páginas o extensiones.

  • chrome://invalidations/– Información de invalidaciones.

  • chrome://local-state/– Listado de funciones y si están o no activadas en la instalación local.

  • chrome://media-internals– Todos los elementos multimedia que hemos reproducido.

  • chrome://nacl– Información sobre el plugin Chrome’s NaCl (Native Client)

  • chrome://net-internals– Información detalla de la red incluyendo conexiones SPDY o DNS lookups.

  • chrome://network-error/ – Muestra los errores de la red.

  • chrome://network-errors/– Muestra los errores de la red.

  • chrome://newtab– Abre una nueva pestaña.

  • chrome://omnibox– Todo sobre la función Omnibox y la posibilidad de cambiar algunos parámetros de la barra de navegación.

  • chrome://password-manager-internals/– Registros del gestor de contraseñas integrado del navegador.

  • chrome://plugins– Listado de todos los plugins y su estado.

  • chrome://policy– Todas las políticas activadas en el navegador como la Alerta de protección de contraseña.

  • chrome://predictors– Listado de términos para el autocompletado basado en la actividad pasada.

  • chrome://print– Página para imprimir.

  • chrome://profiler – Información de seguimiento del perfil.

  • chrome://quota-internals– Información sobre la cantidad de espacio disponible para Google Chrome y el perfil active.

  • chrome://serviceworker-internals/– Todos los Service Workers registrados por el navegador.

  • chrome://settings– Abre la página de ajustes.

  • chrome://signin-internals – Más información y estadísticas.

  • chrome://suggestions/– Sugerencias.

  • chrome://supervised-user-internals/— Listado de usuarios activos y posibilidad de probar filtros por URL.

  • chrome://sync-internals– Información detallada sobre la función de sincronización.

  • chrome://system/– Acerca del sistema con datos de diagnóstico del sistema.

  • chrome://terms– Condiciones del servicio de Google Chrome.

  • chrome://thumbnails/– Miniaturas almacenadas para las páginas web más visitadas.

  • chrome://tracing– Al activar la opción Record, el navegador empezará a recoger todos los datos sobre nuestra actividad.

  • chrome://translate-internals/– Información sobre la función de traducción integrada en el navegador.

  • chrome;//usb-internals– Posibilidad de probar dispositivos USB conectados.

  • chrome://user-actions/– Listado de acciones llevadas a cabo por el usuario, como por ejemplo el cierre de pestañas.

  • chrome://version– Información sobre la versión de Chrome, sistema operativo, JavaScript, Flash, líneas de comandos, etc.

  • chrome://view-http-cache– Páginas en caché.

  • chrome://webrtc-internals/– Crear un volcado de las PeerConnection.

  • chrome://webrtc-logs/– Registros de WebRTC capturados.


Además de estas, existen otras que Google no enlaza directamente por que pueden bloquear el navegador o cerrarlo. Salvo la quit o restart, el resto son para que los desarrolladores puedan probar diferentes estados del navegador.

Las URLs secretas de Chrome son :

  • chrome://badcastcrash

  • chrome://crash

  • chrome://crashdump

  • chrome://kill

  • chrome://hang

  • chrome://shorthang

  • chrome://gpuclean

  • chrome://gpucrash

  • chrome://gpuhang

  • chrome://memory-exhaust

  • chrome://ppapiflashcrash

  • chrome://ppapiflashhang

  • chrome://quit/

  • chrome://restart/

Arreglar enlaces después de un cambio de dominio en wordpress



La opción más rápida es reemplazar los enlaces directamente desde la base de datos con instrucciones SQL. Tan solo debes utilizar la siguiente instrucción para aplicar las modificaciones en el contenido de tus entradas y páginas:
UPDATE wp_posts 
SET post_content =
REPLACE (post_content, 'http://midominio.com', 'http://midominionuevo.com');




Biblioteca de Medios. En tal caso, puedes usar esta sentencia SQL:
UPDATE wp_posts 
SET guid =
REPLACE (guid, 'http://midominio.com', 'http://midominionuevo.com');

y, aún así, seguiríamos sin tener todo actualizado faltan las tablas wp_options o wp_postmeta a de tu base de datos WordPress.
Esto se cambia desde ajustes generales.
Una forma más sencilla de hacerlo si esto es muy complicado para ti es con este plugin.

Cambiar permisos de carpetas y archivos en tus instancias ec2 o google cloud

Si deseamos cambiar de propietario:
sudo chown <usuario> (archivo o carpeta)

sudo chown <usuario> -R <carpeta> (carpeta y todo su contenido)

El primero solo modifica un archivo, el segundo modifica a todos los archivos que contiene dentro ese directorio.

Si queremos cambiar de Grupo:
sudo chgrp <grupo> <carpeta> (archivo o carpeta)

sudo chgrp <grupo> -R <carpeta> (carpeta y todo su contenido)

Al igual que en el caso anterior el primero solo modifica un archivo, el segundo modifica a todos los archivos que contiene dentro ese directorio.

Ahora vayamos un poco más rápido, si queremos cambiar de Usuario y Grupo a la vez emplearemos:
sudo chown usuario:grupo <carpeta> (archivo o carpeta)

sudo chown usuario:grupo -R <carpeta> (carpeta y todo su contenido)

Fijaros en que debéis de marcar un usuario y grupo valido.

Si deseamos cambiar los Privilegios de algún directorio o capeta tenemos:
sudo chmod <permisos> <opciones> <archivo o carpeta>

sudo chmod +x foo.sh (dar permisos de ejecución)

Recordemos que la parte de privilegios debemos de meter combinaciones validas, algunas de ellas son 664, 777, 764 ente otras.

El primer dígito da los privilegios para el propietario.
El segundo dígito da los privilegios para el grupo al que pertenece el propietario.
El tercer dígito para los usuarios fuera del grupo del propietario.

Literalmente estos privilegios se escriben:

(-w-r-x) no lectura ni escritura ni ejecución.
(-w-x+r) solo lectura.
(+w+x+r) escritura y lectura.
(+w+x+r) escritura, lectura y ejecución.
(u) modificador de usuario (g) modificador de grupo (o) modificador para los “otros”.

Vídeos incrustados de WordPress Responsives

Vídeos incrustados de WordPress 

Aplicar un max-width: 100% (generalmente con esto sirve para que algo se adapte a todo tipo de dispositivos), el alto del incrustado hacía algo extraño; en unos vídeos era demasiado alto y en otros demasiado estrechos.

Busqué varias soluciones: 

Al final, la solución es algo más rebuscada, hay que añadir un filtro como este:
/* Adds a wrapper for video embeds */
add_filter('embed_oembed_html', 'my_embed_oembed_html', 99, 4);
function my_embed_oembed_html($html, $url, $attr, $post_id) {
return '<div class="video-container">' . $html . '</div>';
}

Vamos con el css
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Crear un nuevo widget personal en Wordpress

Crear un nuevo  widget


Abriremos el fichero functions.php de la raíz de la plantilla, su ruta es:
/wp-content/themes/mi_tema/functions.php

En este fichero, añadiremos el siguiente código:
//functions.php nuevas posiciones widget
function endeos_widgets_init() {
    register_sidebar( array(
        'name'          => 'Nueva zona de widgets',
        'id'            => 'id-del-widget',
        'before_widget' => '<div class="classe-widget">',
        'after_widget'  => '</div>',
    ) );
}

add_action( 'widgets_init', 'endeos_widgets_init' );

Básicamente es la creación e inicialización de la zona de widget. Al hacerlo, deberíamos verlo reflejado en el Dashboard de WordPress:

 

LLamar a los widgets


Los widgets que pongamos en esta nueva zona se carguen en algún sitio. Supongamos que queremos que estos widgets se carguen al final de la cabecera, pues deberemos modificar el fichero header.php y añadir el código en la parte concreta que nos interese (por ejemplo, justo antes de la etiqueta </header>):

La forma más correcta de hacerlo es así..
//Código para cargar widget en otro fichero php (footer, header, etc)
    <?php if ( is_active_sidebar( 'id-del-widget' ) ) : ?>
        <div id="id-del-widget" class="primary-sidebar widget-area" role="complementary">
            <?php dynamic_sidebar( 'id-del-widget' ); ?>
        </div><!-- #primary-sidebar -->
    <?php endif; ?>

Dependiendo de dónde queremos cargar los widgets, escogeremos un fichero que se encuentran en la  la plantilla.

Crear un tema hijo en wordpress

1. Estructura básica de un tema hijo


Deberemos crear el directorio que contendrá el tema hijo en la ruta /wp-content/themes/. Lo usual es que el nombre de dicho directorio sea “nombre_plantilla-child”, pero realmente podemos poner el nombre que nos apetezca.

Dentro de este directorio, crearemos dos ficheros:

  • style.css

  • functions.php


Con esto ya tendremos la estructura básica creada.

2. Hoja de estilos


La cabecera se inserta en forma de comentario y tiene la siguiente estructura:
/*
Theme Name: Nombre de tu tema hijo
Description: Descripción de tu tema hijo.
Author: Tu Nombre
Author URI: http://tu-web.com
Template: nombre_tema_madre
Version: 1.0.0
Text Domain: nombre_tema_hijo
*/

Es importante fijarse en el parámetro Template: es donde se especifica cuál es el tema “Padre” y es la estructura que tomará por defecto el tema hijo.

3. Fichero de funciones


En el fichero functions.php deberemos poner el código inicial para enlazar las hojas de estilo del tema “Padre”. Para ello, añadiremos el siguiente código PHP:
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {   
wp_enqueue_style( 'plantilla-padre', get_template_directory_uri() . '/style.css' ); 
}
?>

Donde pone “plantilla-madre” hemos de poner el nombre del directorio que contiene la plantilla “Madre”. Con esto ya tendremos enlazado su fichero de estilos. En otras palabras, si activamos el tema hijo, el fichero style.css del tema “Madre” también se va cargar.

Es posible que el fichero de estilos del tema hijo se cargue automáticamente, pero si ese no es el caso, deberemos sustituir el código anterior por el siguiente:
<?php
function theme_enqueue_styles() {

$parent_style = 'plantilla-padre';

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'tema-hijo',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style )
);
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
?>

 

Ahora es momento de añadir estilos en nuestro fichero style.css, que sobrescribirán los estilos del tema original.

Si queremos modificar la estructura de la página que muestra un artículo, deberemos copiar el fichero single.php del tema original en nuestro tema hijo, luego, haremos todas las modificaciones que queramos sobre el fichero copiado.

Si queremos añadir otras funcionalidades, podemos añadir funciones en el fichero functions.php que hemos creado.

Usar Amazon Web Services como servidor web.

Amazon Web Services (AWS abreviado) es una colección de servicios de computación en la nube (también llamados servicios web) que en conjunto forman una plataforma de computación en la nube, ofrecidas a través de Internet por Amazon.com. Es usado en aplicaciones populares como Dropbox, Foursquare, HootSuite.

Fuente: http://es.wikipedia.org/wiki/Amazon_Web_Services
Comenzando:
Para realizar pruebas crearas una instancia Ec2 que es una maquina linux con la distribución ubuntu. Al abrir tu cuenta por primera vez amazon te regala 1 año gratis de capa gratuita. Después del año cobran horas de uso, almacenamiento, puedes parar o destruir la instancia dependiendo del uso.
Primeros pasos:
1- Creas una cuenta en amazon web service, después ingresaras una tarjeta de debito o de crédito por si necesitas servicios extras y cobro del servicio después del año.
Para verificar tu identidad amazon te pide que ingreses tu teléfono. Te llamara una grabadora que debes de teclear un código mediante el teclado del telefono. Después de unos segundos llegara un email que la activación esta completa.
2- Ingresas al dashboard o consola de amazon es donde se muestran los servicios que ofrecen amazon, pero haras uso de EC2.

3- Da un click a EC2, en la esquina superior derecha aparece las zonas yo recomiendo N. Virginia ya que es una de las primeras en recibir actualizaciónes.

4- Selecciona Launch Instance y aparece un quick wizard, selecciona ubuntu server.

5. Aparecen el tipo de instancia que queremos con los requerimientos de hardware (RAM, CPU, etc. ). Se clasifican como micro, small, medium y crecen en hardware como en costo, para hacer uso de la capa gratis seleccionamos el tipo micro.

6. Selecciona el siguiente paso configure instance details y aparece los requerimientos adicionales no se modifica, se deja como te lo muestra. Tienes 2 opciones continuar configurando o lanzarlo directamente, los siguientes pasos son opciones mas avanzadas, pero ya configuraste lo básico. selecciona review and launch.

7- Te llevara al paso 7 y ves un review de los servicios. En amarillo dice que la instancia se encuentra abierta para el mundo, significa que cualquiera puede accesar mediante la ip publica, si necesitas mas seguridad puedes crear reglas de seguridad o una red privada.

8- Selecciona launch y aparece que si quieres crear un certificado, sirve para accesar a la instancia mediante SSH, selecciona crear una nueva key pair y la descargas.

9- Una vez que descargas la llave selecciona launch instances, y se empieza a crear una vez que se creo aparece que la instancia se creo con éxito y esta ejecutándose.

10- Selecciona view instances y veras en la consola las instancias activas y el detalle de cada una, lo mas importante que necesitas conocer es la IP publica o el DNS publico para poder accesar desde cualquier lado.

Los siguientes pasos es accesar mediante via SSH, necesitas el certificado *.pem que descargaste anteriormente.
Abres la terminal y tecleas lo siguiente:
cd Downloads
sudo chmod 400 certificado.pem
ssh -i Ubuntu2.pem ubuntu@ip-publica

El primer comando es para ir a la carpeta donde descargaste el certificado, el segundo es para dar los permisos correspondientes del certificado .pem y el tercero es para accesar mediante SSH especificando el certificado.
11- Ya estasdentro de la instancia ahora vamos a actualizar linux.
sudo apt-get update
sudo apt-get upgrade

12- Instalas nginx como servidor web, puede ser apache según el caso. y después inicias el servicio.ç
sudo apt-get install nginx

sudo service nginx start

Intenta acceder pero no te va dejar, porque falta abrir los puertos usando el firewall de amazon.
Abriendo los puertos
Necesitas ir a la consola de amazon, y en la instancia que quieres modificar la seleccionas y en los detalles donde aparece, security group selecciona launch wizard.

Modificas los puertos de entrada y seleccionas editar.

Editas y agregamos una regla personalizada de custom tcp, puerto 80 y cualquiera ip puede accesar.

Listo, ahora si ya tienes tu instancia con servidor web.

Videotutorial

Añadir buscador en los resultados de búsqueda en wordpress

Esta función agrega la schema.org marcado JSON-LD para el "Google Sitelinks cuadro de búsqueda" en la página principal.

Esta nueva función del motor de búsqueda Google se presentó en el Blog para Google Webmaster Oficial (05 de septiembre 2014 07:44 AM PDT). Hay más información sobre el desarrolladores de sitios web Google.

Con la caja de búsqueda Google enlaces de su sitio, la gente puede llegar a su contenido más rápidamente en los resultados de búsqueda.

Ver un ejemplo

google-search

Añadir en el archivo de funciones de tu tema
function ap_sitelinks_search_box (){
if ( is_front_page() && !defined('WPSEO_VERSION') ) {
echo PHP_EOL . '<script type="application/ld+json">' . PHP_EOL;
echo '{' . PHP_EOL;
echo ' "@context": "http://schema.org",' . PHP_EOL;
echo ' "@type": "WebSite",' . PHP_EOL;
echo ' "url": "' . get_site_url() . '/",' . PHP_EOL;
echo ' "potentialAction": {' . PHP_EOL;
echo ' "@type": "SearchAction",' . PHP_EOL;
echo ' "target": "' . get_home_url() . '/?s={search_term}",' . PHP_EOL;
echo ' "query-input": "required name=search_term"' . PHP_EOL;
echo ' }' . PHP_EOL;
echo '}' . PHP_EOL;
echo '</script>' . PHP_EOL;
}
}
add_action( 'wp_footer', 'ap_sitelinks_search_box', 10000 );

Agregar el marcado (JSON-LD) ,estructurado en WordPress.





Hace poco,puse como añadir Schema.org marcado a su sitio de WordPress para un mejor SEO.

Pero analizando desde https://developers.google.com/structured-data/testing-tool/me daba algunos errores y decidi agregar el marcado (JSON-LD) ,estructurado en schema.org.

DEJO COMO PONER EN WORDPRESS

Crear un archivo llamado   json-ld.php y agregar lo siguiente;
VER
Luego añadir en el header.php antes de cerrar el head;
VER

Tema gratuito para wordpress,Seo

Tema Rápido especial SEO
El SEO está directamente relacionado con la velocidad de carga de nuestro sitio Web, este tema carga rápidamente.







 

  • Análisis  realizado con la herramienta Google PageSpeed

  • Plantilla responsive HTML5 -SEO.

  • Minificado recursos (HTML, CSS y JavaScript)

  • Vista en todos los dispositivos móviles


Partiendo del tema Twenty_Twelve que es de los mejores a la hora de posicionar en google.
Ligero y rápido
Tema Rápido especial SEO no trato de hacer demasiado.
El tema central sólo incluye lo esencial.
Se centra en la velocidad,
Optimización de motores de búsqueda y usabilidad.
Ver demo
Puedes descargar y ver en github