Cómo activar la verificación en dos pasos para acceder a tu PC con Linux

Activar la verificación en dos pasos en Linux es una de las mejores formas de mejorar la seguridad, incluso robando nuestra contraseña nadie tendrá la capacidad de entrar a nuestro PC si no posee nuestro smartphone.

A estas alturas todos sabemos que usar la misma contraseña en multitud de sitios diferentes es un grave fallo de seguridad. Si dicha contraseña es robada, un atacante podría tener acceso a todo lo que hayamos protegido con esa clave. Sin embargo, llevar la cuenta de todas esas contraseñas distintas que hagamos puede ser realmente difícil, necesitando al final ayudas como programas que nos las organicen. Muchos de estos organizadores de claves a su vez, necesitan de una contraseña maestra, la cual, si es robada concede acceso a las demás claves.

Para proteger nuestras cuentas existen otros métodos que ofrecen un paso de seguridad extra, como por ejemplo la verificación en dos pasos. Este método es muy sencillo, pues solo se necesitan dos cosas diferentes. La primera es algo que sabemos, nuestra contraseña y lo segundo es algo que tenemos, nuestro smartphone. Con la verificación en dos pasos, para entrar a nuestra cuenta tendremos que usar un usuario y contraseña, pero después nos pedirá una clave de verificación aleatoria que conseguiremos de nuestro teléfono. Por lo tanto, para que alguien entre en una cuenta nuestra no le valdrá con saber la contraseña de la cuenta, porque también necesitará nuestro teléfono para ingresar una clave de verificación que además está constantemente en cambio.

En este artículo, vamos a usar el servicio de verificación en dos pasos que proporciona Google para fortalecer la seguridad de nuestro usuario en un sistema Linux. El resultado final será una cuenta a la que después de ingresar nuestro usuario y contraseña, nos pedirá una clave de verificación que se generará en nuestro smartphone y que cambiará cada treinta segundos.

Paso 1: Instalar las herramientas necesarias

Los pasos de está guía han sido realizados en la distribución Ubuntu 14.10, en un entorno Unity con el administrador de sesiones LightDM, pero los principios son aplicables para otras distribuciones.

En el PC: Google Authenticator PAM

Lo primero que debemos hacer es abrir una terminal y ejecutar el comando de instalación (para otras distros puede que tenga un nombre diferente):

$ sudo apt-get install libpam-google-authenticator

En el smartphone: Google Authenticator (u otra que haga una función similar)

Instalamos Google Authenticator desde Google Play si estamos en Android. También está disponible para iOS.

Paso 2: Configurar la verificación en dos pasos en Linux

En el ordenador:

verificacion-en-dos-pasos-para-linux

Para conseguir mejorar la seguridad con la verificación en dos pasos en Linux, haremos una clave secreta, a partir de la cual nuestro smartphone creará las claves de verificación que nuestro PC pedirá al hacer login. Para ello, en una terminal ejecutaremos el siguiente comando:

$ google-authenticator

Nos pregunatará si queremos que las claves de verificación estén basadas en el tiempo, contestaremos que sí con y. Lo que veremos ahora será un código QR que nuestro smartphone podrá reconocer vía Google Authenticator. También podemos introducir la clave secreta directamente en la aplicación, es la que pone your new secret is: clave. En este punto, nos da una serie de códigos de emergencia por si no llevamos el móvil encima, que sería conveniente tenerlos a mano por si las moscas. También nos dará más opciones sobre las claves de identificación, a las que contestaremos con y o n dependiendo de nuestras preferencias personales. Ahora debemos abrir el archivo de configuración del administrador de sesiones LightDM:

sudo gedit /etc/pam.d/lightdm

Al final del archivo añadiremos la siguiente línea:

auth required pam_google_authenticator.so nullok

verificacion-en-dos-pasos-en-linux

Guardamos el archivo y la próxima vez que iniciemos sesión comprobaremos que nos pide una clave de verificación. El nullok es para que los usuarios que no hayan configurado la verificación puedan entrar normalmente a su sesión.

En el móvil:

Necesitamos el teléfono para que nos cree las claves de verificación. Una vez añadida a Google Authenticator la clave secreta creada en el paso anterior vía código QR o manualmente, le pondremos el nombre que queramos a esta nueva cuenta y seleccionaremos la opción «basada en el tiempo». Ahora en nuestro teléfono veremos como cada 30 segundos va cambiando la clave de verificación para nuestro PC.

verificacion-en-dos-pasos-para-linux

Con esto la tenemos una verificación en dos pasos en Linux. Si un día queremos retirar esta verificación, solo tendremos que borrar la línea que añadimos al archivo /etc/pam.d/lightdm.

desde Hipertextual http://ift.tt/1CpfxvK
via IFTTT

HTML Inspector, define tus propias reglas para validar código HTML

HTML Inspector

HTML Inspector es un herramienta orientada a mejorar la calidad del código que tanto tú como tu equipo escribís en la parte front. Una de las principales ventajas es su simplicidad de uso y customización para definir las reglas que más os interesen “validar” del código. Se puede ejecutar directamente en navegador.

Con el validador del W3C guarda pocas similitudes. Son herramientas muy diferentes. Mientras que el del W3C es completamente estricto con sus advertencia y validaciones, con HTML Inspector podemos customizarlo para que cumpla una serie de reglas propias (guía de estilo del equipo, como por ejemplo, usar camelCase u otra notación). Por supuesto, mantiene toda la convecciones sintácticas que las recomendaciones W3C marcan (actualmente con HTML 5.1): elementos deprecated o atributos, así como los nuevos componentes.

Es totalmente extensible y más que un último proceso de validación sirve como guía de desarrollo. Escribir un código coherente entre todos los miembros del equipo es complicado, por eso HTML Inspector ayuda a tomar convenciones comunes.

