Volvemos a adentrarnos en el que a mi me gusta llamar fantástico mundo de internet, porque si buscas, encuentras de todo. Y como dentro del sector del diseño, quiero evitarle que tengan que buscar nada, que para eso estamos los de Diario THC para contárselo, hoy les quiero presentar una alternativa a los editores de HTML, la cual se presenta como una opción sencilla, rápida y sobre todo que no requiere de ninguna descarga, ya que es totalmente online. hablamos de Mozilla Thimble Mozilla Thimble es un sencillo editor de código HTM online que entra dentro de Mozilla Webmaker, un proyecto que pretende enseñar a los usuarios a usar la web para sus propias ideas partiendo de alguien que no tenga ningún conocimiento al respecto. La interfaz es super sencilla, pero precisamente eso es lo que la hace más atractiva. Tenemos una pantalla dividida en dos, una para el código y otra ...

Como bien sabrás por tu experiencia con familiares y amigos, un desarrollador no tiene por qué saber de todas las tecnologías, programas y lenguajes que se utilizan en un ordenador. Personalmente me ha ocurrido de todo, siendo SEO me han pedido que haga páginas web en flash, así como a desarrolladores flash les preguntan sobre analítica web. Y te preguntarás adonde quiero llegar con esto, pues bien, porque hoy quiero presentarte un site que te puede parecer que ofrece algo antagónico a este site: cómo crear una página web de forma sencilla y práctica, y te digo esto por el razonamiento de arriba, pero me puedo jugar la vida contra un vermouth a que hay muchos desarrolladores que no tienen ni idea de HTML, servidores, dominios y demás historias. La empresa que quiero presentarte son los chicos de BaseKit, y el enlace donde puedes encontrarlos es el de arriba, pero claro, te voy ...

CampaignMonitor y un servicio de marketing de email están compartiendo una colección de fantásticas plantillas de Email Html de alta calidad y te preguntarás que tipo de plantillas son exactamente las que comparten. Bueno, te has fijado en las campañas de emails de algunas empresas? estas vienen con un formato de Html, de página web. Esto impacta al cliente de forma mucho más visual, para ofrecer un buen producto, un servicio, una actualización de noticias… (newsletter) Están creadas por varios diseñadores de éxito y además vienen con un archivo .PSD de Photoshop con el que podrás configurar la plantilla a tu gusto. Así que ya sabes, si piensas en crear tu campaña de emailing en campaignmonitor tienes tu fuente de recursos. Elige la que más te guste y personalízala. Cualquier plantilla ofrecida se puede implementar en los clientes de gestores más populares como Outlook 2010, Gmail, Lotus notes, Mail de Apple, ya que ...

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 ...

CSS3 Menu es una aplicación online gratuita para crear tu propia barra de menús dinámica completamente en CSS3 y además sin utilizar para ello nada de Javascript. Puedes elegir desde la página de este proyecto el diseño que quieres, dispone de estilo Android, Mac y Apple, con variaciones en colores y estilos. Luego puedes visualizar el resultado y descargar el código para tu página, así de sencillo. Además está disponible para Windows y para Mac. Los menús se generan con una estructura de listas en Html y se pueden implementar en horizontal o vertical, con submenús múltiples. Como decimos puedes previsualizar el menú generado, depués de que elijas tu estilo propio y luego descargar el código, listo para usar en tu página web. Puedes ver este ejemplo con estilo Mac o acceder directamente a la página de CSS3 Menu para elegir tu propio diseño. Página web CSS3 ...

PaintbrushJS Playground es una librería desarrollada en Javascript que permite aplicar efectos de imagen en el lado del cliente. Utiliza elemento Canvas y funciona aplicando una clase en jsp a un elemento en la página web y aplicando parámetros con algunos elementos en HTML. Actualmente este proyecto permite aplicar los siguiente efectos: Blur, escala de grises, mosaico, ruido, posterizado de imagen, tonos sepia y tinta de color. Puedes ver una Demo de esta librería y ver como funciona a través de su página web. Te permitirá aplicar cada efecto mediante una barra y ver la rapidez con que aplica los efectos. Recuerda que está desarrollada por completo en Javascript. Además también puedes descargar el código y acceder a la documentación de esta clase. Página web PaintbrushJS Playground Visto en ...

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 ...

HTML5Rocks es un recurso online de Google que comparte regularmente varios proyectos en Html5 y en Css3. Además añade tutoriales detallados con video en html5 o utilizando @web-fonts. A través de una interfaz realizada en Javascript y con propiedades en CSS3 y Html5 te trae código para que lo visualices de inmediato. También con HTML5Studio con lo que te trae los últimos proyectos como flip de imágenes, video player, carrusel de imágenes, geolocalización y otros proyectos de tipo open source. Además de servirte de inspiración puedes atreverte a implementar estos códigos en tu web. Puedes acceder a todos estos recursos a través de la página del proyecto de HTML5Rocks desde la que puedes navegar y visualizar el contenido con el código implementado en ellas. Página proyecto ...

