Tabiku, para descubrir y generar gradientes en CSS3 de forma sencilla

Tabiku

Ya os hemos hablado en anteriores ocasiones acerca de diferentes herramientas online con las que crear gradientes de colores en CSS. Recientemente nos ha llamado la atención Tabiku, un editor online con el que podremos generar gradientes en CSS3 de forma sencilla.

Al igual que alternativas similares, el funcionamiento de Tabiku es de lo más intuitivo. De hecho, nada más acceder al sitio web del proyecto solo tendremos que hacer clic sobre el botón «Create», situado en la esquina superior izquierda de la interfaz. A continuación, podremos elegir los colores que queremos mezclar, tal y como podéis ver en la captura de pantalla que os mostramos al inicio del artí­culo.

Continúa leyendo «Tabiku, para descubrir y generar gradientes en CSS3 de forma sencilla»

enjoycss, un editor online para generar código CSS3

En enjoycss.com tenemos una aplicación web que puede ayudar a crear elementos para nuestro proyecto web sin necesidad de pasar horas arreglando detalles en el código.

Se trata de un editor online en el que podemos construir y especificar campos de texto, botones, listas, fondos y demás componentes de nuestras páginas, permitiendo crear elementos desde cero y aplicar efectos desde el menú lateral derecho.

Eric Willis (@erictwillis) comenta que el objetivo es poder trabajar con variables al mismo tiempo que usamos una interfaz «a lo photoshop», con posibilidad de elegir colores, sliders y demás componentes que ayuden en la creación de material gráfico «sin burocracia». Podemos incluso crear estados como :hover, :active, :focus, :after y :before y darles estilo paar que aparezcan en el código generado, que podremos pegar en nuestro sitio de forma sencilla.

En su web podemos ver ejemplos clasificados en una galerí­a. El proyecto es gratuito, por lo que no hay que preocuparse, de momento, con ese tema.

layoutit, para crear webs adaptables arrastrando y soltando elementos

layoutit

Una página web con diseño responsivo (horrible traducción del inglés responsive design) es aquélla que se adapta a cualquier pantalla alterando su estructura en función del tamaño del dispositivo que la esté visualizando. En español se está usando mucho el término «web responsiva», aunque es más correcto hablar de diseño web adaptable o adaptativo.

Para crear una web con estas caracterí­sticas tenemos que tener bastantes conocimientos de las últimas tendencias en CSS, javascript y HTML, aunque proyectos como layoutit.com nos pueden ayudar a comenzar a crear este tipo de sitios sin necesidad de tener excesivos conocimientos de programación.

Se trata de una plataforma en la que podemos definir la estructura de nuestra página incluyendo áreas con diferentes columnas y elementos (menús, textos, paginación, etc.) obteniendo como resultado el código en HTML5 y CSS3 para que podamos editarlo posteriormente (añadiendo php en la parte del contenido para hacerlo dinámico, por ejemplo).

Es un constructor de plantillas creado para Bootstrap (colección de herramientas opensource para crear sitios y aplicaciones web), no es un constructor de sitios web y sí­ una herramienta que nos ayuda a no empezar desde cero, creada para ahorrar tiempo a los programadores, no para terminar con una web 100% lista para ser divulgada.

En hongkiat.com tenemos un ejemplo de como se ha usado esta plataforma para crear su propia página de inicio, ejemplo que demuestra lo realmente sencillo que es su uso.

Cursos gratis para aprender HTML5

Ya os hemos comentado en algunas ocasiones varios sitios en los que podéis realizar clases para aprender HTML5, os dejamos ahora con una recopilación de dichos enlaces, esperando que nos ayudéis a ampliar la lista en los comentarios.

Cursos de HTML5 en Udemy: 3 cursos que imparten en Udemy, sin necesidad de conocimientos previos, incluyendo uno en español para entender las bases.

curso html5

