Browse Tag: css

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!

 

Multibrowser el navegador perfecto para los desarrolladores web

NOTA: El software ha sido descontinuado.

Compruebe que su sitio web tiene un aspecto perfecto en todos los navegadores. La captura de pantalla no está mal, pero trabajar con los navegadores en un ambiente real es mucho mejor. Multibrowser es la agrupación de todos los navegadores de uso común, en una aplicación.

Página web de Multibrowser

Multibrowser contiene casi todos los navegadores que más se usan actualmente: Internet Explorer 7, 8, 9, Firefox y Google Chrome. Se trata de una representación real de los núcleos de cada navegador. La aplicación te permite ver hasta cuatro sitios web de manera simultánea en los diferentes modos y puntos de vista existentes.

Tres espacios de trabajo diferentes

Multibrowser tiene un buen ambiente de trabajo para cada fase del proyecto. El modo de diseño, si va a crear o editar el proyecto. Contiene muchas herramientas inteligentes y útiles, tales como las reglas y guías, que permiten medir el tamaño de los elementos, y WebTools para la edición de CSS en tiempo real. El modo de comparación, si es necesario comparar varias versiones de su proyecto en un navegador. Y, por último, el modo de Vista, que se utiliza para el control final de su proyecto en todos los navegadores.

Capacidad de navegación por el sitio web completo

Multibrowser no genera las imágenes estáticas de las páginas. Solo contiene la mayoría de los navegadores que más se utilizan en la actualidad, y lo más importante es que los sitios web se muestran en la misma forma que en los navegadores nativos, incluyendo todos los accesorios y funciones. Las páginas pueden ser vistas con eficacia en todos los navegadores seleccionados al mismo tiempo.

La edición en línea del código CSS (WebTools)

Multibrowser contiene una herramienta de gran alcance que es WebTools. Seguramente, usted debe haber oído hablar de Firebug. No negamos que hemos estado un poco inspirados por este popular complemento para Firefox, mientras estábamos desarrollando nuestro WebTools, herramienta que permite modificar el estilo para mostrar los cambios que hechos en tiempo real, muestra los estilos y la posición de los elementos dentro del árbol DOM. Otras características incluyen el Validador HTML del código fuente.

Monitoreo en línea de los cambios en todos los navegadores al mismo tiempo

¿Está familiarizado con la situación cuando se está depurando un sitio web o una plantilla para un navegador concreto y, mientras tanto, se le rompe la disposición de los demás? Posteriormente, tendrá una tarea complicada y el tiempo para revisar las páginas en todos los navegadores, o que va a recibir imágenes desde otras aplicaciones o servicios. Con Multibrowser todo es mucho más fácil. Con WebTools puede depurar su página o plantilla y usted puede ver inmediatamente los cambios, al mismo tiempo, en todos los navegadores que ha seleccionado. Si se utilizan dos monitores para el trabajo, todo el proceso es incluso más rápido, porque puede tener WebTools en un monitor y los navegadores en el otro.

Validador HTML

Ya no es necesario hacer clic entre múltiples aplicaciones, Multibrowser cuenta con editor y validador. Contiene un sistema integrado de validación de código fuente, que está directamente vinculado con el validador del W3C. Inmediatamente después de la descarga que indica si la página es válida o no. Con un clic podrá encontrar todos los errores y las advertencias en la página, incluyendo el número de las líneas donde se encuentra el error. Los resultados de la validación se muestran directamente en el editor, donde los errores se pueden corregir y volver a validar hasta que el archivo HTML esté correcto y validado, teniendo la posibilidad de guardarlo.

Reglas, guías, zoom y otras herramientas de desarrollo

El modo de diseño contiene herramientas útiles para el desarrollo. Con las reglas usted puede determinar con precisión la distancia de los elementos desde el borde superior e izquierdo de la zona de trabajo. Puede utilizar las guías para verificar la ubicación de los elementos de la página y, al mismo tiempo, puede comprobar la exactitud de sus puntos de vista en los navegadores por separado. Si usted necesita ver cualquier parte de la página con mayor precisión en los detalles, puede utilizar la función de zoom.

Comparación de imágenes con la plantilla HTML

Puede ser que usted haya tenido un diseño gráfico de aspecto perfecto, pero el resultado de la plantilla o sitio web haya sido completamente diferente. Los elementos no encajaban, el tamaño de letra era diferente, había una hendidura, imágenes diferentes, entre otras incongruencias. Para evitar que esto ocurra, Multibrowser le permite cargar una imagen – un diseño gráfico – en una de las ventanas, utilizando las guías para indicar la posición de los elementos individuales y, posteriormente, adaptando el resultado de la plantilla a la imagen.

Inspección de elementos HTML

Una de las funciones más populares. Para no complicar su búsqueda en cuanto al elemento específico en la página de árbol DOM o en los estilos CSS, todo lo que necesita es hacer clic en el elemento de Inspección en el contexto de selección y tendrá toda la información que usted precisa. Y, por supuesto, inmediatamente puede trabajar con el elemento, lo puede modificar y depurar.

Editor integrado de HTML

Si necesita hacer cambios sencillos o escribir unas pocas líneas de código, puede utilizar el editor de HTML integrado, que soporta el resaltado de sintaxis HTML, la numeración de líneas, y mucho más. Por supuesto, todos los cambios están en línea visible en todos los navegadores activos. El editor trabaja con WebTools, por lo que se pueden ver y editar los archivos CSS en la página que se muestra; posibilitando redactar un mayor número de códigos, en lugar de unos pocos atributos.

Soporte para los editores externos y entornos de desarrollo

Aunque Multibrowser incluye un editor de HTML integrado, es claro que cuando se está preparando plantillas y proyectos web, está utilizando el entorno de desarrollo favorito o un editor de HTML completo. No hay problema, en la configuración se establece la ruta a su editor y, posteriormente, se puede hacer todo lo que necesite. Los cambios que se realizados se pueden observar inmediatamente en todos los navegadores activos.

Soporte para el trabajo con dos monitores

Si utiliza un editor externo como se describe anteriormente, usted se quedará impresionado con la capacidad de trabajar con dos monitores a la vez: uno puede tener el editor, donde puede escribir el código, y el otro, mostrar exploradores individuales. Por supuesto, esto posibilita trabajar con WebTools o con el editor integrado.

Otras características de uso fácil y útil:

  • Sincronización de navegación en todas las ventanas.
  • Sincronización de desplazamiento de las páginas en todas las direcciones, solo tienes que arrastrar el ratón.
  • Posibilidad de personalizar el tema con aplicaciones de color.
  • Entorno estándar y fácil de usar cómo otras aplicaciones de Windows.

Fuente: http://www.multi-browser.com/

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