Mostrando las entradas con la etiqueta HTML5 y CSS3. Mostrar todas las entradas
Mostrando las entradas con la etiqueta HTML5 y CSS3. Mostrar todas las entradas

2012/06/19

8 cosas que deberíamos comprobar antes de lanzar un sitio web


Cuando desarrollamos sitios web ponemos gran empeño en generar un bonito diseño y nos preocupamos por generar una estructura de navegación fácil de entender y utilizar para los usuarios, pero muchas veces descuidamos algunos detalles importantes, sobre todo a la hora de poner nuestro sitio web en línea.
Personalmente, siempre tengo a la mano estos detalles en un checklist y me preocupo de aplicarlos a cada proyecto. Tomará algunos minutos extra llevar a cabo todas las comprobaciones necesarias, pero al final todo valdrá la pena.

1. Validar el código HTML

Validar el código HTML de nuestro sitio web es una tarea muy simple que nos ayudará a evitar dolores de cabeza. Tener código HTML válido es sinónimo de que tendremos un sitio de calidad, que se ve correctamente en cualquier navegador moderno y que será mucho más atractivo para los buscadores a la hora de indexar.
W3C pone a nuestra disposición el Markup Validation Service, una excelente herramienta para llevar a cabo esta simple tarea. También existen extensiones para los distintos navegadores para automatizar el proceso de validación.

2. Realizar pruebas en múltiples navegadores

Luego de validar el código de nuestro sitio podemos comprobar que efectivamente luce genial y funciona correctamente desde cualquier navegador, de no ser así, tenemos la oportunidad de realizar los ajustes necesarios.
Aunque por lo general solemos tener la última versión de los navegadores más importantes instalados en nuestras máquinas, es casi imposible tener todas las versiones de todos los navegadores para ejecutar esta comprobación. Por fortuna existen herramientas como Browsershots para hacernos el trabajo mucho más fácil.

3. Comprobar navegación móvil

Cada vez es más común navegar por la red utilizando teléfonos móviles y tablets, lo que se traduce en dispositivos con resoluciones distintas y pantallas de diferentes tamaños que al final resultan en miles de maneras distintas de visualizar una página web.
En la actualidad es muy frecuente encontrar sitios con versiones especialmente diseñadas para su visualización desde dispositivos móviles. Para conocer si el nuestro se adapta a las exigencias del mundo móvil podemos utilizar W3C mobileOK Checker.

4. Configurar una página de error 404

Como bien debes saber, las páginas de error 404 aparecen cuando un usuario intenta acceder a una página que no existe en el servidor. Algunos no le dan mucha importancia a estas páginas de error, pero la verdad es que podemos sacarles algo de provecho.
Agregar algún mensaje gracioso y añadir enlaces hacia otras páginas del sitio -útiles para el usuario- suelen ser buenas maneras de aprovechar los errores 404. En la red puedes encontrar muchísimos ejemplos creativos sobre esto.

5.Crear un Sitemap

Esta es una tarea de gran importancia, curiosamente también es una de las que pasamos por alto con mayor frecuencia. Un Sitemap bien elaborado brinda a los buscadores una estructura clara de nuestro sitio web y les brinda un camino seguro para llegar a lugares que por distintas razones no alcanzan mediante el proceso normal de rastreo, como por ejemplo, páginas que no están enlazadas desde el menú.
Generar un Sitemap es una tarea para nada complicada y existen muchas herramientas disponibles para crearlos de manera automática.

6. Cargar un favicon

Es quizá la tarea más sencilla de la lista y, aunque no es vital para el funcionamiento del sitio, tiene una gran utilidad. Si no estás familiarizado con el término, el favicon es esa pequeña imagen que se muestra junto a la URL de tu sitio en la barra de direcciones del navegador y también es la que utiliza este último para identificar las páginas marcadas como favoritas por los usuarios.
El favicon le da cierta personalidad al sitio, de alguna forma es la “marca” de tu página web, ya que ayuda a los usuarios a identificarla rápidamente, sobre todo, cuando hay muchas pestañas abiertas en el navegador.

