Bootstrap 4 esta en su fase alpha pero queremos adelantarte lo que debes de conocer de este potente Framework a la hora que comiences a utilizarlo.

Como buen saber Bootstrap es unos de los mas populares HTML, CSS y JavaScript framework para el desarrollo web, con la ideología «mobile first», Bootstrap se a convertido en una completa herramienta para los desarrolladores, ademas ha ayuda a mantener una estética y elegante forma de hacer HTML :D.

Ahora bien la gente que desarrolla este tan buen framework tiene en este momento en versión «Alpha-2″ (no lista para usar en producción aún), lo que sería la versión 4 de este framework, en este contexto nos gustaría darte a conocer tal vez no todas pero si las más principales características que están sonando de esta nueva versión, sin nada mas que agregar te dejamos la lista:

Cambio de LESS a SASS

Al parecer se ha decidido hacer este cambio por las ventajas que tiene SASS sobre LESS.

Archivo reboot.css, para hacer nuestros «reset CSS»

Para hacer el reset de nuestro CSS ahora se cuenta con este archivo reboot.css, el cual trae ya varias propiedades que podemos re-escribir, cabe mencionar que siempre se utiliza Normalize.css, el orden sería 1ro reboot.css, 2do Normalize.css.

No mas soporte para IE8

En esta versión no habrá soporte para IE8, así que si necesitamos soporte para esta versión del IE mejor quedarnos con la versión 3 de Bootstrap.

Se mejoraron los Tooltips y Popovers gracias a la librería JS: Tether

Tether es una librería Javascript y CSS para crear «información sobre herramientas» o mejor dicho los famosos Tooltips.

Soporte para Flexbox

También han agregado el soporte para Flexbox, el cual podremos activar/desactivar con solo cambiar un valor a una variable en nuestro archivo _variables.scss.

Se remplazaron los: well, thumbnails y panels, por los Card

Las «Card» (tarjetas) son un nuevo componente, muy parecidos a los paneles, well y thumbnails, sólo que mejor.

Otras varias:

• Mejoras en el sitema de grid
• Se agrego soporte para Jquery 2
• Como unidades de medida se usaran ahora «rem» y «em»

Enlaces de referencia

• Alpha Doc
• Repositorio en github

La entrada TOP características de Bootstrap 4.0 Alpha aparece primero en Vivir y Aprender Web.

En este post te traemos una lista de recursos web sobre: JavaScript, SVG, Herramientas para crear paletas de colores, Tutoriales HTML, Plantillas para newsletter, Fonts, y más, que pensamos puede ser de gran ayuda para aquellos que desarrollamos para la web.

Sin nada mas que agregar vemos la lista a continuación:

colorfavs.com

Por medio de colorfavs.com traemos un sitio que tiene como objetivo «construir un lugar que hace que sea fácil crear, descubrir nuevos colores y paletas para todos sus proyectos».

Características:

• Permite crear paletas de colores a partir de: imágenes (desde urls y desde nuestro ordenador).
• Provee paletas de colores ya generadas y colores.
• Permite guardar en favoritos las paletas y colores que nos hayan gustado si nos registramos.

codyhouse.co/ Vertical Fixed Navigation

Por medio de codyhouse.co  tenemos un excelente tutorial para realizar una navegación vertical fija (fixed) en nuestros proyectos web, puedes ver el demo en este enlace .

iconshock.com / Material Design Icons

Por medio  de iconshock.com traemos una lista de iconos categorizadas, que  siguen el concepto de Material Design, estos iconos vienen en formatos: SVG y PNG transparentes.

Los tipos de licencia para nuestro uso esta dividida en tres:

1. Personal License (free)
2. Premium License $19
3. Premium License $35

Notie JS

Es una pequeña librería JavaScript que es bastante limpia y nos ayuda a crear simples alertas sobre: tareas realizadas con éxito, errores, informativas y de confirmación, algo que cabe destacar es que no tiene dependencias.

ScrollReveal

Con solo 2.8KB se vuelve en un gran recurso para crear una muy bonita animación de desplazamiento (scroll) que funciona tanto en desktop como en móviles.

También podemos instalar vía npm y bowel:

• npm install scrollreveal
• bower install scrollreveal

