07 Abr

Paths de wordpress que puedes necesitar

Codigo Fuente

Estas son algunos de los paths de wordpress que puedes necesitar para realizar desarrollos de temas o plugins para WordPress.

plugins_url(): Retona el path de instalación de los plugins.

get_theme_root(): Retona el path raiz de instalación de los temas(theme).

get_template_directory_uri(): Retorna la url donde estan guardados los archivos del tema(theme) actual.

admin_url(): Retorna la direccion de las paginas administrativas de WordPress.

content_url(): Indica donde se encuentra el directorio wp-content.

site_url() y home_url(): Retona la direccion del sitio.

includes_url(): retorna el path de los archivos de INCLUDE de WordPress.

wp_upload_dir(): Retorna el path de el directorio donde se almacenan los archivos subidos por el ususairo.

07 Dic

Instalacion del wifi usb TL-WN725N en el raspberry pi

Raspberry Banner

Si ustedes como nosotros se han encontrado con el problema de querer conectar a la red la raspberry pi, pero de forma inalambrica y tienen disponible una wifi usb TP-LINK TL-WN725N, aqui les comentaremos los pasos necesarios para instalarla con exito.

Nota

Para poder seguir los pasos del siguiente tutorial deber saber hacer una conexion por medio de ssh o estar trabajando en el bash del raspberry pi

 

Pasos de instalación en el raspberry

Paso 1

lo primero que debemos hacer es actualizar el firmware del raspberry pi

rpi-update

En caso que el comando anterior nos llegue a dar un error, es porque no tenemos instalado el paquete y debemos que instalarlo asi

sudo apt-get install rpi-update

con esto ya tendrán el comando rpi-update listo para actualizar el raspberry pi

Paso 2

Ahora debemos actualizar los paquetes del sistema operativo del raspberry pi, esto se hace por medio de los siguientes comandos (tenga en cuenta que cada linea es un comando que debe ejecutar)

sudo apt-get update
sudo apt-get upgrade
sudo reboot

la explicación de estos comandos es la siguiente, el primero actualiza las lista de paquetes identificando asi cuales son los paquetes obsoletos y que deben ser actualizados, el segundo comando se usa para actualizar aquellos paquetes identificados como desactulizados en el comando anterior y el ultimo comando ejecuta un reinicio para que la actualización tenga efecto en todos los componentes actualizados.

Paso 3

antes de instalar el controlador necesitamos saber una información para poder saber cual es el archivo que vamos a descargar.

uname -a

el resultado sera algo como esto

Linux termometro 3.12.33+ #722 PREEMPT Sat Nov 22 12:03:51 GMT 2014 armv6l GNU/Linux

de esta información debemos de tener en cuenta lo siguiente 3.12.33+ #722 pues con esta información debemos seleccionar de la lista la url de descarga del controlador

Paso 4

