Cristalab

Monitorizar conexiones de Apache en tiempo real con Bash
Edición no destructiva en Photoshop
Retoque con Raw en Photoshop
Cómo hacer animaciones en CSS3

Monitorizar conexiones de Apache en tiempo real con Bash

Posted: 02 Oct 2012 04:00 AM PDT

Bash (Bourne again shell) es un programa informático cuya función consiste en interpretar órdenes, está basado en la shell de Unix y es el intérprete por defecto de la mayoría de las distribuciones de Linux.

Bash contiene una gran variedad de formas de interpretar los recursos del sistema de modo matemático y renderizar los resultados en un formato fácil de entender. Esto es especialmente útil cuando hay la necesidad de optimizar alguno de los recursos por defecto de Linux, como MySQL, servidor de correo, Apache, ect...

En este ejemplo vamos a mirar y analizar los recursos que están en uso de Apache, la memoria que está siendo utilizada por los procesos actuales de Apache, las posibles conexiones disponibles y el uso general de memoria de la máquina.

Hemos elegido este script para el tutorial porque utilizamos las funciones matématicas internas de Bash para números enteros. Utilizamos llamadas a BC (módulo de cálculos de Bash) para números reales y utilizamos expresiones regulares y manipulación de arrays. Veremos sentencias condicionales, uso de bucles WHILE y uso de funciones.

Código :

  #!/bin/env bash    # Definimos la función  function doStat()  {  # Define variables  # Iniciación de variables que vamos a usar    cnt=0     cpl=0    di1=1    di2=$((1024*1000))    di3=1024    max=0    statusbar=38    tot=0    ty1="Mb"    ty2="Mb"    ty3="Mb"    ty4="Mb"    ty5="Mb"    # Compruebo si estamos en un servidor con cPanel instalado, ya hay ligeras variaciones en el formato de "TOP"  # Aquí vemos una sentencia condicional, siempre empieza por if, hay que observar que despúes del corchete "[" siempre hay que dejar un espacio. Igualmente, hay que dejar un espacio antes del corchete de cierre.    if [ -d /usr/local/cpanel ]; then      cpl=1      di1=100    fi  # Cerramos la sentencia con "fi"  # Comprobar si la memoria encontrada en top contiene el caracter "m" para saber que si los resultados se presentan en Mb o Kb    mck=`top -b -c -n 1|grep -E "apache|httpd"|awk '{print$6}'|grep -c m`    if [ $mck -ne 0 ]; then      di1=1    fi  # Cargamos en la variable fre la memoria disponible    fre=`grep -E "^MemFree:" /proc/meminfo|awk '{print$2}'`  # Cargamos en la variable total la memoria instalada    total=`grep -E "^MemTotal:" /proc/meminfo|awk '{print$2}'`    # Cargamos en mem la memoria usada por Apache. La sacamos de la función top.    mem=`top -b -c -n 1|grep -E "apache|httpd"|grep -v grep | awk '{print$6}'|sed -e 's/[a-zA-Z]//g'`    # Bucle para mirar cada proceso y calcular ( por proceso )  # avg - media  # max - máxima memoria usada  # tot - total de memoria usada      for m2 in $mem    do  # Comprobamos si la memoria es un valor entero o un valor real. Aquí usamos una expresión regular en la condicional.      if [[ $m2 =~ ^[0-9]{1,3}\.[0-9]{1,3}$ ]]; then  #IFS es el valor interno de Bash para el separador de variables internas        OIFS=IFS        IFS='.'        m2=($m2)        IFS=$OIFS  # La parte real del número la guardo en m1        m1=${m2[1]}  # La parte entera la guardo en m2        m2=${m2[0]}  # Miramos el número de caracteres que hay en la parte real. Para hacer las conversiones        m3=${#m1}        m4=10        if [ $m3 -eq 2 ]; then  m4=100; fi        if [ $m3 -eq 3 ]; then  m4=1000; fi  # Convertimos a decimal        m3=$(((m1*1024)/m4))  # Calculamos tamaño del decimal        m2=$(((m2*1024)+m3))      fi  # Fin de la comprobación de números reales      m=$((m2/di1))  # Cargamos en max el proceso que más memoria ocupa      if [ $m -gt $max ]; then        max=$m      fi  # Incrementamos contador y total      cnt=$((cnt+1))      tot=$((tot+m))      avg=$((tot/cnt))    done  # Fin del bucle  mxu=$((tot*1024))    # Comprobamos la media y evitamos la división por cero    if [ $avg -eq 0 ]; then      avg=1    fi    # Obtenemos el número total de los procesos de apache  # escuchando o conectado    cnt=`lsof -i :80|grep -iE "esta|ist|esc"|wc -l`    # Calculamos los procesos disponibles de la máquina    ava=$(((fre/avg)/100))    wst=$(((fre/max)/100))  # Aquí usamos BC. Necesitamos un número real y bash no permite operaciones con estos de forma interna    pct=`echo "scale=2;($fre/$total)*100"|bc`    out=`echo "scale=2;($pct/100)*$statusbar"|bc|awk -F\. '{print$1}'`    # Ajustamos para cPanel si es necesario    if [ $cpl ] && [ "$out" == '' ]; then      out=0    fi    # Calculamos el uso de la memoria y convertimos a Gb si es necesario    if [ $fre -ge $di2 ]; then      ty1="Gb"      fre=`echo "scale=2;$fre/$di2"|bc`    else      if [ $fre -ge $di3 ]; then        fre=`echo "scale=2;$fre/$di3"|bc`      fi    fi    if [ $mxu -ge $di2 ]; then      ty2="Gb"      mxu=`echo "scale=2;$mxu/$di2"|bc`    else      if [ $mxu -ge $di3 ]; then        mxu=`echo "scale=2;$mxu/$di3"|bc`      fi    fi    if [ $total -ge $di2 ]; then      ty3="Gb"      total=`echo "scale=2;$total/$di2"|bc`    fi    if [ $avg -ge $di2 ]; then      ty4="Gb"      avg=`echo "scale=2;$avg/$di2"|bc`    fi    if [ $max -ge $di2 ]; then      ty5="Gb"      max=`echo "scale=2;$max/$di2"|bc`    fi    # Bucle para mostrar una barra de estado    sloop=$statusbar    statusbar=$((statusbar+3))    nline=`seq -s "=" $statusbar|sed 's/[0-9]//g'`    # Mostramos resultados    printf "%s\n" $nline    printf "Apache processes and memory usage.\n"    printf "%s\n" $nline    printf "Total installed memory: %s%s\n" $total $ty3    printf "Availiable memory:      %s%s\n" $fre $ty1    printf "Free percentile:        %s\45\n" $pct    # Mostramos la memoria usada en la barra de estado. Observamos que en el bucle while, los corchetes llevan sus espacios después y antes, como en el if que hemos descrito antes.    printf "Status bar:\n|"    while [ $sloop -ge 1 ]; do      cc="-"      if [ $sloop -ge $out ]; then        cc="+"      fi      printf "%s" $cc      sloop=$((sloop-1))    done    printf "|\n"      printf "%s\n" $nline    printf "Current usage\n"    printf "%s\n" $nline    printf "Current processes: %d\n" $cnt    printf "Average memory:\t   %s%s\n" $avg $ty4    printf "Maximum memory:\t   %s%s\n" $max $ty5    printf "Overall memory:\t   %s%s\n" $mxu $ty2    printf "%s\n" $nline    printf "Projected usage\n"    printf "%s\n" $nline    printf "Concurrent best:  %d more connection(s)\n" $ava    printf "Concurrent worst: %d more connection(s)\n" $wst    printf "%s\n" $nline  }  # Fin de la función  # Ejecutamos la función  doStat

