Y ya dejándome de rollos míos y suyos, paso a presentarles la aplicación que les va a permitir precisamente crear apps sin tener ni idea de código, y que al estar desarrolladas en HTML5 son compatibles con todos los sistemas operativos móviles. Se llama Apps Builder, y simplemente tendrán que arrastrar cuales son las funciones que les van a añadir y luego elegir la configuración de diseño que más les guste para verla lista en cuestión de minutos y probarla sin necesidad de registro.

Y si ya les parecía que Apps Builder era la panacea entonces esperen a enterarse de que es totalmente gratis, de seguro que hasta sobrecargan la página con tantas visitas.

Más info | Apps Builder

Si estás buscando una buena plantilla para comenzar a desarrollar tu tienda en internet, quizás te interese echar un vistazo a estas plantillas. Se trata de una pequeña recopilación de temas que podrás implementar en WordPress, Joomla, Drupal y que además son gratuitas.

iPhone App (Descargar)

Shop Around (Demo | Descargar)

Ikonik (Demo | Descargar)

Speed Racing (Demo | Descargar)

PinkShop (Demo | Descargar)

Book Store (Demo | Descargar)

• Visto en Noupe.com

Si ayer os mostramos un tema para wordpress sencillo hoy vamos a ver una plantilla CSS/XHtml con un aspecto más profesional. Se trata de RIGHTdirection de chocotemplates que se puede utilizar para desarrollar una página de empresa, portfolio de trabajos o para mostrar un producto en internet.

El diseño de esta plantilla se puede implementar en CMS como WordPress, Joomla, Drupal. Se proporcionan archivos necesarios en PSD, XHtml y CSS para hacerlo.

Dispone de un área para productos destacada desarrollada en Javascript con un diseño en PSD como de vaquero. Por lo demás se trata de un sencillo diseño pero que causará un buen impacto visual a tus visitantes.

RIGHTdirection tiene una licencia especial por la que puedes utilizar esta plantilla de forma gratuita si enlazas con chocotemplates. También tiene otra versión extendida que incluye el archivo PSD del Layout para poder editar cada elemento además de que podrás quitar el enlace al desarrollador.

• Puedes conseguir RIGHTdirection desde este enlace.

Como podéis ver últimamente se proporcionan multitud de herramientas online a base de proyectos, que te ayudan a diseñar o construir un sitio web. En este caso pongamos el caso de querer construir una hoja de estilos propia, para una intranet, para una página de empresa o sitio en internet.

Para ello cuentas con Instant CSS Code, una fantástica aplicación web que te permitirá hacerlo. Además tendrá el formato valid HTML/xHTML y podrás generarlo según tus preferencias en pocos pasos.

Los pasos a seguir según su desarrollador son los siguientes:

• Introduce el nombre de tu proyecto.
• Selecciona las opciones.
• Introduce etiquetas de Identificadores.
• Enviar.
• …. Instant CSS Code hace el resto.

Parece fácil y realmente lo es. Personalmente me guardo el enlace. Muchas veces no se trata de saber realizar una tarea sino de automatizar el proceso. Para ello Instant CSS Code es perfecto.

Puedes acceder a la página del proyecto Instant CSS Code.

La plantilla web que os queremos mostrar hoy, SugarCoated, de chocotemplates, con un diseño web al estilo de los blogs más actuales tiene un diseño final bastante bueno, además se puede orientar para ofrecer servicios web, como porfolios de diseñadores pero también como página de servicios profesionales.

Además la puedes implementar fácilmente a otras plataformas como WordPress, Joomla, Drupal… Se administra un archivo PSD con el que poder trabajar, como cada tema de chocotemplates.

Hemos elegido esta plantilla porque nos ha parecido de un diseño final bastante bueno, aunque puedes acceder a múltiples plantillas, también gratuitas sobre las que podrás trabajar.

SugarCoated además cuenta con múltiples diseños de plantillas diferentes, para distintos tipos o esquemas de página, Home, Blog, página de contacto, portfolio, productos, que puedes adaptar según las necesidades de tu proyecto.

• Demo SugarCoated
• Descargar SugarCoated
• Galería plantillas chocotemplates

Toucan Css Reset es un framework en CSS que te permitirá minimizar las diferencias de renderizado de objetos entre los diferentes navegadores web y realizará un reset en código Css para mostrar esta compatibilidad.

Además recompondrá con las nuevas reglas genéricas para tipografía, cabeceras, listas, formularios, tablas… para que sean compatibles con cualquier navegador y tu página se visualice de igual forma en los distintos navegadores.

Toucan Css Reset se trata de un ligero framework, tan solo pesa 2,5 kb comprimido y realmente es fácil de enteder lo que hace. Lo puedes utilizar y aplicar a tus propios trabajos y beneficiarte de la compatibilidad que te proporcionará en todas tus páginas web.

Dispones de una Demo, para probar el código con cada elemento en diferentes navegadores y comprobar tu mismo la compatibilidad que ofrece. Perfecto para el diseño ya creado en tus páginas web.

• Demo Toucan Css Reset
• Código Toucan Css Reset
• Introducción y forma de uso Toucan Css Reset