ahora vamos al siguiente link+ para poder conocer cual es fragmento de url de descarga, de acuerdo con la informacion anterior (3.12.33+ #722)

Raspberry usb wifi

Con la informacion que esta subrayada, completamos la url quedando asi
https://dl.dropboxusercontent.com/u/80256631/8188eu-20141107.tar.gz, de esta url la informacion que siempre varia es la que se encuentra despues de ultimo slash, esta url la necesitamos para el completar el primer comando del paso 5.

Paso 5

ahora si vamos a descargar e instalar el controlador

wget https://dl.dropboxusercontent.com/u/80256631/8188eu-20141107.tar.gz
tar -zxvf 8188eu-20141107.tar.gz
sudo install -p -m 644 8188eu.ko /lib/modules/3.12.33+/kernel/drivers/net/wireless
sudo insmod /lib/modules/3.12.33+/kernel/drivers/net/wireless/8188eu.ko
sudo depmod -a
sudo reboot

En el caso de los comandos 3 y 4 es necesario cambiar 3.12.33+ por el valor que nos dio el comando del paso 3

Paso 6

Teniendo esto y después del reinicio que se genero en el ultimo comando del paso anterior, procedemos a hacer la conexion wifi, pues ya la debe haber reconocido.

Para hacer la conexion wifi se debe modificar el archivo del sistema /etc/wpa_supplicant/wpa_supplicant.conf agregandole lo siguiente

network={
        ssid="nombre de la red"
        psk="password de la red"
        proto=RSN
        key_mgmt=WPA-PSK
        pairwise=TKIP
        auth_alg=OPEN
}

Paso 7

Este ultimo paso es opcional, aunque a veces muy necesario.

En ocasiones la conexion wifi que acabamos de configurar entra en reposo cuando no esta transmitiendo, el problema surge cuando se quiere volver a conectar con el raspberry, pues la conexion wifi no responde, para solucionar este problema debemos de hacer lo siguiente.

debemos crear el archivo /etc/modprobe.d/8188eu.conf con el siguiente comando

sudo nano /etc/modprobe.d/8188eu.conf

Este comando abrirá el editor nano, el cual nos va a permitir en el nuevo archivo ingresar la siguiente información.

options 8188eu rtw_power_mgnt=0 rtw_enusbss=0

Con esta linea dentro del archivo oprimimos CTRL+o y CTRL+X para guardar y cerrar respectivamente, y por ultimo un reinicio mas al raspberry y desconectar el cable de red para que use la conexion wifi.

27 Nov

Jquery Tips (Metodos)

Codigo Fuente

Después de aprender a seleccionar con jquery los elementos del documento html por medio de los selectores anteriormente comentados, esa importante saber que hacer con estos, por lo cual vamos a ver como aplicar métodos a un elemento seleccionado.

Ejemplos de aplicación de métodos con jquery


// Aplica propiedad CSS al elemento seleccionado 
$(". className"). css(" border", "1px solid red"); 

// Aplica CSS de un elemento usando un objeto
$(". className"). css({" border": "1px solid red"}); 

// Aplica dos CSS a los objetos seleccionados 
// (notese que este ejemplo usa una notación de objeto para el caso de las propiedades que 
// se desean establecer por medio del método CSS de jquery, por esta razon se 
// puede usar para aplicar mas de una propiedad) 
$(". className"). css({ "color": "red", "font-weight": "bold" });

// Esconde la segunda fila de la tabla
$(" table tr:nth-child( 2)"). hide(); 

// Convierte la lista < ul id = "list" > en una lista ordenable 
$(" ul# list"). sortable(); 

// Selecciona todos  los elementos y los filtra usando el metodo "is" 
$("*"). is(" p"); 

// El metodo "is" es usado con la variable "this" dentro de los callback para poder indetificar su tipo
$(this). is("div"); 

// Selecciona un elemento y con el metodo "parent" selecciona el elemento padre 
$("p#short"). parent();

// Selecciona todos los inputs si estos tienen como padre el elemento "form"  
$(" input"). parent(). is(" form"); 

// Selecciona y aplica el estilo CSS, limpia la cola, hace una nueva seleccion y aplica nuevo CSS, en otras palabras los elementos 

quedan con fuente de color azul y los elementos quedan con fuente de color rojo 
$(" p"). css(" color", "blue"). end(). add(" b"). css(" color", "red"); 

// si se hace sin el metodo "end" entre los elementos ambos quedan con fuente de color rojo.
$(" p"). css(" color", "blue"). add(" b"). css(" color", "red");

27 Nov

Jquery tips (Selectores)

Codigo Fuente

JQuery es sin duda el framework javascript mas popular en la web, por esto en ocasiones es importante tener a la mano información que aunque es básica, nos ayudara a resolver varios problemas.

Empecemos con lo basico

$(" div");

Es lo mismo que

jQuery(" div");

selectores

// Selector por tag
$("body"); 

// Selector por id del elemento 
$("# id"); 

// Selector por clase del elemento 
$(".className"); 

// Selector usando pseudo-selector CSS :nth-child 
$(" div:nth-child( 2)"); 

// Selector de todos los elementos del documento html 
$("*"); 

// Selector de todos los elementos párrafo
$("p"); 

// Selector para párrafos spans y divs 
$("p, span, div"); 

// selector de párrafo con id 
$(" p# short");

// selector de div con clase
$(" div.option"); 

// Selector con elemento y pseudo-selector :first o :last
$(" p:first"); 
$(" p:last"); 


// Selector con elemento y pseudo-selector nth-child (nos permite seleccionar cualquier posición de una lista de elementos )
$(" p:nth-child( 1)"); // primero
$(" p:nth-child( 2)"); // segundo
$(" p:nth-child( 3)"); // tercero

// Selector con elemento y pseudo-selector nth-child con palabras clave even o odd
// even para seleccionar todos los pares 
// odd para seleccionar los impares
$(" p:nth-child( even)"); 
$(" p:nth-child( odd)"); 

// Selector con los paréntesis cuadrados para seleccionar cualquier elemento con un atributo llamado "xxx"
$("[xxx]"); 

// Selector para seleccionar todos los párrafos hijos pero solo después de cualquier elemento con clase "s"
$(".s ~p"); 

// Selector para los inputs de type definido ejemplo tipo "text"  
$(" input[ type = text]");

// Selector para todos los checkbox seleccionados usando el selector de atrubuto [] o el psudo-selector :checked, selector que tambein sirve para los radio buttons 
$(" input:checked"); 

// Selector poara seleccionar solo checkboxes 
$(" input[ type = checkbox]: checked"); 

// Selector para todos los elementos inputs contenidos en el elemento form
$("form input"); 

// Selector para todos los elementos a dentro de la tabla 
$("table tr td a"); 

Aqui terminan los tips de selectores.

24 Nov

Configurar camara web lifecam vx-500 en octopi

Codigo Fuente

Primero les hablo del gran proyecto que es OctoPrint y su adaptacion a raspberry pi llamado OctoPi

OctoPrint es un software de control de Impresoras 3D que se ejecuta desde un navegador y permite controlar tu impresora 3D de forma remota a través de la red; este grandioso software es open source y recientemente ha sido apadrinado por la empresa española Bq.

OctoPi mas que una adaptación, es un script que genera una imagen de raspbian modificado, esta es una imagen del sistema operativo linux para raspberry, este script deja listo el sistema para conectarlo a la impresora 3D y usarlo como Host para poder hacer las impresiones y el manejo de la impresora.

Estos dos grandes proyectos los conocí por que hace un tiempo empece con la creación de mi impresora 3D y me vi en la necesidad de tener un host, el cual inicialmente era mi portatil, pero luego encontre en la red que se podia usar un raspberry pi, el cual ya tenia y empece a configurar, realmente por medio del proyecto OctoPi fue muy facil, pero fue muy complicado lograr hacer funcionar la camara web que tengo, esto para podr observar como va la impresion sin estar al lado de la impresora.

Realmente creo que el problema que tube con la camara web es por lo vieja que es, por lo cual me toco investigar mucho en internet pero al final lo logre; aqui les cuento los comandos y procedimiento que realice para poder hacer funcionar mi camara lifecam vx-500 (Microsoft).

Octopi crea un script para arrancar la camara web, este script esta ubicado en la direccion /home/pi/scripts/webcamDaemon, el archivo arranca con el sistema operativo, pero en mi caso la camara arrancaba pero no daba ninguna imagen, por lo cual procedi a comentariar los comandos internos del archivo, para poder ejecutarlos manualmente y asi saber cual era el problema.

Sucede que por Octopi para hacer uso de la camara web usa otro proyecto open source llamado mjpg_streamer el cual usa por defecto el formato de procesamiento de imagen JPEG, el cual no es soportado por mi camara, asi que para saber cual era el formato use los siguientes comandos.

Primero instale los siguiente

sudo apt-get install subversion libv4l-dev libjpeg8-dev imagemagick fswebcam

Esto instala una aplicación la cual nos va a dar información sobre la cámara web, luego de haber instalado, ejecutamos el siguiente comando:

fswebcam --verbose

Este comando nos dará la siguiente información

--- Opening /dev/video0...
Trying source module v4l2...
/dev/video0 opened.
src_v4l2_get_capability,87: /dev/video0 information:
src_v4l2_get_capability,88: cap.driver: &amp;quot;uvcvideo&amp;quot;
src_v4l2_get_capability,89: cap.card: &amp;quot;Microsoft LifeCam&amp;quot;
src_v4l2_get_capability,90: cap.bus_info: &amp;quot;usb-bcm2708_usb-1.2&amp;quot;
src_v4l2_get_capability,91: cap.capabilities=0x84000001
src_v4l2_get_capability,92: - VIDEO_CAPTURE
src_v4l2_get_capability,103: - STREAMING
No input was specified, using the first.
src_v4l2_set_input,181: /dev/video0: Input 0 information:
src_v4l2_set_input,182: name = &amp;quot;Camera 1&amp;quot;
src_v4l2_set_input,183: type = 00000002
src_v4l2_set_input,185: - CAMERA
src_v4l2_set_input,186: audioset = 00000000
src_v4l2_set_input,187: tuner = 00000000
src_v4l2_set_input,188: status = 00000000
src_v4l2_set_pix_format,520: Device offers the following V4L2 pixel formats:
src_v4l2_set_pix_format,533: 0: [0x56595559] 'YUYV' (YUV 4:2:2 (YUYV))
Using palette YUYV
Adjusting resolution from 384x288 to 352x288.
src_v4l2_set_mmap,672: mmap information:
src_v4l2_set_mmap,673: frames=4
src_v4l2_set_mmap,722: 0 length=202752
src_v4l2_set_mmap,722: 1 length=202752
src_v4l2_set_mmap,722: 2 length=202752
src_v4l2_set_mmap,722: 3 length=202752
--- Capturing frame...
Captured frame in 0.00 seconds.
--- Processing captured image...
There are unsaved changes to the image.

En la linea 21 nos damos cuenta que nos indica que el formato de imagen que da la camara es YUYV (Using palette YUYV) por lo cual nos toca indicarle a mjpg_streamer que use este formato.

Para poder indicarle al demonio de Octopi que use este formato tenemos que modificar el archivo sh /home/pi/scripts/webcamDaemon dejandolo asi

#!/bin/bash

MJPGSTREAMER_HOME=/home/pi/mjpg-streamer
MJPGSTREAMER_INPUT_USB=&amp;quot;input_uvc.so -y&amp;quot;
MJPGSTREAMER_INPUT_RASPICAM=&amp;quot;input_raspicam.so&amp;quot;

# init configuration
camera=&amp;quot;usb&amp;quot;
camera_usb_options=&amp;quot;-r 640x480 -f 10&amp;quot;
camera_raspi_options=&amp;quot;-fps 10&amp;quot;

if [ -e &amp;quot;/boot/octopi.txt&amp;quot; ]; then
    source &amp;quot;/boot/octopi.txt&amp;quot;
fi

# runs MJPG Streamer, using the provided input plugin + configuration
function runMjpgStreamer {
    input=$1
    pushd $MJPGSTREAMER_HOME
    echo Running ./mjpg_streamer -o &amp;quot;output_http.so -w ./www&amp;quot; -i &amp;quot;$input&amp;quot;
    LD_LIBRARY_PATH=. ./mjpg_streamer -o &amp;quot;output_http.so -w ./www&amp;quot; -i &amp;quot;$input&amp;quot;
    popd
}

# starts up the RasPiCam
function startRaspi {
    logger &amp;quot;Starting Raspberry Pi camera&amp;quot;
    runMjpgStreamer &amp;quot;$MJPGSTREAMER_INPUT_RASPICAM $camera_raspi_options&amp;quot;
}

# starts up the USB webcam
function startUsb {
    logger &amp;quot;Starting USB webcam&amp;quot;
    runMjpgStreamer &amp;quot;$MJPGSTREAMER_INPUT_USB $camera_usb_options&amp;quot;
}

# we need this to prevent the later calls to vcgencmd from blocking
# I have no idea why, but that's how it is...
vcgencmd version

# echo configuration
echo camera: $camera
echo usb options: $camera_usb_options
echo raspi options: $camera_raspi_options

# keep mjpg streamer running if some camera is attached
while true; do
    if [ -e &amp;quot;/dev/video0&amp;quot; ] &amp;amp;&amp;amp; { [ &amp;quot;$camera&amp;quot; = &amp;quot;auto&amp;quot; ] || [ &amp;quot;$camera&amp;quot; = &amp;quot;usb&amp;quot; ] ; }; then
        startUsb
    elif [ &amp;quot;`vcgencmd get_camera`&amp;quot; = &amp;quot;supported=1 detected=1&amp;quot; ] &amp;amp;&amp;amp; { [ &amp;quot;$camera&amp;quot; = &amp;quot;auto&amp;quot; ] || [ &amp;quot;$camera&amp;quot; = &amp;quot;raspi&amp;quot; ] ; }; then
        startRaspi
    else
        echo &amp;quot;No camera detected, trying again in two minutes&amp;quot;
    fi

    sleep 120
done

El cambio que se realiza es en la linea numero 4 en donde se le pone un -y antes de las comillas finales.

Con esto solo falta reiniciar y el raspberry pi y el octoprint ya estaran transmitiendo imagen en vivo.

Espero que este articulo sea de ayuda.

29 Jul

Como instalar node js, npm y express en linux ubuntu/mint

Codigo Fuente

Para instalar node js lanzaremos los siguientes comandos

Este comando es para agregar un repositorio PPA

sudo add-apt-repository ppa:chris-lea/node.js

Los siguientes comandos actualizan el listado de los paquetes disponibles e instala el paquete de nodejs el cual tambien incluye a npm

sudo apt-get update
sudo apt-get install nodejs

Ya con estos comandos instalados podemos comprobar las versiones de nodejs y npm

$ node --version
v0.10.29

npm --version
1.4.14

por ultimo para instalar el express en linux ubuntu/mint

sudo npm install -g express
sudo npm install -g express-generator
23 Abr

Como limpiar Floats en CSS

Quien no ha experimentado problemas al iniciar con css y se encuentra con algo como esto:

explain

Pero, qué pasa con el contenedor, si ambos objetos, tanto el contenido general como el contenido del sidebar están dentro del contenedor?

Pues para este problema es cuando nos referimos a limpiar floats, ya que tanto contenido general como  contenido del sidebar tienen propiedad float y debemos hacer un clear. Aquí te mostramos 3 posibles soluciones:

Método 1: colocar un elemento justo antes de cerrar el contenedor (solución «clásica»)

clasicClear

Esta es una solución clásica, o una de las primeras soluciones, consiste en colocar algún elemento, ya sea un <div> o un <br> por ejemplo, con un clear:both:

HTML:

<div id="contenedor">

 <section class="left">
 <h3>Contenido General</h3>
 </section>

 <aside class="right">
 <h3>Contenido Sidebar</h3>
 </aside>

 </div>

CSS:

#contenedor{
 border: 2px solid #CFC4BA;
 color: white;
 display: block;
 font-size: 13px;
 margin:0 auto;
 padding: 5px;
 width: 600px;
 margin-top: 10px;
 }
 #contenedor .left{
 background: #9ED233;
 display: block;
 float: left;
 text-align: center;
 width: 69%;
 }
 #contenedor .right{
 background: #5EACC6;
 display: block;
 float: right;
 text-align: center;
 width: 30%;
 }
 .limpiar{
 clear: both;
 content: "";
 display: block;
 }