Cerberus

Para aquellos que trabajan plantillas HTML para enviarlas como newsletter, traemos este valioso recurso que puede ser de gran ayuda ya que puedes ahorrarte un poco de tiempo, se trata de Cerberus un sitio web que nos provee de diferentes plantillas HTML previamente revisadas en diferentes clientes de correo, ademas estas plantillas ya tienen un soporte para la parte del responsive.

La lista de clientes de correo para las cuales brinda soporte es la siguiente:

Overpass Font

Es una bonita fuente inspirada en Highway Gothic fuente y ademas es de código abierto (open source).

Colofilter CSS

Estos filtros de colores utiliza modos de mezcla css y fueron fuertemente inspirados por nuevos anuncios que Spotify mostraba en el 2015, solamente comentarles desde ya que no tiene soporte para IE, Opera Mini y Safari (desktop & IOS ).

caniuse.com

Me parece una muy buena herramienta para el desarrollo web, ya que nos permite ver de una manera fácil que navegadores web soportan ciertas propiedades, estas pueden ser de tipo: CSS, JavaScript, HTML5, y otras, muy bueno se los recomiendo.

Gridly (The minimal grid system)

Un sistema de grid minimalista con un tamañao de 170Bytes, esta librería CSS nos provee de un sistema de grid bastante simple para el desarrollo en nuestras paginas web.

La entrada Top recursos web – [ Lista #2 ] aparece primero en Vivir y Aprender Web.

En este post te vamos a explicar cómo instalar extensiones en PostgreSQL, veremos cuales son las extensiones mas comunes, ademas te mostraremos como puedes saber cuales extensiones tienes instaladas.

Las extensiones en PostgreSQL son librerías agregadas a este gestor que tienen como objetivo agregar funcionalidades específicas, por ejemplo al instalar la extensión de «unaccent» podremos realizar búsquedas en palabras que lleven acento (puedes encontrar la información completa en el siguiente link: unaccent extension).

Algunas otras extensiones son:

• fuzzystrmatch
• pg_trgm
• postgis

Ahora bien para instalar extensiones en PostgreSQL tenemos que tener en cuenta dos aspectos: el primero es tener la extension habilitada en nuestro servidor PostgreSQL y la segunda instalar la extension en una base de datos.

Para saber que extensiones tenemos habilitadas en nuestro servidor, podemos ejecutar el siguiente query en nuestra terminal de postgres:

SELECT * FROM pg_available_extensions ORDER BY name;

Si por casualidad no esta la extension que necesitamos posiblemente necesitemos instalar alguna librería mas de PostgreSQL, puedes probar instalando el paquete contrib de PostgreSQL, para las versiones de Ubuntu el paquete se puede llamarse: postgresql-contrib como sabrás esto dependerá en gran parte del sistema operativo.

Conociendo que extensiones tenemos habilitadas podemos comenzar ya a instalar, entraremos a nuestra consola de PostgreSQL y seguiremos los siguientes pasos:

Para el siguiente ejemplo vamos a instalar la extension unaccent en una base de datos llamada booktown_development:

1ro Como primer paso tenemos que asegurarnos de ver entrado a la consola de PostgreSQL con un usuario que tenga privilegios de administrador, tal caso es para el usuario «postgres».

2do Seleccionamos nuestra base de datos:

\c booktown_development

3ro Con nuestra base de datos seleccionada instalaremos la extension de la siguiente con la siguiente sentencia;

CREATE EXTENSION unaccent;

4to Para revisar las extensiones que tenemos instaladas en nuestra base de datos seleccionada podemos usar la siguiente sentencia sql:

SELECT name,default_version,installed_version,comment FROM pg_available_extensions WHERE installed_version IS NOT NULL ORDER BY name;

Puedes ver la ejecución de cada uno de los pasos anteriores en el siguiente vídeo:

La entrada Cómo instalar extensiones en PostgreSQL aparece primero en Vivir y Aprender Web.

Para que empecemos con los mejores recursos en cada semana traemos una nueva sección en Vivir y Aprender Web, en la cual realizáremos una lista con los mejores recursos para desarrolladores web cada semana, a continuación la primera lista compuesta por 7 buenos recursos.

Bueno sin nada mas que agregar comenzamos:

 1) cssreset.com

