¿Qué es Diseño Web Responsive y Por qué es importante?

El uso de dispositivos móviles está creciendo a un ritmo increíble, dispositivos como tabletas y teléfonos inteligentes han incrementado sus ventas en los últimos años y la navegación en Internet mediante estos dispositivos es cada vez más común. Por ello uno de los problemas que se presentan hoy en día, es que los dispositivos móviles no pueden adaptarse a las versiones de un ordenador y no le dan al usuario una buena experiencia. Para resolver este problema llega  responsive web design.

Pero ¿Qué es responsive web design?

Esta tecnología pretende que con un solo diseño web, tengamos una visualización adecuada en cualquier dispositivo. En vez de construir un sitio web para cada dispositivo (Smartphone, tablet, ordenador desktop, laptop e incluso, hoy en día, para smart TV), se crea una sola website utilizando CSS3 media y un layout con imágenes flexibles. De este modo al ingresar al website, detectara de qué tipo de dispositivo están ingresando y mostrara la versión más optimizada para este medio. Así re ordenara la web incluso obviando algunas de ellos como menos imágenes, redistribución de las columnas e incluso menos texto.

¿Qué pasa con el posicionamiento web?

El tipo de bus queda que se realiza por un dispositivo móvil es muy diferente a la de un ordenado. Por ello tener una web con responsive web design es mucho mejor, ya que cuantos más dispositivos alcances tendrás más tráfico en tu website. Algunos navegadores, ya están priorizando en los ranking  a los websites móviles. Una de las alternativas para que crear tu propio website con responsive es Zeendo, esta es una plataforma basada en cloud computing. Las ventajas son: – Todo trabajo es Oline, por ello podrás trabajar desde cualquier lugar y a cualquier hora, además que no se perderán los cambios que hagas. – No tendrás que descargar ningún tipo de Software. – Y la importante, es totalmente accesible para cualquier usuario, ya que no requiere de ningún conocimiento de programación. jj
A partir de plantillas personalizables creadas en HTML5 y CSS3 con fluid grids, estos se encargan de re colocar los elementos de la web dependiendo de las características de la pantalla de cada dispositivo. Disminuyen elementos para que la experiencia del usuario sea más fluida. Responsive web design no solo se trata de tener una buena presentación en todos los dispositivos, sino el propósito que tienen en común todas las website, obtener más visitas y generar más tráfico en nuestras website.

¿Qué es un Mockup o Wireframe?

Como diseñadores o desarrolladores web, cuando nos enfrentamos a un nuevo proyecto con un cliente es de vital importancia lograr una buena comunicación con el cliente y detectar realmente sus necesidades pero esto es un problema cuando en algunos casos el cliente no sabe lo que necesita realmente o no puede explicarlo de manera adecuada.

Para evitar el tener que volver atrás en nuestros proyectos y para mostrarle al cliente una mejor visualización del proyecto, nace la idea de los mockups, maquetas o wireframes.

Wireframes en desarrollo y diseño web.


Un wireframe básicamente es un boceto básico y de baja calidad del desarrollo de una página web o el diseño de una interfaz, la finalidad de este es el mostrar al cliente un diseño o boceto rápido y facilitar la comunicación entre cliente y desarrollador.

El wireframe tiene como objetivo proporcionar la visualización del diseño o las funcionalidades de un site o incluso una App de manera netamente referencial y poder definir objetivos en una etapa temprana del proyecto, incluso hacer modificaciones de manera rápida, para evitar hacer estos cambios sobre un site o diseño real, nadie quiere que un cliente le cambie el diseño web cuando este ya está maquetado o sí? XD
Existen una variedad de software que nos permite crear estos tipos de wireframes, a continuación enunciamos algunos:
Balsamig (Demo Online)

Sitio web: http://www.balsamiq.com/products/mockups
Mockingbird

Sitio web: https://gomockingbird.com/
Lovely Charts (Online)

Sitio web: http://lovelycharts.com/
Mockflow