- En los primeros minutos hemos estado viendo la historia del HTML, desde sus inicios hasta el día de hoy, HTML 5.

- Hemos estado viendo los estilos de diseño que lleva HTML 5, tales como elemento content, video, imagen, pie de página, etc.

- Anteriormente, el lenguaje de codificación de HTML era puro text/html, mientras que por el contrario ahora en HTML5 cambia la serialización a application/xhtml+xml o application/xml.

- Algunas de las diferencias entre XHTML vs HTML en cuanto a etiquetas tales como rel=”stylesheet”, span, etc. que en HTML5 mejoran con diferencia. También algunas de las nuevas mejoras son los atributos globales que implementa HTML5 (ejemplo: @style, @title, @role, @draggable, etc.).

- Surgen nuevos elementos estructurales, tales como <section>, <header>, <footer>, <nav>, <article>, <aside>. El por qué se creó estos nuevos elementos es porque se usaban etiquetas para cada parte de una sección de una página web, esto es, una sección para la cabecera, otra para el lateral, otra para el contenido, otra para el menú y otra para el pie de página, en vez de definirlo como anteriormente hacíamos: <div class=”footer”>.

- Una de las ventajas frente al anterior HTML es que todo está mucho más estructura y jerarquizado, ya hay una etiqueta para casi todo, lo que hace que sea más fácil identificar qué es una imagen, un video, contenido, texto, etc. Todo ello intentando aunar una compatibilidad en todos los navegadores web.

- Luego vienen los formatos de vídeo y audio. ¿Cómo afecta a HTML5? HTML5 tiene soporte para WebM, que es el formato que usa YouTube, disponible y compatible ya para los navegadores web Google Chrome, Opera 10.60, Firefox y IE9. Es el camino a seguir, pero aún queda para que haya un estándar de vídeo y audio para todos los navegadores web.

- Se incluye una nueva etiqueta para la geolocalización (geolocation API), para usarlos sobre todo en terminales móviles. También se pueden usar para aplicaciones web, tales como geoposicionar la foto que hemos subido a nuestra galeria de fotos para saber desde donde la tomamos y tener una mayor experiencia de usuario. Para ello, el navegador web debería preguntar si quiere compartir su geolocalización para hacer uso de esta.

- El uso de las cookies pasan a mejor vida y se usan los “web storage“, que hay dos: session storage (para uso actual del navegador y para las páginas del mismo origen), local storage (páginas del mismo origen pero para múltiples ventanas). Esto lo que hace es aumentar la seguridad a través de la etiqueta <storage> y poder evitar hacer ataques cross-directory. También permite guardar bases de datos sql en el propio navegador.

- La capacidad de tener las aplicaciones web offline. Para ello es necesario tener los recursos de estas aplicaciones también offline que se define en el manifest.

Siguiendo con las nuevas propiedades que nos aporta CSS3 hemos visto en css3.info una nueva funcionalidad que aporta mucho dinamismo a las cajas de texto o textareas, usadas a día de hoy para Formularios, Comentarios en WordPress, páginas de contacto y para páginas de empresa.

Hablamos de la propiedad resize de CSS3, con la que vas a poder redimensionar una caja de texto dinámicamente (por parte del usuario). Esta funcionalidad antes implementada en Javascript dispone de su homólogo en CSS3 y como decimos es muy dinámico, ideal para una plantilla de comentarios en el que el usuario puede agrandar la caja a su antojo.

El codigo en CSS para esta propiedad:

[php]div.resize { width: 100px; height: 100px; border: 1px solid; resize: both; overflow: auto; }[/php]

El Ejemplo de Resize en CSS3:

Gracias a css3.info

Una de las nuevas funciones disponibles con CSS3 es box-shadow por la que puedes añadir sobre a las cajas de texto o contenedores con CSS. Esta función ya está añadida en Safari 3 y Firefox 3.1 por lo que la puedes incluir en tus diseños sin problema.

Esta propiedad toma 2 valores de largo y un color. box-shadow toma 3 propiedades:

• offset horizontal: el valor positivo significará que la sombra se situará a la derecha del elemento y una valor negativo a la izquierda del mismo.
• offset vertical: que tomará un valor negativo para colocar la sombra por encima del elemento y un calor positivo por debajo del mimo.
• blur radios: este parámetro con valor 0 cojerá la máxima definición para la sobra y conforme subamos en número ofrecerá un aspecto más difuminado.

Ahora vamos a ver un ejemplo de uso: (tras el salto)

[html]

[/html]

Fuente css3.info

PIE, Progressive Internet Explorer es un archivo .htc que le dará la opción a versiones de Internet Explorer 6-8 de reconocer y visualizar un buen número de propiedades en CSS3.

A la hora de estilar no requiere que realices cambios drásticos en el Codigo CSS. Además no requiere de menciones a vendedores del estilo:  border-radius -moz-border-radius, (como es el caso de navegadores Firefox)

Simplemente tendrás que enlazar con un adjunto en el Código CSS de la siguiente manera:

[html]behavior: url(PIE.htc);[/html]

y habilitará parcialmente todas las propiedades CSS3 como:

• border-radius
• box-shadow
• border-image
• multiple background images
• linear-gradient as background image

Fuente webresourcesdepot