Comenzamos con http://cssreset.com/ un sitio donde encontraremos los mas populares CSS Reset del 2015 en un solo lugar, actualmente la lista cuenta con los CSS reset de Eric Meyer’s, HTML5 Doctor CSS Reset, Yahoo! (YUI 3) Reset CSS, entre otros.

2) ChocolateChip UI

Ahora por medio de chocolatechip-ui.com tenemos una UI (Interfaz de usuario) lista para crear aplicaciones móviles con un look nativo, lo podemos usar tanto en web como en aplicaciones híbradas también, actualmente tienen soporte para tres plataformas: Android, iOS, Windows phone.

Además es Open Source.

3) UI movement

uimovement.com un bonito website donde cada día podemos encontrar las mejores e inspiradoras UI, las cuales son plasmadas a través de imágenes GIF animadas.

4) cssreflex.com / CSS3 Generators

Por medio de cssreflex.com/css-generators nos encontramos con una buena serie de generadores que nos ayudaran a crear de manera fácil nuestro código css para: border-radius, border-images, shadow, entre otros ademas de ser un buen website ya que ademas cuenta con un blog con contenidos bastantes buenos (en inglés).

5) Dragula

bevacqua.github.io/dragula es una librería JS que nos ayudara a crear un bonito efecto al arrastrar y soltar (drag and drop) elementos HTML en nuestras paginas web, te invito a que lo revises verás que esta bastante bien.

6) CSS Buttons

Un buen recurso enfocado en botones es este website cssbuttons.tumblr.com nos muestra más de 100 bonitos e inspiradores formas que pueden tener nuestros botones, están creados con HTML5/ CSS3 y Javascript,  y no solo eso ademas nos muestras las demo por medio de sus enlaces a codepen.io.

7) photos.oliur.com

Para finalizar si estas buscando fotografías para tus proyectos te recomiendo te des una vuelta por este website photos.oliur.com tiene varias fotografías que podemos utilizar libremente ya que están bajo licencia CC0, se que no se compara a otros bancos de imágenes pero lo bueno es su tipo de licencia y quién sabe tal vez encontrarás lo que buscas

Bueno esta es la primera lista de recursos que hacemos espero haya sido de tu agrado y si crees que puede ser de ayuda a alguien más te invito a que la compartas por las redes sociales, gracias y hasta la próxima.

La entrada Top recursos para desarrolladores web de la semana – Agosto 23 / 2015 aparece primero en Vivir y Aprender Web.

En este post te enseñaremos una lista de comandos GIT esenciales que necesitas conocer para empezar a trabajar con esta poderosa herramienta de versionamiento.

Esta será la primera parte de comandos GIT que te enseñaremos, posteriormente vendrá la segunda parte

Tener en cuenta que con esta lista de podrás comenzar a defenderte en uno de los más utilizado sistema de versionamiento que se utiliza en el mundo del desarrollo de software, por lo tanto espero te diviertas y bueno a aprender se ha dicho

Como pre-requisito para trabajar necesitas tener instalado git-core en linux, este lo podemos instalar con el siguiente comando:

sudo apt-get install git-core

Luego comentarte que para todos los ejemplos que vienen a continuación hemos creado el siguiente repositorio: git@github.com:viviryaprenderweb/git_training.git en github

Ahora sí, abramos una consola y a aprender GIT hemos dicho

1) git init

Con este comando le indicamos que el directorio donde nos encontremos comenzará a ser versionado bajo GIT.

Ejemplo de uso:

2) git status

Con este comando veremos el estado actual de nuestra carpeta versionada, así como archivos que no están versionados, archivos modificados, archivos eliminados, etc., como veras este comando será de gran ayuda de ahora adelante.

Ejemplo:

Los mensajes que podremos ver con este comando pueden ser los siguientes:

Untracked files: nos mostrará todos los archivos que no han sido agregados al repositorio aun.
Changes to be committed: nos indica que archivos serán agregado a nuestro commit

3) git add

Este comando nos ayuda a agregar nuestro archivos que no esta bajo versionamiento (los Untracked files que vimos anteriormente).

Ejemplo:

4) git commit -m «mensaje»