HTML Inspector es un complemento ideal para usar con JSLint y CSSLint, todos ellos totalmente extensibles.

Para poder instalar HTML Inspector tenéis distintas alternativas: simplemente importar el JS sobre vuestro HTML y probarlo; o usar npm o bower para descargar e importar; también se puede hacer uso de grunt para utilizar su implementación el código.

Github | HTML Inspector


La noticia HTML Inspector, define tus propias reglas para validar código HTML fue publicada originalmente en Genbeta Dev por Txema Rodríguez .

desde Genbeta Dev http://ift.tt/13IOm2w
via IFTTT

Empieza tu proyecto Open Source en las plataformas más conocidas. Github

alta_en_github_01.jpg

Voy a seguir la mini serie de tutoriales “paso a paso” en donde mostrar las plataformas más utilizadas para compartir proyectos Open Source en las diferentes comunidades y lenguajes.

Ahora voy a mostrar la plataforma que se ha erigido como la más utilizada y valorada por toda la comunidad de desarrollo, en todas las tecnologías: GitHub. Y en donde, seguramente, están los proyectos Open Source más suculentos.

Un excelente repositorio de código público y más

Lo primero que noto nada más introducir los tres datos para dar de alta la cuenta en GitHub, es que tiene muchas más opciones y servicios que CodePlex.

Así en el menú de la cuenta tengo acceso a servicios como:

  • La ficha de usuario.
  • La configuración de las cuentas
  • La configuración de los emailes.
  • La configuración del centro de notificaciones.
  • Información de facturación (se empieza a pagar a partir del primer repositorio privado).
  • La generación de claves SSH, para acceso seguro.
  • Configuración de la seguridad. En donde puedo activar la autenticación de dos pasos.
  • Acceso a las aplicaciones, en donde se genera el token para utilizar la API de Github en nuestras aplicaciones.
  • La gestión de repositorios
  • La gestión de las organizaciones.

Nada más entrar en mi cuenta, debo de verificar mi email principal para lo cual pulso en el botón de "Enviar verificación", espero a que me llegue el correo a la cuenta, pulso en el enlace, y ya estoy listo para seguir los pasos para dar de alta mi proyecto.

Alta en Github

Desde la pantalla inicial de mi cuenta, pulso en el símbolo de “+” que está al lado del nombre de mi cuenta, en la parte superior derecha. Y en donde escojo el crear un nuevo repositorio.

Alta en GitHub

En la ventana que se me abre, escojo el nombre del repositorio, si es público o privado, marco que quiero inicializar el repositorio vía README (así puedo hacer un git clone de forma inmediata), y escojo la licencia que en este caso también es Apache V2 – como hice en CodePlex.

Alta en GitHub

En cuanto pulso el botón de crear el repositorio, el sistema se pone a trabajar y finalmente se me muestra la pantalla principal del repositorio enseñando el contenido de la rama master.

Alta en GitHub

Conectando el IDE con GitHub

El siguiente paso es abrir mi IDE favorito, Visual Studio 2013 (cualquier versión te permite conectarte), y dar de alta un nuevo proyecto ASP.NET indicándole que lo quiero añadir al control de código fuente.

Alta en GitHub

Como en todos los ejemplos anteriores, doy de alta un proyecto MVC, con su proyecto de Test asociado. Y cuando me pregunta el tipo de control de código, le indico que voy a utilizar Git.

Alta en GitHub

Si abro ahora el Test Explorer, pulso en la opción de Settings, y configuro la situación física en mi equipo de mi repositorio local.

Alta en GitHub

Pulsando en el nombre del repositorio, obtengo un menú desplegable en donde escojo la opción “Unsynced Commits”.

Lo cual me lleva a la pantalla en donde voy a realizar la publicación inicial. Para ello lo primero es indicarle la url del repositorio en GitHub, la cual obtengo en la pantalla de mi repositorio recién creado, en una pequeña caja de texto titulada “HTTPS clone URL”.

Alta en GitHub

Me vuelvo al Visual Studio e introduzco la URL en la dirección de mi repositorio remoto. A continuación pulso el botón “Publicar”, lo cual me responde con una ventana de seguridad en donde tengo que meter los datos de mi cuenta GitHub.

Alta en GitHub

Lo siguiente es un workaround que he realizado al encontrarme un error cuando lancé la publicación en GitHub, y que me indicaba que la rama “main ya existía y que no podía hacer una publicación. Dejo a ti, lector, el que encuentres o describas lo que hice mal o el paso que me salté para mejorar lo que hice.

Al devolverme el error lo que hice fue irme otra vez a “Unsynced Commits”, borre el branch main, y cree un nuevo branch con otro nombre, desde la raíz.

Alta en GitHub

Y ahora sí me acepta la publicación, viéndose el nuevo branch en la página de GitHub.

Alta en GitHub

De vuelta al Visual Studio, me voy a Changes (también desde el Explorador de la solución se puede hacer) e intenté hacer un Pull. Pero no se activa hasta introducir una descripción del Commit.

En vez de pulsar directamente en el botón, escojo la opción Commit & Push del menú despegable. La cual no solo me hace un commit a mi repositorio local, si no que también lo hace al remoto.

Alta en GitHub

Y ahora si, he finalizado. Si me voy a la página de Github, y escojo el Branch “GenbetadDev_GitHub”, veo que ya tengo el código subido de forma pública, y en donde puedo mostrar mi trabajo, y aceptar Pull request de miembros de la comunidad.

Alta en GitHub

En el próximo capítulo voy a hacer un análisis de otro repositorio que se utiliza mucho: Bitucket.