El resultado mostrado quedaría más o menos así:

Código :

========================================  Apache processes and memory usage.  ========================================  Total installed memory: 4.09Gb  Availiable memory:      3.31Gb  Free percentile:        80.00%  Status bar:  |+++++++++-----------------------------|  ========================================  Current usage  ========================================  Current processes: 28  Average memory:    76Mb  Maximum memory:    80Mb  Overall memory:    1.99Gb  ========================================  Projected usage  ========================================  Concurrent best:  446 more connection(s)  Concurrent worst: 424 more connection(s)  ========================================

Espero vuestros comentarios y sugerencias. Si os gusta, seguiremos publicando artículos sobre el uso de Bash

Edición no destructiva en Photoshop

Posted: 02 Oct 2012 03:37 AM PDT

Aprenderemos una de las características más interesantes que nos ofrece Photoshop, cuando hablamos de retoque y que nos permitirá aplicar correcciones sobre nuestras imágenes, sin perder la posibilidad de deshacer estados de edición anteriores, además de ofrecernos herramientas para ajustar procesos que ya habíamos completado, sin que afecten a la pérdida de los posteriores que hayamos aplicado, usando para ello el trabajo con las capas de ajuste y los objetos inteligentes en Photoshop.

Saludos.

Retoque con Raw en Photoshop

Posted: 10 Sep 2012 05:13 AM PDT

Damos comienzo a una nueva serie que tratará sobre retoque fotográfico, mientras hacemos una pausa en la de diseño Web, para ir aprendiendo las técnicas más efectivas, cuando de mejorar el aspecto de los modelos de fotografías e imágenes se trata, gracias al ajuste de su apariencia general, el color y suavidad de su piel, ojos y pelo.