Curso en Codeavengers: Ideal para aprender tanto HTML5 como CSS3 y Javascript. Existen varios juegos que nos ayudan a mantenernos motivados, subiendo de nivel y ganando premios.

Curso de HTML5 de Microsoft: Un curso completo, en español, con 6 lecciones para aprender HTML5.

Programando.la: Con ví­deos en español sobre el tema.

Edutin: Lista de ví­deos en español para aprender las bases de HTML5.

mozilla.org: Documentación extensa en el sitio web de Mozilla.

Podéis ver algunas demostraciones de lo que se puede hacer usando HTML5 en chromeexperiments.com o en esta recopilación de experimentos que publicaron en spyrestudios.com

Si buscáis otros lenguajes de programación, recordad el artí­culo ¿Qué lenguaje de programación debo aprender y dónde puedo hacerlo gratis? que publicó Juan David hace unos meses.

Plantilla web en HTML5 gratuita imitando las tarjetas de Google Now

plantilla

Iván Barcia nos presenta una plantilla realizada por él mismo en HTML5 y CSS3 que, imitando el estilo de las tarjetas de Google Now para Android, está disponible de forma gratuita en su web para que podamos bajarla y usarla en nuestros proyectos.

Se trata de un documento que comenzó como un proyecto personal para realizar documentos (manuales), aunque fue tomando forma para un uso general y se decidió desarrollar un manual para ofrecerlo de forma gratuita bajo licencia Creative Commons Attribution 3.0 Unported.

Todo el código HTML y CSS está escrito por mí­, sin partir de ninguna plantilla. Ambos están validados por la W3C. El manual y toda la documentación adjunta está en español, espero poder ofrecerla en mas idiomas pronto.

El diseño puede consultarse desde cualquier dispositivo, ya que se adapta a las diferentes pantallas. Es posible bajarlo desde la web y acceder a una demostración de dicha plantilla directamente desde aquí­.

Esperemos que siga evolucionando y llegue a transformarse en un tema para WordPress, el diseño lo merece.

Impress.js y reveal.js, librerí­as para crear presentaciones en HTML y CSS3 al estilo prezi

prezi ideas importan

Para quienes aún no le conocen, Prezi es una aplicación para crear presentaciones en lí­nea (con versión para PC en sus planes premium) que prescinde de las clásicas transiciones entre diapositivas reemplazándolas por movimientos no rectilí­neos y efectos de zoom sobre determinados elementos (imágenes, texto, videos, PDF”™s, formas, etc.) en un inmenso lienzo.

No podrí­a asegurar que Prezi ha sido la startup pionera en pensar que las ideas se quedan cortas al ser representadas en las tí­picas y simples diapositivas hechas con herramientas como PowerPoint, pero sus millonarias cifras dan fe de que al menos son la primera en popularizar una solución tan efectiva que ha llegado a revolucionar el mundo de las presentaciones.

Alternativas a Prezi

Personalmente aun usándolo por más de dos años, sigue sorprendiéndome la calidad de presentaciones que se pueden crear con Prezi pues con tantas prestaciones (como temas y transiciones en 3D), lo único que limita al servicio es la creatividad de quien lo usa.

Sin embargo, más interesante todaví­a es que con algunos conocimientos básicos de HTML y CSS, se puede aprender a crear presentaciones similares sin necesidad de utilizar Prezi. Para la tarea se han creado algunas interesantes alternativas como Impress.js y reveal.js que en forma de librerí­as facilitan la creación desde cero de las presentaciones, con resultados también de alta calidad.

Impress.js

cubo CSS3D impress js Continúa leyendo «Impress.js y reveal.js, librerí­as para crear presentaciones en HTML y CSS3 al estilo prezi»

Apple, Adobe, Facebook, Google, HP, Microsoft, Mozilla, Nokia y Opera lanzan webplatform.org