Más información | CodePlex
En Genbetadev | Empieza tu proyecto Open Source en las plataformas más conocidas, CodePlex


desde Genbetadev http://ift.tt/1tgoAtk
via IFTTT

Cómo instalar Monitorix para monitorizar tu servidor web

Tiempo atrás vimos cómo monitorizar un servidor Nginx con Linux-dash, pero como ya sabemos todos los que estamos en esto si algo nos sobra en el gran sistema operativo libre son opciones, tanto en lo referente a los servidores como a las formas que tenemos de estar al tanto de todo lo que acontece con…

El artículo Cómo instalar Monitorix para monitorizar tu servidor web ha sido originalmente publicado en Ubunlog.

desde Ubunlog http://ift.tt/1pCWKsf
via IFTTT

Cambia textos por defecto de WordPress sin tocar una línea de código

Ya varias veces hemos visto cómo se cambian textos por defecto de WordPress usando el maravilloso código str_replace pero ¿y si no quieres modificar códigos? Entonces nada mejor que Say what?, una chulada de plugin que viene a hacer lo mismo pero con una interfaz la mar de sencilla. Simplemente añades el texto a modificar, le das al enlace “Edit” y lo cambias a tu gusto, así puedes pasar … Simplemente añade una nueva cadena de texto original de WordPress y le pones el nombre que se te ocurra. Más fácil no se puede.

Visita la pagina del plugin aquí, para mas información.

Crea tu propio plugin SEO

Siempre estamos con la discusión de cuál es el mejor plugin de SEO, que si el de Yoast porque tiene más cosas, que si el All in one SEO pack porque no falla nunca, que si Fernando está loco, que si meto las tags manualmente, etc. Pero ¿y si creas el tuyo propio? Así que basta de debates estériles y discusiones inútiles de a ver quién la tiene más larga y manos a la obra a crear un plugin SEO básico que añada las descripciones meta y un título para Open Graph con su descripción a la cabecera de las … Sigue leyendo que hay más

desde Ayuda WordPress http://ift.tt/1iO0oZo
via IFTTT

Cambiar el idioma de WordPress automáticamente

En sitios multilenguaje puede ser de gran utilidad ofrecer que, dependiendo de la configuración de idioma del usuario, detectado del navegador, WordPress cambie de idioma automáticamente. La idea es que si el navegador del usuario está en un idioma, WordPress se muestre en ese idioma, y si el tema también está bien configurado para la traducción, que también se muestre en el idioma del usuario. Hay un requisito, y es que tanto el tema como la instalación de WordPress dispongan de los archivos .mo de traducción necesarios, pero si eso no es problema solo tienes que hacer lo siguiente: :: … Sigue leyendo que hay más

desde Ayuda WordPress http://ift.tt/1kFRUUo
via IFTTT

Diez librerías de PHP indispensables

 

Tiene muchos (y muy beligerantes) detractores pero ni siquiera estos podrán negar que PHP es uno de los lenguajes más utilizados de la actualidad. Y el uso masivo de un lenguaje tiene un efecto: que casi cualquier cosa que se te ocurra hacer, ya la ha hecho alguien antes y seguramente la haya empaquetado en forma de librería y ofrecido al mundo (y muy posiblemente en formato open source) para su uso y disfrute. Hoy os traemos, amigos de Genbeta Dev, una selección de diez librerías de PHP que consideramos indispensables ya que hará tu vida profesional más sencilla, cómoda y feliz. Son todas open source y funcionales para PHP5 (salvo que se indique expresamente lo contrario) por lo que las puedes utilizar en tus proyectos sin problemas y hemos evitado las más obvias como mCrypt, cUrl, PDO o incluso PHPUnit ya que estas debes tenerlas instaladas si o si. Y me dejo ya de preliminares, vamos al turrón:

pChart

Para realizar gráficos hay multitud de librerías de pago en PHP, sin embargo no mejoran excesivamente los resultados de pChart, todo un clásico del desarrollo PHP y que parece que no pasa de moda nunca (raro debe ser el desarrollador peachepero que no la ha usado alguna vez). Genera gráficos de diversos tipos a partir de ficheros CSV, queries SQL o datos introducidos manualmente. Depende, eso si, de tener instalada la librería GD.

Descarga | pChart (SourceForge)

Upload

Upload es una librería (gratuita y con licencia MIT) que te ahorra el tedioso cometido de subir y validar ficheros al servidor. Tan sólo unas cuantas líneas y p’alante. Librería top.

Descarga | Upload (GitHub)

PHP Excel Reader

Parsear ficheros Excel o CSV… ¿hay cosa más odiosa y menos gratificante? Pues con PHP Excel Reader es coser y cantar. Fácil de instalar, más fácil todavía de utilizar y prácticamente a prueba de bombas. De verdad, quiero más a esta librería que a algunos de mis amigos.

Descarga | php-excel-reader (Google Code)

Gaufrette

Realmente trabajada librería que te facilita una capa de abstracción para trabajar con sistemas de ficheros de distintos tipos (locales, servidores FTP, sistemas en la nube como Amazon S3, Azure o Rackspace…) de manera transparente y un sistema de caché para ficheros lentos.

Descargar | Gaufrette (GitHub)

Omniplay

Potente paquete de librerías para procesamiento de pagos en PHP que ofrece una API consistente para validar tarjetas de crédito y poder trabajar de una manera transparente con una veintena de pasarelas de pago. En un principio, ninguna de estas pasarelas salvo PayPal y pocas más, es de mucha utilidad para el usuario español pero, por suerte, es un sistema escalable que te permite añadir tus propias pasarelas con poco esfuerzo (apenas extendiendo una librería llamada AbstractGateway). Además incluye una completa aplicación de prueba para que puedas comprobar todo su potencial.

Descarga | Omnipay (GitHub)

