Craftyman Blog » Desarrollo Web http://craftyman.net Redes Sociales, WordPress, Desarrollo Web, SEO Wed, 01 Feb 2012 00:57:30 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 20 Pantillas Web en HTML5 & CSS3 http://craftyman.net/20-plantillas-html5-css3/ http://craftyman.net/20-plantillas-html5-css3/#comments Wed, 25 Jan 2012 03:03:06 +0000 craftyman http://craftyman.net/?p=1335  

 

1 OWMX-1

 

 

2 SilverBlog

 

 

3 Clean Red

 

 

4 Serenity

 

 

5 Minimalism

 

 

6 Simple Style 7

 

 

7 Small Business

 

 

8 Cooking Site

 

 

9 VividPhoto

 

 

10 ElegantPress

 

 

11 FreshIdeas

 

 

12 Restaurant

 

 

13 Lifebook

 

 

14 Kroft

 

 

15 Business Project

 

 

16 Studio One

 

 

17 Shinra

 

 

18 One Page Portfolio

 

 

19 HTML5 Starter Pack

 

 

20 HTML5 Admin Template

 

 

vía: Noupe.com

 

Post Relacionados

]]> http://craftyman.net/20-plantillas-html5-css3/feed/ 0 Spine Mobile: Framework para WebApps moviles http://craftyman.net/spine-mobile-framework-para-webapps-moviles/ http://craftyman.net/spine-mobile-framework-para-webapps-moviles/#comments Tue, 10 Jan 2012 02:36:07 +0000 craftyman http://craftyman.net/?p=1334 Spine Mobile es un Framework Javascript, nos permite desarrollar aplicaciones en HTML5 con diseño y funcionalidades nativas a las aplicaciones móviles. Este Framework esta desarrollado en HTML5, CSS3 e incluye la librería jQuery, con una buena documentación y ejemplos nos será muy fácil empezar a probar este Framework.
Características: Eventos touch Diseño de panel agradable Aceleración de transiciones por hardware Video Demo En este video podemos ver la funcionalidad y diseño de una aplicación realizada con este Framework. Web: spinejs.com

 

Post Relacionados

]]> http://craftyman.net/spine-mobile-framework-para-webapps-moviles/feed/ 0 Aprender Javascript con Codecademy gratuitamente. http://craftyman.net/aprender-javascript-con-codecademy-gratuitamente/ http://craftyman.net/aprender-javascript-con-codecademy-gratuitamente/#comments Mon, 09 Jan 2012 00:46:35 +0000 craftyman http://craftyman.net/?p=1332 Codecademy es una web donde disponen de cursos muy practicos y sencillos para aprender a programar, ahora esta disponible tan solo el curso de Javascript donde podemos iniciar desde ya con una serie de pasos donde vamos reconociendo cada funcion y propiedades de este lenguaje de programacion, mientras desarrollamos el curso nos va mostrando que porcentaje hemos completado.

 

El curso ademas cuenta con un sistema de recompenzas para insentivar al usuario a que siga el curso y gane mas medallas.
Vía: Genbeta

 

Post Relacionados

]]> http://craftyman.net/aprender-javascript-con-codecademy-gratuitamente/feed/ 0 Lightbox con CSS3 http://craftyman.net/lightbox-css3/ http://craftyman.net/lightbox-css3/#comments Wed, 28 Dec 2011 01:59:56 +0000 craftyman http://craftyman.net/?p=1324 CSS3 haciendo un lightbox con tres tipos de animaciones, tan solo necesitamos incluir una hoja de estilos que realizara la funcionalidad de lightbox y una estructura HTML donde tendremos el thumbnail y la foto expandida.
Mediante la pseudo clase :target podemos abrir lightbox e incluso navegar entre ellos sin una sola línea de JavaScript. Primero debemos descargar el código desde el siguiente link. Descargar Lightbox CSS3 Ahora buscamos la carpeta /css donde están las tres hojas de estilo, solo debemos incluir una, cada CSS tiene diferente animación y todas sirven para abrir un lightbox. [html] [/html] Lo siguiente será escribir nuestro HTML con la siguiente estructura. [html] [/html]

Demo 1

Demo 2

Demo 3

Descargar Lightbox CSS3 Vía: Codrops

 

Post Relacionados

]]> http://craftyman.net/lightbox-css3/feed/ 1 Generador de Sprites CSS online con Stitches http://craftyman.net/generador-sprites-css-online/ http://craftyman.net/generador-sprites-css-online/#comments Wed, 21 Dec 2011 19:46:07 +0000 craftyman http://craftyman.net/?p=1323 CSS online. La funcionalidad es la siguiente: la primera vista es una caja donde dice "Drop images Here", ahí tendremos que jalar y soltar todas las imágenes que deseamos incluir en nuestro Sprite, luego dar clic al botón genérate para activar los otros iconos de Sprite y StyleSheet, que nos abrirá la imagen fusionada y el CSS generado respectivamente.
Esta herramienta actualmente esta disponible en Firefox y chrome, por alguna compatibilidad de APIs HTML5 para el Drag & Drop, para navegadores antiguos utiliza Modernizr, Dropfile y Flashcanvas. Esta herramienta estará sin duda en los favoritos de muchos usuarios, y yo me incluyo. Ver demo Descargar Stitches

 