Método 2: Overflow Hidden

Captura de pantalla 2014-04-22 a las 23.44.05

Overflow hidden en el contenedor es una mejor solución, no tenemos que crear un div o elemento para limpiar floats, esto se debe a que overflow recalcula el contenido de la caja y nos da una alternativa de limpiar los float.

DESVENTAJA: la única desventaja es que si tenemos algun elemento detro de ·contenedor con posicion absoluta, de manera que se salga del contenedor, se va a cortar la información, ya que overflow hidden actua como si fuese una mascara de la información.

HTML:

<div id="contenedor">

 <section class="left">
 <h3>Contenido General</h3>
 </section>

 <aside class="right">
 <h3>Contenido Sidebar</h3>
 </aside>

 </div>

CSS:

#contenedor{
 overflow:hidden;
 border: 2px solid #CFC4BA;
 color: white;
 display: block;
 font-size: 13px;
 margin:0 auto;
 padding: 5px;
 width: 600px;
 margin-top: 10px;
 }
 #contenedor .left{
 background: #9ED233;
 display: block;
 float: left;
 text-align: center;
 width: 69%;
 }
 #contenedor .right{
 background: #5EACC6;
 display: block;
 float: right;
 text-align: center;
 width: 30%;
 }

Método 3: Clear con pseudoclases (para mi la mejor)

