Browse Tag: css3

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!

 

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