Post Relacionados

]]> http://craftyman.net/generador-sprites-css-online/feed/ 0 Wibiya: Toolbar gratuito para Webs http://craftyman.net/wibiya-toolbar-gratuito-para-webs/ http://craftyman.net/wibiya-toolbar-gratuito-para-webs/#comments Sun, 09 Oct 2011 02:50:56 +0000 craftyman http://craftyman.net/?p=1313 Sigue estos pasos para tenerlo en tu web.

1. Registrarse en Wibiya

Debemos ingresar a la página wibiya.com y rellenar el formulario de registro para poder generar nuestro Toolbar.

2. Seleccionar un tema.

En este paso elegiremos el icono para nuestra Web, podemos usar el favicon, subir uno propio, sino tendremos el icono por defecto de Wibiya. El Tema del Toolbar lo podremos modificar luego así que no hay problemas en elegir cualquiera.

3. Seleccionar las Apps que tendremos en nuestro Toolbar.

Por defecto nos elijen las mas recomendadas, posteriormente también podremos quitar y agregar más Apps.

4. Ahora tendremos que rellenar un formulario con datos.

Entre ellas están el RSS para los últimos posts, Suscripción por RSS, Nombre de usuario de Twitter, ID del Facebook fan page, URL de nuestro canal de Youtube, URL de nuestra Fan Page de Facebook.

5. Escoger la plataforma de destino.

Entre ellas tenemos a WordPress Blogger, Typepad, Drupal, Joomla, Ning, vBulletin, tumblr o un script para una simple pagina web. En este caso elegiré el script para websites, copiamos el código y lo pegamos en nuestro HTML justo antes de cerrar el tag <body>. Listo, ya tenemos instalado un toolbar en nuestra web, podemos agregar Apps, editarlas, moverlas y eliminarlas.

 

Post Relacionados

]]> http://craftyman.net/wibiya-toolbar-gratuito-para-webs/feed/ 0 Motor de búsqueda para Desarrolladores http://craftyman.net/motor-de-busqueda-para-desarrolladores/ http://craftyman.net/motor-de-busqueda-para-desarrolladores/#comments Sat, 01 Oct 2011 03:29:39 +0000 craftyman http://craftyman.net/?p=1309 Searchco.de es el motor de búsqueda donde podremos encontrar todo tipo de funciones documentadas mediante una búsqueda instantánea. Solo escribe el nombre de alguna función y searchco.de mostrara una lista con las posibles relaciones a la búsqueda, el resultado muestra la sintaxis de la función, el lenguaje de programación y versión que soporta, una descripción de la función, y una URL a la página para más detalles.
Además de lenguajes de programación podemos encontrar documentación de comandos de Windows y Linux. Si necesitamos algo más avanzado podemos acudir a otro gran buscador de código: Code Search de Google, donde podemos incluso encontrar código utilizando expresiones regulares.
vía: DigitalInspiration

 

Post Relacionados

]]> http://craftyman.net/motor-de-busqueda-para-desarrolladores/feed/ 2 Test de velocidad: Firefox 7, Chrome 14, IE9 y Opera 11.5 http://craftyman.net/test-de-velocidad-firefox-7-chrome-14-ie9-y-opera-11-5/ http://craftyman.net/test-de-velocidad-firefox-7-chrome-14-ie9-y-opera-11-5/#comments Wed, 28 Sep 2011 03:59:19 +0000 craftyman http://craftyman.net/?p=1304 Firefox 7 ha sido lanzado hoy, y lifehacker ha realizado una ronda de pruebas de velocidad y rendimiento entre los navegadores más populares, tiempos de inicio, carga en tabs, ejecución en JavaScript, rendimiento con plugins y el uso de memoria. Las siguientes pruebas se realizaron en Windows, por tanto no están tomando en cuenta a Safari, la comparación se realiza entre Chrome, Opera, Internet Explorer y Firefox en sus últimas versiones.

 

Arranque en frio: Ganador Opera

Estas pruebas de velocidad muestran el arranque en frio de los navegadores, como ven en el grafico Opera y Firefox lograron arrancar en pocos segundos, mientras Internet Explorer quedo con casi 11 segundos, sin embargo el arranque en caliente fue muy parejo.

Carga de Tabs: Ganador Opera

Teniendo en cuenta 9 tabs Opera logro abrirlas en 3 segundos. Internet Explorer tuvo el segundo puesto mientras Firefox y Chrome se quedaron atrás.

 

Ejecución de JavaScript: Ganador Chrome

Chrome logro el mejor rendimiento de JavaScript, dejando muy distante a Firefox en segundo lugar, estas pruebas las realizaron con la herramienta Dromaeo suite.

 

DOM / CSS: Ganador Opera

En pruebas de CSS, Opera quedo en primer lugar teniendo a Firefox no muy lejos, Chrome fue descalificado en esta prueba ya que es la versión Dev.

 

