De momento ofrecen poca información, puesto que está en sus inicios, pero no cabe duda que tarde o temprano tendremos un lugar donde buscar y resolver nuestras dudas, un sitio que seguir diariamente para aprender a desarrollar en Android y coger código útil para nuestras aplicaciones, ya que han confirmado que ofrecerán porciones de código para nuestro uso.

Por ahora los cursos online están solamente disponibles en Inglés, así que esperamos poder tenerlos en un futuro cercano en nuestro idioma y aprender mucho de los cursos de Android training.

Enlace: Aprende a programar en Android online y gratis con Google

No solo podemos codificar en PHP, también podemos hacerlo en HTML, JavaScript, CSS, y XML; ofreciéndonos toda una gama de posibilidades de desarrollo en la nube.

Para trabajar con los archivos PHP -o con los formatos antes citados- debemos hacerlo a través de un servidor FTP que deberemos de configurar previamente -asimismo deberemos de registrarnos en el sistema antes de comenzar- y a partir de entonces tendremos acceso a los ficheros con los que queremos trabajar.

Resulta realmente útil contar con un editor PHP online, o en la nube como se suele decir, para en cualquier caso de emergencia podamos acceder a nuestros ficheros desde cualquier equipo y modificarlos, siendo también modificables desde nuestro smartphone con Android o nuestro iPhone -actualmente en desarrollo-.

Os dejamos con un video de presentación de la plataforma, para que conozcáis más a fondo en qué consiste el proyecto CodeAnywhere:

Enlace: CodeAnywhere: Potente editor PHP online con acceso FTP

Antes de mostrar el código para redimensionar imágenes proporcionalmente y con tamaño fijo en PHP, vamos a intentar explicar en qué consiste: En primer lugar tenemos una imágen de unas dimensiones cualquieras, en nuestro caso de 560x560px.

Ejemplo de imágen a redimensionar.

Pongámonos en el caso de que queremos crear un thumbnail de dicha imágen con unas dimensiones fijas de 160x100px. Nos sería imposible en principio redimensionarla de forma proporcional ya que las imagen original y el thumbnail tienen proporciones diferentes, con lo que u obtendríamos una imágen a 160x160px ó a 100x100px para que sea de tamaño proporcional.

Ejemplo de dos imágenes proporcionales.

En este caso, si queremos que la imágen final tenga un tamaño fijo lo ideal sería que el tamaño restante sea rellenado por un marco de color transparente. En este caso cogeríamos la imágen de 100x100px y le añadiríamos un marco a ambos lados de 30px en cada lado.

Ejemplo de imágen proporcional con tamaño fijo.

Una vez explicado este punto, pasamos a mostraros la función y a detallarla:

Redimensionar imágen proporcionalmente y con tamaño fijo en PHP

