Crear una Página Web HTML5 utilizando Responsive Design [VideoTutorial]

Crear una Página Web HTML5 utilizando Responsive Design [VideoTutorial]:
Responsive Design es la técnica de tener un sitio web que se adapte a los dispositivos móviles como Smartphones o Tablets, y también a las diferentes resoluciones de pantalla para computadoras.

Gracias a @LeonidasEsteban y Mejorando.la podemos ver el siguiente VideoTutorial donde nos enseñan a crear una Página Web en HTML5 utilizando Responsive Design, el ejemplo que realizan es la de un portafolio digital, dentro de los temas que tiene el video están CSS3, nuevos tags HTML5, meta tags para móviles.

El código del ejemplo lo podemos encontrar en github.com.

Podemos también probar la web desde nuestros diferentes dispositivos en http://mejorando.la/responsive-design/#contacto
Vía

DocHub: Documentación para desarrolladores web en un mismo lugar



Me gustó mucho
DocHub, ya que permite buscar de forma sencilla y clara en la documentación de las especificaciones de CSS, HTML, JavaScript, DOM, sumando también las de jQuery, PHP y Python. Toda la información es sacada de los sitios oficiales o confiables.

Muy recomendado para tener guardado entre los marcadores.

Mobile HTML5: Compatibilidad de HTML5 en dispositivos móviles y tablets

Si estas desarrollando para móviles o tablets, Mobile HTML5 te va a interesar, ya que muestra de forma detallada la compatibilidad de distintos dispositivos y plataformas con características HTML5.

Bootstrap: Colección de componentes reutilizables, creado por Twitter



Muy interesante la propuesta de Twitter, al publicar Bootstrap, una colección de diferentes componentes web reutilizables (grillas, formularios, botones, ventanas, mensajes, etc.) creados con Less, de libre uso y modificación (a través de su repositorio en GitHub).

Y mas allá de esto, siempre me gustaron este tipo de iniciativas, porque si uno se pone a leer / investigar su código fuente, al final se termina aprendiendo algo nuevo o sacando ideas: piensen que este tipo de empresas suelen tener gente muy capacitada, y por lo general, si algo se hizo de una forma, es porque tuvo sus razones de peso por detrás para hacer así.

Infografía: HTML5 VS Flash

Infografía: HTML5 VS Flash:
OneMoreLevel.com ha desarrollado una infografía donde comparan estas 2 alternativas tecnológicas, siendo el HTML5 el remplazo de Flash ya que en algunos los dispositivos móviles como iOS no pueden tener una alternativa a Flash como herramienta multimedia.
La siguiente comparación tiene datos estadísticos de cuantas aplicaciones y juegos que usan las 2 tecnologías, también el rendimiento de cada una y su compatibilidad con Sistemas operativos y navegadores web.



vía: venturebeat.com

20 Pantillas Web en HTML5 & CSS3

20 Pantillas Web en HTML5 & CSS3:
Una colección de templates desarrolladas en HTML5 y CSS3 para tener paginas web con mucha mas velocidad de carga, ya que en estas utilizamos al máximo el poder del CSS evitando imágenes que puedan dificultar la rapidez de una web, gracias al post de Noupe elabore este ranking con las 20 mejores según mi criterio, para los que quieran ver el resto pueden hacerlo en la fuente oficial.

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

Spine Mobile: Framework para WebApps moviles

Spine Mobile: Framework para WebApps moviles:
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

Framework para crear formularios atractivos y funcionales con jQuery

Framework para crear formularios atractivos y funcionales con jQuery:
Ideal Forms es un pequeño y potente framework para potenciar el uso y el diseño de formularios. Este framework esta desarrollado íntegramente utilizando jQuery, siendo el framework Javascript su única dependencia obligatoria.

Al transformar visualmente cualquier formulario un punto muy favorable de Ideal Forms es su compatibilidad cruzada con los distintos navegadores, dando soporte prácticamente completo a los navegadores: IE 7+, Firefox 3+, Chrome 3+, Safari 3.1+ y Opera 11+.

La utilización de imágenes es absolutamente prescindible, la mayoría de los cambios visuales que realiza este frameworks funcionan solo utilizando hojas de estilo, las mismas son incorporadas en la descarga, y cuenta con distintos varios diseños distintos para que nosotros podamos seleccionar que tema utilizar.

framework formularios jQuery