Para ello empezaremos mostrando las dos posibilidades más comunes, Raw y compresión, hablando de formatos generales de imagen que encontraremos en nuestros proyectos y que gracias a módulos como el magnífico Camera Raw de Photoshop, nos permitirán aplicar y realizar los ajustes iniciales más importantes, para importar la imagen al programa con las mejores características para su retoque.

Saludos.

Cómo hacer animaciones en CSS3

Posted: 07 Sep 2012 08:40 AM PDT

En este tutorial veremos el uso y los parámetros de animation en CSS3. Las animaciones de CSS3 son la herramienta perfecta para animar cualquier elemento, para crear un efecto puntual o para crear un movimiento contínuo de algún elemento (es decir, se pueden mover varios elementos de forma continuada pudiendo crear animaciones que antes sólo se veían en Flash o Javascript).

Las animaciones usan el parámetro animation en CSS para su uso estándar, por lo que es más correcto (por cuestiones de compatibilidad) también incluir el prefijo de cada navegador. La mayoría de los navegadores son compatibles, pero Internet Explorer no (en su versión 9).

Código :

/* Parámetro estándar */  animation:    /* Parámetros según navegador */  -webkit-animation:/* Chrome y Safari */  -moz-animation:/* Mozilla */

Cómo funcionan las animaciones en CSS3

Las animaciones de CSS3 funcionan distinto a otros parámetros de CSS. Debemos de establecer en el parámetro animation, además de la duración de la animación y el número de repeticiones que hace, un keyframe, que es el fragmento de código donde se escribe la secuencia que hará el elemento con esta animación (es decir, se especifica qué propiedades tendrá en cada momento, pudiendo modificar por ejemplo: el color, la altura, la posición...).

Keyframes en CSS3

Keyframes es una propiedad de CSS3 que va independiente de los selectores (que son el conjunto de palabras que usamos para seleccionar elemento de una página, como: "#CONTENEDOR div.cuerpo"), esta propiedad también usa los prefijos de ciertos navegadores por motivos de compatibilidad y también precede a un contenedor que se abre y cierra con {}, es decir, pondremos la propiedad keyframes, y dentro de las llaves su contenido.

Código :

/* Parámetro estándar */  @keyframes [Nombre del keyfremes] {}    /* Parámetros según navegador */  @-webkit-keyframes [Nombre del keyfremes] {}/* Chrome y Safari */  @-moz-keyframes [Nombre del keyfremes] {}/* Mozilla */

Código :

/* Ejemplo de un keyframes */  @keyframes Ejemplo {  0%{width:100px}  100%{width:200px}  }

Contenido del keyframe

Dentro del keyframes debemos de especificar los keyframes de forma individual, donde se especifica el porcentaje del tiempo de la animación en el que cierta propiedad cambia y posteriormente se especifican las propiedades que cambian escribiéndolas dentro de llaves. Si queremos que empiece la animación de determinada forma debemos añadir un keyframe con el porcentaje del tiempo de la animación en el que empieza (en el caso del inicio es el 0%), de esta forma podemos especificar que en cualquier momento de la animación cambien los parámetros (en el 30% de la animación o en el 50% por ejemplo), hasta máximo del 100%.

[nota:68f144cae7] El punto 0% y el 100% son necesarios.[/nota:68f144cae7]

Código :

@keyframes Ejemplo {  0%{width:10%}  33%{width:20%}  66%{width:60%}  100%{width:10%}  }

Parámetros de animation

La propiedad animation puede contener distintos parámetros, como el nombre del keyframe que especifica su animación, su duración, el número de repeticiones y la función de tiempo.

Código :

animation: [Nombre del keyfremes] [Tiempo] [Número de repeticiones] [Función de Tiempo];

La propiedad animation tiene los siguientes parámetros:

Nombre del keyframe: En este parámetro es donde establecemos el nombre del keyfreme, teniendo que ser igual al keyfreme que usemos para especificar la animación.
Tiempo: Este parámetro establece el tiempo que tarda en hacerse la animación en segundos (su unidad es s), es decir si queremos que dure un segundo tenemos que poner "1s".
Repeticiones: Con este parámetro podemos especificar con un número entero las veces que se repite la animación o hacer que se repita infinitamente estableciéndolo como "infinite".
Función de tiempo: Este parámetro establece la curva de aceleración de la transición, es decir, si empieza más rápido y o más despacio o es un avance lineal, sin variar la aceleración.
Este parámetro tiene varias funciones de tiempo preestablecida: lineal, ease, ease-in... Por defecto usa el ease, y es el más recomendado, consiste en un comienzo lento y una terminación lenta, acelerándose en la parte media.