FPDF

Alternativa libre, gratuita y sorprendentemente funcional y rápida a la popular PDFLib a la hora de crear y manejar archivos PDF dede PHP. Tan sólo necesita de zlib y GD instalados para funcionar correctamente. Acepta imágenes, fuentes TrueType y Type1 y compresión. Muy apañada.

Descarga | fpdf.org

PHPMailer

Después de penar con la función mail() de PHP, utilizar la librería PHPMailer, otro clásico que casi seguro que todos hemos catado alguna vez, es poco menos que ambrosía para nuestros paladares. Con soporte para SMTP (y diversos métodos de autenticación), emails alternativos para clientes sin soporte HTML, capacidad para múltiples TOs, CCs y demás. Hay muchas más opciones en este mundo del emailing vía PHP pero PHPMailer es con diferencia la más utilizada..

Descarga | PHPMailer (GitHub)

Krumo

Básicamente lo que hace es poner bonito el var_dump con un poco de HTML y CSS. Parece poca cosa pero nuestros ojos lo agradecen y mucho. Ya viene integrado en muchos proyectos como Drupal.

Descarga | Krumo (SourceForge)

Carbon

Supongo que no soy el único que odia trabajar con fechas. Es algo realmente terrible… y eso que con la inclusión de la clase DateTime en PHP5.3, la cosa ya no es para cortarse las venas. Pero con Carbon es otra cosa. Carbon es una librería que hereda de DateTime y le añade un componente semántico muy importante además de facilitar el formateo y la localización. Muy útil. Eso si, como DateTime, sólo funciona a partir de PHP 5.3.

Descarga | Carbon

Underscore

Pues si, es como underscore.js pero portado a PHP. Y como su hermano mayor javascriptero, es rabiosamente útil y fácil de utilizar. Eso sí, sólo funciona para instalaciones de PHP 5.3 y superiores.

Descarga | Underscore

 

Las tablas de la base de datos de WordPress ¿cuáles son? ¿para qué sirve cada una?

Hace algún tiempo atrás, necesitaba hacer un Query SQL directa a la base de datos de wordpress y como era muy novel en términos de bases de datos y sobre todo en la estructura de wordpress me di mil vueltas buscando la información que necesitaba, hasta que por fin en la encontré en el codex de wordpress y en una imagen que describe la relación entre cada tabla, me pareció tan útil que se convirtió en un enlace favorito dentro de mi navegador para tener a disposición esta información cuando la requiera, es de este modo que comparto con ustedes dicho link.

A continuación una descripción de cada tabla, para acercarnos un poco mas a la filosofía de wordpress.

TABLAS DE WORDPRESS 3.8/3.9 (11)
NOMBRE DE TABLA DESCRIPCIÓN
wp_commentmeta Cada comentario incorpora datos llamados meta data que se almacenan en wp_commentmeta.
wp_comments Los comentarios de WordPress se almacenan en la tabla wp_comments
wp_links En la tabla wp_links se guarda la información relativa a los enlaces añadidos en la funcionalidad de Enlaces de WordPress obsoleta actualmente aunque puede volver a usarse con el plugin Links Manager.
wp_options Los ajustes que se configuran en la página de Ajustes de la administración de WordPress se almacenan en la tabla wp_options.
wp_postmeta Cada entrada contiene información denominada data que se almacena en la tabla wp_postmeta. Hay plugins que también añaden su propia información a esta tabla.
wp_posts Las entradas páginas y elementos de menú se guardan en la tabla wp_posts.
wp_terms Las categorías tanto de las entradas como de los enlaces y las  etiquetas de las entradas se almacenan en la tabla wp_terms.
wp_term_relationships Las entradas y enlaces están asociadas a categorías y/o etiquetas de la tabla wp_terms y esta asociación se guarda en la tabla wp_term_relationships.
wp_term_taxonomy Esta tabla describe la taxonomía (categoría enlace o etiqueta) de cada línea de la tabla wp_terms.
wp_usermeta Cada usuario contiene información denominada data y se almacena en la tabla wp_usermeta.
wp_users La lista de usuarios se guarda en la tabla wp_users.

 

 

Para mas detalles les recuerdo que toda esta información (descripción de las tablas e imagen de las tablas) están disponibles en el codex de wordpress relativo a la base de datos.

Internet Explorer 6, víctima colateral del fin de Windows XP. La imagen de la semana

Internet Explorer 6

Muchos esperaban, quizá con temor o con muchas ganas, el final de soporte de Windows XP. Ese momento finalmente llegó el pasado martes, aunque no sin ciertas excepciones para ciertos gobiernos (hoy hemos sabido de otro acuerdo con la agencia tributaria estadounidense). Y hemos pensado poco en otra pieza de software íntimamente relacionada con XP y que también ha muerto definitivamente.

Estoy hablando de Internet Explorer 6, la versión más popular e infame del navegador de Microsoft. «Aquí yace Internet Explorer 6. Pasó a Netscape y al resto… pero nunca pasó el Acid Test», reza esta especie de lápida de IE6death.com.

Si hay algo que todos tenemos muy claro es que Internet Explorer 6 hace mucho que se quedó desfasado, careciendo de muchas características que sus competidores implementaron con mucha rapidez (jamás se me olvidará la falta de soporte nativo para imágenes PNG con transparencia). Todos hemos odiado Internet Explorer, y en particular esta versión, más de una vez. En Microsoft lo saben e incluso ironizaron al respecto.

Una de las misiones de Microsoft, como ya declararon, era erradicar este navegador de la faz de las redes. Es muy sangrante que todavía cuente con una cuota de mercado muy significativa: en torno a un 4%.