function createThumb($sImagen, $nWidth = false, $nHeight = false)
{
    // Variables
    $sNombre = null;
    $sPath = null;
    $sExt = null;
    $aImage = null;
    $aThumb = null;
    $aImageMarco = null;
    $ImTransparente = null;
    $aSize = null;
    $nWidthMarco = false;
    $nWidthHeight = false;
    $nX = false;
    $nY = false;

    // Obtenemos el nombre de la imagen
    $sNombre = basename( $sImagen );
    // Obtenemos la ruta especificada para buscar la imagen
    $sPath = dirname( $sImagen ) . '/';
    // Obtenemos la extension de la imagen
    $sExt = mime_content_type( $sImagen );

    // Creamos el directorio thumbs
    if( ! is_dir( $sPath . 'thumbs/' ) )
        @mkdir( $sPath . 'thumbs/', 0777, true ) or die( 'No se ha podido crear el directorio "' . $sPath . 'thumbs/".' );

    // Creamos la imagen a partir del tipo
    switch( $sExt )
    {
        // Imagen JPG
        case 'image/jpeg':
            $aImage = @imageCreateFromJpeg( $sImagen );
            break;
        // Imagen GIF
        case 'image/gif':
            $aImage = @imageCreateFromGif( $sImagen );
            break;
        // Imagen PNG
        case 'image/png':
            $aImage = @imageCreateFromPng( $sImagen );
            break;
        // Imagen BMP
        case 'image/wbmp':
            $aImage = @imageCreateFromWbmp( $sImagen );
            break;
        default:
            return 'No se conoce el tipo de imagen enviado, por favor cambie el formato. Sólo se permiten imágenes *.jpg, *.gif, *.png ó *.bmp.';
            break;
    }

    // Obtenemos el tamaño de la imagen original
    $aSize = getImageSize( $sImagen );

    // Calculamos las proporciones de la imagen //

    // Obteniendo el alto (Recogiendo ancho y no alto)
    if( $nWidth !== false && $nHeight === false )
        $nHeight = round( ( $aSize[1] * $nWidth ) / $aSize[0] );
    // Obteniendo el ancho (Recogiendo alto y no ancho)
    elseif( $nWidth === false && $nHeight !== false )
        $nWidth = round( ( $aSize[0] * $nHeight ) / $aSize[1] );
    // Obteniendo proporciones (Recogiendo alto y ancho)
    elseif( $nWidth !== false && $nHeight !== false )
    {
        // Guardamos las dimensiones del marco
        $nWidthMarco = $nWidth;
        $nHeightMarco = $nHeight;

        // Si el ancho es mayor
        if( $nWidth < $nHeight )
        {
            $nHeight = round( ( $aSize[1] * $nWidth ) / $aSize[0] );
            $nX = 0;
            $nY = round( ( $nHeightMarco - $nHeight ) / 2 );
        }
        // Si el alto es mayor
        elseif( $nHeight < $nWidth )
        {
            $nWidth = round( ( $aSize[0] * $nHeight ) / $aSize[1] );
            $nX = round( ( $nWidthMarco - $nWidth ) / 2 );;
            $nY = 0;
        }
    }
    // El ancho y el alto no se han enviado, informamos del error
    elseif( $nWidth === false && $nHeight === false )
        return 'No se ha especificado ningún valor para el ancho y el alto de la imágen.';

    // La nueva imagen reescalada
    $aThumb = imageCreateTrueColor( $nWidth, $nHeight );

    // Reescalamos
    imageCopyResampled( $aThumb, $aImage, 0, 0, 0, 0, $nWidth, $nHeight, $aSize[0], $aSize[1] );

    // Si tenemos que crear el marco
    if( $nWidthMarco !== false && $nHeightMarco !== false )
    {
        // El marco
        $aImageMarco = imageCreateTrueColor( $nWidthMarco, $nHeightMarco );

        // Establecemos la imagen de fondo transparente
        imageAlphaBlending( $aImageMarco, false );
        imageSaveAlpha( $aImageMarco, true );

        // Establecemos el color transparente (negro)
        $ImTransparente = imageColorAllocateAlpha( $aImageMarco, 0, 0, 0, 0xff/2 );

        // Ponemos el fondo transparente
        imageFilledRectangle( $aImageMarco, 0, 0, $nWidthMarco, $nHeightMarco, $ImTransparente );

        // Combinamos las imagenes
        imageCopyResampled( $aImageMarco, $aThumb, $nX, $nY, 0, 0, $nWidth, $nHeight, $nWidth, $nHeight );

        // Cambiamos la instancia
        $aThumb = $aImageMarco;
    }

    // Salvamos
    imagePng( $aThumb, $sPath . 'thumbs/' . $sNombre );

    // Liberamos
    imageDestroy( $aImage );
    imageDestroy( $aThumb );

    return true;
}

La función puede recibir tres parámetros, siendo el primero la ruta de la imágen a redimensionar, el segundo sería el ancho que queremos darle y el tercero el alto. Si especificamos ambos parámetros, ancho y alto, la imágen se redimensionará a dicho tamaño fijo dándole un marco transparente. Si especificamos solo el ancho tendremos una imágen proporcional con respecto al ancho, en nuestro caso si especificamos que la imagen de 560x560px la queremos con un ancho de 160px, el resultado final tendrá unas dimensiones de 160x160px. De igual forma con el alto, si especificamos para la imágen de 560x560px un alto de 100px, el resultado final tendrá unas dimensiones de 100x100px. También cabe destacar que se creará automáticamente un directorio llamado “thumbs” y ahí se almacenarán las imágenes resultantes. Siéntete libre de cambiar el código a tu gusto.

Cualquier error o sugerencia en el código será bien recibida en los comentarios.

// Creamos el formulario auxiliar
var form = document.createElement( "form" );