Uso de memoria: Ganadores Opera y Firefox

Opera al comienzo de esta prueba encabeza el primer lugar seguido de Firefox, pero el rendimiento se pone realmente a prueba cuando hay tabs abiertos, la variación al tener 9 pestañas abiertas sorprende, ya que Firefox utiliza su memoria de manera más eficiente que otros navegadores.

 

Puntuaciones globales

Según la velocidad, rendimiento, extensiones, personalización y demás pruebas, se dividen el número total de puntos de cada navegador y este sería el resultado:
  • 1. Opera 11.1: 82%
  • 2. Firefox 7: 73%
  • 3. Internet Explorer 9: 47.5%
  • 4. Chrome 14: 43%
Opera es el campeón en cuanto a velocidad se trata. Firefox en cuanto a rendimiento y Chrome es el que ha decaído en estos resultados por su incapacidad de completar la prueba de CSS. más info: LifeHacker.com

 

Post Relacionados

]]> http://craftyman.net/test-de-velocidad-firefox-7-chrome-14-ie9-y-opera-11-5/feed/ 3 Como habilitar el Timeline en Facebook http://craftyman.net/como-habilitar-el-timeline-en-facebook/ http://craftyman.net/como-habilitar-el-timeline-en-facebook/#comments Fri, 23 Sep 2011 16:00:52 +0000 craftyman http://craftyman.net/?p=1303 F8 mostraron las nuevas características de Facebook, si lo vieron probablemente quieren trabajar con esas nuevas herramientas y el Timeline. Para activarlo simplemente sigue estas instrucciones, si eres desarrollador en los pasos veras mucho más que solo activarlo, pero de esto trataremos a detalle en otro artículo especial. Primero ingresa a la página de Facebook Developers, si no tienes la App te pedirá la autorización.

 

Paso 1

Permitir la aplicación Developer

 

Paso 2

Crear una aplicación, clic en [+ Create New App]

 

Paso 3

Ahora tendremos que rellenar los datos de la aplicación, aceptar las políticas de privacidad, luego continuar y nos saldrá una ventana de seguridad, ingresamos el Captcha y clic en Submit.

 

Paso 4

Ahora nos mandara a la página de configuración de la aplicación, le damos clic en Open Graph situado a la izquierda como en la imagen.

 

Paso 5

Ahora nos saldrá la pantalla de "Get Started with open Graph", debemos definir una acción sobre un objeto para su aplicación, pero podemos escribir lo que sea, luego clic en Get Started.

 

Paso 6

Ahora nos saldrán pantallas en la cual debemos simplemente dar clic en Siguiente y Guardar cambios hasta que no salga ninguno de esos botones.

 

Paso 7

Esta es la pantalla final, esperamos unos segundos para ir a nuestra página principal de Facebook.

 

Paso 8

Al regresar a la pantalla principal de Facebook nos saldrá una notificación "Introducing Timeline - a New Kind of Profile" Demos clic en Get It Now.

 

Listo!

Ahora disponemos de nuestro propio Timeline, para saber con detalles todas las nuevas características damos clic en Start Tour y nos guiara paso a paso explicando para que sirve cada módulo, aunque es algo muy intuitivo siempre es bueno saber más detalles de la funcionalidad.

 

Para que puedan ver tu Timeline es necesario que compartas esta URL según sea tu nombre de usuario: http://www.facebook.com/[yourusername]?sk=timeline. vía: Mashable.com

 

Post Relacionados

]]> http://craftyman.net/como-habilitar-el-timeline-en-facebook/feed/ 0 Agregar botón de Google +1 en tu web http://craftyman.net/agregar-boton-de-google-1-en-tu-web/ http://craftyman.net/agregar-boton-de-google-1-en-tu-web/#comments Wed, 14 Sep 2011 00:23:27 +0000 craftyman http://craftyman.net/?p=1297 Primero tenemos que ir a la web del Generador de botones Google +1 En esta página podremos personalizar nuestro botón, disponemos de tamaños, idiomas y opciones avanzadas, el resultado más simple será el siguiente. [html] <g:plusone></g:plusone> [/html] Esto nos serviría para detalles con un solo botón, pero si tenemos varios artículos que valorar tendremos que pasar la URL de la página, y también si queremos ocultar el número de valoración o llamar a una función luego de hacer clic en el +1. Este código muestra un botón Google +1 avanzado: [html] <g:plusone size="small" callback="funcionjs" href="http://craftyman.net" ></g:plusone> [/html] Dónde:
  • size: Tamaño del botón (small, medium, tall)
  • href: URL a valorar en Google +1.
  • Callback: función JavaScript que invocara luego de valorar.
La librería para que puedan funcionar los tags <g> al igual de los <fb> (Facebook) debe ser incluida en la cabecera de esta manera: [html] <script type="text/javascript" src="https://apis.google.com/js/plusone.js"> {lang: 'es'} </script> [/html] Si quitan las llaves {...} el idioma será por defecto inglés.

 

Post Relacionados

]]> http://craftyman.net/agregar-boton-de-google-1-en-tu-web/feed/ 1