7. Notificar a los buscadores

Aunque los buscadores están rastreando la web constantemente en busca de nuevos sitios y contenido fresco, no es mala idea enviarles una notificación de que nuestra página existe, sobre todo cuando se trata de un nuevo dominio.
El procedimiento es extremadamente sencillo y de hecho los propios buscadores nos ofrecen una página especial para esto. Acá les dejos los enlaces para hacerlo en Google y Bing

8. Configurar Google Analytics

Aunque existen múltiples herramientas para realizar análisis de sitios web, Google Analytics es una de las más completas y fáciles de configurar.
En la actualidad su uso es casi obligatorio, sin embargo, es muy común que por darle prioridad a otras tareas pasemos por alto configurar el script que nos permitirá dar seguimiento preciso al tráfico de nuestros sitios web.

Fuente: http://bitelia.com

2012/03/20

Material Oficial Blackhat Europe 2012

Se ha liberado el material (White Papers, Slides, Sources) de Blackhat Europe 2012, el congreso de seguridad más importante de Europa. 

Muchos se ven muy interesantes y vale la pena darse un tiempo para verlos:

  • Axelle Apvrille – Guillaume LovetAn Attacker’s Day into Virology: Human vs Computer
  •  Antonios Atlasis – Attacking IPv6 Implementation Using Fragmentation
  • Michael Baker Finding Needles in Haystacks (The Size of Countries)
  • Andrey Belenko – Dmitry Sklyarov "Secure Password Managers" and “Military-Grade Encryption” on Smartphones: Oh Really?
  • Andy DavisHDMI – Hacking Displays Made Interesting
  • Stephen de Vries – Beyond Scanning: Automating Web Application Security Tests
  • Tyrone Erasmus – The Heavy Metal That Poisoned the Droid
  • Takahiro Haruyama – Hiroshi SuzukiOne-byte Modification for Breaking Memory Forensic Analysis
  • Marcia Hofmann – Seth SchoenDefending Privacy at the U.S. Border: A Guide for Travelers Carrying Digital Devices
  • Jeff Jarmoc – SSL/TLS Interception Proxies and Transitive Trust
  • Ling Chuan Lee – Chan Lee YeeGDI Font Fuzzing in Windows Kernel For Fun
  • Steve Lord – Drop It Like It’s Hotspot: Hacking Mifi Routers For Nefarious Purposes
  • Rafal Los – Shane MacDougallOffensive Threat Modeling for Attackers: Turning Threat Modeling on its Head
  • Matias Madou – Secure in 2010? Broken in 2011!
  • Mariano Nunez Di Croce – Cyber-Attacks & SAP systems: Is Our Business-Critical Infrastructure Exposed?
  • Phil Polstra – Preventing “Oh Shit!” Moments for 20 Euros or Less
  • Jerome Radcliffe – Issues with Embedded Device Disclosures: Helping the Vendors and Recognizing the End-Users
  • Enno Rey – Daniel MendeAll Your Calls Are Still Belong to Us: How We Compromised the Cisco VoIP Crypto Ecosystem
  • Simon Roses Femerling – Smartphone’s Apps Are Not That Smart: Insecure Development Practices
  • Paul Royal – Entrapment: Tricking Malware with Transparent, Scalable Malware Analysis
  • Rahul Sasi – IVR Security- Internal Network Attack via Phone Lines
  • Justin Searle – Dissecting Smart Meters
  • Shreeraj Shah – HTML5 Top 10 Threats: Stealth Attacks and Silent Exploits
  • Sumit Siddharth – Tom ForbesHacking XPATH 2.0
  • Alexey Sintsov – Lotus Domino: Penetration Through the Controller
  • Didier Stevens – Malicious PDF Analysis
  • Ben Williams – They Ought to Know Better: Exploiting Security Gateways via Their Web Interfaces
  • Chris Wysopal – Data Mining a Mountain of Zero Day Vulnerabilities
  • Justin Searle – Workshop: SamuraiWTF

Aquí la web oficial por si suben más charlas: https://www.blackhat.com/

Fuente: http://www.cyberhades.com/

2012/03/15