La razón es simple: los costes de tener Internet Explorer 6 pululando por la red eran enormes: muchas veces los clientes pedían que una página o aplicación Web fuera explícitamente compatible con este navegador, y este trabajo era casi de chinos. La tendencia ya era, desde hace tiempo, dejar de soportar los navegadores demasiado antiguos.

Sea lo que sea, por suerte para todos (usuarios y desarrolladores), Internet Explorer 6 ha pasado definitivamente a mejor vida. Y yo digo, bien alto: ya era hora.

En Genbeta | El anuncio anime de Internet Explorer. La imagen de la semana


La noticia Internet Explorer 6, víctima colateral del fin de Windows XP. La imagen de la semana fue publicada originalmente en Genbeta por Manu Mateos.


desde Genbeta http://ift.tt/1lWsoxc
via IFTTT

Desactivar módulos de JetPack por defecto

Una de las manías que tiene el plugin JetPack es la de activar módulos por defecto. Luego, además, si te pones a hacer experimentos, es común activar módulos que no necesitas que se olvida desactivar, y quedan ahí consumiendo recursos del servidor. Pues bien, hace unos días leía un modo de desactivar módulos de JetPack por defecto, una especie de quitamanías. La idea es que añadas este código a tu plugin personal, o al fichero functions.php de tu tema: Una vez guardas los cambios ya no tendrás siguiera la tentación de activar los módulos inactivos (los comentados “//”). Por supuesto, … Sigue leyendo que hay más →

desde Ayuda WordPress http://ift.tt/1gg8jki
via IFTTT

Formulario multi pasos con CSS y Jquery

Vamos a ver la forma de crear una sencillo formulario  del tipo multipaso, muy útil cuando tenemos formularios muy extensos o con demasiados campos, utilizaremos Jquery easing para animar la transición de las diferentes etapas o partes de las que se compondrá y le daremos el toque artístico con un poco de CSS (no esperen mucho, no soy bueno para el CSS).

Bueno lo primero sera confeccionar nuestro formulario, para ello utilizaré el siguiente código, el cual no presenta secretos.

En primer lugar definimos la cantidad de pasos para confeccionar una barra de progreso, para mantener informado al usuario y evitar que deje el formulario abandonado y perdamos trafico,  en este ejemplo serán 3 (Configurar tu cuenta, Perfil Social y Detalles Personales).

<form id="formulario">
<!-- progreso -->
<ul id="progreso">
<li class="active">Configurar tu cuenta</li>
<li>Perfil Social</li>
<li>Detalles Personales</li>
</ul>
</form>

La barra de progreso sera una simple etiqueta ul  con un id llamado progreso, con sus correspondientes etiquetas li (tantas como pasos tenga el formulario) [highlight color=yellow]no olvidar asignar la clase active al primer li[/highlight] que mediante jQuery y CSS posteriormente la dotaremos de vida.

Luego de definir los step o pasos del formulario, creamos diferentes campos fieldsets para contener cada paso y dentro todo lo que se requiera (inputs, h2, h3, p, label, etc).

<!-- fieldsets -->
<fieldset>
    <h2 class="fs-title">Crear su cuenta</h2>
    <h3 class="fs-subtitle">Paso 1</h3>
    <input type="text" name="email" placeholder="Email" />
    <input type="password" name="pass" placeholder="Password" />
    <input type="password" name="cpass" placeholder="Confirmar Password" />
    <input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
    <h2 class="fs-title">Perfil social</h2>
    <h3 class="fs-subtitle">Tu presencia en las redes</h3>
    <input type="text" name="twitter" placeholder="Twitter" />
    <input type="text" name="facebook" placeholder="Facebook" />
    <input type="text" name="gplus" placeholder="Google Plus" />
    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
    <h2 class="fs-title">Detalles Personales</h2>
    <h3 class="fs-subtitle">Nunca venderemos tu informaci&oacute;n personal</h3>
    <input type="text" name="fname" placeholder="Nombre" />
    <input type="text" name="lname" placeholder="Apellido" />
    <input type="text" name="phone" placeholder="Telefono" />
    <textarea name="address" placeholder="Direcci&oacute;n"></textarea>
    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input type="submit" name="submit" class="submit action-button" value="Submit" />
</fieldset>

En cada fieldset, adicional a los campos que requiramos, debemos agregar un input tipo button para avanzar de paso en paso y otro para retroceder (según corresponda), por tanto en este ejemplo necesito agregar uno el primer fieldset para avanzar, dos al segundo y uno para retroceder en el ultimo junto a uno tipo submit.
Si probamos el código obtendremos una simple pagina de fondo blanco con un formulario donde veremos todos los campos así.

Un toque de sensibilidad

Ahora lo principal es hacer mas vistoso nuestro formulario, para ello sacamos nuestros dotes artísticos (mas de alguien fumara algo para encontrar su inspiración xD) y nos zambullimos en CSS, yo no tengo estudios formales en CSS, pero la web es basta y repleta de información al respecto, al final de este articulo les dejare algunos link relacionados para el que desee profundizar alguno de los temas tratados en este post.

Primero importaremos una fuente tipografica desde el CDN de fuentes de google, yo usare la fuente Montcerrat, pero pueden usar la que estimen, desde google fonts podran navegar, buscar y elegir la que mas les agrade.

/*importamos una fuente personalizada desde google*/
@import url(http://fonts.googleapis.com/css?family=Montserrat);

Un pequeño reset de estilos al documento,  sera muy básico.

/*reset basico*/
* {margin: 0; padding: 0;}

Altura del documento html y aplicamos un combo de imagen como patern + gradient, cave señalar que la mayoría de CSS que usaremos, no aplica en internet explorer, esto debido a su incompatibilidad con esta versión de CSS 3 (pero bueno a quien le importa esos dinosaurio xD).

html {
    height: 100%; /*Image only BG fallback*/
    background: url('bitmaps/gs3.png'); /*background = combo gradient + imagen pattern*/
    background: linear-gradient(rgba(196, 102, 0, 0.2), rgba(155, 89, 182, 0.2)), url('bitmaps/gs3.png');
}

A pesar que mencione que no funcionaba bien en internet explorer  debemos asegurarnos que los otros navegadores entiendan nuestra codificación de estilos y para ello utilizaremos los prefijos para sus respectivos motores de render:

[checklist]
  • -webkit- : Para la familia Chrome / Chromium y Safari
  • -moz- : Para Mozilla Firefox y derivados
  • -o- : Para Opera (o si, aun existe)
  • -ms-: Para internet explorer 9 (pero linear-gradient no funciona bien en ie)
[/checklist]
background: -webkit-linear-gradient(rgba(196, 102, 0, 0.2), rgba(155, 89, 182, 0.2)), url('bitmaps/gs3.png');
background: -moz-linear-gradient(rgba(196, 102, 0, 0.2), rgba(155, 89, 182, 0.2)), url('bitmaps/gs3.png');
background: -o-linear-gradient(rgba(196, 102, 0, 0.2), rgba(155, 89, 182, 0.2)), url('bitmaps/gs3.png');
background: -ms-linear-gradient(rgba(196, 102, 0, 0.2), rgba(155, 89, 182, 0.2)), url('bitmaps/gs3.png');

Aplicamos la fuente importada

body {
    font-family: montserrat, arial, verdana;
}

Ahora el formulario y su contenido

/*estilo formulario*/
#formulario {
    width: 400px;
    margin: 50px auto;
    text-align: center;
    position: relative;
}
#formulario fieldset {
    background: #ffffff;
    border: 0 none;
    border-radius: 3px;
    -webkit-box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
    padding: 20px 30px;
    width: 80%;
    margin: 0 10%; /*Posicionamos todos los fieldset uno encima del otro*/
    position: absolute;
}
/*Ocultamos todos menos el primer fieldset*/
#formulario fieldset:not(:first-of-type) {
    display: none;
}
/*inputs*/
#formulario input,#formulario textarea {
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-bottom: 10px;
    width: 100%;
    font-family: montserrat;
    color: #2C3E50;
    font-size: 13px;
}
/*buttons*/
#formulario .action-button {
    width: 100px;
    background: #27AE60;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 1px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
}
#formulario .action-button:hover,#formulario .action-button:focus {
    -webkit-box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
    box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