pseudo

Una pseudoclase, en este caso :after o : before actua como si crearamos un elemento pero por css. Es decir no lo vamos a ver en el html, pero CSS si lo va ainterpretar como otro elemento.

En la grafica anterior tenemos el div contendor. Dependiendo de la pseudoclase que usemos nos creara un elemento antes o despues del contenido.

En este caso necesitamos crearlo despues del contenido, justo antes de cerrar el div del #contenedor

#contenedor:after{
clear: both;
content: "";
display: block;
 }

Aca le decimos a ese objeto creado que tenga un contenido vacio (content:»») y claro esta un clear:both. y ya esta!, puedes ver el funcionamiento en este ejemplo:

#contenedor{
 border: 2px solid #CFC4BA;
 color: white;
 display: block;
 font-size: 13px;
 margin:0 auto;
 padding: 5px;
 width: 600px;
 margin-top: 10px;
 }
 #contenedor .left{
 background: #9ED233;
 display: block;
 float: left;
 text-align: center;
 width: 69%;
 }
 #contenedor .right{
 background: #5EACC6;
 display: block;
 float: right;
 text-align: center;
 width: 30%;
 }
 #contenedor:after{
 clear: both;
 content: "";
 display: block;
 }
 <div id="contenedor">

 <section class="left">
 <h3>Contenido General</h3>
 </section>

 <aside class="right">
 <h3>Contenido Sidebar</h3>
 </aside>

 </div>

DEMO

25 Nov

URLs amigables para Yii Frameworks

Codigo Fuente

para poder hacer esto el procedimiento es muy sencillo, pero como suele ocurrir en interner en ocaciones la informacion esta dispersa, por loo cual les traigo es tip de como configurar esto en unos simples pasos

paso 1
tener habilitado la extencion de mod_rewrite en apache

paso 2
crear el archivo .htaccess en la raiz del sitio con la siguiente información

RewriteEngine on

# if a directory or a file exists, use it directly
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

# otherwise forward it to index.php
RewriteRule . index.php

paso 3
buscar en el archivo de configuracion del nuevo sitio (comunmente esta en protected/config/main.php) la linea donde este «urlManager» y descomentariar el bloque, el bloque debe quedar asi:

		'urlManager'=>array(
			'urlFormat'=>'path',
			'showScriptName'=>false,
			'rules'=>array(
				'<controller:\w+>/<id:\d+>'=>'<controller>/view',
				'<controller:\w+>/<action:\w+>/<id:\d+>'=>'<controller>/<action>',
				'<controller:\w+>/<action:\w+>'=>'<controller>/<action>',
			),
		),
16 Jul

Cambiar Zona Horaria Linux

Codigo Fuente

Hoy vengo con este corto y sencillo tip para poder cambiar la zona horaria del sistema operativo linux, la verdad es que siempre que necesito esta información termino buscando por muchos lugares, por lo cual para no tener que volver a hacer muchas búsquedas lo pongo aquí y lo comparto con ustedes para que cuando lo necesiten lo encuentren fácilmente.
Leer más

16 Jun

CSS3 – Image Captions

prevPage

Los «Captions» en imagenes no es mas que una leyenda que describa a grandes rasgos la imagen, en este caso son captions animados gracias al uso de las transormaciones en CSS3.  En este link puedes saber como funcionan las transformaciones, esta página web además te genera el codigo fuente de los css.

Practicando un poco de transformaciones en css3, pude saber varios trucos. Una propiedad que se debe tener muy en cuenta es la propiedad overflow.

Overflow nos define si el área al que lo aplicamos tiene o no un scroll, o lo tiene escondido. Precisamente escondido es como se debe colocar, para los que han trabajado en photoshop, illustrator  o flash se les hará mas familiar el termino de máscaras, pues  al colcar un overflow:hidden a un contenedor, lo que hacemos es crear una mascara y cortar todo lo demas para que no se vea por fuera del area seleccionada.

overflowEjm

 

Descargar CódigoDemo

15 Feb

divs con alto al 100% sin asignarle 100% al elemento padre

Heightal100

Para muchos de nosotros es un dolor de cabeza ajustar un elemento como un «div» al alto de un contenedor,  he visto soluciones a este problema en los que el truco esta en dejar los elementos padre al 100%, algo como esto:

Solucion 1. No aplica en todos los casos

HTML

