Tomodo, una aplicación que nos permite cambiar el css y javascript de cualquier sitio web

Si queréis consultar una página web con una hoja de estilos o un comportamiento especí­fico, tomodo.com os puede ayudar. Se trata de una aplicación que permite hacer una versión personalizada de cualquier página, indicando la url de la misma para que podamos sobreescribir el css y el javascript. En algunos casos (no es compatible con todos los sitios web) podemos retirar e incluir contenido, llevando la personalización al máximo.

El resultado puede guardarse en un subdominio de tomodo, permitiendo ser consultado por cualquier persona. Ellos no guardan nada en sus servidores (no se clona el contenido), solo se hace de puente entre el servidor original y el cliente alterando los componentes especificados por el usuario.

El funcionamiento es semejante a lo que podemos hacer con Greasemonkey, aunque en este caso no es necesario tener una extensión, generando resultados que pueden consultarse desde cualquier dispositivo.

Desde tomodo comentan que se retirarán los sobdominios que reciban denuncias, y en su FAQ incluyen un código que los webmasters podrí­an incluir en su robots.txt para que su web no pueda ser alterada por la plataforma.

Personalmente lo encuentro una muy buena idea que puede usarse en cursos de programación y diseño. Un ejercicio del tipo «cambia el aspecto de reddit completamente usando tomodo» puede ser muy productivo.

Chrome 34 trae novedades para la experiencia multimedia en la web

Chrome

La web como tal está en continuo proceso de adaptación a los tiempos que corren, y es por ello por lo que continuamente aparecen nuevas tecnologí­as y algunas de las ya existentes van quedando obsoletas con el tiempo, de manera que los navegadores web también deben ir adaptándose en cada momento. En este sentido, Google acaba de anunciar una serie de novedades en el canal beta de Chrome, poniendo especial énfasis en el nuevo atributo html para las imágenes adaptables a las pantallas de los dispositivos así­ como al Audio Web sin prefijo.

Respecto al nuevo atributo HTML, éste es srcset y tiene como objetivo reducir los recursos empleados a la hora de mostrar las imágenes en cada tipo de dispositivo, permitiendo al propio navegador web escoger el recurso adecuado a usar en función de las capacidades del propio dispositivo. Google indica que ya no es necesario emplear el atributo src para los navegadores web que soporten el nuevo atributo, aunque es adecuado para mantener la compatibilidad con versiones anteriores.

En lo que respecta al Audio Web, indica que desde esta versión ya está disponible los puntos de entrada a la API sin prefijo audioContext y offlineAudioContext, además de sus correspondientes homólogos con prefijo. Los métodos heredados como createGainNode y createDelayNode ya están en desuso. Esto trae a Chrome en la implementación al Audio Web acorde con el borrador de la especificación del W3C. Google hace un llamamiento al cambio a las versiones sin prefijo pronto, ya que las versiones con prefijos se considerarán obsoletas y se eliminarán en futuras versiones.

Además, otras de las novedades hacen referencia a la propiedad CSS font-variant-ligatures para el control de las ligaduras en el texto por parte de los desarrolladores, a la eliminación de caracterí­sticas de la plataforma web de poco uso, así­ como al recordatorio y rellenado de los campos de contraseña con presencia de autocomplete=off.

El entorno web va madurando, y con ello, también los propios navegadores web.

Recursos para diseñadores para proyectos increibles

Los diseñadores y programadores siempre estamos en constante búsqueda de recursos de todo tipo que nos faciliten la vida. Sabemos que tal búsqueda puede ser tediosa, pues nos distrae de las tareas realmente creativas que nos gusta realizar, por eso, hoy te traemos muchí­simos recursos recientes que puedes utilizar en todo tipo de proyectos. Diviértete y comparte estos recursos que incluyen sets gráficos, Interfaces gráficas de usuario, iconos, plantillas y temas en HTML y PSD, y experimentos de código.

Gráficos de excelente calidad y detalle para todo tipo de proyectos

En esta sección encontraras gráficos de todo tipo para darle un impulso a tus proyectos, desde botones hasta tarjetas de presentación el diseño presta un gran servicio a todas las áreas. tómate un tiempo para revisar estos diseños y descárgalos

 

Botones de carga: en 3 motivos y 3 colores distintos

botones de carga

Tablas de precios: elegantes tablas en PSD en estilo plano

tablas de precios

Tarjetas de presentacion: hermosa maqueta de tarjetas con un efecto de letra prensada

tarjetas de presentacion prensadas

Nexus 5: una maqueta realista para mostrar tus aplicaciones

maqueta nexus 5

Fondos de pantalla: 5 fondos de pantalla con desenfoques y brillos

Fondos de pantalla con desenfoque

