Box-shadow, una de las nuevas y mejores características de CSS3

La propiedad CSS box-shadow permite a los diseñadores implementar fácilmente sombras difuminadas (tanto exterior o interior) en casi cualquier elemento (principalmente de caja – div), especificando los valores para el color, el tamaño, desplazamiento entre otras características.

Sintaxis

box-shadow: [ color | offset-x | offset-y | blur-radius | spread-radius | inset ]

Ejemplo:

.shadow {
box-shadow: rgba(220,220,220,.65) 3px 3px 10px 5px inset;
}

Valores


1º Valor: color de la sombra
Se puede elegir expresarlo en cualquiera de las forma permitidas (hexadecimal o rgba).  En el ejemplo, la expresada en valor rgba (rgb+canal alpha de trasnparencia)
Y en caso de no declarar un valor del color, toma el de la propiedad color.
2º Valor: Desplazamiento horizontal de la sombra (offset)
Puede ser un valor positivo o negativo y estar expresado en cualquier unidad de longitud que permite css. Expresa el desplazamiento horizontal de la sombra creada. Un valor positivo: sombra a la derecha. Negativo: hacia la izquierda. La posición de la sombra es creada con relación a la posición del elemento al que se aplica.
3º Valor: Desplazamiento vertical:
Aplica lo mismo que en el anterior, pero en sentido vertical. Valor positivo hacia abajo, negativo hacia arriba.
4º Valor: radio de desenfoque
En inglés “Blur Radius”. Es opcional. El radio de desenfoque define la dureza o suavidad de la sombra. Cuanto menor sea el valor, más nítida la sombra. Un valor alto creará un desenfoque grande. Admite cualquier valor, pero los negativos son interpretados como Cero (0).
5º Valor: Distancia de propagación (opcional).
Otro valor de la longitud, puede ser positivo o negativo, y define hasta donde se propagará la sombra (más allá de lo definido por offset). Un valor negativo hará que la sombra sea más pequeña, más comprimida.
6º Valor: Inset/outset (opcional)
Dos posibles valores, siendo outset el valor por defecto. Esta propiedad marca hacia dónde se creará la sombra. Inset: se crea en el interior del elemento, outset por fuera de él. Se puede declarar al inicio o al final, si se intercala entre los demás valores se anula la declaración.

Compatibilidad con navegadores

Lo cierto es que las CSS 3 todavía están en fase de especificación, aunque ya se encuentran muy avanzadas y los navegadores más modernos ya han comenzado a implementarlas. No obstante, el W3C todavía no ha liberado las especificaciones de esta versión de CSS y hasta que empiece a recomendar su implementación los clientes web basados en Gecko y WebKit tienen soporte a esta funcionalidad de CSS3, pero a través de prefijos.
Para Opera podemos utilizar box-shadow en las versiones más moderas,  sin ningún inconveniente.

Atributo box-shadow para navegadores basados en motores de renderizado Gecko, como Firefox:  De manera temporal, Firefox es capaz de interpretar el atributo -moz-box-shadow, por ejemplo:

-moz-box-shadow: #090 1px 1px 0px;

Atributo box-shadow para navegadores basados en moteres de renderizado WebKit, como Safari o Google Chrome: En estos momentos y de manera temporal, navegadores como Chrome o Safari entienden el atributo: -webkit-box-shadow, por ejemplo:

-webkit-box-shadow: #fc8 3px 3px 1px;

Como podremos imaginar, si deseamos ampliar al máximo la compatibilidad con box-shadow, necesitaríamos indicar tanto el propio atributo box-shadow, así como -moz-box-shadow y -webkit-box-shadow para que funcione en las versiones actuales de Firefox, Safari, Chrome, etc.

En el caso de Internet Explorer, de manera nativa solo es interpretado a partir de la versión 9 en adelante. Si se quiere hacer efectos de sombra en versiones inferiores del IE, se puede hacer uso de filtros específicos de Microsoft (Shadow Filter), pero no es la mejor ni la más recomendada práctica.

Ejemplo:

.shadow {
box-shadow: #111 3px 3px 4px ;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Color='#111111', Strength=4, Direction=135)";
/* IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Color='#111111', Strength=4, Direction=135);
}

Generadores online

Estos son solamente algunos:

http://css3gen.com/box-shadow/
http://westciv.com/tools/boxshadows/index.html

Referencia oficial W3C

http://www.w3.org/TR/css3-background/#the-box-shadow

Anuncios

Aplicaciones gratuitas de Android para desarrolladores

Debido al incremento de los dispositivos móviles que vienen con el sistema operativo Android, se requiere tener conocimiento de todo lo que podemos hacer desde nuestro móvil, en esta ocasión un listado de aplicaciones útiles para los desarrolladores Web.

  1. AndFTP, aplicación que permite realizar conexiones de tipo: FTP, SFTP, SCP, FTPS, actualmente se encuentra en la versión 2.9.9.4, para los desarrolladores esta herramienta permite realizar correcciones actualizaciones de último momento.
    andFTP - FTP server settingsandFTP - Uploading fileandFTP - File browser
    Link Google Play Link del desarrollador
  2. Google Analytics, herramienta para ver en tiempo real las estadísticas de sitios Web y su cambio en función al tiempo, como desarrollador Web esta herramienta es de vital importancia para mantenernos al tanto de las visitas a nuestros sitios Web.
    Google Analytics - Sitios recientesGoogle Analytics - visitantesGoogle Analytics - Panel de control
    Link en Google Play
  3. View Web Source, esta app permite visualizar el contenido HTML de cualquier sitio Web para un análisis rápido, los dispositivos móviles incrementan la capacidad en cuanto velocidades además de mejores navegadores por lo cual esta herramienta se ajusta perfectamente para revisar los sitios Web propios o de terceros mientras estamos fuera de la oficina.
    View Web Source - ingresar URLView Web Source - contenido HTML
    Link en Google Play
  4. WordPress, aplicación práctica para publicar artículos desde tú dispositivo móvil, también permite gestionar los artículos de tú blog y revisar las estadísticas de los mismos, esta herramienta también nos permite crear en borrador nuestros artículos para luego publicarlos en nuestro Blog.
    Wordpress - Panel principalWordpress - Pantalla de publicaciónWordpress - Listado de artículos
    Link en Google Play
  5. Joooid, herramienta para manejar y publicar contenido en tú instalación de Joomla, si desconfías de la versatilidad de esta aplicación puedes probarla con una cuenta demo que tiene configurada por defecto.
    joooid - Inicio de sesiónjoooid - Listado de artículosjoooid - Geo localización para un artículo
    Link en Google Play

Espero que lo disfruten, saludos.

Libertad Tecnológica

En nuestros días las tecnologías informáticas tanto por sus avances y difusión han atravesado continuamente una variedad de cambios, instaurándose como un tronco inamovible en nuestra cultura popular. No podemos ignorar que todos participamos de esta cultura digital y que una de sus formas mayor y socialmente aceptadas nos indicaba que su uso siempre debía responder a los caprichos del productor o desarrollador de dicho software. Vivimos en una sociedad acostumbrada al software privativo (de propiedad), la mayoria de las personas estamos acostumbradas a usar este tipo de software, muchas veces no por elección propia sino por influencia externa o porque se nos es dado, es lo predeterminado en nuestros hogares, escuelas y universidades. Este motivo hace que muchos desconozcan los beneficios del software libre, ignorándose nuestra libertad tecnológica vivimos sometiéndonos a lo que se predispone para nosotros. En todo caso, aquí hacemos referencia al paradigma aún vigente del software privativo y restrictivo.

La óptica del software libre, contraría a lo antes mencionado, discute aquél paradigma imperante aclarándonos que la tecnología no es algo exclusivo de algunos y pocos, rectificando que su presencia involucra tanto nuestra vida diaria como cualquier quehacer . El software libre respeta la libertad inherente de todo usuario cual sea su aproximación a la tecnología informática. Dicho en otras palabras, somos todos participantes en su desarrollo y no podemos ignorar que somos parte directa o indirecta de esta cultura digital.

El software libre se caracteriza por ser una filosofía de vida con respecto al conocimiento y el desarrollo del software, promueve a los estudiantes de cualquier situación a que lean el código fuente, aprendan tanto como quieran  y esten dispuestos. Asimismo, incentiva a que todos puedan aprender, rechazando asi el «sacerdocio de la tecnología» como aquella exclusividad que nos amordaza y amenaza con sumergirnos en la ignorancia, y, que a su vez nos hace más dependientes de éste. El software libre le permite al usuario la libertad de estudiar cómo el programa funciona, pues le da acceso al código y le permite escribir código adicional: testearlo, modificarlo y distribuirlo… Estas cosas son prohibidas en el uso y desarrollo de software privativo.

Por esto que es importante analizar los beneficios, los pros y los contras de lo que hacemos y utilizamos tecnologicamente, sea cual sea el papel en el que actuamos en este circulo tecnológico; pero muy aparte de analizar los multiples beneficios que el software libre puede tener en nuestra educación, el punto de partida debería ser individual como usuarios participantes de esta cultura digital, analizando ¿Esto me provee lo que necesito?,¿Sigue mi ideologia?¿Satisface mis necesidades como usuario ?, ¿Por qué no intentar cosas nuevas? De modo que asi sepamos el porqué de lo que escogemos y cuál es su función en nuestras vidas..

Libertad tecnológica probablemente el beneficio más grande que nos provee el software libre.

Manejador de contenidos TYPO3

Typo3 es un CMS o manejador de contenidos, que se utiliza a nivel internacional para construir y administrar sitios web de todo tipo, desde pequeños sitios para las organizaciones no lucrativas a las soluciones empresariales multilingües para las grandes corporaciones.

Typo3 como aplicación Web basada en estándares

Este CMS funciona sin ningún problema en la mayoría de los servicios de alojamiento estándar que cuenten con un servidor LAMP (Linux, Apache, MySQL, PHP). Cuenta con un sistema de seguridad basado en usuarios con diferentes niveles de acceso o permisos (editores, administradores, etc) solo necesita un navegador para acceder a la sección de administración back-end.

¿Que tan manipulable es para un desarrollador?

Cuenta con un API, que ofrece flexibilidad ilimitada al permitir a los desarrolladores ampliar la funcionalidad y añadir nuevos tipos de elementos de contenido que utilizan prácticas de programación estándar como MVC (modelo-vista-controlador), ya se puede encontrar una solución para casi cualquier necesidad en el repositorio de extensiones, estas soluciones son similares a los módulos usados en Joomla.

Requisitos de Instalación

Estos son los requisitos mínimos que debe cumplir el servidor donde se alojara TYPO3

  • Sistema operativo: Unix (por ejemplo, Linux), Windows o Mac.
  • Servidor web: Apache, IIS
  • Middleware: PHP
  • paquetes requeridos
    • GraphicsMagick (independiente) o ImageMagick
    • GDlib / Freetype (compilado con PHP)
    • zlib (compilado con PHP)
    • Apache con mod_gzip / mod_rewrite
    • A PHP-cache (por ejemplo APC / PHP acelerador / acelerador de Zend, sólo UNIX)
  • Base de datos: MySQL o cualquier otro sistema de base de datos soportado por el DBAL TYPO3 (por ejemplo, Oracle, PostgreSQL, etc)
  • Hardware: al menos 256 MB de Ram. Al igual que con todas las aplicaciones basadas en bases de datos, más memoria RAM es recomendable.

¿Qué apoyo tiene Typo3?

TYPO3 es apoyado por una gran comunidad de desarrolladores y usuarios en todo el mundo, lo que significa que como desarrolladores no les será difícil conseguir apoyo en una biblioteca de documentos y videos tutoriales, la mayor parte de esta documentación se encuentra en su sitio oficial.

Licencia que usa TYPO3

TYPO3 se publica bajo licencia GLP, lo que significa que no hay derechos de licencia o costos de actualización en el tiempo. Para las grandes empresas, esto significa más dinero se puede gastar en formación o personalización donde hará la mayor diferencia. La naturaleza de código abierto de TYPO3 también significa que los problemas o errores se fijan más rápido por la comunidad, los sitios de TYPO3 son menos vulnerable a los agujeros de seguridad conocidos.

Instalación

El proceso de instalar TYPO3 en un proveedor ISP es una tarea titánica, sino se tiene acceso al shell. El proceso de instalación no es amigable como lo es Joomla por ejemplo. Si tu ISP no soporta conexiones persistentes de MySQL (mysql_pconnect), o sea, la mayoría, deberás editar todos los archivos que hablen de dicho comando, y reemplazarlo por mysql_connect.

Recomiendo realizar la instalación sobre un servidor LAMP.

¿Que paquete descargar e instalar?

En la pagina oficial de TYPO3 se halla al menos 4 paquetes diferentes para descarga he instalación, mencionare los mas comunes encontrados en la versión mas reciente 4.7 para su descarga:

  • Introduction Package: Este paquete contiene una versión de prueba del CMS con un template por defecto y una licencia de tipo CC BY-NC-ND licencia por lo tanto no debe ser utilizado con fines comerciales. Si no cuenta con mucho tiempo para instalarlo en su servidor, puede usar la versión de prueba  http://demo.typo3.org.
  • Government Package: Su propósito es demostrar HTML5 en el Frontend y características de accesibilidad. El demo del paquete gobierno se encuentra en esta dirección http://government. v4.demo.typo3.org /
  • Blank Package: Esta es la fuente de TYPO3 y un sitio de esqueleto. Este es el paquete que se debe descargar si se desea construir un nuevo sitio desde cero.
  • Source: Contiene la fuente de TYPO3.Descárguelo para actualizar su TYPO3 a una nueva versión.
  • Source + Dummy: El paquete contiene la fuente de TYPO3 y la estructura básica de un sitio. Descargue este paquete si se quiere construir un sitio desde cero.
  • Dummy: Esto es sólo la estructura básica de un sitio. Descárguelo si ya tiene la fuente de TYPO3 y sólo quiere crear un nuevo sitio.

Redirección de dominio con tu htaccess

Direccionamiento de dominio con tu Htaccess 

Para no perder nuestro ranking y visitas de los buscadores. lo mas recomendable, si tienes acceso a tu archivo .htacces  es realizar el direccionamiento por este medio, el direccionamiento 301 es la recomendada para dicho proceso.

Para que sirve esto ?

Esto sirve para lograr el direccionamiento de tu Web y se deberia emplear la redireccion cuando el dominio del sitio se muestre de manera inadecuada o erronea en el browser  de la siguiente forma ejemplo. (http://misitio.com/) cuando en realidad debería de llevar “www” delante del dominio.

ejemplo: La siguiente url en el browser

http://misitio.com/  modificar y tenerlo adecuadamente como  http://www.misitio.com/

Para todas las re-direcciones tendrá que estar el mod_rewrite de apache activado en los casos en los que se use Rewrite y deberás tener acceso al archivo htaccess para poder modificarlo en cualquier caso.

Como realizar el direccionamiento  ?

En el archivo htaccess simplemente se debe adicionar la siguientes lineas de código de la siguiente manera:


Archivo htaccess
RewriteEngine On
RewriteCond %{HTTP_HOST} ^misitio.com$ [NC]
RewriteRule ^(.*)$ http://www.misitio.com/$1 [R=301,L]

Ventajas en el direccionamiento de dominio

  • El no perder nuestro ranking y visitas de los buscadores y
  • Tener de manera correcta nuestro dominio en el browser.
  • Evitarse el modificar código del sitio.

Quienes deberían de hacer esto ?

Esta modificación las pueden realizar los administradores de sistema como también programadores o personas con pocos conocimientos de programación.

OPEN FLASH CHART 2 CON PHP Y MYSQL

OPEN FLASH CHART

Open flash Chart es una herramienta de código abierto (Open Source) liberado bajo licencia GPL, que te permite hacer gráficas en Flash a partir de datos en tu aplicación.

Tiene diversos tipos de usos y tiene librerías para utilizar integrar el sistema de gráficas Flash con la carga de datos en diversos lenguajes de programación web como PHP, .NET, Perl, Java, Python, Rubi y Google WebToolkit.

Lo más destacable para los desarrolladores que pretendan utilizar la segunda versión de Open Flash Chart es que la carga de datos se realiza por JSON, una notación especial de Javascript para la definición de objetos.

En las gráficas podrás cargar los datos que desees y elegir entre varios tipos de gráficas, colores, textos, etc.

EJEMPLO: GRÁFICA A PARTIR DE DATOS DE UNA BASE DE DATOS MYSQL

Como ejemplo de esta herramienta, vamos a realizar una gráfica con datos de empleados clasificados por el número de empleados que existe por cada departamento.

Paso 1 – Instalación de los archivos

  • Descomprimir y copiar todos los ficheros en una carpeta open_flash_chart2.
  • Copia la carpeta open_flash_chart2 en tu sitio web de prueba. Por ejemplo:

directorio open flash chart2

  • Podemos eliminar los archivos que no vamos a utilizar:

Archivos necesarios de la herramienta Open Flash Chart

Paso 2 – Creación de la base de datos

  • Vamos a crear la tabla “empleados” la estructura de la misma es:

CREATE TABLE empleados (
idempleado int NOT NULL auto_increment,
nombres varchar(32) NOT NULL,
departamento varchar(40)NOT NULL,
sueldo double,
KEY id(idempleado) ) ;

  • Ahora vamos a insertar algunos datos a la tabla:

INSERT INTO empleados VALUES (1, 'Juan Perez', 'Informatica',500.00);
INSERT INTO empleados VALUES (2, 'Laura Morales', 'Contabilidad',550.00);
INSERT INTO empleados VALUES (3, 'Luis Gutierrez', 'Administracion',850.00);
INSERT INTO empleados VALUES (4, 'Pedro Solar', 'Informatica',500.00);
INSERT INTO empleados VALUES (5, 'David Vilchez', 'Contabilidad',550.00);

Paso 3 – El código

  • Comenzaremos creando un nuevo fichero .php en el directorio “graficas” en el que realizaremos la conexión a base de datos, manipulación de datos y la configuración de la gráfica; para ello guardaremos el archivo como graficaEmpleado.php.
  • Primero, como vamos a usar la clase chart para construir los gráficos, vamos a realizar la siguiente declaración en nuestro archivo graficaEmpleado.php:

<?php
include('open_flash_chart2/php-ofc-library/open-flash-chart.php');
?>

  • Ahora vamos crear la clase graficaEmpleado y adicionar dos funciones para hacer la conexión y consulta a la base de datos, para obtener los datos para generar el grafico.

<?php
include('open_flash_chart2/php-ofc-library/open-flash-chart.php');
class graficaEmpleado {
public function conectar() {
if (!($con = @mysql_connect("localhost", "root", "admin"))) {
echo"Error al conectar a la base de datos";
exit();
}
if (!@mysql_select_db("tutorial", $con)) {
echo "Error al seleccionar la base de datos";
exit();
}
$this->conect = $con;
return true;
}
// consulta los empleados de la BD
public function consulta() {
//usamos el metodo conectar para realizar la conexion
if ($this->conectar() == true) {
$query = "
SELECT COUNT(departamento) AS numero, departamento
FROM empleados GROUP BY departamento";
$result = @mysql_query($query);
if (!$result)
return false;
else
return $result;
}
}
}
?>

  • Adicionamos la función graficaPorDepartamento() al archivo graficaEmpleado.php, donde generamos un array con los datos a graficar, luego definimos y realizamos las configuraciones necesarias para obtener el grafico.

public function graficaPorDepartamento() {
$label = array();
$data = array();
$consulta = $this->consulta();
while ($row = mysql_fetch_array($consulta)) {
#almacenamos los registros en arrays
$label[] = $row['departamento'];
$data[] = intval($row['numero']);
}
$max = max($data);
$max = floor($max / 10) * 10 + 10;
// definimos el titulo
$title = new title('EMPLEADOS POR DEPARTAMENTO');
// definimos los estilos para el texto titulo
$title->set_style('{font-size: 16px; color: #000;font-weight:bold;}');
$animation = 'pop';
$delay = 0.1;
$cascade = 0.5;
//tipo de gráfica, en este caso forma de cilindro
$bar = new bar_cylinder();
$bar->colour('#0033ff');
//definicion del texto para la leyenda del grafico
$bar->key('DEPARTAMENTOS', 12);
//asignamos los datos
$bar->set_values($data);
//definimos el texto para el tooltip
$bar->set_tooltip("TOTAL: #val# Empleados");
$bar->set_on_show(new bar_on_show($animation, $cascade, $delay));
//instanciamos un objeto de la clase open_flash_chart
$chart = new open_flash_chart();
$chart->set_title($title);
//definimos configuraciones para las etiquetas del eje x
$x_labels = new x_axis_labels();
$x_labels->set_vertical();
$x_labels->set_labels($label);
$x_labels->rotate(50);
//asignamos configuraciones para las etiquetas del eje x
$x_axis = new x_axis();
$x_axis->set_labels($x_labels);
//asignamos configuraciones para las etiquetas del eje xy
$y = new y_axis();
$y->set_range(0, $max, 10);
$y_legend = new y_legend('CANTIDAD DE EMPLEADOS POR DEPARTAMENTO');
$y_legend->set_style('{font-size: 12px; color: #000}');
$chart->set_y_legend($y_legend);
//definicion y configuracion de las etiquetas de las barras
$tags = new ofc_tags();
$tags->font("Verdana", 15)
->colour("#000000")
->align_x_center()
->style(true, false, false, 1)
->text('#y#');
$x = 0;
foreach ($data as $v) {
$tags->append_tag(new ofc_tag($x, $v));
$x++;
}
$chart->set_x_axis($x_axis);
$chart->set_y_axis($y);
$chart->add_element($bar);
$chart->add_element($tags);
$chart->set_bg_colour('#FFFFEE');
return $chart->toString();
}

Paso 4 – La vista

  • Vamos a crear un nuevo fichero .php en el directorio “graficas” en el que realizaremos la llamada a la clase graficaEmpleado; para ello guardaremos el archivo como index.php.
  • El directorio del ejemplo se vería así:

Directorio del ejemplo

  • En el archivo index.php, agregar el siguiente código, donde instanciamos un objeto de la clase graficaEmpleado y llamamos a la función graficaPorDepartamento().

<?php
include_once("graficaEmpleado.php");
$obj = new graficaEmpleado();
$chart = $obj->graficaPorDepartamento();
?>

  • Para incluir en una página web el grafico, tenemos que llamar a la función open_flash_chart_data() para cargar los datos y convertirlos en formato JSON, modificar el archivo index.php con el siguiente código:

<?php
include_once("graficaEmpleado.php");
$obj = new graficaEmpleado();
$chart = $obj->graficaPorDepartamento();
?>
<html>
<head>
<script type="text/javascript" src="open_flash_chart2/js/json/json2.js"></script>
<script type="text/javascript" src="open_flash_chart2/js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF(
"open_flash_chart2/open-flash-chart.swf", "div_chart",
"620", "460", "9.0.0", "expressInstall.swf");
</script>
<script type="text/javascript">
function open_flash_chart_data(){
return JSON.stringify(data);
}
var data = <?php echo $chart; ?>;
</script>
</head>
<body>
<h1>EMPLEADOS</h1>
<div id="div_chart"></div>
</body>
</html>

Paso 4 – Resultado

  • El resultado del ejemplo es el siguiente:

Grafico generado con Open Flash Chart 2

 

HTML5

¿Que es HTML5 ?

HTML5 es la actualización de HTML, el lenguaje en el que es creada la web. La versión anterior y más usada de HTML, HTML4, carece de características necesarias para la creación de aplicaciones modernas basadas en un navegador. El uso fuerte de Javascript ha ayudado a mejorar esto, gracias a frameworks como jQueryjQuery UISproutcore, entre otros.

HTML5 es capaz de realizar efectos esto sin necesidad de plugins y con una gran compatibilidad entre navegadores.

HTML4 y HTML5 son 100% compatibles entre sí.

Las principales etiquetas HTML5 nuevas no tienen una representación especial en pantalla. Todas se comportan como un <div> o un <span>. Pero cada una tiene un significado semántico superior a un simple div o span.

En el siguiente gráfico hacemos una comparación con respecto a lo que se utilizaba antes y como se utiliza actualmente una estructura en html5.

A continuación una breve descripción del uso de las etiquetas más importantes en HTML5.

<header>

Hacer cosas como <div id=”header”> ya no es muy aconsejable cuando el 99% de los proyectos web tienen una cabecera. <header> está diseñada para reemplazar la necesidad de crear divs sin significado semántico.

<hgroup>

Muchos headers necesitan múltiples títulos, como un blog que tiene un titulo y un tagline explicando el blog. <hgroup> permite colocar un h1, h2 y h3 dentro del header sin afectar el SEO, permitiendo usar otro h1 en el sitio.
En el HTML actual, sólo puedes usar h1 una vez por sitio o el h1 pierde prioridad de SEO.

<nav>

Igual que <header>, <nav> está diseñado para que ahí coloques la botonera de navegación principal. Puedes colocar cualquier etiqueta dentro, aunque lo recomendado es usar listas <ul>.Sólo puedes tener un <nav> por página.

<section>

Define un área de contenido única dentro del sitio. En un blog, sería la zona donde están todos los posts. En un video de youtube, habría un section para el video, uno para los datos del video, otro para la zona de comentarios.

<article>

Define zonas únicas de contenido independiente. En el home de un blog, cada post sería un article. En un post del blog, el post y cada uno de sus comentarios sería un <article>.

<aside>

Cualquier contenido que no esté relacionado con el objetivo primario de la página va en un aside. En un blog, obviamente el aside es la barra lateral de información. En el home de un periódico, puede ser el área de indicadores económicos.

<footer>

Este es el pie de página y todo lo que lo compone.

Atención: div no está muerto :

Estas nuevas etiquetas no significan que ya no se use <div>. Div siempre debe usarse cuando necesites una caja con objetivos de diseño gráfico o cualquier cosa que no tenga significado semántico. Sólo usa las etiquetas semánticas de HTML5 donde sean necesarias.

Las etiquetas nuevas “importantes” de HTML5

Las etiquetas semánticas, a pesar de ser claves para posicionamiento en buscadores y buen desarrollo web, no son la razón por la que todo el mundo habla de HTML5. Video, audio y animación vectorial están en la lista de prioridades y en la boca de todas las personas que evangelizan su uso. Específicamente, las nuevas etiquetas son:

<video>

Inserta video sin necesidad de plugins. Es muy fácil usarla, pero cada navegador soporta codecs diferentes de video, lo que hace necesario recodificar un video en múltiples codecs.

<audio>

Lo mismo que video, pero sin video. Puede usar múltiples formatos, en especial mp3, pero también depende del navegador.

<input *>

Input ya existía como la etiqueta para insertar cajas de texto y botones. Ahora es más poderosa, con la capacidad de insertar cajas tipo “email” que se autovalidan, calendarios tipo “date”, sliders, números, entre otras.

<canvas>

Un área de dibujo vectorial y de bitmaps con Javascript. Es un API de dibujo entero para Javascript.

<svg>

Una etiqueta, igual que <img>, para insertar dibujos y animaciones vectoriales al estilo de Flash. Todo basado en el estándar abierto SVG (Scalable Vector Graphics), derivado de XML.

Nuevas capacidades de CSS3

Diseñar en CSS ha sido una mezcla entre risas de victoria y gritos de ira. No sólo por la falta de compatibilidad con IE, sino porque cosas como bordes redondeados en tamaños dinámicos requiere múltiples divs, estilos y cuatro PNGs diferentes (o un sprite) en el mejor de los casos. Ya no más, CSS3 es hermoso y trae para ti opciones que hacen el diseño mucho más fácil.

@font-face

Es la capacidad de usar CUALQUIER FUENTE EN HTML. Sin necesidad de Flash, Cufon, SiFR u otras cosas de hippies. ¿Saben qué otra cosa? Esto funciona perfecto desde Internet Explorer 6 para arriba ¿Y saben qué más? NADIE LO USA.
¿Como funciona? Pilla un archivo de tipo de fuente ttf o otf, mételo aquí fontface.codeandmore.com o aquí www.fontsquirrel.com/fontface, coge los archivos

Luego usando los selectores CSS, asigna un estilo font-family con los atributos ‘BebasNeueRegular’, arial (incluimos arial por si por alguna casualidad no funciona el font-face, la fuente para el elemento asignado sería la arial), esto se quedaría así: font-family: ‘BebasNeueRegular’, arial;.

Podéis ver los navegadores compatibles con @font-face aquí.

Selectores CSS

¿Te ha tocado hacer un diseño donde una lista o tabla tiene algunas líneas o celdas en fondo blanco y los otros en fondo gris? Como una cebra. Antes, la única forma era hacerlo a mano o con un script del lado del server. Ahora, con CSS3, sólo tienes que especificar un color para “odd” y otro para “even” y listo, usando el selector :nth-child(elementos):

Con este CSS haremos que las tablas o listas con la clase cebra asignada salgan todas con la primera linea con fondo blanco, la segunda con fondo gris, la tercera con fondo blanco, la quarta con fondo gris etc…

Igualmente, puedes crear estilos para el primer elemento y otro para el último (:first-child y :last-child respectivamente). O estilos para etiquetas iguales con ciertos atributos diferentes en HTML (elemento[id=”loquesea”] o elemento[id^=”loque”] para seleccionar elementos que tengan el atributo id que empiece con loque). Y esto es muy compatible desde IE8.

Columnas de texto

¿Sabes cómo se hacía antes que varios párrafos de texto se dividiera en columnas con HTML?

No se podía. Ahora sólo requieres un atributo CSS para lograrlo. Y puedes controlar la cantidad de columnas, el espacio entre ellas, lineas de separación, etc.

Opacidad, transparencia, canales alpha, contraste, saturación y brillo

Autodescriptivo. Vuelve lo que quieras transparente u opaco con una instrucción. Imágenes, textos, sombras, bordes, lo que sea. O si quieres convertir una foto en blanco y negro o sepia, lo puedes hacer con sólo CSS.

Animaciones de transición y transformación

Las animaciones que antes lograbas con jQuery o Javascript ahora pueden ser logrados sólo con CSS. Con una ventaja adicional, al hacerlo con CSS, las animaciones vendrán aceleradas por hardware. Mucho más veloces, sobre todo en dispositivos móviles.

Bordes redondeados

Sí. Con una instrucción puedes hacer que cualquier caja tenga bordes redondeados como quieras. Olvídate de crear múltiples divs, cortar pngs y otros temas arcaicos.

Reflecciones, gradientes y sombras

Si no has superado la web 2.0, puedes poner reflecciones a cualquier elemento HTML. Pero lo interesante es crear gradientes para fondos y sombras para cajas o texto, todo en una sola linea de código y con el mismo nivel de complejidad que logras con una sombra en Photoshop o Fireworks.

APPI’s EN HTML5

La mayoría de los navegadores no soportan la funcionalidad que se quiere utilizar. Aquí una lista de alguno APIs más populares de HTMl5 ya podemos implementar de alguna u otra forma en nuestros proyectos  este plugin nos proporciona la tecnología para tener las nuevas funcionalidades de HTML5 en aquellos navegadores que no las soportan de forma nativa.

1. classList

Ya que classList es una funcionalidad relativamente nueva de HTML5, no funciona en los navegadores más viejos, pero esto no debería preocuparnos ya que existe una polyfill llamada classlist.js. Aunque si estamos usando alguna librería javascript como jQuery, no necesitaremos esta API de forma nativa.

2. dataset

elem.dataset no es soportado por Internet Explorer ni por los navegadores móviles más antiguos. Para todos los navegadores no hay problema en utilizar atributos data-*. Pero lo que no conviene que usemos es elem.dataset.foo para obtener su valor en javascript, en vez de esto utilicemos elem.getAttribute(‘data-foo’). La polyfill que existe para esta API es HTML5 dataset support

3. DOM

Actualmente, un gran conjunto de las nuevas funcionalidades sobre el DOM puede ser “corregido”. Sin embargo, los “shims” o “correctores” actuales no están probados en un 100% y se pierden algunas funciones. Los polyfills existentes (ES5-DOM-shim y DOM-shim) se deben usar con precaución. Igual hay que recordar, que podemos utilizar cualquier librería que manipule el DOM como jQuery que posee selectores y funciones muy potentes como las nativas de HTML5. He escrito un artículo en este sitio sobre esta API y su relación con los selectores de jQuery.

4. Drag and Drop

La funcionalidad de Drag and Drop se ha estandarizado en HTML5 basandose en la implementación original de Internet Explorer (¡si, de IE!). Es por esto que ya tiene un soporte bastante amplio, pero muchos se sienten frustrados cuando usan este API. Por eso, se recomienda usar jQuery UI Draggable (u otra librería Javascript). Las polyfills recomendadas: dropfile, fileSaver, jDataView.

5. EventSource

Eventos enviados por el servidor (Server-Sent Events) son eventos en tiempo real emitidos por el servidor y recibidos por el navegador. EventSource.js provee de una alternativa y no depende de jQuery. Los polyfills que se recomiendan son EventSource.js, jQuery.eventsource

Sitios de uso general que ya están usando HTML5

Esta es una lista corta de sitios que ahora mismo, en producción, usan HTML5. Si conoces más,por favor compartelos en los comentarios y los voy agregando a la lista, con tus créditos.

Twitter y m.twitter.com

Casi todo el diseño de las versiones desktop y móvil de Twitter usan intensivamente CSS3. En especial por los bordes redondeados. En la versión móvil de Twitter se usa geolocalización sumado a Google Geolocation Services para geolocalizar los tweets.

Gmail.com

Gmail usa Web Storage para guardar en el disco del usuario los correos más recientes. Así puedes acceder a ellos temporalmente si se cae la conexión. También usa Drag and Drop para arrastrar y soltar archivos adjuntos, entre otras habilidades de CSS3 para diseño.

Scribd.com

Scribd es un servicio que convierte cualquier PDF, PPT o PSD en HTML plano, con texto seleccionable y rendereado en el navegador, gracias en especial a @font-face y SVG.

Facebook

Las versiones móviles y desktop de Facebook hacen un uso intensivo de CSS3 para diseño y animaciones, así como de Web Sockets (o Pubsubhubbub) para las notificaciones de actividad y el chat. Muchas apps de Facebook usan otras capacidades.

¿Por qué utilizar HTML5 y CCS3 para el sitio web de mi negocio?

Las respuestas pueden ser varias, pero probablemente la más importante es que nos permite obtener resultados que antes simplemente no eran posibles, por ejemplo:

  • Sitios web de alto impacto visual amigables con iPhone, Ipad tablets  y otros dispositivos móviles.
  • Sitios web llamativos y modernos que al mismo tiempo puedan optimizarse para alcanzar excelentes posiciones en Google y otros buscadores.
  • La tecnología Flash tradicionalmente ha sido una excelente opción para desarrollar páginas web cuando la parte visual es prioritaria, sin embargo actualmente tiene serias desventajas respecto a HTML5 tanto en compatibilidad con móviles como en posicionamiento en buscadores (SEO).
  • Con HTML5 además es posible reproducir de forma nativa en el navegador audio y video, entre otros elementos que hasta ahora sólo era posible incorporar mediante el uso de plugins (como Flash o QuickTime). Esto evita las desventajas que el uso de plugins puede traer en compatibilidad, rendimiento y seguridad.
  • Además HTML5 permite mejorar la “semántica” de los sitios que lo utilizan, es decir, que los sitios estarán mejor dotados para “explicarle” a los buscadores y agregadores el significado de su contenido, permitiendo que la indización de los documentos sea más certera.
  • Por su parte, CSS3 es el compañero inseparable de HTML5 y es el lenguaje que verdaderamente se encarga de que las cosas “se vean bonitas”. CSS3 permite lograr estilos y efectos visuales que antes sólo eran posibles por medio de tecnologías adicionales.
  • HTML5 no sólo sirve para hacer páginas web en el sentido tradicional, sino también permite hacer desarrollo de aplicaciones complejas que funcionen tanto en computadoras de escritorio como en dispositivos móviles de diferentes marcas.
  • Por supuesto, un sitio hecho en HTML5 y CSS3 coloca a la vanguardia frente a tus competidores.

FUENTES:

Que es GTD y como facilita tu vida

Que es GTD?

Getting Things Done; o más conocido como GTD, es un sistema de prioridad presentado por el Autor David Allen publicado en el 2002 para mejorar la productividad.

Pero que es lo que lo hace tan maravilloso?

Simplemente la idea de organizar las tareas por prioridades y tener siempre las tareas marcadas para el día siguiente. Recuerda, no puedes hacer todas las tareas puesto que el tiempo es limitado. Necesitas verificar tus prioridades, sacar de tu cabeza las ideas y plasmarlas a papel u otro medio donde no se pueda olvidar y tengas siempre presente que aún no se a completado este objetivo.

Todas tus tareas son objetivos que te trazas, un objetivo siempre debe ser cumplido con la mayor satisfacción posible.

  1. Recopilar: Introduce tus ideas en un solo listado.
  2. Procesar: comprueba, separa, necesitas que otra tarea este realizada antes, etc. Si en este proceso encuentras algo que se puede hacer al momento, hazlo.
  3. Organizar: Verifica las prioridades, el tiempo para una tarea puede ser imprescindible para que le asignes mas prioridad.
  4. Revisar: Comprueba siempre el estado de tus tareas, plantéate tareas para terminar el día de hoy. Necesitas tener coraje y disciplina para afrontar tus retos impuestos, Conclúyelos!!.
  5. Hacer: No te satures con muchas tareas, realiza las que te propusiste para el día de hoy.

Cuales son tus Herramientas?

Físico, No necesitas nada mas que un papel donde escribir tus ideas (una agenda seria mucho mas adecuado para darle el orden necesario)

Digital

Escritorio, existen varias alternativas para escritorio pero las que resaltare explotarán más tu productividad porque tienen conexión a Internet y tendrás tus tareas siempre en la nube. Las ordeno en cuanto yo considero me fueron más útiles

  • Google Task (Te brinda una herramienta sencilla para agrupar tus tareas organizarlas por grupos y recientemente poder mostrarlas en tu calendario. Si tienes un dispositivo móvil con Android seguro que esta es la que más se te ajusta)
  • Google Drive (Esta opción la pongo a consideración puesto que la calidad del “Google Calc” es impresionante y tu mismo en tu hoja de cálculos puedes generar tu template para manejar tus tareas, además  puedes personalizar scripts para marcados y filtros. Template de googleDocs
  • Producteev (Otra herramienta que ayuda a organizar proyectos y tareas de forma simple tiene aplicaciones para web y escritorio)
  • Astrid (Bastante bueno y con conexión a tareas de Google Task, en aplicaciones para android encuentras versión libre y de pago)
  • Task Coach (Herramienta offline que permite organizar tus tareas en forma de árbol y también darle prioridades)
  • EverNote (Existe aplicación de escritorio, navegador y app android y iphone, es muy popular últimamente por tomar todo el contexto de una nota imágenes, videos y texto)

Dispositivo Móvil, 

  • Google task, Nativo de android sincroniza tus tareas con android.
  • wunderlist Organiza tareas en app y también tiene opción en navegador.
  • Any.DO (Interfaz más simple con muchas opciones touch para completar las tareas y ordenarlas).
  • EveryNote (Pone mas allá de las tareas y ayuda a tomar notas imágenes, etc, sincroniza con Internet).

Algunos links de su interés 5 Aplicaciones para Android GTD

También mencionarles sobre prezi donde realice la presentación al inicio del post