Este documento presenta una introducción a los frameworks CSS. Explica brevemente qué son los frameworks CSS y sus ventajas e inconvenientes. Luego, ofrece una panorámica de varios frameworks populares como 1Kb CSS Grid, 960 Grid System, Blueprint, Foundation y Bootstrap, describiendo sus características principales. Finalmente, discute algunos factores a considerar a la hora de elegir un framework para un proyecto en particular.
Empiezo contando qué es Bootstrap, sus ventajas e inconvenientes, y como empezar a usarlo.
Luego cuento detalladamente las distintas características del framework: el sistema de rejilla, la tipografía, las tablas, los formularios, los botones, las imágenes, los helpers...
Continúo explicando las facilidades que tiene para realizar diseños adaptables.
Sigo enumerando los distintos componentes del framework, y los distintos añadidos que tiene si además utilizas JavaScript.
Para terminar, comento como se puede personalizar, ya sea usando tu propio CSS, modificando el CSS de Bootstrap desde la página destinada a tal efecto, o directamente compilando los ficheros Less del core.
Empiezo contando qué es Bootstrap, sus ventajas e inconvenientes, y como empezar a usarlo.
Luego cuento detalladamente las distintas características del framework: el sistema de rejilla, la tipografía, las tablas, los formularios, los botones, las imágenes, los helpers...
Continúo explicando las facilidades que tiene para realizar diseños adaptables.
Sigo enumerando los distintos componentes del framework, y los distintos añadidos que tiene si además utilizas JavaScript.
Para terminar, comento como se puede personalizar, ya sea usando tu propio CSS, modificando el CSS de Bootstrap desde la página destinada a tal efecto, o directamente compilando los ficheros Less del core.
Wordpress como framework - DarioBF en WordCamp BarcelonaDarío BF
Esta sesión será una reflexión de por qué WordPress en la actualidad representa algo más que un gestor de contenidos orientado a blogs y nos hablará de:
- Gestión de administración sencilla.
- Gestión y permisos de usuarios.
- Motor de creación de temas.
- Plugins.
- Caché.
- Gestión de multimedia (imágenes, PDFs, etc).
Además, nos dará algunas claves para aprovechar al máximo sus funciones para utilizarlo como framework de desarrollo.
Presentación del "Seminario Introducción a HTML5 y CSS3" impartido el 28 de octubre de 2010 en el CEU San Pablo por Paradigma Tecnológico.
Desde Paradigma, esperamos que el seminario cumpliera con vuestras expectativas y que os haya servido para conocer dichos estándares y os sirva de punto de partida para el desarrollo de nuevas aplicaciones web.
Muchas gracias.
HTML 5 es el próximo estándar de sitios web en Internet. La ponencia parte de la historia de Internet para llegar a las implementaciones actuales en los más modernos navegadores de Internet.
HTML5 Nuevas Etiquetas Semánticas. Se presentan y describen las nuevas etiquetas del estándar HTML5. Aunque se repasan la mayoría de ellas se hace un mayor énfasis en etiquetas y atributos para formularios.
HTML5 es la respuesta de ingenieros y especialistas de empresas y organizaciones tecnológicas dedicadas a la web, quienes propusieron un estándar acorde a los nuevos tiempos y necesidades. Hoy en día, HTML5 está en vías de convertirse en un estándar oficial y es la punta del iceberg de un conjunto de tecnologías de web abierta destinadas a revolucionar la forma en que se construyen sitios y aplicaciones web.
Wordpress como framework - DarioBF en WordCamp BarcelonaDarío BF
Esta sesión será una reflexión de por qué WordPress en la actualidad representa algo más que un gestor de contenidos orientado a blogs y nos hablará de:
- Gestión de administración sencilla.
- Gestión y permisos de usuarios.
- Motor de creación de temas.
- Plugins.
- Caché.
- Gestión de multimedia (imágenes, PDFs, etc).
Además, nos dará algunas claves para aprovechar al máximo sus funciones para utilizarlo como framework de desarrollo.
Presentación del "Seminario Introducción a HTML5 y CSS3" impartido el 28 de octubre de 2010 en el CEU San Pablo por Paradigma Tecnológico.
Desde Paradigma, esperamos que el seminario cumpliera con vuestras expectativas y que os haya servido para conocer dichos estándares y os sirva de punto de partida para el desarrollo de nuevas aplicaciones web.
Muchas gracias.
HTML 5 es el próximo estándar de sitios web en Internet. La ponencia parte de la historia de Internet para llegar a las implementaciones actuales en los más modernos navegadores de Internet.
HTML5 Nuevas Etiquetas Semánticas. Se presentan y describen las nuevas etiquetas del estándar HTML5. Aunque se repasan la mayoría de ellas se hace un mayor énfasis en etiquetas y atributos para formularios.
HTML5 es la respuesta de ingenieros y especialistas de empresas y organizaciones tecnológicas dedicadas a la web, quienes propusieron un estándar acorde a los nuevos tiempos y necesidades. Hoy en día, HTML5 está en vías de convertirse en un estándar oficial y es la punta del iceberg de un conjunto de tecnologías de web abierta destinadas a revolucionar la forma en que se construyen sitios y aplicaciones web.
Accesibilidad práctica con HTML5, CSS3 y WAI-ARIAManuel Razzari
Presentado por Camilo Kawerín y Manuel Razzari el 28/11/2012 en http://ux2012.com.ar La Jornada Anual de Experiencia de Usuario en Argentina, organizado por IxDA Buenos Aires.
How to use the Javascript WEB API. Programming in web browsers. Slides from the Javascript Module for Mobile Applications Development Diploma in Colombia
MercadoLibre es una plataforma de e-commerce de gran escala con un alto tráfico. Todo los equipos de diseño y desarrollo deben estar atentos, ser rápidos y consistentes entre sí. A partir de este contexto, Chico UI fue creado, siguiendo los estándares web con el objetivos de satisfacer la necesidades de los equipos. Chico UI es open source y busca ayudar a las personas que desean trabajar con la plataforma.
Conoceremos el panorama actual de CSS y los mal usos del lenguaje, para ponernos en situación y ver las ventajas que nos va a ofrecer CSS-in-JS en nuestros desarrollos con React.
Como una de las soluciones más populares a los ‘problemas’ actuales con CSS vamos a utilizar styled-components. Una propuesta que nos va a permitir desarrollar componentes estilizados preparados para ser utilizados en nuestro proyecto, ayudándonos a dar solución a los problemas ocasionados por la cascada, especificidad y declaraciones de nombres mejorando también nuestro performance CSS.
Existe un gran debate entre personas muy opuestas a utilizar CSS-in-JS, en parte es debido a que no llegan a conocer en profundidad las soluciones que nos ofrecen. Con styled-components podemos utilizar cualquier característica que nos proporciona CSS vanilla. Veremos cómo definir componentes estilizados, estilos condicionales, estilos globales, animaciones, theming y estilizar componentes de terceros.
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informáticavazquezgarciajesusma
En este proyecto de investigación nos adentraremos en el fascinante mundo de la intersección entre el arte y los medios de comunicación en el campo de la informática.
La rápida evolución de la tecnología ha llevado a una fusión cada vez más estrecha entre el arte y los medios digitales, generando nuevas formas de expresión y comunicación.
Continuando con el desarrollo de nuestro proyecto haremos uso del método inductivo porque organizamos nuestra investigación a la particular a lo general. El diseño metodológico del trabajo es no experimental y transversal ya que no existe manipulación deliberada de las variables ni de la situación, si no que se observa los fundamental y como se dan en su contestó natural para después analizarlos.
El diseño es transversal porque los datos se recolectan en un solo momento y su propósito es describir variables y analizar su interrelación, solo se desea saber la incidencia y el valor de uno o más variables, el diseño será descriptivo porque se requiere establecer relación entre dos o más de estás.
Mediante una encuesta recopilamos la información de este proyecto los alumnos tengan conocimiento de la evolución del arte y los medios de comunicación en la información y su importancia para la institución.
Es un diagrama para La asistencia técnica o apoyo técnico es brindada por las compañías para que sus clientes puedan hacer uso de sus productos o servicios de la manera en que fueron puestos a la venta.
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informáticavazquezgarciajesusma
En este proyecto de investigación nos adentraremos en el fascinante mundo de la intersección entre el arte y los medios de comunicación en el campo de la informática.
La rápida evolución de la tecnología ha llevado a una fusión cada vez más estrecha entre el arte y los medios digitales, generando nuevas formas de expresión y comunicación.
Continuando con el desarrollo de nuestro proyecto haremos uso del método inductivo porque organizamos nuestra investigación a la particular a lo general. El diseño metodológico del trabajo es no experimental y transversal ya que no existe manipulación deliberada de las variables ni de la situación, si no que se observa los fundamental y como se dan en su contestó natural para después analizarlos.
El diseño es transversal porque los datos se recolectan en un solo momento y su propósito es describir variables y analizar su interrelación, solo se desea saber la incidencia y el valor de uno o más variables, el diseño será descriptivo porque se requiere establecer relación entre dos o más de estás.
Mediante una encuesta recopilamos la información de este proyecto los alumnos tengan conocimiento de la evolución del arte y los medios de comunicación en la información y su importancia para la institución.
Actualmente, y debido al desarrollo tecnológico de campos como la informática y la electrónica, la mayoría de las bases de datos están en formato digital, siendo este un componente electrónico, por tanto se ha desarrollado y se ofrece un amplio rango de soluciones al problema del almacenamiento de datos.
3Redu: Responsabilidad, Resiliencia y Respetocdraco
¡Hola! Somos 3Redu, conformados por Juan Camilo y Cristian. Entendemos las dificultades que enfrentan muchos estudiantes al tratar de comprender conceptos matemáticos. Nuestro objetivo es brindar una solución inclusiva y accesible para todos.
4. ¿Quién soy?
• Consultor, diseñador y
desarrollador front-end
especializado en crear sitios
web centrados en el usuario
• Más de 11 años experiencia
en diversos aspectos del
desarrollo web
• Fundamentalista de los
estándares web
6. Introducción
• Problemática del desarrollo con CSS
• ¿Qué es un Framework CSS?
• Ventajas e Inconvenientes
• Panorámica de Frameworks CSS
• Comparativa
• Entonces, ¿cuál elijo?
8. Problemática del desarrollo CSS
• Es lento:
– Diseño distinto en cada proyecto
– Preparación y optimización de gráficos
– Carácter artesano
• Reutilización de código anterior
• Se dedica mucho tiempo a tareas
infructuosas (depurar para IE,
extensiones propietarias,....)
9. Problemática del desarrollo CSS
• No existen normas a la hora de
programar en CSS (nomenclaturas,
identación,...)
• Dificultad con código de terceros
(incluso, dentro de un mismo equipo)
• El programador “puro” no sabe CSS:
– NO es un lenguaje de programación
• …
11. ¿Qué es un Framework CSS?
“Un conjunto de herramientas, librerías,
convenciones y buenas prácticas que
abstraen tareas repetitivas y
rutinarias en elementos genéricos
que pueden reutilizarse.”
JEFF CROFT
http://www.alistapart.com/articles/frameworksfordesigners/
12. ¿Y CUÁL ES SU OBJETIVO?
“Que el desarrollador o diseñador se
enfoque en las tareas que son
exclusivas de un determinado
proyecto, en lugar de reinventar la
rueda una y otra vez.”
JEFF CROFT
http://www.alistapart.com/articles/frameworksfordesigners/
14. Ventajas
• Aumentan la productividad
• Código más consistente y estructurado
• Testeo y depuración minimizada
• Facilidad de mantenimiento
• Facilita el trabajo en equipo
• Agilizan la repetición de procesos
• Otras: preprocesado en servidor
(LESS/SASS), integración en CMS,...
15. Inconvenientes
• Curva de aprendizaje
• Exceso de código HTML y CSS
• Código y clases no semánticas
• Código “ajeno”
• ¿Más lento que partir de cero?
• ¿Restricciones de diseño?
16. Inconvenientes
• Curva de aprendizaje
• Exceso de código HTML y CSS
• Código y clases no semánticas
• Código “ajeno”
• ¿Más lento que partir de cero?
• ¿Restricciones de diseño?
17. Inconvenientes
• Curva de aprendizaje
• Exceso de código HTML y CSS
• Código y clases no semánticas
• Código “ajeno”
18. CURVA DE APRENDIZAJE
• La mayoría de los frameworks tienen una
curva sencilla.
• Al aportar una base común documentada
facilita la incorporación de nuevos
miembros al equipo.
• Incluirlo en la metodología de trabajo
mejora el proceso de desarrollo y
disminuye el tiempo de aprendizaje.
19. Inconvenientes
• Curva de aprendizaje
• Exceso de código HTML y CSS
• Código y clases no semánticas
• Código “ajeno”
20. EXCESO DE CÓDIGO HTML Y CSS
• ¿Es crítico para tu proyecto?
• Emplea sólo lo que necesites
• Comprime. Minimiza. Une.
– Compresión HTTP
– Minimiza JS y CSS: Eliminar espacios en
blanco, saltos de carro, identaciones,…
– Combina archivos CSS y JS
– Otros: caché, CDN,…
21. Inconvenientes
• Curva de aprendizaje
• Exceso de código HTML y CSS
• Código y clases no semánticas
• Código “ajeno”
22. CÓDIGO NO SEMÁNTICO
• DIV y SPAN no tienen significado
semántico (son neutrales)
The global structure of an HTML document
http://www.w3.org/TR/html401/struct/global.html#h-7.5.4
29. Panorámica de frameworks css
• ¡¡Existe una enorme variedad!!
• Hablaremos de 1 Kb CSS Grid, 960.gs,
Blueprint, Foundation (Zurb) y
Bootstrap (Twitter)
• Algunos admiten plugins y extensiones
para hacerlos más versátiles (responsive
design, por ejemplo) o incorporar
funcionalidades
30. ¿qué nos permiten hacer?
• Resetear estilos para normalizar las
propiedades básicas de los elementos a
fin de eliminar diferencias de
visualización entre navegadores.
– reset.css
• Realizar una gestión global de las
tipografías que se usarán en la página.
– text.css
31. ¿qué nos permiten hacer?
• Maquetar un diseño de forma óptima
y compatible con todos los
navegadores.
– layout.css, grid.css,…
• Estilos específicos para impresión
– print.css
• Personalizaciones y código específco
– style.css, custom.css,…
33. 1Kb css grid
• Enfocado únicamente a disposición de
elementos en retícula.
• Retícula de 12 columnas, 60px ancho
con espaciado de 20px (personalizable)
• Ancho total: 960px
42. blueprint
• Sistema de retícula completo y versátil.
• Retícula base de 24 columnas (30px
ancho/10px espaciado)
• Ancho fijo total: 950px
• Incorpora: reset CSS, estilos para
tipografías, formularios e impresión
• También, soporte para idiomas RTL
44. blueprint
• Gran cantidad de plugins y extensiones
(botones, tabs, retícula fluida,…)
• Plantillas gráficas para diseñar sobre la
retícula
• Gemas para Rails
• Más información y recursos:
– https://github.com/joshuaclayton/blueprint-
css/wiki
46. foundation
• Sistema de retícula completo,
adaptativo, móvil y muy flexible
• Retícula base de 12 columnas (fluidas,
fijas, combinables,…)
• Ancho máximo y mínimo configurable
• Nomenclatura muy sencilla y natural
• Incluye: formularios, botones, elementos
de interfaz, sliders, modales,…
49. foundation
Retícula adaptativa
Sólida retícula base,
adaptativa y móvil
Elementos de interfaz
Botones, formularios, tabs,
sliders, tooltips, modales…
DOCUMENTACIÓN
Sencilla y completa
EXTRA
Gemas para
Conpass/SASS y Rails
50. foundation
Retícula adaptativa
Sólida retícula base,
adaptativa y móvil
Elementos de interfaz
Botones, formularios, tabs,
sliders, tooltips, modales…
DOCUMENTACIÓN
Sencilla y completa
EXTRA
Gemas para
Conpass/SASS y Rails
51. foundation
Retícula adaptativa
Sólida retícula base,
adaptativay móvil
Elementos de interfaz
Botones, formularios, tabs,
sliders, tooltips, modales…
DOCUMENTACIÓN
Sencilla y completa
EXTRA
Gemas para
Conpass/SASS y Rails
53. bootstrap
• Sistema de retícula completo,
adaptativo, móvil y muy flexible
• Retícula base de 12 columnas (60px
ancho/20px espaciado)
• Ancho fijo total: 940px
• Construido y personalizable con LESS
(variables, mixins, etc.)
54. bootstrap
• Incluye: tipografías, retículas adaptativas y
móviles, formularios, botones, elementos
de interfaz,… EL MÁS COMPLETO!
• Multitud de plugins jQuery: sliders,
modales, tooltips, tabs,…
• Extra:
– Skins para Bootstrap: http://bootswatch.com/
– Themes ($): http://wrapbootstrap.com/
64. Entonces, ¿cuál elijo?
• No hay frameworks mejores ni peores;
sino el que mejor se adapta a tu proyecto:
– ¿Qué tamaño va a tener el proyecto?
– ¿Necesitas integrarlo en Rails o SASS?
– ¿Quieres componentes ya listos para usar o
únicamente una retícula?
• Personalmente, eligiría 960.gs,
Foundation o Bootstrap (personalizado)