Maqueta chrome: una maqueta minimalista del buscador para mostrar tus aplicaciones y sitios web

Maqueta Chrome

Patrones oscuros: 8 fondos oscuros con fantásticas texturas realistas

patrones oscuros

Maquetas apple minimalistas: incluyen iMac, iPhone, iPad y MacBook

maqueta minimalista apple

Botones de twitter: mas de 500 botones en PSD con diferentes estilos

botones de twitter

Google Nexus: Una maqueta realista de ambas caras del Google Nexus 5

Google nexus 5

Interfaces modernas para renovar tus aplicaciones

Ya que una aplicación o sitio Web no es nada sin un buen diseño, en esta sección podrás encontrar diferentes tipos de interfaces gráficas, con estilos modernos y minimalistas. Variando desde coloridas hasta muy sobrias, seguro te serán de mucha utilidad en tus próximos proyectos.

Origin: una interfaz con brillos suaves colorida brillante y táctil

Origin UI

Fashion Ave: Interfaz plana y estilizada compuesta de widgets

Fashion Ave UI

Interfaz ubuntu: Un muy completo y hermosos set para los fanáticos de Ubuntu

ubuntu UI

Dark UI: una interfaz multimedia con texturas cuasi realistas

Dark UI

Data UI kit: una interfaz básica con para crear gráficas de barras y lineas

Data UI

Blog & magazine: una interfaz plana con varios widgets perfecta para magazines

Blog & Magazine UI

Interfaz iOS7: un concepto alternativo con diseños circulares limpios y planos

interfaz iOS7

Freehand: Una hermosa y llamativa interfaz con efecto de dibujo a mano alzada

Freehand UI

Gmail UI: Interfaz que emula todos los elementos de la bandeja de entrada de Gmail

Gmail UI

Widget UI: interfaz compuesta de widgets minimalistas

widget UI

Espectaculares colecciones de í­conos para dar vida a tus proyectos

Hemos seleccionado geniales iconos sociales, animados, lineares, tipo fuente, en formato SVG. Lo mejor de todo, puedes aprender con los tutoriales que vienen incluidos.

Iconos sociales con pliegues: 40 iconos de redes sociales con un original efecto de pliegue

iconos con pliegues

Iconos SVG animados: un fantastico recurso que incluye el tutorial de creación

SVG animados

Iconos lineares: 16 iconos con un bien trabajado estilo linear

iconos lineares

Shock icon font: mas de mil iconos fuente distribuidos en varias industrias

Shock icon font

Freecons: un PSD con 70 iconos de minimalistas de linea gruesa

Freecons

UI icons: un paquete de 9 iconos con texturas realistas

UI icons

Softies: un paquete de iconos minimalistas con un efecto 3D

Softies

Ionicons: una fuente con cientos de iconos en estilo iOS7

Ionicons

Iconos hexagonales un paquete de iconos con 3 bonitos estilos

Iconos hexagonales

Iconos sociales: set de í­conos planos y con un ligero efecto de profundidad

Iconos sociales

Hermosas y sofisticadas plantillas en HTML, PSD y WordPress

Aquí­ encontrarás diferentes temas y plantillas en formatos PSDs y HTML para implementar en tu sitio Web. Dale a tu sitio una apariencia renovada y fresca con temas planos, minimalistas y llenos de fotografí­as de excelente calidad.

DevDmBootstrap3: un tema de WordPress desarrollado en la última version de Bootstrap

DevDmBootstrap3

LineCase: una limpia plantilla en PSD en estilo plano para portafolios

Plantilla LineCase

BillyDroid: un hermoso tema de WordPress para entusiastas de android
BillyDroid WP theme

Hills: un tema plano y limpio para cualquier clase de sitio

Hills WP theme

Author: una plantilla minimalista en PSD para agencias de diseño

Author PSD template

Collage: tema de WordPress para portafolios

Collage WP theme

Singolo: plantilla en PSD con efecto plano para portafolios

Singolo Plantilla PSD

Horus: un tema construido en HTML con muy útiles caracterí­sticas añadidas

Horus tema HTML

Hello Pepper: un tema en HTML con colores suaves y fantásticos efectos agregados

hello pepper tema HTML

Temas de tumblr: un paquete con varios temas de tumbler en PSD

Temas Tumblr PSD

Mejora tu sitio web con los mas geniales experimentos de codigo

Esta sección contiene varios experimentos de código para mejorar tu sitio Web. Incluye librerí­as de audio, caracterí­sticas para Chat, tablas dinámicas, código para mapas y mas.

jwebaudio: libreria de audio web para juegos

jwebaudio plugin

Messenger: llamativos mensajes de alerta en jQuery

messenger plugin

AppenGrid: una tabla dinámica en jQuery

appenGrid plugin

