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 a dar algún dato más sobre ellos, que a buen seguro, si llegaste leyendo hasta aquí, es porque te interesa.

El caso es que BaseKit te ofrece montarte un site con un editor sencillo, sin nada de código, totalmente intuitivo, y pensarás, ¡ya, más de lo mismo!, pero no podrías estar más equivocada, ya que normalmente los editores web son así de intuitivos porque funcionan con añadiendo objetos flash, y todos sabemos lo malo que es eso para el posicionamiento del site en cojunto.

Sin embargo, en este caso los de BaseKit son radicalmente opuestos, ya que el editor funciona con HTML (¡magia!), de hecho, su propia página web la han hecho con este editor, para que te des cuenta de que realmente se puede hacer un site profesional, con todo lo que esto implica, con él.

¿ Necesitas alguna garantía más?, sin problemas, en BaseKit ya se han creado más de 146.000 sites, ¿cómo lo ves?, pues claro, si necesitas un site y no tienes ni idea de programación, quizá BaseKit sea tu alternativa.

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 han sido testeadas para todas.

• Puedes acceder a esta colección de recursos desde la web de campaignmonitor.

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

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 Menu

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 webresourcesdepot

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

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 HTML5Rocks

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á realizado en jQuery y se puede implementar mediante un plugin.

Nivo Slider

Nivo es un de los Slider de imágenes en jQuery más utilizados.

jQuery.Syntax

jQuery.Syntax es un resaltador de sintaxis para código muy rápido que puedes utilizar en el diseño de páginas dinámicas. Además se puede utilizar CSS para dar color a tu código.

Puedes ver el resto del recopilatorio desde noupe.com

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

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]

[/html]