Para evitar problemas con los navegadores más antiguos se recomienda la utilización de Modernizr, de esta manera logramos un nivel de compatibilidad más amplio y solucionamos algunos pocos problemas de propiedades CSS no soportadas por ciertos navegadores. Estos problemas se detallan muy bien en el sitio oficial de Ideal Forms.

Utilizar Ideal Forms no requiere más que unas pocas lineas de código, si nuestros formularios están bien escritos y recurrimos a una estructura valida, implementar este frameworks es cuestión de unos pocos segundos.

Web: Ideal Forms

API PHP de Google+

API PHP de Google+:
Acaban de anunciar la API de Google+, algo que mucha gente estaba pidiendo para que esta plataforma pueda despegar.

Pues ya se han currado una librería en PHP (en beta) para que podamos probar con ella:

// Include the library files
require_once 'google-api-php-client/src/apiClient.php';
require_once 'google-api-php-client/src/contrib/apiBuzzService.php';

// Create the apiClient and Buzz service class:
$apiClient = new apiClient();
$buzz = new apiBuzzService($apiClient);

// If an OAuth token was stored in the session, use that. Otherwise go through the OAuth flow.
session_start();
if (isset($_SESSION['access_token'])) {
$apiClient->setAccessToken($_SESSION['access_token']);
} else {
$apiClient->setAccessToken($apiClient->authenticate());
// In a real application this would be stored in a database, and not in the session!
$_SESSION['access_token'] = $apiClient->getAccessToken();
}

// Make an API call
$activities = $buzz->activities->listActivities('@me', '@consumption');

// And echo the returned activities
echo '<pre>Activities: ' . print_r($activities, true) . '</pre>';

// Save the updated access token in the session.
$_SESSION['access_token'] = $apiClient->getAccessToken();

Habrá que probarla

Google+ API PHP Client

iOS Boilerplate, punto de inicio para crear aplicaciones para iPhone o iPad

iOS Boilerplate, punto de inicio para crear aplicaciones para iPhone o iPad:
iosboilerplate

Hace unos días escribimos sobre HTML5 Boilerplate, una plantilla en Html que cuenta con el Js y Css necesarios para crear tu sitio web de forma sencilla. En la misma línea ahora tenemos iOS Boilerplate para la creación de aplicaciones para iPhone.



Como bien indica este proyecto:


  • Su objetivo es proporcionar una base de código para iniciarse en desarrollo de aplicaciones iOS.
  • No pretende ser un framework.
  • Con la intención de ser modificado y ampliado por el promotor para satisfacer sus necesidades.
  • Incluye sólida bibliotecas de terceros si es necesario para no reinventar la rueda.

Está probado para funcionar en dispositivos como el iPhone, iPad o iPod touch con iOS 4 o posterior, aunque de forma independiente, ya que no ofrece soporte para aplicaciones universales, de momento, aunque se prentende que así sea más adelante.

iOSBoilerplate está basado en XCode, la herramienta de Mac para desarrollo iOS. Aunque se pretende actualizar hacia un verdadero modelo XCode, por lo que puedes comenzar con este proyecto, asegurándote actualizaciones y quizás más fácil que con XCode.

iOSBoilerplate incluye:


  • Solicitudes HTTP y caché de imágenes (tanto en memoria como en disco)
  • UITableViews y UITableViewCells: desplazamiento rápido, imágenes async, pull-down-to-refresh, células swipeable …
  • Mapas y ubicaciones: direcciones entre dos puntos, autocompletado de lugares, etc …

Es una forma de iniciarse en el desarrollo de aplicaciones con lo necesario para acceso a web, interacción con los elementos de la interfaz de usuario de iOS y acceso a mapas.

Videotutorial: como hacer un componente de Backend para Joomla 1.5 usando el patrón MVC

Hace un tiempo hice un vídeo para Webempresa donde hablaba sobre el desarrollo de extensiones usando el patrón MVC en Joomla. También se explicaba como usar partes del Framework de Joomla y hacíamos un ejemplo sobre el ForntEnd de Joomla.

En esta ocasión en el vídeo trata sobre como desarrollar la parte del Backend de la extensión, la metodología es similar, pero hay funciones nuevas que merece la pena ver con más profundidad. Queda todo recojido en un vídeo de unos 50 minutos que podéis ver en el canal de Youtube de Webempresa o aquí debajo.

Podéis descargar el código de ejemplo aquí.

PD: Un saludo para Gnumax que me anima constantemente para que siga escribiendo artículos en el blog.

03.- Curso de Git. Comandos Git (II)

03.- Curso de Git. Comandos Git (II): "