Freewall: Grilla dinámicas sin espacios

freewall plugin

Leaflet: una libreria para mapas interactivos mas amigables

leaflet plugin

Reel: una libreria para perspectivas de 360 grados

Reel plugin

Slideme: una poderosa herramienta de presentación

Slidemejquery plugin

Ion.Sound: un plugin para mostrar sonidos de eventos

Ion.Sound jquery plugin

Featherlight: una herramienta de lightbox tan ligera como una pluma

featherlight lightbox plugin

stickup  jquery plugin

Codacy, para limpiar el código programado y hacerlo más sencillo de entender

codacy

Uno de los principales problemas a los que se enfrenta la comunidad de programadores en todo el mundo, independientemente del lenguaje que utilice, es el de heredar el trabajo realizado por otro profesional y no entender prácticamente nada de lo que hay escrito.

Ya no hablo de documentar el código como Dios manda, o de crear diagramas UML, o te obtener análisis de especificaciones actualizados… hablo de tener una estructura limpia, no solo comentada, que permite identificar de forma sencilla el inicio y final de las funciones, procedimientos y demás bloques.

Para ayudar en ese punto ha nacido Codacy, de momento en beta privada (beta.codacy.com), con previsión de lanzamiento público en enero, que permite limpiar el código para hacerlo más sencillo de ser entendido, un trabajo para el que utilizan tanto algoritmos automáticos que ayudan a encontrar patrones, como trabajo manual para identificar las necesidades de cada proyecto.

De momento no han especificado ni precios ni modelos de negocio, comentan en TNW que han conseguido 500.000 dóalres de inversión y ahora están concentrados en hacer algo que sea realmente útil para los programadores. Estaremos atentos.

Dash, un nuevo sitio para aprender HTML, CSS y Javascript

Si no tenéis suficiente con codecademy o con la enorme cantidad de sitios existentes para aprender a programar, echad un vistazo en el nuevo Dash (dash.generalassemb.ly).

Se trata de un nuevo proyecto creado por General Assembly para permitir aprender HTML, CSS y Javascript usando el navegador, sin necesidad de instalar nada. Solo tenemos que identificarnos ví­a Twitter o crear una cuenta usando el email (no es posible identificarse ni con Google ni con Facebook) y seleccionar el curso que queremos realizar. Existen opciones de varios niveles y es posible ir ganando «medallas» a medida que cumplimos con objetivos en la aplicación, siempre pensando en motivar al alumno.

css

No son lecciones sin objetivo definido, son proyectos completos del tipo «vamos a crear nuestro primero sitio web», «vamos a diseñar un tema de un blog que se adapte a dispositivos móviles», «creemos una web para un pequeño negocio» o «construyamos un robot con css».

En The Next Web han entrevistado a su creador y comentan que, aunque sea limitado en oferta (solo permite html, css y JS) se han concentrado en crear la mejor web para enseñar programación directamente desde el navegador (calidad Vs cantidad), aunque seguramente irán ampliando la cantidad de cursos disponibles durante los próximos meses.

Emmet, una extensión para agilizar el trabajo de quien programa HTML y CSS

emmetProgramar desde cero una página web, creando las hojas de estilo y el HTML que responderá al diseño especificado en ella, puede ser una odisea si no se usa el editor adecuado.

La mayorí­a de los editores ya ofrecen recursos que ayudan a no olvidar las comillas, los puntos y comas, las etiquetas y demás componentes, pero cada uno tiene sus propias reglas, sus propios atajos de teclado, y muchas veces necesitamos un «algo más» que nos ayude a ahorrar tiempo a la hora de escribir código.

Emmet es una extensión compatible con varios editores de código, tanto web como para plataformas tradicionales, que permite, entre otras cosas, escribir lineas de código usando abreviaturas. Podemos así­ evitar los CTRL+C & CTRL-V usando un código especial de Emmet que permite ser interpretado para rellenar lineas de forma automática, aunque también ofrece atajos que en muchos editores no existen.

Las caracterí­sticas completas de esta extensión, así­ como los programas con los que es compatible, pueden verse en emmet.io, donde está disponible de forma gratuita. En caso de querer cotillear entre su código, podéis hacerlo en github; también podéis visitar este artí­culo en hongkiat.com, donde explican un paso a paso para su instalación y uso.

La presentación de La Guerra de las Galaxias con HTML, JS y CSS

Star Wars

En timpietrusky.com podéis ver los detalles del trabajo de Tim Pietrusky, programador que ha dedicado buena parte de su tiempo en una aplicación que simula la presentación de la pelí­cula de 1977 de La Guerra de las Galaxias.

El resultado, que puede disfrutarse en codepen.io, puede ejecutarse pulsando en el texto inferior de dicha página, así­ como personalizarse alterando tanto el HTML de la columna izquierda, el CSS del medio o el javascript de la derecha.

