Browse Tag: html5

Curso online sobre desarrollo web desde iDESWEB

iDESWEB

Un curso nuevo de tipo MOOC, totalmente gratuito y disponible en la Web (curso online), con el que vas a aprender los conceptos básicos del desarrollo de aplicaciones web.

Aprende HTML, CSS, JavaScript, PHP… y los principios básicos del diseño, de la usabilidad y de la accesibilidad web.

iDESWEB es el primer MOOC sobre desarrollo web en español. En un curso de este tipo, tanto los participantes como los materiales del curso están distribuidos a través de la Web. Esto sólo es posible si el curso está disponible en abierto, y funciona significativamente mejor si el curso es grande.

En el sitio web ¿Qué son los MOOCs? puedes encontrar mucha información sobre los MOOCs.

Temario

Este curso se compone de los siguientes temas principales: Historia, El desarrollo web, HTML, CSS, JavaScript, DOM, PHP, PHP: tecnologías complementarias, y Varios.

Historia

  1. Historia de Internet
  2. Historia de la Web
  3. Historia de los navegadores web

El desarrollo web

  1. Arquitectura de una aplicación web
  2. Tecnologías de desarrollo web
  3. Diseño de una aplicación web

HTML

  1. HTML: conceptos básicos
  2. HTML: conceptos avanzados
  3. HTML5

CSS

  1. CSS: conceptos básicos
  2. CSS: conceptos avanzados
  3. CSS3
  4. Frameworks de CSS

JavaScript

  1. JavaScript: conceptos básicos
  2. JavaScript: conceptos avanzados
  3. JavaScript: orientación a objetos
  4. JavaScript: expresiones regulares
  5. JavaScript: cookies
  6. Frameworks de JavaScript

DOM

  1. DOM: objetos, métodos y propiedades
  2. DHTML

PHP

  1. PHP: conceptos básicos
  2. PHP: manejo de formularios
  3. PHP: cookies y sesiones
  4. PHP: acceso a una base de datos
  5. PHP: funciones de filtrado
  6. PHP: expresiones regulares
  7. PHP: manejo de ficheros y sistema de ficheros
  8. PHP: subida de ficheros
  9. PHP: orientación a objetos
  10. PHP: excepciones
  11. PHP: tratamiento de imágenes
  12. PHP: PDO, mysqli y adoDB
  13. Frameworks de PHP

PHP: tecnologías complementarias

  1. XAMPP
  2. MySQL
  3. phpMyAdmin

Varios

  1. Propiedad intelectual y licencias de uso
  2. Alojamiento de un sitio web
  3. Usabilidad
  4. Accesibilidad

¡Apúntate y aprende!

 

Buenas prácticas para el Desarrollo Web con HTML5

Desarrollo Web con HTML5

Quizás muchos de ustedes se están iniciando en el Desarrollo Web con 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.

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 Shikiryu generator. Sin olvidarnos de el excelente HTML5 Boilerplate.

Tener siempre a mano un chuleta de HTML5