/*headings*/
.fs-title {
    font-size: 15px;
    text-transform: uppercase;
    color: #2C3E50;
    margin-bottom: 10px;
}
.fs-subtitle {
    font-weight: normal;
    font-size: 13px;
    color: #666;
    margin-bottom: 20px;
}

Solo resta la parte superior del formulario, donde se marcan los pasos:

/*progreso*/
#progreso {
    margin-bottom: 30px;
    overflow: hidden; 
    counter-reset: step; /*CSS contador para numerar los pasos, lo aprendi en http://www.w3schools.com/*/
}
#progreso li {
    list-style-type: none;
    color: white;
    text-transform: uppercase;
    font-size: 9px;
    width: 33.33%;
    float: left;
    position: relative;
}
#progreso li:before {
    content: counter(step);
    counter-increment: step;
    width: 20px;
    line-height: 20px;
    display: block;
    font-size: 10px;
    color: #333;
    background: white;
    border-radius: 3px;
    margin: 0 auto 5px auto;
}
/*conectores de progreso*/
#progreso li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: white;
    position: absolute;
    left: -50%;
    top: 9px;
    z-index: -1; /*lo pone detrás de los números*/
}
#progreso li:first-child:after {
    /*el conector no es necesario antes de que el primer paso*/
    content: none; 
}
/*marca activo/completado los pasos en verde*/
/*El numero del paso y el conecto quedaran en verde*/
#progreso li.active:before,#progreso li.active:after {
    background: #27AE60;
    color: white;
}

Con esto hemos terminado la parte «artistica» de nuestro formulario. Si probamos nuestro formulario notaran que se ve bien esteticamente, que solo vemos la primera parte del formulario, pero al darle click al boton Next, no pasa nada, ahora le daremos vida con un poco de JQuery.

Crearemo un nuevo archivo con extension js, llamenlo como quieran, yo lo llamare funciones.js

$(document).ready(function(){
//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //propiedades fieldset que vamos a animar
var animating; //

$(".next").click(function(){
    current_fs = $(this).parent();
    next_fs = $(this).parent().next();

    //activar el siguiente paso en progreso usando el índice de next_fs
    $("#progreso li").eq($("fieldset").index(next_fs)).addClass("active");

    //mostrar el siguiente fieldset
    next_fs.show(); 
    //ocultar el fieldset actual con estilo
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //como la opacidad de current_fs está reducida a 0 - almacenado en "now"
            //1. escala current_fs hasta 80%
            scale = 1 - (1 - now) * 0.2;
            //2. traer next_fs desde la derecha (50%)
            left = (now * 50)+"%";
            //3. aumentar la opacidad de next_fs a 1 a medida que avanza
            opacity = 1 - now;
            current_fs.css({'transform': 'scale('+scale+')'});
            next_fs.css({'left': left, 'opacity': opacity});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
        }, 
        //Esto viene del plugin easing
        easing: 'easeInOutBack'
    });
});