Videotutorial Nº 3 del Curso de Git y Github en el que seguimos viendo los comandos fundamentales.




VideoTutorial Nº 3 del Curso de Git. Seguimos viendo los Comandos Fundamentales. Uso del Comando git diff; Uso del argumento --staged; Uso de los argumentos -v y -m con git commit. Sáltarse el stage con el argumento -a de git commit; Eliminar archivos con gir rm; uso del argumento --cached; Mover archivos con el comando git mv. 35 minutos.









Descargar archivos prácticas



"

Google+ vs. Facebook [infographic]

Google+ vs. Facebook [infographic]: "




Via Technobombs.

Stay on top of Google and Facebook.




Permalink

| Leave a comment  »
"

Seguridad en sitios web para webmasters

Seguridad en sitios web para webmasters: "
A los usuarios se les enseña a protegerse de programas maliciosos mediante la instalación de programas antivirus sofisticados pero, a veces, también confían sus datos personales a sitios web como el tuyo, en cuyo caso es importante proteger sus datos. Proteger tus propios datos también es importante. Si tienes una tienda online, no querrás que te roben.



A lo largo de los años, las empresas y los webmasters han aprendido (a menudo por las malas) que la seguridad de las aplicaciones web no es ninguna broma. Hemos visto fugas de contraseñas debidas a ataques de Inyección SQL, robo de cookies con XSS y sitios web vulnerados por hackers debido a negligencias en la validación de los datos de entrada.



Hoy os mostraremos algunos ejemplos de cómo se puede atacar una aplicación web, para que puedas aprender de ello. Con este fin, usaremos Gruyere, una aplicación intencionadamente vulnerable que también usamos internamente para formación sobre seguridad. No pruebes la vulnerabilidad de los sitios web de otras personas sin su permiso, puesto que podría considerarse un ataque (hacking), pero te damos la bienvenida (e incluso te animamos) a hacer pruebas en Gruyere.



Manipulación del estado del cliente (Client State): ¿qué sucede si altero la URL?



Imaginemos que tienes un sitio de alojamiento de imágenes y que usas una secuencia de comandos en PHP para mostrar las imágenes subidas por los usuarios.



http://www.example.com/showimage.php?imgloc=/garyillyes/kitten.jpg



Pues bien, ¿qué sucederá si cambio la URL por algo así y userpasswords.txt es un archivo de verdad?



http://www.example.com/showimage.php?imgloc=/../../userpasswords.txt



¿Obtendré el contenido de userpasswords.txt?



Otro ejemplo de manipulación de estado del cliente se produce cuando no se validan los campos de los formularios. Por ejemplo, imaginemos que tienes este formulario:







Parece que el nombre de usuario del remitente se almacena en un campo oculto. Bueno, ¡esto es genial! ¿Significa que si cambio el valor de ese campo por el de otro nombre de usuario puedo enviar el formulario como si fuese ese otro usuario? Bien podría suceder. Aparentemente, los datos introducidos por el usuario no se autentican con, por ejemplo, ningún token que se pueda verificar en el servidor.

Imagina la situación si ese formulario formase parte de un carrito de la compra y modificásemos el precio de un artículo de 1000 USD por 1 USD para, después, enviar el pedido.



Proteger tu aplicación frente a este tipo de ataques no es fácil. Echa un vistazo a la tercera parte de Gruyere [inglés] para ver algunos consejos sobre cómo defender tu aplicación.



Cross-site scripting (XSS): los datos introducidos por el usuario no son de fiar





Una URL simple e inofensiva:

http://google-gruyere.appspot.com/611788451095/%3Cscript%3Ealert('0wn3d')%3C/script%3E

¿Es realmente inofensiva? Si descodificamos los caracteres codificados con el signo de porcentaje, obtenemos:



<script>alert('0wn3d')</script>


Al igual que muchos sitios web con páginas de error personalizadas, Gruyere está diseñada para incluir el componente de la ruta dentro de la página HTML. Esto puede generar problemas de seguridad, como XSS, puesto que introduce el código introducido por el usuario tal como está en la página HTML de la aplicación web. Podríamos pensar, 'bueno, es solo un cuadro de advertencia, ¿y qué?'. El problema es que si puedes inyectar un cuadro de advertencia, puedes, con toda probabilidad, inyectar otra cosa, también, y tal vez aprovechar para robarte las cookies y usarlas para acceder a tu sitio como si fueses tú.



Otro ejemplo es cuando no se limpian las entradas del usuario. Imaginemos que escribo un comentario en tu blog. Se trata de un comentario muy simple:



<a href=”javascript:alert(‘0wn3d’)”>Click here tos see a kitten</a>


Si otros usuarios hacen clic en mi inocente enlace, tendré sus cookies:







Puedes ver cómo resolver las vulnerabilidades por XSS en tu propia aplicación web e intentar resolverlas en la segunda parte de Gruyere [inglés] o, si eres un desarrollador avanzado, mirar las características sobre escapado automático en sistemas con plantillas de la que hablamos en nuestro blog sobre seguridad online [inglés].



Falsificación de petición en sitios cruzados (XSRF): ¿debería aceptar las solicitudes procedentes de diablos.com?



Oh, vaya, una imagen rota. No puede ser peligrosa: está rota, al fin y al cabo, lo cual significa que la URL de la imagen devuelve un código 404 o tiene un formato incorrecto. ¿Pero es siempre así?



¡No! La fuente de una imagen se puede especificar con cualquier URL, sea cual sea su tipo de contenido. Puede ser una página HTML, un archivo JavaScript, u otro recurso potencialmente malicioso. En este caso, la fuente es la URL de una simple página:







Esta página sólo funcionará si tengo una sesión iniciada y algunas cookies asignadas. Puesto que realmente tenía una sesión iniciada en la aplicación, cuando el navegador ha intentado recuperar la imagen accediendo a la URL de fuente, también ha eliminado mi primer fragmento. Esto no suena particularmente peligroso, pero si conozco un poco la aplicación también podría invocar una URL que elimine el perfil de un usuario o permita a un administrador otorgar permisos a otros usuarios.



Para proteger tu aplicación de XSRF no deberías permitir nunca que las acciones de cambio se soliciten vía GET. El método POST se inventó para este tipo de peticiones de cambio de estado. Este cambio por si solo podría mitigar el ataque anterior, pero por lo general no basta y es necesario añadir algún valor impredecible a todas las solicitudes que supongan un cambio de estado para prevenir las acciones de XSRF. Si quieres más información sobre XSRF puedes ir directamente a Gruyere [inglés].



Inclusión de Cross-site script (XSSI): todas tus secuencias de comandos nos pertenecen



En muchos sitios es posible actualizar dinámicamente el contenido de una página mediante peticiones de JavaScript asincrónicas que devuelven datos JSON. A veces JSON puede contener datos sensibles que, si no se toman las precauciones debidas, un hacker podría robar.



Imaginemos la situación siguiente: hemos creado una páginas HTML estándar y te enviamos el enlace. Puesto que confías en nosotros, visitas el enlace que te hemos enviado. La página contiene tan solo unas cuantas líneas:



<script>function _feed(s) {alert("Your private snippet is: " + s['private_snippet']);}</script>


Puesto que has iniciado sesión en Gruyere y dispones de un fragmento privado, verás un cuadro de alerta en mi página que te informa sobre el contenido de tu fragmento. Como siempre, si nos las hemos arreglado para abrir un cuadro de alerta, podremos hacer lo que queramos. En este caso se trata de un simple fragmento, pero también podría haber sido tu mayor secreto.



Defender a una aplicación frente a XSSI no es demasiado difícil, pero exige pensar con cuidado. Puedes usar tokens, tal como se explica en la sección sobre XSRF, hacer que tu secuencia de comandos solo responda a peticiones POST o simplemente iniciar la respuesta JSON por '\n' para asegurarte de que la respuesta no es ejecutable.



Inyección de SQL: ¿todavía crees que lo que introducen los usuarios es seguro?



Qué sucedería si intento acceder a tu aplicación con un nombre de usuario como



MarioMartinez' ; DROP TABLE members;--


Aunque este ejemplo en particular no dejaría expuestos los datos de los usuarios, podría provocar grandes quebraderos de cabeza porque tiene la capacidad de eliminar por completo la tabla de SQL en la cual tu aplicación almacena los datos de los miembros registrados.



Por lo general, puedes proteger a tu sitio web de la inyección de código SQL pensando proactivamente sobre la introducción de datos de los usuarios En primer lugar: ¿estás seguro de que tu usuario de SQL necesita disponer de permiso para ejecutar 'DROP TABLE members'? ¿No bastaría con concederle derechos de SELECT? Asignando los permisos de los usuarios cuidadosamente puedes evitar experiencias dolorosas y un montón de problemas. También puede ser útil configurar los informes de error de tal modo que no queden expuestos los nombres de las bases de datos ni de las tablas en caso de que una consulta falle.