Esta joya, descubierta en boingboing.net hace pocas horas, incluye la música de la pelí­cula, así­ como el texto original que apareció en el largometraje en su momento.

Un lugar ideal para fans de la pelí­cula, así­ como para profesores y alumnos de diseño web que estén aprendiendo HTML, JS y CSS y quieren verificar cómo cambiando algunas lineas pueden obtenerse resultados fantásticos.

Codepen.io, recurso que os presentamos en el libro Tendencias de Diseño web en 2013, es un editor de código online que nos ayuda a practicar mientras vemos el resultado de forma inmediata, siendo posible navegar por los ejemplos que otros usuarios han publicado en la plataforma.

Allí­ es posible ver otros trabajos del mismo desarrollador, como un homenaje a la serie Breaking Bad que no tiene ningún desperdicio.

extractCSS, proyecto de código libre para extraer el CSS de cualquier documento HTML

extract

Y vamos ahora a por un nuevo recurso para la categorí­a de Utilidades para diseñadores y programadores con extractcss.com, una aplicación que nos permite extraer la hoja de estilos de cualquier documento HTML que le indiquemos.

Solo tenemos que pegar el HTML deseado en el primer panel y seleccionar lo que queremos obtener del mismo. Permite extraer ids, clases y estilos, generando un .css que podemos utilizar posteriormente para adaptar el diseño a lo que tengamos en mente.

El proyecto es de código abierto, disponible en github para que sea posible navegar por sus entrañas. Lo divulgan en webresourcesdepot.com como la solución ideal para separar el css de un html en aquellos casos en los que no se separó inicialmente, algo extremadamente recomendable antes de comenzar cualquier diseño web moderno.

En febrero os listamos una serie de recursos útiles para trabajar con CSS, ideales para los que están aprendiendo a programar hojas de estilo. La mayorí­a de ellos están relacionados con la programación de páginas web viendo en tiempo real el efecto de las alteraciones realizadas, extractCSS puede ser una buena forma de «jugar» con pa´ginas web conocidas para alterar su diseño sin alterar su contenido.

Una buena idea para practicar y conocer mejor el mundillo del diseño web.

Tridv – Para crear formas 3D usando CSS

3d

Aquí­ tenemos hoy Tridv (tridiv.com), un editor para crear formas tridimensionales usando CSS. Podemos incluir cubos, pirámides, cilindros y prismas, alterando su tamaño y posición y modificando sus propiedades (color y transparencia), por lo que es fácil imaginar que se trata de una herramienta con bastantes posibilidades (hay algunos ejemplos en su página principal que quitan literalmente el hipo)

Es también muy interesante el editor en sí­, una plataforma que recuerda a las aplicaciones profesionales de trabajo en 3D, con 4 vistas simultaneas (laterales, planta y 3D) y posibilidad de copiar el código para incrustar el resultado en cualquier página web.

Aún así­, no es la aplicación apropiada para hacer maquetas complejas y mostrarlas en la web, pero sí­ es el inicio de lo que puede ser una tendencia. Herramientas sofisticadas de creación, semejantes a Cl3ver, que puedan ser utilizadas sin necesidad de tener grandes conocimientos de programación, con resultados que puedan ser consultados desde cualquier navegador moderno abriéndose de forma rápida y ágil.

Una web tridimensional que está dando sus primeros pasos.

Gracias a Jaime Morales por el enlace.

Publicado en

Code Avengers – Para aprender HTML 5, CSS3 y JavaScript

codeavengers

Code Avengers (www.codeavengers.com) es un sitio diseñado para que sea sencillo y entretenido aprender a programar, enfocado, de momento, en HTML5, CSS3 y JavaScript y ofreciendo un sistema en el que podemos ir subiendo de ní­vel al mismo tiempo que participamos de actividades y juegos aprendiendo a programar.

Su principal objetivo es ofrecer un aprendizaje interactivo con cursos gratuitos, aunque también hay programas especiales para profesores en los que los alumnos tendrán que pagar 5 dólares por cada nivel, siendo el primero completamente gratis.

Al participar en cada curso veremos tareas que debemos realizar, un editor de código online y una página lateral que muestra el resultado de lo que vamos programando, todo dividido por secciones y con la posibilidad de detectar rápidamente lo que estamos haciendo mal.

No es la primera vez que vemos cursos gratuitos de programación en Internet. Ya hemos hablado en varias ocasiones de codecademy, codeschool, LearnStreet, udacity y treehouse, por poner unos ejemplos, aunque siempre es bueno saber que las opciones siguen creciendo, permitiendo que más y más personas aprendan a hacer maravillas dentro de un navegador de Internet.