Sitio web: http://www.mockflow.com/
Gliffy

Sitio web: http://www.gliffy.com/uses/wireframe-software/

Wireframe para el diseño de interfaces (Apps)

En el caso de wireframes para el diseño de interfaces de dispositivos móviles o aplicaciones móviles (APPS). También contamos con algunas herramientas que nos permiten crear estos bocetos y usarlos como referencia en un proyecto para nuestro cliente, son:
Iphonemockup (Online)

Sitio web: http://iphonemockup.lkmc.ch/
Balsamig (Si también permite realizar bocetos para apps móviles)

Sitio web: http://www.balsamiq.com/products/mockups
Wireframe CC (Online, este nos permite realizar wireframes dispositivos móviles como tabletas, celulares, y también el monitor de un ordenador)

Sitio web: http://wireframe.cc/

Mockup o maqueta en diseño grafico


Las maquetas o mockups últimamente se han puesto de moda para representar un diseño gráfico o especialmente editorial.

El objetivo en el caso de este tipo de maqueta es el de mostrar al cliente una visualización de cómo quedaría su producto editorial, identidad de marca, logo, tarjetas de presentación, pagina web, papelería, etc. En un ambiente foto-realista sin necesidad de imprimir realmente y tomar una fotografía real.
Estas maquetas o mockups se pueden realizar por medio de 3 métodos:
Photoshop
Por medio de técnicas de edición avanzadas en photoshop para crear el efecto realista y de 3d.
Software de 3D
Por medio la creación de modelos realistas y detallados en software de 3d y producir imágenes realistas con estos software, comúnmente llamadas renders.
Por medio de una fotografía real.
Es posible por medio de una fotografía real y con buena calidad de iluminación crear una buena maqueta.

zp8497586rq

Introducción a Cookies con PHP y Javascript

En este tutorial, vamos a centrarnos en los aspectos básicos de las Cookies, aprenderemos acerca de su funcionalidad en aplicaciónes Web y aprender a usar dentro de nuestros proyectos PHP y JavaScript. Después de leer esto, usted habrá adquirido las habilidades necesarias para implementar las cookies establecer con seguridad en sus propias aplicaciones Web.

Comprendiendo las cookies

Las cookies son archivos de texto que se guardan en su ordenador, transferidos a través del protocolo HTTP. Este es el protocolo utilizado por los navegadores para recuperar y enviar archivos al servidor. Después de una cookie se ha solicitado, se envía al servidor cada vez que se fue a buscar un nuevo elemento en la página web en el navegador. A continuación, podemos ver un fragmento de un servidor que solicita una nueva cookie (este fragmento es una parte de una respuesta HTTP).
[javascript]
Set-Cookie: Name=content data;
expires=Fri, 31-Dec-2010 23:59:59 GMT;
path=/; domain=.example.net
[/javascript]
donde:

  • Set-Cookie: es la petición del Servidor al navegador para crear una nueva cookie.
  • Name: Es el nombre de la cookie, cada cookie puede pesar hasta 4kb.
  • expires: Es la variable que guarda la fecha de vencimiento, debe ser del siguiente formato (“Wdy, DD-Mon-YYYY HH:MM:SS GMT”)
  • domain: es el dominio donde la cookie estara activa, la cookie solo se enviara al servidor de ese dominio.
  • path: es el directorio donde se enviara la cookie, significa que si establecemos /images, solo se enviara la cookie cuando ingresemos a ese directorio.

Trabajar con cookies en PHP