HTML5 Cheat Sheet - Tags

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 chuleta (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

HTML5 sigue siendo una tecnología nueva. Aunque poco a poco muchos navegadores ya la van incorporando no en todos funciona ni de la misma forma. Por eso es recomendable tener siempre a mano la web de Can I Use.com para consultar que especificaciones podemos usar, aquí encontraréis tablas de compatibilidades de CSS3, SVG y Javascript.

Saber cómo hacer compatibles HTML5 y versiones antiguas de Internet Explorer

Internet Explorer siempre ha sido un quebradero de cabeza para los desarrolladores web. Con HTML5 promete dar aún algunos dolores de cabeza, al menos para las versiones antiguas de IE 8 y anteriores. La buena noticia es que existe un script que te soluciona la vida de una forma muy simple. Se trata de este de html5shim que con tan sólo incluir en la cabecera de tu código permite ser compatible.

<!-- [if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Usar los elementos correctamente

Puede parecer una gilipollez y te va a funcionar igual, pero si HTML5 nos da tags específicos como header, footer, article, section, aside, nav…. debemos usarlos y olvidar los viejos div para esos casos. Nuestro código se verá favorecido en legibilidad y podremos aprovechar mucho mejor las características de HTML5 para el marcado de nuestras webs.

Valida tu código

Nunca hay que olvidar hacer un código valido. Nos quejamos de la compatibilidad de los navegadores, pero en muchas ocasiones no hemos escrito el código correctamente para que valide, lo que da problemas en algunos navegadores “menos listos” o incluso en la forma que Google nos indexa. El W3C Validator es nuestro amigo.

Vía | Cats Who Code

Frameworks de CSS para el Desarrollo Web

La palabra inglesa “framework” define, en términos generales, un conjunto estandarizado de conceptos, prácticas y criterios para enfocar un tipo de problemática particular, que sirve como referencia para enfrentar y resolver nuevos problemas de índole similar.

Un framework para aplicaciones web es un framework diseñado para apoyar el desarrollo de sitios web dinámicos, aplicaciones web y servicios web. Este tipo de frameworks intenta aliviar el exceso de carga asociado con actividades comunes usadas en desarrollos web y su intención es principalmente ahorrar tiempo y minimizar el riesgo de errores en el desarrollo de aplicaciones. Los frameworks nos evitan, sobre todo en los momentos iniciales del desarrollo de una aplicación, repetir código para construir la base y nos permiten conseguir ciertas funcionalidades.

¿Qué es un framework CSS?

Igual que sus parientes orientados a lenguajes de servidor o cliente, el objetivo de un framework CSS será ahorrarnos realizar las tareas básicas al trabajar con hojas de estilo. Normalmente los frameworks CSS se componen de uno o varios archivos con declaraciones predefinidas que incluyen:

Reset (reset.css): Resetear los estilos al empezar a trabajar la maquetación de una página, nos permitirá homogeneinzar, a priori, las posibles diferencias de visualización entre navegadores, unificando las propiedades básicas de los elementos: margin, padding, font, border, etc.

Tipografías (text.css): Una gestión genérica de las tipografías que se usarán en la página. De nuevo, no sólo se trata de aplicar un uso inteligente de fuentes y tamaños, si no de unos altos de línea, margin, padding, font-size, line-height, etc, que ayuden a  mantener un correcto ritmo vertical en la página.

Layout (grid.css): Una parte de los frameworks va dirigida a una de las tareas más arduas a la hora de maquetar cualquier diseño: conseguir un determinado layout, más o menos complejo, que sea, además de óptimo, “cross-browser”,  compatible con todos los navegadores. Suelen disponer de múltiples opciones combinables para conseguir layouts complejos: múltiples columnas, anchos fijos, elásticos y líquidos.

Style (style.css): Estilo personalizado por el desarrollador, ya sea para modificar algunas de las configuraciones anteriores o concentrarse en la maquetación del diseño gráfico para la aplicación o sitio web.

Ventajas de usar un framework CSS

  • Permite agilizar el desarrollo, sobretodo en sus momentos iniciales.
  • Te ahorra las habituales batallitas entre navegadores para conseguir que tus layouts sean “cross-browser”.
  • Partes de una base normalizada / homogeneizada sobre la que desarrollar un trabajo adicional.
  • Si el framework CSS está bien documentado, agiliza el trabajo en un equipo relativamente grande.

Desventajas de usar un framework CSS

  • Curva de aprendizaje. Algunos frameworks son realmente complejos y es necesaria bastante dedicación y pruebas para llegar a controlarlos bien, conocer y usar todo su potencial.
  • Puede afectar negativamente a la semántica de tu marcado HTML. La mayoría de los frameworks contienen definiciones demasiado genéricas que además han sido pensadas y nombradas pensando únicamente en la apariencia que tendrán
  • Gran parte del código nunca será utilizado. Los frameworks intentan prever todas las situaciones y contienen muchas definiciones genéricas que posiblemente nunca lleguemos a utilizar. Esta desventaja sería en realidad aplicable también a otro tipo de frameworks. Con la diferencia que un framework PHP por ejemplo, el cliente no debe descargar TODO el framework para que la aplicación funcione: se ejecuta en el servidor. El CSS en cambio sí debe descargarse al navegador, con lo que debemos cuidar su extensión si no queremos afectar negativamente al rendimiento.
  • Por último, y posiblemente la más importante, es que usar un framework CSS te corta las alas a la hora de aprender, de entender cómo funcionan realmente las hojas de estilo. Muchas de las cosas que se aprende mientras te rompes los cuernos tratando de solucionar absurdos bugs de render de Internet Explorer, o de conseguir flotar aquella caja rebelde, o buscando el motivo por el cual la cascada se iba a tomar viento al definir tal o cuál color. En mi opinión, condiciona excesivamente el trabajo del desarrollador.

Los Frameworks de CSS más usados

960 Grid System

El 960 Grid System es de uso gratuito, y puede ser aprovechado para satisfacer sus necesidades específicas. Se ha dividido en varios proyectos, incluyendo versiones que fueron construidas para ser fluida y elástica.

http://960.gs/

Blueprint

Blueprint es un framework de CSS, que tiene como objetivo reducir el tiempo de desarrollo. Te da una base sólida para construir tu proyecto, es de fácil uso, la tipografía sensible, plugins útiles, e incluso una hoja de estilo para la impresión.

http://www.blueprintcss.org/

YUI Grids CSS

El YUI Grids CSS ofrece cuatro anchos de página predeterminada, seis plantillas preestablecidas, y la capacidad de apilar y anidar regiones subdivididas en dos, tres o cuatro columnas. El archivo de 4kb ofrece más de 1000 combinaciones de diseño de página.

http://developer.yahoo.com/yui/grids/

Baseline

Baseline está construido a partir de las normas tipográficas más claras, pretende simplificar el desarrollo de un sitio web en un entorno agradable. Comienza con varios archivos para restaurar el comportamiento por defecto del navegador, crear un diseño de base tipográfica, incluye el estilo de los formularios HTML y los nuevos elementos de HTML 5 y construye un sistema de red simple.

http://baselinecss.com/

Less Framework

Less Framework es un framework de CSS para el diseño de sitios web adaptativos. Contiene cuatro disposiciones y 3 juegos tipografías construidas para ser fluida y elástica.

http://www.jonikorpi.com/less-framework/

52framework

52framework se presenta como el primero en especializarse en HTML5 y CSS3, el futuro de la programación web que ya está más cerca de lo que pensamos.

http://www.52framework.com/

Twitter Bootstrap

Twitter Bootstrap es una solución flexible que ofrece muchas más potencia que el CSS normal. Conseguimos una serie de características extras como las declaraciones anidadas, mixins, operaciones y funciones de color. Es fácil de implementar en el código tan sólo incluyendo la declaración en la cabecera y usar los componentes disponibles.

http://twitter.github.com/bootstrap/

Otros Frameworks de CSS