Este comando es muy importante ya que es el que da comienzo al seguimiento de nuestros archivos que hayamos agregado con el comando «git add», como podemos ver con el parámetro -m le indicamos un mensajes, el cual debe describir en pocas palabras la razón del commit.

Ejemplo:

5) git remote add origin url_del_repositorio

Como si fuera poco, hasta ahora todos nuestros comandos vistos (1 al 4) han sido puro trabajo local, con el comando git remote add agregamos nuestro repositorio a un servidor remoto, y como lo hacemos bueno debemos de tener ya creado nuestro repositorio git en un servidor y este nos brindará la url, un ejemplo sería: git@github.com:viviryaprenderweb/git_training.git

Ejemplo:

6) git push -u origin master

Con este comando empujamos todo lo que tengamos en nuestros commits al repositorio remoto, para este caso a: git@github.com:viviryaprenderweb/git_training.git

Ejemplo:

Con este comando tenemos que tener en cuenta que nuestra llave publica debe de estar agregada en el servidor remoto.

7) git pull

Este comando nos baja los cambios que haya trabajado otra persona en el mismo repositorio, es recomendable siempre que trabajemos un respositorio que no hayamos iniciado nosotros hacer siempre un git pull primero antes de comenzar a trabajar en los archivos.

Ejemplo:

Como vemos en la imagen se había agregado el archivo README.md, por lo tanto este fue bajado a nuestra versión local del repositorio.

8) git remote -v

Con este comando podemos ver la url remota del repositorio en el que nos encontremos.

Ejemplo:

9) git clone url_del_repositorio nombre_local

Si queremos hacer una copia en nuestro directorio local de un respositorio existente usaremos este comando como lo mostramos a continuación:

Ejemplo:

10) git branch –all

En git se trabaja con branches (ramas en español), originalmente se crea la master por defecto, a raíz de esto nosotros podemos crear nuestras propias branch, siendo claro una copia de la master en primera instancia, dicho esto con el comando git branch –all podemos ver todas las ramas que tenga el proyecto.

El tema de los branches en git es un poco extenso así que de momento lo dejaremos hasta aquí y te explicaremos un poco mas en nuestro próximo post.

Saludos!

La entrada 10 comandos git esenciales, para saber por donde empezar (parte I) aparece primero en Vivir y Aprender Web.

En ocasiones queremos tener apuntado nuestro DocumentRoot de Apache a otro directorio, bueno en este post te vamos a explicar cómo cambiar el documentRoot de Apache 2.4, en tres sencillos pasos.

Este tutorial lo llevaremos acabo bajo un Xubuntu 14.04 y Apache 2.4, veras que es muy fácil realizar este cambio.

Bueno sin nada mas que agregar manos al teclado

Pasos:

1) Crear nuevo directorio

Este será al que apuntará nuestro DocumentRoot, para este paso solamente creamos la carpeta con el siguiente comando:

mkdir www

Para este ejemplo hemos creado la carpeta www en mi home (/home/ramon/) que es el directorio de mi usuario.

2) Editar el archivo 000-default.conf

Este archivo es el que contiene la configuración del DocumentRoot y se encuentra en el directorio «/etc/apache2/sites-available/», así que lo editaremos de la siguiente manera:

Para mi caso he ocupado el editor nano pero puedes ocupar el editor de tu agrado pero recuerda utilizar sudo + editor

sudo nano /etc/apache2/sites-available/000-default.conf

Ahora vamos ha cambiar el valor de DocumentRoot, actualemente veremos que tiene lo siguiente:

DocumentRoot /var/www/html

Lo cambiaremos por la siguiente:

DocumentRoot /home/ramon/www

Ademas tenemos que agregar las siguientes lineas:

<Directory /home/ramon/www>
  Require all granted
</Directory>

En este momento deberíamos de ver nuestro archivo como se muestra en la siguiente imagen:

Listo con esto guardamos (ctrl + o) y cerramos (ctrl + x) y seguimos al siguiente paso.

3) Reiniciar Apache

Para que nuestros cambios tengas efectos tenemos que reiniciar Apache, lo haremos con el siguiente comando:

sudo service apache2 restart

Bueno me gustaría terminar con un pequeño vídeo donde hemos seguido estos pasos y realizado algunos detalles más, espero sea de tu agrado:

Hasta la próxima

La entrada Cómo cambiar el DocumentRoot en Apache 2.4 aparece primero en Vivir y Aprender Web.

Esta es una lista de diez comandos útiles de la consola interactiva de PostgreSQL que si trabajas a diario con este gestor de base de datos sin duda serán de gran ayuda, te dejo la lista a continuación y espero te diviertas:

Comandos:

Para los ejemplos de uso de estos comandos estaremos usando una base de datos llamada: booktown_development.

1) Comando: \h

Este comando sirve para ver la ayuda con respecto a la sintaxis de nuestras consultas SQL, por ejemplo:

\h INSERT

Al utilizar este comando nos mostrará como debemos armar nuestro «insert», así como parametros y el orden correspondiente, como te lo mostramos en la siguiente imagen:

2) Comando: \dt

Nos mostrará la lista de las tablas de la base de datos que tengamos seleccionada.

\dt

(Muestra de salida de comando \dt )

Cabe mencionar que el comando \d solo con la «d» también muestra las tablas mas las secuencias de cada tabla.

3) Comando: \watch

Este comando hace que una consulta se ejecute cada ciertos segundos, ejemplo de uso:
Primero ejecutamos nuestra consulta:

select count(*) from books;

Segundo ejecutamos nuestro comando \watch + los segundos

\watch 1

Salida de nuestro comando:

Como vemos en la imagen animada (gif) ocupamos el comando watch 1, lo cual hace que nuestro count se ejecute cada 1 segundo, no vemos que cambia mucho pero es un buen ejemplo

4) Comando: \e

Con este comando podemos editar la consulta que tengamos en el buffer con un editor mas amigable como nano, por ejemplo:

booktown_development=# \e

Al ejecutarlo por primera vez, este comando te mostrará lo siguiente (en linux):

Escojamos nano como ya se los había recomendado y vemos que se abre la consulta con el editor y de esta manera podemos hacer los cambios mas fácil.

La segunda vez que ejecutemos este comando veremos que nos lo habré automáticamente con el editor selecionado (nano) y luego de hacer los cambios y guardemos (ctrl + o) veremos que se ejecutará la consulta.

Ademas con el comando \p podemos ver lo que teníamos en el buffer

Si queremos guardar lo que tengamos en buffer en un archivo podemos utilizar el comando \w de la siguiente manera:

\w /tmp/test.sql

OJO si utilizamos un archivo que ya este creado previamente por nosotros tenemos que darle permisos de escritura (chmod 777 archivo), por ejemplo si tenemos nuestro archivo en /home/miusuario/mis.sql tendríamos que darle permisos de escritura primero antes de ejecutar nuestro comando desde la consola interactiva.

5) Comando: \i

Sirve para ejecutar los consultas (querys) que tengamos en un archivo externo, por ejemplo: podemos usar nuestro archivo /tmp/test.sql que generamos anteriormente y tendríamos:

\i /tmp/test.sql

6) Comando: \o

Guarda los resultados de una consulta en un archivo, ejemplo:
Primero ejecutamos \o seguido del archivo

\o /tmp/out.sql

Segundo ejecutamos nuestra consulta:

select * from books;

Como veremos no nos muestra los resultados de la consulta en la consola sino que tendremos que ver nuestro archivo /tmp/out.sql, lo podemos hacer abriendo otra consola y ejecutar el siguiente comando:

cat /tmp/out.sql

OJO Ahora un concejo importante después de utilizar este comando todas nuestras consultas mandaran los resultados al archivo (una tras otra), para dejar de mandar los resultados al archivo solamente ejecutamos el comando \o sin definir el archivo:

\o

Y veremos como de nuevo se nos muestran los resultados de nuestras consultas en la consola.

7) Comando: \?

Este comando nos mostrará una lista de todos los comandos que podemos usar en la consola interactiva de postgresql.

\?

Para desplazarnos por la lista ocupamos las flechas de nuestro teclado y para salir solo presionamos «q».

8) Comando: \encoding

Este comando nos muestra la codificación que tiene activa nuestra consola interactiva.

\encoding

9) Comando: \H

