17 Stunning Pure CSS3 Menu Techniques


17 Stunning Pure CSS3 Menu Techniques


Menu is probably the most important part on many websites. It’s sitting there for merely one single purpose: easy for you to navigate through all the pages. Before CSS3, the background images of each menu item can bring you a heck load of pain, as well as the javascript powered drop-down items and sub-sub menu . Now we are able to create stunning menus only using pure CSS, even including awesome animations. The following pure CSS3 menu techniques and tutorials are for you to experiment and get a hang of it. Let’s get started.

More CSS Techniques from Previous Articles: 

Pure CSS Drop-down Menu

Pure CSS Drop down Menu

 

Stunning Menu in CSS3

Stunning Menu in CSS3

 

Code a Responsive Navigation Menu

Code a Responsive Navigation Menu

Leer más “17 Stunning Pure CSS3 Menu Techniques”

Anuncios

10 buenas practicas para escribir código HTML


Bitelia

La mejor manera de hacer que nuestros sitios web se vean y funcionen correctamente en cualquier navegador, es escribiendo código limpio y que respete los estándares. En la actualidad, la calidad del código HTML presente en cada página es un factor que ayuda a mejorar -o empeorar- el posicionamiento en buscadores, una razón de peso para preocuparnos por escribirlo correctamente.

La lista de buenas practicas que sigue a continuación puede ser percibida por los desarrolladores más avanzados como “básica”, y puede que así sea. Sin embargo, espero que sea de utilidad para todos, en especial para nuestros lectores que recién se inician en este mundo del desarrollo web.

En las primeras versiones del lenguaje -hablo de muchos muchos años atrás- y con los navegadores antiguos, muchas de estas reglas podían omitirse y cada uno establecía su propio estilo, sin que esto preocupara mucho a nadie. Por fortuna, las cosas han cambiado y hoy día somos mucho más exigentes con nosotros mismos.

Existe algunas reglas que debemos respetar, sobre todo ahora que HTML5 comienza a presentarse con más fuerza. Estas reglas no las inventé yo, solo las aprendí con mi trabajo y hoy quiero compartirlas para que todos escribamos HTML de calidad.

Declarar el DOCTYPE correcto

Existen varias versiones de HTML, cada una con sus propias reglas, etiquetas, elementos y atributos. La única manera de que un navegador muestre correctamente una página web es conociendo exactamente la versión de HTML que usa el documento que la contiene.

Para indicarle al navegador la versión de HTML que estamos usando debemos usar la declaración <!DOCTYPE> y debe ser la primera línea de nuestro documento. Y aquí algunos ejemplos:

DOCTYPE en HTML5
<!DOCTYPE html>

DOCTYPE HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

DOCTYPE XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Si te encuentras un poco confundido ahora, puedes utilizar esta referencia donde se muestran las diferentes declaraciones posibles y las diferencias entre ellas.

Recuerda cerrar las etiquetas Leer más “10 buenas practicas para escribir código HTML”

Seis sencillas “buenas prácticas” cuando usemos HTML5


Txema Rodríguez  | genbetadev.com

 

Quizás muchos de vosotros os estéis iniciando en HTML5, por eso es bueno comenzar con unas cuantas buenas prácticas de HTML5 desde el principio. Son bastante básicas, pero no está de más recordar alguna de ellas, ya que sobre todo nos ayudarán a crear un mejor código HTML5.

Usar un generador de plantillas básicas

Al comenzar a desarrollar una web normalmente lo primero es definir los elementos básicos, buena parte de ellos son los mismos en casi todas las páginas, algunos tags iniciales como: header, footer, metas… Para crear este esqueleto básico podemos usar alguno de los generadores de plantillas disponibles en forma online.

Algunos de los más conocidos son SwitchToHTML5Shikiryu generator. Sin olvidarnos de el excelenteHTML5 Boilerplate.

Tener siempre a mano un cheat sheet de HTML5

Seamos sinceros. No conocemos todos los tags HTML5 y algunas veces muchos de ellos se nos olvidan con frecuencia. Eso sin contar los nuevos que se van introduciendo. Así que lo mejor es tener siempre a mano una (cheat sheet) de HTML5. Podéis encontrar unas cuantas sobre tags,event handler o soporte en navegadores en la web siempre actualizadas.

Ser cuidadoso con la compatibilidad de los elementos que usemos Leer más “Seis sencillas “buenas prácticas” cuando usemos HTML5″

Timeline del HTML5 #infografia #infographic #internet |


 

TICs y Formación

Infografía con el Timeline del HTML5.

 

Estándares web | por Blas Hernández


http://www.manualdeestilo.com

 

Desde el inicio de internet hasta nuestros días la web ha sufrido una evolución constante y frenética que dificulta el proceso de maquetación debido a la gran cantidad de formatos y tecnologías existentes, que presentan incompatibilidades de reproducción en determinados soportes y navegadores web.

World Wide Web Consortium

Actualmente, para evitar este problema existe el Consorcio World Wide Web (W3C) en el que se trabaja en la creación de estándares web que unifiquen la dirección del desarrollo web para conseguir un acceso universal al contenido.

 

 


Cuáles son los estándares actuales más utilizados ? (…) Leer más “Estándares web | por Blas Hernández”

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


http://bitelia.com

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 comoBrowsershots 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. Leer más “8 cosas que deberíamos comprobar antes de lanzar un sitio web”

HTML5 – code example of drag and drop on a web page


ibm.com/developerworks

I have recently attended a couple of analysts meetings where the subject of HTML5 was a recurring theme.  With my curiosity peeked, I decided to explore what HTML5 has to offer today.  Of particular interest is the drag and drop (d&d) API… as this has always been the holy grail of early HTML practitioners.  What I discovered was very cool… as d&d is now a simple matter of implementing a few effortless method calls.

For my example of d&d, I created a simple network configuration demo that illustrates an administrator UI to provision resources.  You can drag the example resources between zones, add resources to a zone, or simply remove a resource that is no longer required.  I kept my example basic for educational purposes, but as you can see, one could develop a full blown network administration tool using drag & drop as a central element of the user interface.

Here is my example, give it a test drive (requires Firefox 3.5 or greater):

 https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/resource/d_and_d.html?lang=en 

The key methods to implement d&d are basic and easily implemented as follows: Leer más “HTML5 – code example of drag and drop on a web page”