La cosa más importante a recordar, cuando se crea una cookie en PHP, se debe establecer todas las cookies antes de enviar los datos al navegador . Esto significa que usted debe siempre inicializar nuevas cookies antes de cualquier salida. Esto incluye comandos echo() o print(), y las etiquetaso. Por supuesto, hay algunas excepciones, pero esta es una regla general.
[php]
<!–?php <br ?–>
$name = &#039;clientname&#039;;
$value = &#039;Peter Griffin&#039;;
$expireDate = time() + 60 * 30;
$path = &#039;/example/&#039;;
$domain = &#039;test.envato.com&#039;;
$secure = false;
$httponly = true;
setcookie( $name, $value, $expireDate, $path, $domain, $secure, $httponly);
?>
[/php]
Esto debe parecer familiar a estas alturas, a excepción de $secure y $httponly .
$secure es forzar la cookie sólo se enviar si una conexión HTTPS se ha establecido, si se establece en true, y normalmente se debe establecer en false.
$httponly hace que la cookie sólo esté disponible a través del protocolo HTTP, lo que significa que el lado del cliente, los lenguajes de JavaScript y VBScript, no podran acceder a la cookie. Esto ayuda a evitar cosas desagradables, como el Cross Site Scripting , y debe establecerse en true si usted no tiene intenciones de modificar las cookies cara al cliente con un lenguaje como JavaScript. Además, para evitar malentendidos “, httponly” no significa que las cookies no pueden ser enviados a través de HTTPS, ya que todavía puede, de hecho. Sin embargo, por favor tenga en cuenta que el código anterior se puede hacer bastante más pequeño:
[php]
<!–?php setcookie( &#039;clientname&#039;, &#039;Peter Griffin&#039;, time()+60*30, &#039;/example/&#039;, &#039;test.envato.com&#039;, false,true); ?–>
[/php]
Ahora podemos crear cookies, pero tenemos que ser capaces de leer también. Por suerte para nosotros, PHP hace esto muy fácil una vez que una cookie que ya se ha creado.Hay una variable de entorno llamada $_COOKIE[], que puede ser utilizado para extraer el valor de la cookie. Para usarlo, basta con insertar el nombre de la cookie en el interior de los corchetes [], así:
[php]
<!–?php $cookieValue = $_COOKIE[&#039;name of the cookie&#039;]; ?–>
[/php]
Esta variable de entorno se puede utilizar como cualquier otra. Al igual que $_GET[] y $_POST[], que puede ser tratada directamente como una variable normal (una vez que haya comprobado si la cookie existe realmente por supuesto) si así lo desea.

Trabajar con cookies en JavaScript

Las cookies pueden ser leídas y escritas en el cliente también. A pesar de que JavaScript no ofrece una solución agradable de leer y escribir cookies, resulta posible y ampliamente utilizado. JavaScript utiliza el objeto document.cookie para la manipulación de cookies, como se muestra en el siguiente ejemplo:
[javascript]
var expiredate = new Date();
expiredate.setHours( expiredate.getHours() + 5);
document.cookie = &#039;cookiename=cookievalue; expires=&#039; + expiredate.toUTCString() + &#039;path=/example/; domain=test.envato.com&#039;;
[/javascript]
Como te habrás dado cuenta, esta sintaxis es muy similar a la notación protocolo HTTP. Esto tiene la ventaja de ser más en el control, sino que también introduce algunos problemas potenciales. A continuación se muestra el fragmento depara leer una cookie.
[javascript]
var cookieName = &#039;testcookiename&#039;;
var textArray = document.cookie.split(&#039;;&#039;);
for(var i = 0; i < textArray.length; i++){
var textPiece = textArray[i]; //contains 1 string piece
while(textPiece(0)==&#039; &#039;) textPiece = textPiece.substring(1,textPiece.length);
if (textPiece.indexOf(cookieName)== 0){
return textPiece.substring(cookieName.length,c.length);
}
}
[/javascript]
A continuación unas funciones JavaScript para escribir y leer cookies facilmente:
[javascript]
function writeCookie(cookieName, cookieValue, expireHours, path, domain){
var date = new Date();
date.setHours(date.getHours + expireHours);
document.cookie = cookieName+&#039;=&#039;+cookieValue+&#039;; expires=&#039;+date+ &#039;; path=&#039; + path + &#039;; domain=&#039; + domain;
}
function readCookie(cookieName){
var textArray = document.cookie.split(&#039;;&#039;);
for(var i = 0; i < textArray.length; i++){
var textPiece = textArray[i];
while(textPiece(0)==&#039; &#039;) textPiece = textPiece.substring(1,textPiece.length);
if (textPiece.indexOf(cookieName)== 0) return textPiece.substring(cookieName.length,c.length);
}
}
[/javascript]

Mejores Prácticas

  • Nunca introduzca datos privados en una cookie. Un cliente puede estar navegando en una computadora pública, por lo que no deja ninguna información personal detrás.
  • Nunca te fíes de los datos procedentes de las cookies. Siempre filtro cadenas y números! Un atacante podría escribir datos malintencionados a la cookie con el fin de hacer algo que usted no desea que su servicio haga.
  • Trate de calcular cuánto tiempo la cookie debería ser válido, y establecer la fecha de caducidad en consecuencia. No debe acaparar el ordenador del cliente con cookies viejas que expiren dentro de cien años por ejemplo.
  • Ponga siempre el seguro y httponly para satisfacer sus exigencias de aplicación. Si su aplicación no desea editar las cookies con JavaScript permitir httponly. Si siempre tiene una conexión HTTPS, permitir el parametro secure. Esto mejora la integridad de datos y confidencialidad.

Vía

zp8497586rq

Crear y configurar Dispositivos Virtuales Android (AVD)

Android Virtual Device o AVD, son emuladores de distintos tipos de dispositivos Android, podemos crear un AVD que emule a un Samsung Galaxy mini, S, S2, S3 o cualquier otro dispositivo que haya en el mercado.

Requisitos

Para crear y configurar AVD’s es necesario tener instalado el SDK de Android y tener descargado los paquetes dentro del “SDK Manager”. Pueden consultar el tutorial “Desarrollo de Aplicaciones Android” para ver a detalle este tema.

Crear un Android Virtual Device (AVD)

Comenzamos con la creación de un AVD simple, no será configurado en base a ningún dispositivo Android en particular.
La manera más sencilla para la creación de un AVD es abriendo el “AVD Manager” que lo podemos encontrar en la carpeta “android-sdk” que esta ubicada donde instalamos el SDK de Android, también podemos ubicar el AVD Manager como acceso directo en nuestro IDE Eclipse si previamente instalamos el “Android Developer Plugin para Eclipse”.

Cuando tengamos abierto el AVD Manager nos saldrá una ventana similar a la siguiente, donde nos listara los AVD’s creados, nos mostrara algunos detalles como la versión de Android, el nivel de API y el tipo de CPU elegido. Los botones a la derecha nos servirán para crear, editar, eliminar e iniciar cualquier AVD.

Crea un AVD Básico

Al presionar “New” nos saldrá un cuadro de dialogo similar al siguiente, aquí elegiremos las características que tendrá nuestro AVD, para una configuración basica basta con llenar los 2 campos siguientes:
Name: algo descriptivo como AVD-2.3-API16, para reconocer fácilmente nuestros AVD.
Target: elegiremos la versión de Android que deseamos probar en el emulador.
Campos opcionales:
CPU/ABI: Por defecto estará en automático con algunas versiones de Android, pero podemos elegir ARM si nos da a elegir.
SD Card: será el tamaño de almacenamiento que tenga nuestro dispositivo, no recomiendo poner más de 64 MiB ya que este espacio será ocupado en nuestro disco duro real.
Skin: En esta sección debemos seleccionar el tamaño de pantalla que tendrá el AVD, en Built-in tenemos tamaños estándar y hay uno por defecto “Default (WVGA800)” que es el más usado, o podemos personalizar la resolución de nuestro dispositivo (Screen configurations).
Hardware: en esta parte podemos dejar todo por defecto, pero en casos particulares disponemos de muchas opciones como soporte para cámara, GPS, acelerómetro, etc. (Hardware options).

Iniciar un Android Virtual Device (AVD)

Para iniciar un AVD primero lo seleccionamos y presionamos “Start”, seguidamente nos mostrara un cuadro de dialogo “Launch options” donde podemos cambiar las pulgadas del dispositivo (Scale display to real size), resetear el sistema operativo (Wipe user data), guardar captura instantánea (Save to Snapshot), restaurar una captura instantánea (Launch from snapshot).
Para emular el tamaño exacto en

pulgadas de un dispositivo es necesario colocar bien el “Monitor dpi”, podemos ayudarnos en el botón “?” para seleccionar las pulgadas que tiene nuestro monitor y esto corregirá el valor del “Monitor dpi”.

A continuación presionamos
“Launch” y ya tendremos nuestro dispositivo virtual Android, tal vez demore un poco la primera vez que inicie, podemos crear mas AVD’s para tener una lista de diferentes dispositivos, tamaños y versiones de Android donde podremos probar aplicaciones, webs y parte de la funcionalidad del sistema operativo.

Vía

Exportar Excel con PHP utilizando PHPExcel


PHPExcel es un librería creada en PHP que nos permitirá exportar y leer diferentes formatos de Excel, como .xls (Excel 2007), .xlsx (OfficeOpenXML), CSV, PDF, HTML, entre otros.
Para utilizar la librería es necesario tener instalado PHP 5.2+, esta licenciado bajo LGPL.
Para empezar con el tutorial primero debemos can someone do my essay descargar la librería que contiene las clases, documentación y algunos ejemplos desarrollados.
Descargar PHPExcel.

1) Incluir las librerías e inicializar la Clase.

Para este ejemplo básico necesitaremos incluir la librería PHPExcel.php, luego pasamos a inicializar la clase.
[php]
require_once ‘../Classes/PHPExcel.php’;
$objPHPExcel = new PHPExcel();
[/php]

2) Propiedades del documento Excel

Cuando exportemos un archivo Excel podemos definir quién fue el creador, el título del documento, la descripción, algunos keywords y su categoría.
[php]
$objPHPExcel->
getProperties()
->setCreator("TEDnologia.com")
->setLastModifiedBy("TEDnologia.com")
->setTitle("Exportar Excel con PHP")
->setSubject("Documento de prueba")
->setDescription("Documento generado con PHPExcel")
->setKeywords("usuarios phpexcel")
->setCategory("reportes");
[/php]

3) Escribiendo data

Con el siguiente bloque de código podemos escribir en la casilla que deseamos, es muy sencillo el manejo tanto para hacerlo manualmente como dinámicamente.
[php]
$objPHPExcel->setActiveSheetIndex(0)
->setCellValue(‘A1’, ‘Nombre’)
->setCellValue(‘B1’, ‘E-mail’)
->setCellValue(‘C1’, ‘Twitter’)
->setCellValue(‘A2’, ‘David’)
->setCellValue(‘B2’, ‘dvd@gmail.com’)
->setCellValue(‘C2’, ‘@davidvd’);
[/php]

4) Propiedades de la hoja

Luego de escribir en la hoja de cálculo pasamos a darle un nombre y definir con que hoja abrirá el documento, en este caso como tenemos solo uno, el valor será “0”.
[php]
$objPHPExcel->getActiveSheet()->setTitle(‘Usuarios’);
$objPHPExcel->setActiveSheetIndex(0);
[/php]

5) Descargar el archivo

El paso final será descargar el archivo, aquí definiremos el nombre que tendrá al ser descargado y el tipo de Excel que será.
[php]
header(‘Content-Type: application/vnd.ms-excel’);
header(‘Content-Disposition: attachment;filename="01simple.xls"’);
header(‘Cache-Control: max-age=0′);
$objWriter=PHPExcel_IOFactory::createWriter($objPHPExcel,’Excel5’);
$objWriter->save(‘php://output’);
exit;
[/php]
Con esto podemos exportar documentos Excel básicos, con la librería podremos integrar formulas, formatos, gráficos, entre otras características.

PHPExcel página oficial

Crear marcas de agua con PHP

Añadir o crear marcas de agua a una imagen se utiliza bastante para dejar los créditos en una imagen, realizar esto de forma automática con PHP nos ahorrara tiempo en abrir un programa de edición de imágenes para ponerlo manualmente, ahora solo tendremos que ponerlo como una función antes de hacer el upload o mejor aún si tenemos los archivos en un directorio podemos recorrerlo y agregarle marcas de agua masivamente.
ImageWorkshop es una Clase PHP que utiliza la librería GD para agregar capas de imágenes fácilmente (igual que en Photoshop o GIMP).

Tutorial

Vamos a añadir una marca de agua en una imagen de diferentes formas, solo texto, con imagen, con transparencia, vertical y en diagonal.
Estas son las imágenes que utilizaremos:

1- Agregar texto como marca de agua


[php]
require_once(&#039;imageworkshop.php&#039;);
$norwayLayer = new ImageWorkshop(array(
"imageFromPath" => "sgs3.jpg",
));
$textLayer = new ImageWorkshop(array(
"text" => "PHP Image Workshop",
"fontPath" => "arial.ttf",
"fontSize" => 14,
"fontColor" => "ffffff",
"textRotation" => 0,
));
$norwayLayer->addLayer(1, $textLayer, 12, 12, "LB");
$image = $norwayLayer->getResult();
header(&#039;Content-type: image/jpeg&#039;);
imagejpeg($image, null, 95);
[/php]

addLayer([nivel], [subcapa], [x], [y], [posicion]);

En este metodo podemos pasar por

parametros el nivel de la capa (nivel), en que capa se agregara (subcapa), las coordenadas horizontal (x) y vertical (y), y la posicion que podra ser seran LB (Left, Bottom), RT (Right Top), etc.

2- Agregar imagen como marca de agua


[php]
$norwayLayer = new ImageWorkshop(array(
"imageFromPath" => "sgs3.jpg",
));
$watermarkLayer = new ImageWorkshop(array(
"imageFromPath" => "android.jpg",
));
$norwayLayer->addLayer(1, $watermarkLayer, 12, 12, "LB");
$image = $norwayLayer->getResult();
header(&#039;Content-type: image/jpeg&#039;);
imagejpeg($image, null, 95);
[/php]

3- Agregar imagen con opacidad como marca de agua


[php]
$norwayLayer = new ImageWorkshop(array(
"imageFromPath" => "sgs3.jpg",
));
$watermarkLayer = new ImageWorkshop(array(
"imageFromPath" => "android.jpg",
));
$watermarkLayer->opacity(60);
$norwayLayer->addLayer(1, $watermarkLayer, 12, 12, "LB");
$image = $norwayLayer->getResult();
header(&#039;Content-type: image/jpeg&#039;);
imagejpeg($image, null, 95);
[/php]

4- Agregar imagen como marca de agua y rotarla


[php]
$norwayLayer = new ImageWorkshop(array(
"imageFromPath" => "sgs3.jpg",
));
$watermarkLayer = new ImageWorkshop(array(
"imageFromPath" => "android.jpg",
));
//$watermarkLayer->opacity(60);
$watermarkLayer->rotate(90);
$norwayLayer->addLayer(1, $watermarkLayer, 12, 12, "LT");
$image = $norwayLayer->getResult();
header(&#039;Content-type: image/jpeg&#039;);
imagejpeg($image, null, 95);
[/php]

5- Agregar texto en diagonal como marca de agua y rotarla


[php]
function calculAngle($bottomSideWidth, $leftSideWidth)
{
$hypothenuse = sqrt(pow($bottomSideWidth, 2) + pow($leftSideWidth, 2));
$bottomRightAngle = acos($bottomSideWidth / $hypothenuse) + 180 / pi();
return -round(90 – <div style="display: none"><a href=&#039;http://generic–viagra.net/&#039;>buy generic viagra</a></div> $bottomRightAngle);
}
$norwayLayer = new ImageWorkshop(array(
"imageFromPath" => "sgs3.jpg",
));
$textLayer = new ImageWorkshop(array(
"text" => "PHP Image Workshop",
"fontPath" => "arial.ttf",
"fontSize" => 40,
"fontColor" => "ffffff",
"textRotation" => calculAngle($norwayLayer->getWidth(), $norwayLayer->getHeight()),
));
// Some funky opacity
$textLayer->opacity(70);
// We add the $textLayer on the norway layer, in its middle
$norwayLayer->addLayer(1, $textLayer, 0, 0, &#039;MM&#039;);
$image = $norwayLayer->getResult();
header(&#039;Content-type: image/jpeg&#039;);
imagejpeg($image, null, 95);
[/php]
Descargar ejemplos

Documentación

zp8497586rq

8 atajos de teclado para los que desarrollan en Eclipse IDE

Muchos de los desarrolladores utilizamos el IDE Eclipse, no necesariamente para programar en Java, ya que este IDE es usado para distintos tipos de lenguaje, en mi caso lo utilizo para desarrollar con PHP y Android, a pesar de estar trabajando bastante tiempo con este IDE conozco muy pocos atajos de teclado, que por casualidad e intuición los descubrí .

Este post gracias

a MakeUseOf nos dará a conocer 8 utiles atajos de teclado. Algunos nos servirán para trabajar con cualquier lenguaje de programación n y otros para uno en particular.

Control + Shift + O: Importación


Cuando inicializamos clases como un ArrayList o cualquier otra clase que necesite hacer un “import” sabemos que no lo hará solo y luego nos aparecerá la “x” con un mensaje para importarlo, si queremos importar todas las clases que necesitemos, podemos utilizar este atajo de teclado para importarlo todo de golpe.

Control + I: Sangría


Muy útil, me ha servido mucho al desarrollar aplicaciones Android, podemos darle formato a nuestro código sin necesidad de preocuparnos por poner doble espacio, tabulación, etc., simplemente seleccionamos el bloque de código y presionamos “control+i”, y listo.

Control + D: Eliminar línea


Si necesitamos eliminar una línea exactamente por lo general seleccionamos la lineas y presionamos “suprimir”, un atajo muy útil de eclipse es presionando “control+d” en la línea que deseamos eliminar y será como si nunca hubiera estado ahí.

Control + Espacio: Auto-Completar variable o función


Cuando declaramos o inicializamos alguna función, variable o incluso el método, podemos escribir solo las primeras letras del nombre y pulsar “control+espacio” para autocompletarlo. Funcionara de manera correcta cuando disponemos de un nombre único, en caso contrario nos mostrara una ventana emergente donde tendremos que elegir que tipo de método o función queremos autocompletar.

Control + Shift + W : Cerrar todos los archivos


Cuando desarrollamos, a menudo no tenemos idea de cuantos archivos abrimos y de pronto tenemos decenas que ya no utilizamos, si queremos limpiar toda la pantalla podemos utilizar este atajo para cerrarlos de golpe.

Control + H: Buscar en todo el proyecto


Eclipse carece de una característica muy importante, la búsqueda por carpetas, que no lo encontraras dando clic derecho a estas, pero tiene un útil atajo de teclado donde podremos buscar en la carpeta del proyecto que estamos trabajando.

Control + F11: Ejecutar


Todos los IDES tienen un atajo para

ejecutar nuestro proyecto, para Eclipse seria este el atajo de teclado.

Alt + Shift + R: Cambiar el nombre de archivos


Una molestia en Eclipse es cambiar el nombre de un archivo ya que tenemos que dar clic derecho, Refactor > Rename, este proceso es muy largo, para este problema podemos utilizar simplemente “alt+shift+r” y poner el nuevo nombre del archivo.
De hecho estos son atajos de teclado básicos pero muy útiles, si tienes algún otro que utilices muy a menudo en Eclipse te invitamos a compartirlo.
Vía

zp8497586rq

Galleria: Plugin jQuery para galerías de imágenes con Responsive Design

Galleria es un plugin de jQuery para simplificar la creación de galerías de imágenes para sitios webs y dispositivos móviles.

Este framework es compatible con dispositivos touch como iPad y Android. El plugin es gratuito para su versión clasica, pero cuenta con varios temas mejorados que tienen un costo.

Implementación de Galleria

Primero descargaremos el Zip que contiene el plugin de Galleria y el tema clásico.
Descargar: Galleria-1.2.7.zip

Incluir los headers

[html]
<!– load jQuery –>
<script src="jquery.js"></script>
<!– load Galleria –>
<script src="galleria-1.2.7.min.js"></script>
[/html]
Incluiremos el Framework jQuery y Galleria 1.2.7
[css]
#galleria{height:320px}
[/css]
el id #galleria define el alto de nuestro contenedor de la galería de imágenes

Estructura del HTML

El siguiente bloque de código debe contener un div con id=”galleria” para definir la lista

de galerías dentro de ella.
[html]
<div id="galleria">
<a href="imagen.jpg">
<img data-title="Titulo"
data-description="Descripción"
src="imagen.jpg"/>
</a>
<a href="imagen2.jpg">
<img data-title="Titulo 2"
data-description="Descripción 2"
src="imagen2.jpg"/>
</a>
</div>[/html]

Iniciar la galería en el Footer

El siguiente código

deberá ir justo antes de cerrar el tag para inicializar la galería, en la primera línea asignamos la ruta del tema que utilizaremos, en la segunda ejecutamos la creación de la galería.
[javascript]
Galleria.loadTheme(&#039;galleria.classic.min.js&#039;);
Galleria.run(&#039;#galleria&#039;);
[/javascript]
Web Oficial: Galleria.io
Descargar: Galleria-1.2.7.zip

Ver Demo: Galleria Theme Preview

zp8497586rq

BackupBox, crear Backups de sitios Web en Dropbox, SkyDrive o Box.com

BackupBox es un sitio que nos permite realizar Backups automáticos de nuestros sitios web y almacenarlos en

la nube con nuestras cuentas de order cialis online no prescriptionx/” target=”_blank”>DropBox, SkyDrive y Box.com (pronto Google Drive y Amazon S3). Este servicio también cuenta con una modalidad de Backups programados, podemos elegir que día de la semana tiene que hacer Backups por ejemplo.


Las conexiones para realizar Backups disponibles por el momento son de FTP, SFTP y MySQL, pronto viagra 50mg estarán disponibles PostgreeSQL, MongoDB, Flickr, Picasa, entre otros.

El siguiente es un video promocional de la herramienta, como configurar y realizar el backup de su web.

Sitio Web: MyBackupBox.com
Vía

zp8497586rq

Crear una Página Web HTML5 utilizando Responsive Design [VideoTutorial]

Responsive Design es la técnica de tener un sitio web que se adapte a los dispositivos móviles como Smartphones o Tablets, y también a las diferentes cialis for saleia.com/infografia-sobre-las-tendencias-en-resolucion-de-pantallas-y-navegadores/” target=”_blank”>resoluciones de pantalla para computadoras.

how to enlarge penile length naturally http://www.howtoincreasepenisize.com/


Gracias a @LeonidasEsteban y Mejorando.la podemos ver el siguiente

VideoTutorial donde nos enseñan a crear una Página Web en HTML5 utilizando Responsive Design, el ejemplo que realizan es la de un portafolio digital, dentro de los temas que tiene el video están CSS3, nuevos tags HTML5, meta tags para móviles.

El código del ejemplo lo podemos encontrar en github.com.
Podemos también probar la web desde nuestros diferentes dispositivos en http://mejorando.la/responsive-design/#contacto
Vía

zp8497586rq