En segundo lugar, tal como hemos aprendido en el caso XSS, los datos introducidos por el usuario no son nunca de fiar. Lo que para ti parece un formulario de inicio de sesión, es una posible puerta de acceso para un atacante. Limpia y verifica siempre la estructura de la información de entrada que se vaya a almacenar en una base de datos y, siempre que sea posible, usa instrucciones del tipo de consultas preparadas o parametrizadas, disponibles en la mayoría de las interfaces de programación de bases de datos.



Sabiendo cómo es posible atacar una aplicación web es el primer paso para entender cómo protegerla. Por este motivo, te animamos a que sigas el curso de Gruyere [inglés], aproveches otros cursos sobre seguridad web disponibles en la Google Code University [inglés]. También puedes probar Skipfish [inglés], una herramienta de prueba automática de la seguridad. Si tienes alguna pregunta más, no dudes en enviarla a nuestro Foro de ayuda para webmasters.



Publicado por Gary Illyes, Analista de tendencias para webmasters
"

Información sobre compatibilidad con HTML5 + CSS3 [actualizada]

Información sobre compatibilidad con HTML5 + CSS3 [actualizada]: "
Uno de los grandes problemas a la hora de implementar tanto HTML5 como CSS3 es el relacionado con la compatibilidad con los distintos navegadores, en general los navegadores modernos no tienen inconvenientes en interpretar los nuevos estándares, no obstante ¿que ocurre con aquellos navegadores más antiguos?

Para ayudarnos a decidir que propiedades utilizar y cuales no podemos utilizar el sitio When can I Use, que nos brinda de forma muy simple y rápida las distintas compatibilidades de cada propiedad con las versiones de navegadores más utilizados. De esta herramienta ya había comentado algo hace un tiempo, pero ahora se encuentra completamente actualizada con opciones de lo más interesantes.

La forma de utilizar esta aplicación online y gratuita es de lo más sencilla, basta con seleccionar los navegadores que deseamos analizar y buscar las propiedades que vamos a utilizar, en las tablas que brinda el sitio podremos ver si dicha característica es reconocida y es compatible con el navegador seleccionado anteriormente.

Ejemplo de uso:

compatibilidad css3 html5

Los valores de cada propiedad varían según el navegador, los resultados posibles son: soportada, no soportada, parcialmente soportada y soporte desconocido.

When can I Use contempla algo que otras tablas de compatibilidad y es lo relacionado a navegadores para dispositivos móviles, por ejemplo tenemos iOS Safari, Opera Mini, Opera Mobile y como no podría faltar Android Browser.

Si lo que deseamos es una respuesta rapida cada propiedad tiene un promedio que nos indica a nivel general que tan compatible es con respecto a todos los navegadores disponibles, eso se indica de la misma forma que cada propiedad de forma individual. Por ejemplo si deseamos utilizar CSS min/max-width/height veremos que el porcentaje es alto, un 91.13%, es decir, es compatible con casi todos los navegadores.

Un sitio que va directamente a mis marcadores :D

Web: When can I Use

"

jQAPI, documentación alternativa de jQuery

jQAPI, documentación alternativa de jQuery: "
Uno de los aspectos más importantes que debe contemplar cualquier framework, independientemente del lenguaje que utilice, es el referido a la documentación del mismo, jQuery hace un muy buen trabajo en cuanto a documentar en detalle cada una de las funciones y opciones disponibles. No obstante buscar en la documentación oficial de jQuery puede volverse un poco tedioso, para agilizar este proceso existe una alternativa llamada jQAPI.

jQAPI es un sitio que contiene toda la documentación alternativa disponible online pero que organiza la información de una manera mucho más accesible, y rápida. A diferencia de la documentación oficial de jQuery, uno cuando por ejemplo busca una función en  jQAPI el sitio nos va a devolver solamente un resultado con la información, en lugar de muchas paginas como hace la documentación oficial.

documentación jquery

Otro detalle genial es que podemos descargar toda la documentación con un solo click, tanto en versión HTML como en AIR, lista para consultarla en cualquier momento y desde la comodidad de nuestro disco en local.

Esta documentación jQuery puede ser navegada con el uso de las teclas de direcciones, un método simple pero efectivo de recorrer rápidamente las distintas secciones.

En lo personal voy a utilizar mucho más esta documentación que la oficial, uno agiliza muchísimo el proceso de buscar información, y ademas tener una versión instalada de forma local es una gran ayuda para la consulta rápida.

Web: jQAPI

"