<body>
  <div id="padre">
    <div id="hijo">
      Cotenedor al 100% de alto
    </div>
  </div>
</body>

CSS

#padre{
  height:100%;
}
#hijo{
  height:100%;
}

Otros recomiendan dejar 100% al html y al body:

html, body{
  height:100%;
}

Solucion 2. Más efectiva!

He trabajado con archivos css demasiado extensos, intente con la tecnica anterior dejar un «sidebar» dentro de un contenedor al 100%, pero ninguno me funcionó, por más que colocaba height:100% al llegar al punto que lo coloque casi a todos los elementos padre. y tenia una solución temporal con jquery (no se debería recurrir a jquery para esto!).

En el siguiente ejemplo usare 3 elementos principales:

  1. #padre: Esel contenedor general o «wrapper» como lo definen algunos.
  2. #sidebar: La barra lateral, la cual tomara el alto al 100%.
  3. #contenido: Es el contenido del texto principal.

#padre

Defino un ancho, lo centro con margin: 0 auto; y no se nos puede pasar: dejar la posición relativa.

#padre{
  background:#CBD1DC;
  margin:0 auto;
  margin-top:10px;
  position:relative;
  width:600px;
}

#sidebar

Coloco la posición absoluta, para que pueda colocar por posiciones libremente dentro del contenedor #padre, gracias a que este ultimo tiene posición relativa. Le doy un ancho, y para que el contenedor se «adhiera» tanto arriba como abajo y de el 100%, coloco un top y bottom definido.

Este es el truco!:  bottom y top en 0px.

#sidebar{
  background:#FE5B2C;
  bottom:0px;
  color:#FFF;
  font-size:35px;
  font-weight:bold;
  padding:25px;
  position:absolute;
  text-align:center;
  text-shadow:-1px -1px #A62C02;
  top:0px;
  width:150px;
}

#contenido

El contenido va al lado opuesto del sidebar, por lo que coloco un float right (a la derecha).

#contenido{
  background:#E7EBF1;
  color:#42474F;
  float:right;
  padding:25px;
  text-align:justify;
  width:350px;
}

HTML

Importante!:  hacer un clear debido al float right del contenido, esto se hace antes de cerrar el ultimo div

<br style=»clear:both»/>

<body>
<div id="padre">
<div id="sidebar">
<p>Height al 100%!</p>
</div>
 <div id="contenido">
 <h2>Sidebar crece con el contenido!</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at turpis nulla. Aliquam velit nisi, consectetur eget auctor nec, luctus non neque. Ut sit amet justo nisi. Suspendisse nec neque libero. In gravida eros libero, ut sagittis elit. Aenean est sem, suscipit vitae vulputate et, euismod lacinia odio. Ut pretium leo ut enim dignissim ullamcorper scelerisque justo eleifend. Aliquam sodales enim sed felis volutpat ac vestibulum tellus scelerisque. Vestibulum eu turpis ut erat hendrerit euismod. Proin velit eros, varius eu aliquet sit amet, fermentum ut nisi. Maecenas eu turpis tellus. Quisque nec neque turpis. Nulla facilisi.</p>
 <p>Vivamus nisi lectus, commodo et dapibus a, tempor sit amet ipsum. Quisque lobortis, leo vitae placerat aliquam, dolor nibh interdum lectus, non dapibus lorem risus in elit. In gravida lobortis nibh, quis suscipit nunc aliquam sed. Proin faucibus, purus id ornare vestibulum, libero quam commodo magna, eget posuere ante leo id nulla. Nullam tortor est, cursus vitae bibendum a, feugiat et neque. Aenean sed lacus ac sem varius faucibus ut ut lectus. Quisque a diam eu risus tempus faucibus. Morbi neque est, laoreet sed imperdiet id, bibendum nec enim.</p>
 <p>Curabitur quis ornare orci. Nam lacinia, nibh quis elementum blandit, purus eros bibendum augue, a lobortis eros elit at libero. Pellentesque rutrum tellus sit amet ligula sodales bibendum. Cras posuere mauris in enim mollis convallis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc in lacus felis, in tempus mauris. Nunc sollicitudin interdum dolor, porta consectetur dolor lobortis eu. Phasellus quis nibh vel erat lacinia aliquam. Maecenas aliquam interdum purus, ac suscipit ante condimentum varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie tellus at est vulputate a porta massa pretium.</p>
 </div>
 <br style="clear:both"/>
</div>

 
 

Descargar CódigoDemo

 
 

03 Nov

Apuntes de GIT parte 1

Codigo Fuente

apuntesgit

En la empresa donde actualmente trabajo me toco manejar el versionado del código, es divertido, pero todo entra en una época de desastre cuando uno se da cuenta que toca hacerlo todo en consola, y peor cuando uno esta acostumbrado a trabajar en ambiente gráfico; continuando con mi tarea diaria me encontré que la documentación sobre git es muy amplia, pero en algunos casos es muy dispersa, en otros muy poco puntual, en otros muy básica (en extremo), así que decidí hacer mis apuntes los comandos que consideraba que en algún momento iba a necesitar. Leer más

28 Ago

Recursos y webs para aprender Jquery, CSS y HTML5

Code Academy

Codeacademy es una web que ofrece una manera diferente a lo que estamos acostumbrados ver en internet, en cuanto a webs de aprendizaje o tutoriales, pues ofrece variedad de cursos online en donde puedes ir aprendiendo paso a paso, ideal para los que quieren comenzar a avanzar en el mundo del desarrollo web.

La gran diferencia de esa web es que puedes ir practicando y escribiendo código en la misma página, la web se encarga de revisar que este bien desarrollada la lección.

http://www.codecademy.com

Libros Web

Excelentes manuales de CSS, AJAX, Javascript, y Symphony, la primera vez que visite esta web los libros se iban actualizando, ya que algunos no estaban terminados del todo, pero hoy en día ofrece manuales completos y los puedes descargar en pdf ompletamente gratis.

lenguaje es bastante comprensible, si eres principiante veras que son muy fácil de entender, y también para usuarios avanzados.

http://librosweb.es/

Guía completa de CSS3

Tal cual lo dice el titulo, una guía completa de CSS3, muy bien explicada, con ejemplos. Esta guía la puedes descargar gratuitamente de la pagina del autor, lo único que debes hacer es colocar un tweet para que descargues el pdf.