$(".previous").click(function(){
    current_fs = $(this).parent();
    previous_fs = $(this).parent().prev();

    //des-activar paso actual en progreso
    $("#progreso li").eq($("fieldset").index(current_fs)).removeClass("active");

    //mostrar el fieldset anterior
    previous_fs.show(); 
    //ocultar el fieldset actual con estilo
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. escalar previous_fs de 80% a 100%
            scale = 0.8 + (1 - now) * 0.2;
            //2. take current_fs to the right(50%) - from 0%
            left = ((1-now) * 50)+"%";
            //3. increase opacity of previous_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({'left': left});
            previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
        }, 
        //Esto viene del plugin easing
        easing: 'easeInOutBack'
    });
});

$(".submit").click(function(){
    return false;
})

});

Ahora si hemos terminado, si desean que su formulario envié deben editar la ultima función del script.

Adicionalmente deben refererciar al plugin easing porque ocuparemos uno de sus metodos para animar nuestro formulario.

<!-- jQuery easing plugin -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" type="text/javascript"></script>

A continuacion les dejare un enlace con una demo de este formulario y un link donde podrán descargar el ejemplo completo listo para usar o editar a su conveniencia.

Referencias

 

Demo

Ver Demostración

Descargar ejemplo

Ubuntu 13.04 Final disponible para descarga

Desde hace pocos días, ya contamos con la versión final de Ubuntu 13.04 cuyo nombre clave es Raring Ringtail, disponible para libre descarga desde los servidores de canonical. Según lo informado con anterioridad este versión trae una notable mejora en desempeño en equipo de bajos recursos, algo que fue muy distinto de su versión anterior. Además de la potenciación para dispositivos moviles (equipos celulares y tablet).

Personalmente descargué ubuntu 13.04 para probarla en una maquina virtual (virtualbox), dado que ubuntu desde la incorporación de unity a dejado de ser la distribución de linux que uso, y aunque esta no es la mejor manera de probar una distribucion, debo señalar qu le asigne lo mayor cantidad de recursos que mi sistema anfitrion me permitía (2GB de memoria RAM y 256 MB de memoria de video, sobre un intel i7)  y aun asi no funcionó de manera prolija, se notaba la necesidad de una buena tarjeta aceleradora y que unity consumia memoria como si de agua se tratara.

Lo que es digno de resaltar es que canonical, siempre entrega un look and feel impecable y atractivo.

Cuando encendemos por primera vez nuestro computador con Ubuntu 13.04, tendremos una pantalla de login muy similar a la de Ubuntu 12.10. Dentro del escritorio los cambios más destacables son el nuevo paquete de iconos que trae Ubuntu 13.04. Este nuevo paquete de iconos ha modificado la interface de algunos iconos como los del centro de software de Ubuntu, actualizaciones de Ubuntu, Nautilus, lanzador de Ubuntu. Está claro que no se han modificado todos los iconos de Ubuntu 12.10 debido a que Canonical tan sólo penso en cambiar la interface de los iconos de sus programas «propios» como el centro de software de Ubuntu, Unity, y el gestor de archivos nautilus, este último aun sin ser un programa propio de Canonical, es el gestor de archivos que Canonical usa como gestor de archivos de Ubuntu.

A simple vista, no podemos apreciar otros cambios visuales y el escritorio es exactamente el mismo que hemos podido disfrutar en Ubuntu 12.10, pero cuando queramos apagar, reiniciar o cerrar sesión de nuestro ordeandor, veremos que el diseño de estos ha sufrido un buen lavado de cara. Ahora tenemos iconos mucho más grandes y con una interface totalmente distinta a la típica ventana de apagar o reiniciar el ordenador.

Aunque no tenemos muchos más cambios visuales, en Ubuntu 13.04 si que encontramos algunos cambios en la configuración de Ubuntu. Por ejemplo en Ubuntu 13.04 tan sólo tendremos un área de trabajo por defecto. Ubuntu siempre había seguido la configuración digamos «estándar» de Gnome 2. Dos áreas de trabajo por defecto  y ya que sea el usuario que decida si aumentar o disminuir dicha cifra. Con el salto de Ubuntu a Gnome 3, Canonical decidió incluir dos áreas de trabajo  más al igual que Gnome Shell. Por tanto, nos encontrábamos con cuatro áreas de trabajo o escritorios virtuales en forma de matriz de 2X2.

En esta ocasión, Canonical ha decidido por primera vez de tantas áreas de trabajo virtuales y tan sólo han dejado una. Ahora tiene que ser el usuario quién decida si aumentar o disminuir dicha cifra desde la configuración de Ubuntu.

Una vez que hemos hablado un poco de los cambios a nivel estético de Ubuntu 13.04, vamos a hablar de cambios internos y de rendimiento de Ubuntu 13.04. Cuando descargamos el cd live de Ubuntu 13.04, Canonical nos dice que esta versión es la versión más rápida de Ubuntu hasta la época. ¿Será verdad?.

Además, hablando de las búsquedas dentro del dash de Unity hay que decir que han mejorado en cuanto al resultado de estas. Ahora no hace falta poner la palabra bien del programa, archivo, documento, etc que estemos buscando. Ahora podemos cambiar de orden letras, saltarnos letras, etc, que el dash de Unity nos mostrará por pantalla aplicaciones que contengan en mayor o menor medida, dichas letras. Este cambio es bastante bueno ya que se nota en el rendimiento de Ubuntu 13.04. Ya no hace falta escribir despacio o con cuidado para que Ubuntu 13.04 nos lance la aplicación que queramos. Ahora podemos escribir mucho más deprisa que Ubuntu nos reconocerá perfectamente la aplicación que queremos lanzar aun estando mal escrita.

Relacionado con todo esto, ahora desde el propio lanzador de aplicaciones de Unity podemos cambiar de ventana rápidamente sin necesidad de pulsar sobre el icono y mostrar todas las ventanas abiertas. Simplemente con girar la ruleta del ratón sobre la aplicación abierta, Ubuntu nos cambiará de ventana. Aunque esto no hace que Ubuntu sea más rápido, para nosotros es mucho más cómodo que estar pulsando sobre un icóno para que nos muestre en pequeño las ventanas abiertas.