Con el objetivo de tener un recurso universal con información sobre tecnologí­as web abiertas, los grandes mostrados en el tí­tulo de este texto se han unido a la W3C para lanzar webplatform.org, con información actualizada sobre HTML5, CSS3, desarrollo web y consejos generales sobre tecnologí­a en páginas web.

El sitio mostrará el estado de la normalización de tecnologí­as especí­ficas, existiendo también foros y Wikis donde los empleados de las empresas participantes incluyen actualizaciones y textos relacionados con el tema.

Comentan en TNW que todos los documentos publicados allí­ están licenciados bajo Creative Commons, siempre incentivando a que otras empresas ayuden con el contenido publicando información mediante el Wiki.

Sin duda, buenas noticias para los que trabajamos en el mundo web. Os dejamos con el ví­deo de presentación: Continúa leyendo «Apple, Adobe, Facebook, Google, HP, Microsoft, Mozilla, Nokia y Opera lanzan webplatform.org»

Jimdo lanza nuevas plantillas en HTML5 y CSS3 para dispositivos móviles

Jimdo, la plataforma para crear sitios web y tiendas online de forma sencilla y con un toque personal de la que ya habí­amos hablado en Wwwhatsnew anteriormente, anuncia ahora el lanzamiento de plantillas gratuitas en HTML5 y CSS3 para su uso en dispositivos móviles.

Sabiendo que multitud de usuarios accede ahora a la web a través de nuevos formatos, (nos recalcan que 17 millones de españoles poseen un smartphone, 11 millones de los cuales acceden a páginas web y navegan a traves de éstos), ponen a disposición de los desarrolladores web estas herramientas para ajustar la página web al smartphone para una correcta visualización, y no sólo en relación a lo estético y funcional sino a que los teléfonos soporten herramientas y aplicaciones externas como formularios de contacto, Google Maps o compras online en el caso de los sitios web que sean tiendas.

Un paso más para Jimdo en lo que se refiere al desarrollo de las funciones para móviles.

Link: Jimdo

Microsoft lanza buildnewgames, para ayudar a programar juegos en HTML5, CSS3 y JS

En windowsteamblog.com Microsoft ha anunciado el lanzamiento de buildnewgames.com, una web cuyo objetivo es ayudar a los programadores a desarrollar juegos que puedan ser ejecutados en los navegadores modernos.

En el artí­culo comentan que IE10 PP5 suporta 33 nuevos estándar HTML5 & CSS3, casi 3 veces más que IE9, animando a que juegos como cuttherope.ie o justafriend.ie sean cada vez más populares.

En esta nueva web vemos consejos y recursos que pueden ayudarnos a construir juegos usando estas tecnologí­as, comentando que en los próximos meses tendrán hasta 50 tutoriales con instrucciones para realizar juegos básicos, crear efectos o ganar dinero con ellos.

HTML5 Please – conozca aspectos de HTML5/CSS3 que puedes usar con seguridad


Los sitios web, al cabo del tiempo, suelen realizar modificaciones en sus estructuras y estilos visuales con el fin de adaptarlos a las últimas tecnologí­as web y tendencias con el fin de no quedarse rezagados. Y en los últimos tiempos estamos viendo como irrumpen con fuerza el HTML5 y el CSS3, de manera que habrá propietarios de sitios web que se estén planteando añadir modificaciones en sus respectivos sitios. Lo malo es que no todas las caracterí­sticas de HTML5 y CSS3 están presentes en los navegadores web, con lo que habrá que saber cuáles de ellas se pueden emplear con seguridad y con cuáles de ellas con cautela.

HTML5 Please es un sitio web que informa de ello, teniendo la información estructurada por caracterí­sticas, indicándose en cada una de ellas la idoneidad de su uso o no en la implantación de los sitios web. Se trata de una herramienta colaborativa en la que los desarrolladores, y los usuarios en general, podrán realizar las contribuciones necesarias para que la información pueda ser más precisa y fiable. Las contribuciones se tienen que hacer desde GitHub.

Enlace: HTML5Please | Ví­a: TNW