Esta web también la recomiendo ya que contiene articulos de diseño y tutoriales, como lo dice en su web Antonio Navajas :» director artístico, desarrollador web y diseñador de experiencias de usuario. Se puede decir que soy de la generación que vive intensamente internet y estoy 24/7 conectado. Busco el mejor resultado, por lo que siempre entrego una parte de mi alma en cada proyecto.»

http://www.antonionavajas.com/

Cristalab

Web dedicada al aprendizaje, contiene numerosos tutoriales de diferentes temas enfocados a la web, si quieres aportar con tus conocimientos puedes registrarte y tener un rankin dependiendo tus post.

John Fredy Vega (@freddier) es el fundador, tambien es conocido por ofrecer numerosos cursos presenciales, yo he asistido a un par de ellos, y la verdad aprenderas muchas cosas, ya que tiene una metodologia que se basa en» lo que se esta manejando» actualmente,  con tips y situaciones del mundo real.

«Cristalab es una comunidad de entusiastas, novatos, expertos y emprendedores de Internet. Enseñamos, aprendemos y compartimos el conocimiento de todos» -Cristalab.

Bueno, como punto aparte, y que no se note la «publicidad»;la caricatura mostrada fue cortesia de nosotros (http://www.iguazoft.com), la cual tiene un origen que puedes ver en nuestro post: Caricatura de @freddier.

http://www.cristalab.com/

Maestros del Web

Maestros del Web (creada por @cvander) junto con Cristalab son unas de las comunidades web reconocidas, que se han preocupado por temas acerca del desarrollo de la web y sus estándares, para llevar todo de la mejor manera.

Estos dos «pesados» de la web tienen un «programa» en vivo que es mejorando la Web en donde se hablan de diferentes temas, novedades, nuevas tecnologias y sobre todo nos ayudan a manejar y conocer los estándares.

Acá puedes encontrar pdfs gratuitos.

http://www.maestrosdelweb.com/

Jquery Essentials

Es una presentación de 115 slides en donde e enseñan desde lo básico y hacen una comparativa con la sintaxis de javascript nativo, en donde te podrás dar cuenta que es más sencillo trabajar con jquery. Muy recomendado

http://marcgrabanski.com/articles/jquery-essentials-slideshow

Tutoriales de diseño y maquetacíon Web

RAYMI es una maquetadora web, me entere de ella gracias a Cristalab (http://www.cristalab.com), ella ofrece variados tutoriales desde su web referentes a la maquetación, incluyendo diseño. Incluye tambien maqueación para wordpress.

Tiene una manera muy didáctica de explicar, de manera que es apropiado para las personas que estén comenzando en maquetación.

http://raymicha.com/

23 Jul

Checks y radio buttons personalizados con jquery

Checks y Radios en jquery.

Llevo un tiempo practicando con jquery, y  me vi en la necesidad de colocar unos forms personalizados, algunos de los que hay en la nube no soportan eventos como los «onClick», pero estos si soportan cualquier tipo de evento.  Son compatibles en todos los navegadores, pueden personalizarlos con la imagen que gusten, es un sprite de 36×36 con los 4 estados de los botones.
Leer más

23 Jul

Maquetar con divs como si fuese una tabla

Muchos de los que comenzamos maquetando, comenzamos a extrañar los comportamientos que tenian las tablas, y que era algo facil de acomodar los elementos.

Pero recordemos que ahora las tablas no se usan para maquetacion, en cuanto al diseño se refiere. Las tablas se deberían usar para tabular datos, como un listado de varios elementos.

Lo bueno del caso es que existe una manera de «imitar» el comportamiento de las tablas con capas, gracias a la propiedad display.

Muchos de los que comenzamos a maquetar conocemos las básicas que son:

display:

block

Inline

None

pero además existen:

display:

table

table-row

table-cell

Las anteriores propiedades son las necesarias para poder imitar el comportamiento de una tabla ya que tendriamos el elemento <table>, <tr> y <td>

Aca la demostración:

Partamos con un ejemplo de una tabla, que tiene 3 columnas:

Es una estructura sencilla para representar una tabla de 1 fila y 3 columnas. Ahora llevando este mismo concepto a divs tendriamos un resultado como el siguiente:

Teniendo en cuenta la grafica anterior:

Tendríamos nuestros equivalentes:

<table> sería equivalente a <div class=»contenedor-tabla«>

<tr> sería equivalente a <div class=»contenedor-fila«>

<td> sería equivalente a<div class=»contenedor-columna«>

Yo creo que ya esta entendida la idea. Nuestro codigo html sería:

HTML

<div class=»contenedor-tabla»>
    <div class=»contenedor-fila»>
        <div class=»contenedor-columna»>
Columna 1
         </div>

        <div class=»contenedor-columna»>
             Columna 2
        </div>

        <div class=»contenedor-columna»>
Columna 3
        </div>
    </div>
</div>

CSS

.contenedor-tabla{

display: table;

}

.contenedor-fila{

display: table-row;

}

.contenedor-columna{

display: table-cell;

}

11 Mar

Lección 3: Introducción a PHP

Codigo Fuente

En el mundo del desarrollo existen muchos lenguajes de programación los cuales son muy reconocidos como por ejemplo .NET, python, Ruby y otros tantos, pero en este caso vamos a habar de PHP uno de los lenguajes de mayor popularidad en la web y el lenguaje que es el centro de atención de este curso, hoy por fin, después de haber dado las expliaciones necesarias para poder montar el ambiente de desarrollo necesario para poder realizar nuestras practicas, comenzamos con los primeros pasos.

Capítulo 1: Las etiquetas PHP

PHP asi como otros lenguajes de script pueden ser incrustados dentro de una página e incluso ejecutarse en un archivo independiente, pero para que el servidor sepa que esa información se ha de interpretar, se ha de marcar o enmarcar entre unas marcas especificas las cuales nos indican que el texto contenido es php.
Leer más

26 Feb

Lección 2: Crear un sitio web

Codigo Fuente

Capítulo 1: ¿Cómo funcionan las páginas PHP?

PHP para que funcione necesita de su interprete o motor de scripting, el cual ejecuta el código escrito en este lenguaje antes de ser entregada una respuesta al servidor web para que este le muestre el resultado al cliente; la forma en la cual es interpretado es de la forma que todo lenguaje scripting, la ejecución se hace de forma secuencial.

Capítulo 2: Crear un alias en Apache

como ya lo habíamos dicho en la lección anterior, todos los ejemplos los vamos a hacer con el servidor WAMP. por lo cual vamos a usar el menu del servidor para crear el alias, pero primero que todo veamos que es un alias para el servidor del apache, Un alias sirve para poder tener una página web en una ubicación diferente del DocumentRoot, es decir, la ruta establecida por defecto para almacenar las páginas.
Leer más

10 Feb

Curso De Php Lección 1: Instalación

Codigo Fuente

Capítulo 1: Introducción

Como es de suponer al ingresar al mundo de un lenguaje de programación es importante conocer por lo menos el ambiente basico necesario para poder realizar los desarrollos que dia a dia iran siendo mas complejos dependiendo de la emotividad que tenga la persona que quiere profundizar en el mundo del desarrollo.

Así como para poder compilar un programa en C o C++ necesita como minimo un compilador del lenguaje, y que para trabajar con .net es necesario el frameworks, asi mismo para poder ejecutar el programa o script de PHP es necesario tener unas aplicaciones basicas para poder probar lo que vamos haciendo en el curso.
Leer más

29 Ene

Curso De Php

Codigo Fuente

la presente entrada es para dar a conocer el temario de un proyecto de curso de PHP que realizare con el fin de enseñarle a dos personas a programar en este lenguaje, el acceso sera totalmente libre para cualquier persona.

A continuacion el temario, el cual he ido creando con lo temas de interes que creo que son importantes, y teniendo en cuenta algunos temarios encontrados en cursos que rondan por internet, el temario puede ser afectado agregando mas capítulos o lecciones con el fin de completar temas que no fueron tenidos en cuenta inicialmente.

Leer más

08 Dic

CEO cristalab Cartoon by IMAGEAC

Freddier Cartoon

 


En uno de esos días que uno anda «webiando», o mejor aun, «googleando», algo de anime, mientras veia mejorando la web, note algo muy curioso o raro, @freddier por un lapso de tiempo se había quedado callado, cosa que no suele suceder muy a menudo. Me dije a mi mismo: -freddier se quedo callado, debe ser de buena suerte!, la expresion de freddier no era normal, no se había callado porque no tenia nada que decir, sino que al contrario yo creía que estaba pensando que era lo que iba a decir cuando le dieran la palabra… o mejor aun, cuando interrumpiera al que hablaba.

Retomando mi «googleada» de anime encontre algunos rasgos bastante parecidos a los de @freddier callado.  En algun momento mi socio @dannyrios81 le habia comentado, que se parecia o a Yayirobe o a Crilin de dragon ball, en fin le comentamos a @tifis en un twitt, y pues con la carcajada nos confirmo el parecido.

Fue entonces en un rato de ocio que dije:- Ya que estoy practicando dibujo en una tableta, que mejor que practicar con esa idea que tenia en mente!

Si señores. @freddier tiene los mismos ojos de crilin!.

por @memo_ac

29 Nov

iTunes – Reproducción sin cortes entre canciones

 

Normalmente tengo iTunes configurado con la opción Fundir canciones con un valor de 2 segundos. Lo que hace esta opción es colocarle un ligero desvanecimiento (Fade out / Fade In) al cambiar la canción.

Es ideal si quieres reproducir canciones aleatoriamente de tu lista de reproducción, pero si tienes canciones de un concierto, no es muy bueno escuchar el corte entre canciones.

La solución es:

1. Selecciona las canciones en vivo, o el concierto y das Clic derecho->Obtener información:

2.En la pestaña Opciones, marcamos la opción álbum sin pausas y ya esta!, ahora si a escuchar sin interrupciones.

:@memo_ac   :imageac

24 Nov

Centrar una tabla dentro de un DIV

Hace poco me paso, no suelo manejar muchas tablas  con divs, solo para lo necesario.

Coloque un div , dentro una tabla que tenia la propiedad de centrado, y no centraba!

intente colocarle text.align: center; al DIV.. y nada pasaba!

 

Aca la solución, muy simple:

<div class=’centerTable’>

 

<table>
//Acá el contenido de la tabla….
</table>

 

</div>

 

Nuestros CSS quedarían de la siguiente manera:

 

div.centerTable{
        text-align: center;
}

 

div.centerTable table {
       margin: 0 auto;
       text-align: left;
}

 

Eso era todo!

:@memo_ac   :imageac

02 Nov

Textura de Metal Cepillado en Photoshop

Paso 1.

Creamos un archivo con las dimensiones deseadas, yo use un área de 400px X 400px. Ahora seleccionamos la herramienta degradado (G) y seleccionamos un patrón o podemos personalizarlo y arrastramos en diagonal:

 

Paso 2

Filtro->Ruido->Añadir Ruido

Paso 3

Filtro->Desenfocar->Desenfoque de movimiento

Paso 4

Para finalizar, dbemos buscar el color adecuado para una textura de metal cepillado. Para esto vamos a Imagen->Ajustes->Tono y Saturacion pueden probar diferentes combinaciones. En mi caso coloque estos valores:


:@memo_ac   :imageac

10 Oct

Efecto brillo en Photoshop

Photoshop

El efecto deseado es algo parecido a lo que llamamos la web 2.0. Botones y texto con efecto «Glossy»

Con una forma irregular o figura

  1. Creo un nuevo archivo: Archivo->Nuevo, en mi caso coloque el área de trabajo de 400px X400px, y coloco un degradado de fondo. Para ello selecciono la herramienta degradado . En las herramientas de degradado en la parte superior,  podemos personalizar nuestro tipo de degradado (radial, lineal, de ángulo, reflejado y diamante), colocamos radial y editamos los colores del degradado:Una vez le damos OK a nuestro degradado, arrastramos  de arriba hacia abajo en nuestro área de trabajo. Si todo va bien deberíamos tener algo como esto:
  2. Ahora voy a dibujar una figura, simplemente voy a combinar 3 figuras: un circulo y dos rectángulos con borde redondeado, y los combino con la técnica de unir o combinar varias imagenes.
  3. Ahora vamos a la capa que tiene la cruz: Clic derecho->Opciones de fusión y marcamos los siguientes efectos:Nos debe quedar algo asi:
  4. Ahora apliquemos el efecto de brillo, para ello vamos a crear una capa nueva:
  5. Vamos a la capa «Cruz» y teniendo Ctrl presionado (Command en MAC) damos un clic sobre la miniatura de la capa y nos quedara seleccionado el contorno de nuestra cruz
  6. Como ya tenemos el area seleccionada, podemos aplicar un degradado lineal en nuestra capa nueva. Para esto, damos un clic en nuestra nueva capa que llame «Brillo» y aplicamos un degradado lineal , pero esta vez vamos a personalizarlo de la siguiente manera: vamos a seleccionar ambos extremos de color blanco, y en la parte de arriba opacidad 100% y al otro costado opacidad 0%. Es decir, nos quedaria una transicion de blanco a transparente:Ahora arrastramos de abajo hacia arriba para aplicar nuestro degradado y presionamos Ctrl+D para deseleccionar, o Cmd+D(MAC). Ahora en esa misma capa (Brillo) vamos a seleccionar la herramienta de seleccion marco eliptico , y dibujamos una elipse como la mostrada a continuación:
  7. Para finalizar presionamos Suprimir o delete(Mac). y Ctrl + D ó Cmd+D Para quitar la selección.

:@memo_ac   :imageac

31 Ago

Skin para TunesArt

Para aquellos melómanos que no dejan pasar algun detalle a la hora de escuchar sus canciones preferidas, TunesArt, es una buena alternativa para que puedan colocar un aspecto de Cover art en su escritorio.

Les traigo un Skin original imitando los covers o empaques de los vinilos. Este tipo de covers al menos yo ls veia cuando lanzaban los singles.

Para los que quieren saber de la aplicacion, tunesArt es un plugin para iTunes que te deja mostrar tus covers o carátulas de tu musica en el escritorio. Es personalizable y viene con algunos skins o tmeas predefinidos.

Lo mejor es que para los aficionados a las notificaciones, tiene la posibilidad de integrarse con Growl

 

Este skin lo elabore, y les dejo el link de mis trabajos realizados: link Descarga/Download

Mi usuario en Twitter:

 @memo_ac

 

:@memo_ac   :imageac

23 Ago

Como unir 2 objetos o más en Photoshop

Photoshop

A veces necesitamos crear una forma compuesta ya sea de 2 o más formas, y en Photoshop, cada vez que creamos una forma, esta queda en una capa independiente.

Supongamos que quiero lograr esta figura con un efecto de sombra:

Unir ObjetosAhora vamos a crear las figuras:

En la primera capa nos va a quedar un rectángulo con bordes redondeados. Para esto selecciona la herramienta elipse. Si mantienes presionado te aparecera un menu con las diferentes formas. Escogemos la Herramienta rectángulo redondeado.

En la parte de arriba aparecerá un menú donde aparece el radio, el redondeado del rectangulo. En este ejemplo ingrese 10px.

Herramienta rectangulo redondeado

En la segunda capa seleccionaremos la herramienta poligono:

En la tercera capa dibujamos una elipse

Acá al parecer las figuras están unidas pero no podremos aplicarle un filtro a toda esta figura ya que esta en capas independientes.

SI intentamos aplicar algún efecto solo podríamos seleccionar una capa:

Para Unir las 3 formas en una capa se puede de 2 maneras:

1.Mediante combinación de capas:

Teniendo la tecla shift presionada vamos seleccionando las capas que deseamos, las capas nos quedaran resaltadas una vez las seleccionamos:

Ahora en alguna del as 3 capas, damos clic derecho->Combinar capas.

2.Mediante filtros inteligentes.

Seleccionamos las 3 capas como en el paso anterior, una vez seleccionada, vamos al menu filtro y seleccionamos filtros inteligentes:

Ahora si tenemos las 3 figuras unificadas, y podemos aplicar el filtro de sombra. Para esto, doble clic en la capa y nos aparece la ventana Estilo de Capa.

Marcamos la casilla de sombra paralela, click en OK. En esta ventana pueden jugar con los efectos hay gran cantidad.

 

 

:@memo_ac   :imageac

22 Ago

Como alinear Objetos en Photoshop estilo Fireworks o Illustrator

Photoshop

Para aquellas personas que estén iniciando en el uso de Photoshop (Ps), y hayan utilizado fireworks(Fw) o illustrator(Il), puede que tengan algunos inconvenientes para adaptarse a Ps. De hecho yo también estoy aprendiendo a usar esta herramienta, y a medida que vaya «descubriendo» la manera de adaptarme, iré publicando tutoriales básicos para Ps.

En Fireworks/Illustrator

Muchos deben estar acostumbrados a utilizar este Menu en Fw, y Il:

Alinear FireworksSabemos que es muy sencillo el uso, tan solo le daos clic en el botón «Posición», y ya podemos alinear el objeto como deseemos.

En Photoshop

Es muy sencillo. Lo primero es dibujar algun objeto. Yo use la herramienta rectángulo (U), creandolo en cualquier parte del documento.

Lo que tienen que hacer es seleccionar la capa que deseen alinear en este caso le di clic a la capa «Forma1». Ahora que estamos ubicados en la capa  correcta vamos a seleccionar todo: Vamos a Selección->Todo.  Windows (Ctrl+ A),  Mac (Cmd+A).

Seleccion de Capa

Una vez lo tengamos seleccionado vamos al menu Capa->Alinear capas con la selección y nos aparece al menú al que estabamos acostumbrados y ya podemos centrar el objeto con los centros verticales y horizontales.Alinear Capa Photoshop

 

Listo!
:@memo_ac   :imageac

24 Jun

FIF7Y: Recursos para personalizar tu MAC/iPhone

Para aquellos que les guste tener un aspecto único en su desktop, iconos diferentes, e incluso temas completos para personalizar la interfaz gráfica de sus Mac, les traigo una interesante web: FIF7Y.

En esta Web van a encontrar cosas interesantes para personalizar apariencias.

Esta Web Ofrece Aplicaciones como:

  • Screen Me – Para crear tus propios screensavers.
  • Theme it – Personaliza el tema completo de tu Mac Os
  • Link Lite – Aplicacion que lleva estadisticas de tu sitio Web.

Además ofrece Iconos para Mac, iPhone y algunos Extras como wallpapers.