// Le añadimos atributos como el name, action y el method
form.setAttribute( "name", "formulario" );
form.setAttribute( "action", "" );
form.setAttribute( "method", "post" );

// Creamos un input para enviar el valor
var input = document.createElement( "input" );

// Le añadimos atributos como el name, type y el value
input.setAttribute( "name", "prueba" );
input.setAttribute( "type", "hidden" );
input.setAttribute( "value", "Soy una prueba" );

// Añadimos el input al formulario
form.appendChild( input );

// Añadimos el formulario al documento
document.getElementsByTagName( "body" )[0].appendChild( form );

// Hacemos submit
document.formulario.submit();

A modo de explicación, lo que hacemos es, en cualquier evento que tendrás que especificar, creamos un formulario auxiliar, donde le insertamos un input invisible con un valor y hacemos submit para que dichos datos se envíen a la página web especificada en el atributo action del formulario. De esta forma estamos enmascarando el envío de parámetros por POST usando Javascript.

Esto puede ser debido a algunas razones, pero nosotros vamos a proponer dos posibles soluciones sin contar las más lógicas como comprobar si la ruta del CSS se encuentra correctamente y similares. Empezamos:

Solución 1: Mozilla Firefox no carga el CSS

La primera posible solución puede ser que nuestro CSS contiene algún error grave y debemos de subsanarlo antes de que Firefox lo pueda mostrar. Para poder comprobar nuestro CSS deberemos de dirigirnos al validador de la W3C que nos indicará todos los errores y advertencias acerca de nuestro CSS. Por supuesto lo corregimos y probamos hasta que nuestro CSS se muestre.

Solución 2: Mozilla Firefox no carga el CSS

Añade el siguiente código en tu archivo .htaccess:

<FilesMatch "^.*style.*?$">
AddHandler text/css .css
</FilesMatch>

Con esto nos aseguramos que nuestra página web usará los archivos .css como fuente, siendo una posible solución.

Os vamos a enseñar un código para eliminar el marco de Google Imágenes y no perder ninguna visita:

Ejemplo de previsualización y marco de Google Imágenes.

En primer lugar deberemos dirigirnos al código fuente de nuestra página web y localizar donde se encuentra el header (head) de nuestra página. Por ejemplo, si usamos WordPress podremos localizarlo en la carpeta “/wp-content/themes/<nombre de nuestro theme>/header.php”. Una vez localizado, debemos editar y añadir justo sobre el cierre del </head> el siguiente código:

<head>
...
	<script type="text/javascript">
		if(top.location!=this.location) top.location=this.location;
	</script>
</head>

Este código lo que hace es que cuando alguien encuentra una imágen en Google Imágenes perteneciente a nuestra web, Google mostrará una previsualización de la misma dentro de un marco, pero el código hará rápidamente una redirección a nuestra web. Por supuesto hará lo mismo para cualquier tipo de iframe, así que es cuestión de que cada usuario haga uso de este código como mejor convenga a sus necesidades.

Fuente: Oloblogger

Si estamos pidiendo una fecha, ¿que mejor que un calendario donde el usuario pueda seleccionarla?. Os traemos una caja de texto con calendario en Javascript y Mootools para hacer mejor esta labor:

Descripción de Mootools Calendar

Caja de texto con calendario para formulario desarrollado en Javascript y con la librería Mootools. Útil para la introducción de una fecha en un formulario web de forma fácil e intuitiva.

Requisitos de Mootools Calendar

El calendario requiere tener Mootools 1.1 con las clases Fx.Style, Element y Window. Si queremos activar el drag requeriremos también de la clase Drag de Mootools.

Ejemplo de instalación sencilla

Os propondremos una forma de instalar fácilmente, pero si necesitáramos indagar un poco más y hacer uso de todas las funcionalidades lo mejor sería visitar la web del autor (en la sección de enlaces del artículo tenéis los enlaces al calendario y su instalación).

En primer lugar deberemos de añadir los archivos de Javascript tanto de Mootools como del calendario de esta forma:

<head>
  ...
  <script type="text/javascript" src="mootools.js"></script>
  <script type="text/javascript" src="calendar.js"></script>

</head></code>

<input id="date" name="date" type="text" />

<head>
  ...
  <script type="text/javascript">
    window.addEvent("domready", function() { myCal = new Calendar({ date: "d/m/Y" }); });
  </script>
</head>