Sirve para activar y desactivar la salidas de nuestras consultas en formato HTML, lo que hace este comando es crear una tabla HTML con los resultados de nuestra consulta.

\H

Para desactivar las vista en formato HTML solamente tenemos que escribir nuevamente \H.

Podemos usar este comando en conjunto con nuestro comando \o y escribir de una sola vez nuestro archivo .html.

10) Comando: \conninfo

Este comando nos mostrará la información de nuestra conexión activa.

\conninfo

Bueno espero esta lista haya sido de gran interés y sobre todo de gran ayuda en tu aprendizaje sobre la consola interactiva de postgreSQL, nos vemos como siempre en nuestro sieguiente post

La entrada Diez comandos útiles de la consola interactiva de PostgreSQL que te serán de gran ayuda aparece primero en Vivir y Aprender Web.

Las hojas de estilo en cascada por sus siglas en inglés CSS (cascading style sheets) es el lenguaje encargado de darle una apariencia a nuestras paginas web (HTML o XHTML), una vez definido nuestro HTML de nuestra pagina web podemos comenzar a trabajar en nuestro CSS para darle una presentación (color, tamaño y estructura) a nuestra pagina web.

Es importante conocer que la entidad encargada de definir las reglas o standares del lenguaje CSS es la W3C (World Wide Web Consortium), estos standares a la vez tienen que ser respetados por todos los diferentes navegadores web, aunque cabe mencionar que algunos navegadores web tal como el Internet Explorer no siguen al 100% estos standares, generando algunos inconvenientes a los desarrolladores web (de esto hablaremos en otro post mas adelante ).

Ahora teniendo en cuenta esta información pasamos a lo siguiente:

Cuál es la sintaxis este lenguaje?

La sintaxis de este lenguaje es bastante sencilla, se compone un selector(es), propiedad(es) y valor(es), expresado nuestro código CSS seria:

1
2
3

selector {
  propiedad: valor;
}

Ahora entramos un poco mas en detalle:

Selector: sera el que haga referencia a la etiqueta HTML a la que le queremos aplicar un estilo (o presentación).

Propiedades: estas propiedades son una seria de palabras en inglés tales como: color, width, height, font, etc. Que como vemos trabajan lo que son colores, anchos y altos del elemento que hemos seleccionado (selector).

Valores: los valores de las propiedades son diferentes según sea su propiedad por ejemplo: color: #ffffff (blanco) el valor es en hexadecimal, otro puede ser width: 10px y así cada propiedad tiene su valor.

Un ejemplo real seria:

1
2
3

p{
color: #ff0000;
}

Las propiedades de CSS que pueden aplicarse a una etiqueta o selector son muchas, pero para ayudarte un poco a conocerlas puedes revisar este Cheat CSS con varias propiedades que te ayudaran para comenzar:

CSS Cheat Sheet

Cómo lo incluimos en nuestras paginas web HTML?

Para incluir nuestro CSS a nuestras paginas web lo podemos hacerlo de tres formas:

1ra Forma

Definiendo una hoja de estilo interna (dentro de nuestro HTML), ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13

<html>
<head>  
  <title>Mi primera pagina</title>
  <style>
    p{
  color: #f00;
}
  </style>
</head>
  <body>
    <p>hola mundo!</p>
  </body>
</html>

Como podemos ver para esta forma es necesario definir dentro de nuestras etiquetas «head», la etiqueta «style» y dentro colocar nuestro código CSS.

2da Forma

Definiendo nuestro estilo dentro de una etiqueta HTML (esta forma se conoce como inline)

1
2
3
4
5
6
7
8

<html>
<head>  
  <title>Mi primera pagina</title>
</head>
  <body>
    <p style="color: #ff0000;">hola mundo!</p>
  </body>
</html>

De esta forma vemos que nuestro código CSS esta dentro de la etiqueta «p».

3ra Forma

La tercera forma es manejando nuestro código CSS en un archivo externo con extensión «css», por ejemplo:

Vamos a crear el archivo style.css con las siguientes lineas:

1
2
3

p{
  color: #ff0000;
}

Luego vamos a tener nuestro archivo HTML con el siguiente nombre: mi-primera-pagina.html y tendrá el siguiente código:

1
2
3
4
5
6
7
8
9