A través de noupe.com hemos visto esta fantástica recopilación de técnicas en Javascript y jQuery listos para utilizar en Diseño de páginas web. Esta recopilación cuenta con Snippets, librerías, artículos, herramientas y recursos listos para usar que mejorarán la experiencia de usuario en tu Sitio Web ofreciendo un mayor dinamismo, productividad y presencia. Colorful Sliders With jQuery & CSS3 En este Tutorial se usa jQuery además de características en CSS3 para crear un efecto Slider dinámico en 3D. Estas técnicas se puede utilizar en pequeños proyectos con jQuery. Sponsor Flip Wall With jQuery & CSS Este codigo ya lo vimos en una entrada anterior y te proporcionará un bloque de Banners animados en jQuery, bastante dinámico, para tu página web. TipTip jQuery Plugin TipTip detecta el tamaño de las ventanas de los navegadores y permite dar tamaño a los tooltip con coherencia. De esta forma el tooltip se ajustará perfectamente al tamaño de pantalla. Está ...

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] Esto es un ejemplo de box-shadow… [/html] Fuente ...

Un thumbnail en Html es una imagen que se muestra miniaturizada para que se carga en la página web sea más rápida. También se puede utilizar para mostrar galerías de fotos con lo que no mostramos el tamaño real de la imagen y así podemos mostrar un mayor número en menos dimensiones. Para crear un thumbnail lo podemos hacer mediante código Css y también con el propio Html. Codigo Html Es la forma más sencilla de realizar ya que se puede hacer con una sola línea de código. [html] [/html] Codigo Css En Css también es sencillo de utilizar [html] .thumbnail ...

Desde dzinepress nos llega esta recopilación de Tutoriales, un buen material para diseñadores que te puede ayudar a simplificar tu trabajo. Son Tutoriales al detalle para redondear contenedores, botones con CSS3 y RGBA, Hojas de estilo en Cascada. También otros para aplicar borde a las imágenes con estilo en CSS3, Colores en CSS3,Bordes con gradiente. Puedes echar un vistazo ya que es una gran recopilación que debes tener a mano en cualquier momento para maquetar un Sitio. Perfecto para diseñadores. Cajas con esquinas redondeadas en CSS3 Super Botones con Css3 y RGBA Hojas de estilo en cascada Nuevos selectores introducidos en Css3 Border-image: Usando imágenes para tu borde Enlace | 50 Tutoriales en ...

En este tutorial veremos como crear un panel de login animado con Mototools. Este panel se coloca en la cabecera y a través de un simple botón hará desplazar el contenido del mismo para realizar la acción de login o registro de nuevo usuario. Utiliza Mototools 1.2, a través del enlace tendrás acceso a la explicación paso a paso del proceso, por el que una vez descargado el código fuente te será más fácil implementarlo en tu Sitio Web siguiendo los pasos propuestos. A través de web-kreation.com no presentan este tutorial, que ya habíamos visto algo parecido, aunque este únicamente presentará el panel de login sin funciones adicionales como otros plugins. Además lo puedes implementar en cualquier Gestor de contenidos ya que es un código generalizado y también añade código CSS para estilar el panel. Tutorial | Sliding Login Panel With ...

La publicidad en una página web, bien sea un Blog o una página de empresa es necesaria para conseguir recursos adicionales, como pueda ser el mismo soporte de la misma. Adsense de Google es un buen ejemplo de ello, que mediante las técnicas SEO necesarias conseguirás un buen soporte para tu página. Si tu página necesita mostrar la publicidad de forma distinta a lo habitual puedes plantearte este tutorial como forma alternativa. Este tutorial te propone mediante algo de código en jQuery (que puedes descargar) y código Css una forma llamativa de mostrar tus banners publicitarios. De esta forma conseguirás atraer más a tu público. Puedes acceder a la Demo para que te hagas una idea de su funcionamiento. Te muestra el banner y cuando haces click en el, gira el marco para ofrecer el enlace a la web. Si te atreves a implementarla en tu Sitio Web comentanos sobre el proceso. Puede ...

HTML5 ya no es una promesa, es una realidad, y poco a poco se va adoptando por los desarrolladores; para quienes no tengan claro las nuevas especificaciones en HTML5, aquí hay una chuleta o cheat sheet, que contiene los elementos principales, con sus respectivas propiedades: También es válida para versiones anteriores de HTML, como la 4.01, así que es un recurso de gran utilidad; aquí está la vista previa, y acá está el enlace de descarga a resolución completa (es un archivo JPG de más de 4 MB de tamaño). Enlace | HTML 5 Visual Cheat Sheet by Woork ...