10 tecnologías web a aprender en el 2012

Este es el año más divertido para ser un tejedor de experiencias web.

El 2011 fue un año de DOLOR. HTML5 era brillante y raro. Flash fue herido por el presidente de Adobe, quizas el CEO más idiota de la industria. Android aplastaba al iPhone pero era aplastado por el iPad. Y la gente, al fin, entendió que usar Blackberry en ésta decada es como ver TV blanco y negro en un mundo HD.

Este año 2012, si eres frontend, backend, diseñador, programador o te encargas de cualquier cosa que tenga que ver con poner colores en una pantalla conectada a Internet, estas son las 10 tecnologías que, sin duda, debes amaestrar:
  • HTML5 y CSS3
  • Stylus o LESS
  • Node.js
  • CoffeeScript
  • jQuery Mobile o Sencha Touch
  • Phonegap o Flash Mobile
  • MongoDB o Redis
  • Django + Python
  • Responsive Design
  • El iPad

HTML5 y CSS3... duh!


Es obvio, pero lo reiteramos. No saber HTML5 es irresponsable. No conocer CSS3 es odiarte y un signo de masoquismo. HTML5 y CSS3 hacen todo TAN FÁCIL que no usarlos es autodestructivo.

¿Quieres detectar eventos touch en móviles o tablets? ¿Acelerometros? ¿Saber la latitud y longitud de un usuario? ¿Guardar en disco? ¿Crear bordes redondeados? ¿Transparencias? ¿Animaciones? Todo desde el navegador. ¡Aprende HTML5!


Stylus o LESS


CSS es el lenguaje declarativo más estúpido del mundo. CSS fue creado por gente que odia el amor. ¿Cómo es posible no tener herencia real? ¿No tener variables? ¿No tener sumas y restas básicas? No pido ciclos y condiciones, ¡Pido sentido común y decencia!

Stylus y LESS, dos "pre-procesadores" de CSS, lo arreglan. Compatibles con CSS3, generan un CSS limpio, lindo y optimizado, compatible con todos los navegadores y que agrega lo que a CSS le falta.


Cristalab usa Stylus. 



Node.js


Node.js es un servidor que corre cada webapp en un nodo independiente por usuario, comunicables entre sí a través de una grilla al estilo de los Apaches mejor configurados. PERO además se programa con Javascript. Ni PHP, ni Python, ni Java: El buen y viejo Javascript. PERO además es REAL TIME y estupidamente veloz. Es magia de la buena.


Mejorando.la usa Node.js.

(Tutoriales de Node.js, fuck yeah!)


CoffeeScript


Javascript es el lenguaje más famoso y usado del mundo web. En serio. Más que PHP. Y similar a PHP, es horrible, feo, viejo, mal hecho, lleno de malas prácticas y similar a afeitarse con un cactus.

CoffeeScript hace por Javascript lo que Stylus y LESS hacen por CSS. Agrega una sintaxis decente y elegante, orientada a objetos y llena de sentido común, el cual exporta a Javascript de toda la vida, compatible con jQuery y cualquier otro JS que tengas allá afuera.


Cristalab usa CoffeeScript. 



jQuery Mobile, en serio


Si conoces jQuery este no es tu negocio. En serio, aunque seas de marketing. jQuery es la forma fácil, de rápido desarrollo (y lenta ejecución) de hacer web apps.

¿Y jQuery Mobile? Es una obra tan linda que si fuera más inteligente sería millonaria. La forma más fácil de crear no sólo interacción en móviles, sino diseños enteros de apps compatibles con TODOS los teléfonos modernos. TODOS. Aprendanlo por el amor a los tubos.

O si son muy fancy, tienen dinero y no les gusta jQuery Mobile vean Sencha Touch.

PhoneGap/Cordova y Flash/Flex Mobile


PhoneGap es una idea digna de un nobel de paz. Crea apps en HTML5, CSS3 y Javascript, usa el "API" de PhoneGap para acceder a los APIs de teléfonos Android y iPhone y con el mismo código, en un click, compila apps nativas completas para iPhone y Android que puedes vender o regalar en el Google Play (Android Market) o la App Store. Belleza. Belleza que Adobe compró y renombró como el Proyecto Cordova.