<html>
<head>  
  <title>Mi primera pagina</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
  <body>
    <p>hola mundo!</p>
  </body>
</html>

Usando la etiqueta «link» y el atributo href=»style.css» incluimos nuestro archivo style.css a nuestra pagina HTML.

El resultado de nuestro ejemplo puede verse a continuación:

See the Pen Simple html by Ramón (@viviryaprenderweb) on CodePen.

Bueno hasta aquí con esta pequeña introducción a CSS, espero que haya sido de ayuda y posteriormente estaremos publicando otros post para ampliar tu conocimiento en CSS.

Saludos y hasta pronto

La entrada Introducción a CSS – Hoja de estilo en cascada aparece primero en Vivir y Aprender Web.

En este post te enseñaremos a instalar Inkscape 0.91 en las versiones derivadas de Ubuntu 14.04, y también te mostraré cómo hacer el rollback o mejor dicho regresar a la versión por defecto que viene en nuestros sistema, espero sea de gran ayuda y ademas te agregado un vídeo solo para que veas los pasos por si llegases a tener alguna duda.

1ro) Bueno primero antes que nada como siempre vamos a ejecutar nuestros comandos apt-get update y upgrade en nuestro terminal:

sudo apt-get update
sudo apt-get upgrade #este es opcional

Luego si todo ha ido bien continuamos en el siguiente paso.

2do) Vamos ha agregar a nuestros repositorios la PPA correspondiente, lo hacemos con el siguiente comando:

sudo add-apt-repository ppa:inkscape.dev/stable

La información de esta PPA la puedes encontrar en el siguiente enlace PPA:

3ro) Ejecutamos nuevamente nuestro comando apt-get update:

sudo apt-get update

Y comprobamos que todo esta jalando correctamente.

4to) Ahora solamente antes de instalar verificamos la versión de Inkscape a instalar, esto lo hacemos con el siguiente comando:

sudo apt-cache policy inkscape

Salida del comando:

inkscape:
Installed: (none)
Candidate: 0.91.0+40~ubuntu14.04.1
Version table:
0.91.0+40~ubuntu14.04.1 0
500 http://ppa.launchpad.net/inkscape.dev/stable/ubuntu/ trusty/main amd64 Packages
0.48.4-3ubuntu2 0
500 http://archive.ubuntu.com/ubuntu/ trusty/main amd64 Packages
100 /var/lib/dpkg/status

Vemos que el candidato a instalar es la versión 0.91 que es nuestro objetivo, también vemos que nos muestra la versión 0.48 que es la que venía por defecto en nuestra paquetería.

5to) Ahora ya podemos por fin instalar Inkscape con el siguiente comando:

sudo apt-get install inkscape

Te dejamos el siguiente vídeo para puedas ver en acción estos pasos:

Rollback
Bueno como te lo he mencionado al comienzo también quiero dejarte la opción de regresar a la versión por defecto que es la 0.48 por cualquier caso que podemos llegar a tener.

1ro) Desinstalar o eliminar por completo la versión 0.91, con el siguiente comando:

sudo apt-get remove --purge inkscape

2do) Eliminamos la PPA que habíamos agregado en un comienzo (paso 2 de la instalación)

sudo add-apt-repository --remove ppa:inkscape.dev/stable

3ro) Ahora volvemos a instalar Inkscape 0.48 con el siguiente comando

sudo apt-get install inkscape

Bueno también te dejo un vídeo corto donde hemos seguido estos pasos para que sea de ayuda:

La entrada Cómo instalar Inkscape 0.91 en 5 pasos en Ubuntu 14.04 y sus derivadas aparece primero en Vivir y Aprender Web.

Cabe mencionar que existe mas de una forma de importar una base de datos en postgresql para este post hemos tomando de ejemplo que la base de datos a importar (dump) fue generado como lo explicamos en un pasado post.

Dicho lo anterior, el comando para importar una base de datos en postgresql es el siguiente:

psql -U postgres -W -h localhost nombre_base < dump_base.sql

Como vemos utilizamos el comando psql con los siguientes parámetros:

Por último hemos creado un vídeo donde te mostramos el uso del comando:

La entrada Cómo importar una base de datos en PostgreSQL aparece primero en Vivir y Aprender Web.