Una combinación de teclas que ha cambiado es ALT + TAB. Ahora nos mostrará, al igual que antes, las ventanas abiertas dentro de una misma aplicación y sin nos quedamos un tiempo señalando esa ventana, se nos abrirán todas las ventanas abiertas en pequeño para que podamos elegir cual queremos. Este «efecto» es el mismo que hace Ubuntu 12.10 al pulsar sobre un programa en el que tengamos varias ventanas abiertas.

Y hablando de ventanas abiertas, en Ubuntu 13.04 se crea un «alo» en la ventana seleccionada cuando pulsamos sobre una aplicación con varias ventanas abiertas. Aunque este «alo» ya existía en versiones anteriores, en Ubuntu 13.04 ha cambiado dando un efecto bastante más atractivo.

La polémica está servida: Windows 8 podria bloquear el arranque de Linux

De acuerdo a un articulo publicado por ITWorld, Microsoft requiere que las maquinas certificadas para usar Windows 8 usen UEFI (Unified Extensible Firmware Interface) para el arranque seguro en lugar de usar el firmware BIOS.
La idea de arranque seguro es para evitar que aplicaciones y sistemas maliciosos tomen el control de nuestro sistema. Aqui el problema va a ser cuando se considere a una distribucion Linux como sistema «malicioso».
¿Que significa esto?

Pues que actualmente muchas distribuciones de Linux no utilizan UEFI en el boot, y las pocas que si lo soportan no están «firmadas» con lo que actualmente estarian excluidas y no se permitiria el arranque del sistema utilizandolas.

Esperemos que alguien recapacite y se llegue a a una solución, seria una mala estrategia de mercado para deshacerse de un buen competidor.

Más información en | Bitelia | Taringa | Web Upd8

Enviado desde mi iPhone

Recursively Download Cover Art For All Folders Containing Mp3 Files, Based On ID3 Tags

Coverlovin

Una buena idea cuando tienes una colección muy extensa de música en formato mp3, el scripts descrito mas abajo no requiere conocimientos acabados, por tanto no se explicara mas de lo explicado en el tema original.

Cover Art Downloader (aka «Coverlovin«) is a nifty Python script I’ve been looking for a long time – it traverses a directory containing mp3 files and downloads cover art based on id3 tags of the files in each directory. The images are downloaded from Google Images.


How to use Cover Art Downloader (Coverlovin)


Download the script(s) from Launchpad, and extract it somewhere, let’s say in the «coverlovin_1.0» folder in your home directory.

Then, install python-simplejson:

sudo apt-get install python-simplejson

Now, to download the cover art for all the mp3 files in a folder (and subfolders), use the following commands (firstly «cd» into the Coverlovin folder):

cd ~/coverlovin_1.0 ./coverlovin.py "/path/to/mp3s/folder"

Where /path/to/mp3s/folder is … you got the idea. I’ve used quotes for the above commands in case you have spaces for the path to the mp3s folder.
Coverlovin comes with a few options too: you can specify the image size («–size=SIZE», where the size can be: small, medium or large), image format («–image=IMAGE», where IMAGE can be jpg, png or gif), image name («–name=NAME») and more – you can see all the available options by running coverlovin.py without any options («./coverlovin.py»).

(CC) www.webupd8.org 2009-2011. | Daily Ubuntu / Linux news and application reviews

http://feedproxy.google.com/~r/webupd8/~3/0ZFWorkw7Xg/recursively-download-cover-art-for-all.html

Fwd: CPU Frequency Scaling AppIndicator

Enviado desde mi iPhone

Inicio del mensaje reenviado:

Indicator CPUfreq

Yet another very useful Gnome applet got an appindicator: CPU frequency scaling applet. By using an appindicator, this tiny application will be able to run in Ubuntu 11.04 without using a Gnome panel (the Unity panel doesn’t support the regular Gnome applets).
For now it still depends on gnome-applets, but this might change in the future.
It’s nice to see that most applets are getting an appindicator and will thus work on future Ubuntu versions, but it’s a shame for all the good applets that will be lost in this transition. And it’s not just Ubuntu – Gnome Shell won’t support all these applets either.

Install Indicator Cpufreq in Ubuntu

Add the PPA and install Indicator-Cpufreq in Ubuntu Maverick or Natty by using the following commands:

sudo add-apt-repository ppa:artfwo/ppa sudo apt-get update sudo apt-get install indicator-cpufreq

Then to run it, press ALT + F2 and enter: «indicator-cpufreq» (without the quotes).
Indicator Cpufreq is very new so you may find bugs – report them @ Launchpad!
[via Corridor Nine; thanks to Артём for uploading Maverick packages too!]

(CC) www.webupd8.org 2009-2010. | Daily Ubuntu / Linux news and application reviews

Enviado desde mi iPhone

Test de post desde un teléfono móvil

Aprovechando las funciones de conectividad de mi iPhone y el poco tiempo que le he dedicado al blog estoy probando esta alternativa realizando estos pequeños post, uno de los mayores inconvenientes es la nula posibilidad de enlazar imágenes de manera mas fácil ( se puede por medio de HTML ) veamos como sale esto xD.

Cambiando el Look

Estamos Cambiando el Theme que por tanto tiempo nos acompaño, he decidido realizar un lavado de cara al blog, representando un cambio a nivel personal muy importante, espero que le agrade tanto como a mi, ademas se realizaran algunos tweak al mismo para no ser tan genericos xD, bueno preparence porque este blog pretende ser uno de los mas buscados y vistos (gracias san google XD)