PERO si quieres hacer videojuegos móviles, Flash/Flex es la MEJOR opción. Actionscript 3 es un excelente lenguaje y ahora que Steve Jobs está muerto, el compilador de Flash para iPhone y Android con AIR Mobile tiene mucho futuro. ESTE es el futuro de Flash. Apps móviles interactivas multiplataforma.

MongoDB, Redis o... cualquier base de datos NO relacional


SQL no es tan buena idea siempre. A veces las DBs son tan sencillas que una base de datos SQL relacional sólo crea problemas y cuellos de botella. Hay un nuevo tipo de bases de datos basadas en el concepto de "nombre => valor" donde sólo hay un "key", no hay relaciones ni intersecciones de conjuntos, sino más teoría de matrices, hashes y/o diccionarios.

¿Muy técnico? Hay DBs que en su simpleza son MUCHO más veloces que las SQL. Se llaman "no relacionales" y vienen en varios sabores ¿Las más famosas? MongoDB y Redis. Aunque hay más, como BigTable de Google o SimpleDB de Amazon.

(¿Quien se anima a hacer un tuto de esto? Publicalo en Cristalab)

Django/Python


¿Siguen con PHP? Dejen de sufrir. En el 2012, programar en PHP desnudo es cómo hacer un sitio con CSS3 para IE6. Conoce el mundo del futuro: Node.js, Ruby on Rails y sobre todo, Django con Python. Lenguajes modernos, con experiencia y caracteristicas futuristas que los PHPeros no conocen.

Una simple prueba: Django viene con un sistema de manejo de base de datos que abstrae SQL, lo hace innecesario y vuelve imposible las inyecciones SQL. Pero ADEMÁS crea automaticamente los sistemas de administración de los sitios web al entender de manera inteligente la estructura de la información.

(Tutoriales de Python y Django)

"Responsive Design"


El "diseño receptivo adaptivo" o Responsive Design es una nueva corriente. El mismo diseño que pones en una web a 1024px lo puedes "reorganizar" para que se vea lindo en un iPad, en un iPhone o en un Android. No se trata de hacer sitios móviles, sino mantener una unidad de diseño a través de los dispositivos, cambiando de diseños multicolumna a una sola sin sacrificar muchos elementos, sino reorganizar.

Dos ejemplos que resaltan de Responsive Design:

El iPad


El iPad ganó y darme cuenta me dolió. He probado tablets Android chinas, el Samsung Galaxy Tab 10.1, el Blackberry Playbook, el Kindle Fire, la Asus Transformer, el Galaxy Tab 7" y hasta el desproposito de Chromebook. Ya está, Apple ganó.

Contra el iPhone se podía pelear. No tuvieron una App Store en lanzamiento, todos en la industria estaban aprendiendo y había suficiente interés porque Android fuera el sistema que compitiera con fuerza. Android ya había entendido los teléfonos antes que el iPhone saliera al mercado.

¿Pero el iPad? El iPad se adelantó al futuro por completo. Un diseño simplón y obvio por fuera, un iPhone grandote, pero al probarlo, un mundo diferente.

El Galaxy Tab 10.1 es lo más cercano y NO es cercano. No tiene la calidad de apps, la calidad de interfaz, la calidad de gestos, la calidad de construcción. El iPad ganó. Es la mejor tablet, de lejos. 3 años adelante de Samsung, de Asus, de Microsoft. Y me jode un montón.

Con el iPad Pepito (O New iPad o iPad 3 o como se llame), Apple simplemente aplastó a todos. Pasará un año o dos antes que veamos un Retina Display de 10 pulgadas en otra tablet. Pasarán AÑOS antes que veamos apps con la calidad de iPhoto o Keynote de iPad en Android. Pasará una decada antes que cualquier otra tablet llegue al market share que el iPad ha consolidado.

Si te importa el futuro post-PC y el tipo de experiencias web que serán creadas en ese futuro, comprate un iPad ya y empieza a testear.