YAML: El marco básico compatible con el estándar para proyectos web universales

En 2005, el desarrollador web Dirk Jesse publicó el marco CSS YAML sensible bajo la licencia Creative Commons CC-BY 2.0, lo que permitió que el marco básico para ser utilizado de forma gratuita tanto en privado como en el comercio. Los operadores que deseen poner su proyecto web en línea bajo una licencia diferente también pueden adquirir un modelo comercial que les da acceso gratuito a la licencias. El enfoque del marco CSS ha sido siempre en ofrecer a los usuarios la mayor libertad posible para el diseño de aplicaciones web sin barreras. La versión actual del marco (4.2.1) se puso a disposición en 2013, y es compatible con varios sistemas de gestión de contenidos como WordPress, TYPO3, o gracias a la integración de Joomla CMS correspondiente Plantillas de .

¿Cuál es YAML?

Y Un M L es un ambiente de trabajo que hace que sea más fácil para los desarrolladores para trabajar con los lenguajes web HT M L y C S S , y se centra en la facilidad de uso y la simplicidad del proyecto planificado. El nombre Y A M L es una abreviatura de “ Y et A tro M ulticolumn L ayout”. El marco Y A M L no se debe confundir con el Y A M L de lenguaje de marcado ( “ Y A M L A In’t M arkup L anguage”), que está sólo indirectamente relacionado con el framework de desarrollo web: los módulos que componen el marco fueron creados principalmente con S culo (“ S yntactically Un wesome S Tyle heets S ”). Esto le permite personalizar y extender las secciones individuales usando el preprocesador C S S , que está influenciada significativamente por la Y A M lenguaje de marcado L . biblioteca

El JavaScript jQuery se ha implementado y perfectamente adaptado al marco CSS desde la versión 3.0, lo que simplifica considerablemente el desarrollo de la dinámica y elementos animados para una presencia en la web individual. Con Pensando en las etiquetas, el sucesor de YAML Builder (desde 3,1), también hay un editor de arrastrar y soltar para ayudarle a crear su propio diseño YAML y gestionar automáticamente todas las páginas HTML y hojas de estilo creado para su proyecto. módulos

básicos que incluyen el marco YAML

Con su sistema modular, YAML ofrece los servicios típicos de un marco: Si desea iniciar un nuevo proyecto web, usted no tiene que empezar desde cero , pero en su lugar puede comenzar distancia correcta con un bastidor de base poderosa – que le ahorrará tiempo valioso. Como marco CSS sensible, la fuerza de los pre-construidos YAML componentes radica sobre todo en su capacidad de adaptación : Independientemente de qué dispositivos y navegadores usuarios emplean, el código flexible proporciona una presentación visual atractiva. Con los módulos de núcleo disponible, el marco abarca los elementos más frecuentemente necesario – aunque su tamaño total es poco menos de 6 KB .

La siguiente se especifican los módulos estándar en la hoja de estilo base.css :

Con el fin de apoyar a las versiones anteriores de Internet Explorer, los componentes básicos de archivo la base.css se complementan con una colección corrección de errores para las versiones 5, 6 y 7 de la antigua navegador Microsoft. Este archivo se guarda en la iehacks.css, que es opcional, pero siempre se debe utilizar de la misma manera si se quiere presentar su proyecto YAML en las versiones antiguas del navegador de Internet.

Los puntos fuertes de YAML: de primera clase compatibilidad CMS y Sass

El marco CSS no sólo asegura que su sitio web está óptimamente preparado para todos los visitantes, sino que está diseñado principalmente para hacer que el proceso de desarrollo y la posible relación con la gestión de su contenido preferido sistema lo más fácil posible. La construcción modular y la estricta separación de componentes de diseño y diseño ayuda a mantener el código fácil de usar y magra. Si no es necesario un elemento determinado sitio web, entonces usted no tiene que hacer nada con él, ya que el marco básico simplemente le proporciona un camino, y especifica su dirección.

El hecho de que usted puede utilizar el lenguaje de estilo simplificado Sass para este propósito es, sin duda, una de las mayores ventajas del marco YAML. Gracias a la sintaxis simple, las hojas de estilo deseados se escriben mucho más rápido que con CSS ordinaria. Además, el preprocesador reduce el número de HTTP solicita por que une hojas de estilo entre sí y la automatización de la compresión de las plantillas. Por último, Sass genera automáticamente los archivos CSS necesarias sin tener que preocuparse de ellos.

Otra gran ventaja de los resultados que responden marco CSS del trabajo de desarrollo de la comunidad dedicada YAML, que ha diseñado y publicado varias plantillas para los diferentes sistemas de gestión de contenidos – en algunos casos incluso ofrecen apoyo específico. Estas plantillas terminados enlaza el marco de las aplicaciones para la gestión de su contenido web. Usted puede descargar y utilizar parcialmente ellas de forma gratuita, y parcialmente por un suplemento. Esto le ahorra los ajustes necesarios en el marco del núcleo y dirige toda la atención al diseño de su proyecto web. Existen las siguientes plantillas de YAML CMS, entre otros:

  • JYAML: Paquete completo que consiste en plantillas, plugins, y bibliotecas para Joomla partir de la versión 3.6.0 basado en YAML 4
  • Yamltheme (Contao): basada plantilla Contao en YAML 4.1 para Contao 3.0.0 y 3.1.0

  • YAML para Drupal: Varias plantillas para Drupal implementadas por el marco CSS en Drupal 6 y 7 (previsto para 8 también)

Thinkin Etiquetas: la herramienta para el prototipado rápido YAML

la construcción y el idioma base del marco YAML son representativos de su simplicidad. En 2008, la primera versión estable del constructor YAML se ha mencionado anteriormente fue puesto en libertad para que los usuarios podrían utilizar para optimizar el diseño de sus propios proyectos web. La combinación de todas las funciones clave de la estructura básica de CSS (hasta YAML 3.1), la herramienta en línea le permite crear el diseño web planeado forma rápida e intuitiva utilizando elementos de arrastrar y soltar votos. Cada cambio individual se puede ver inmediatamente en la vista previa en vivo. Por último, el constructor crea automáticamente las hojas de estilo necesarios y el (X) HTML marcado.

Con la cuarta versión del marco, el constructor YAML encontró su sucesor legítimo en la herramienta de etiquetas Pensando. Este se caracteriza por una aún mejor flujo de trabajo para la creación de prototipos de sitios web basados ​​en YAML o el marco apoyado Blueprint CSS. Las siguientes funciones, entre otras, están disponibles para los desarrolladores para este propósito: Editor

  • HTML: Con la ayuda del editor de HTML integrado, puede fácilmente el código de edición haciendo doble clic en el diseño o la estructura de árbol DOM. El editor de código simplifica la escritura con herramientas de ayuda típicos como el resaltado de sintaxis, auto-completado, y el examen directo.
  • editor de CSS: También puede editar archivos CSS de su proyecto utilizando un editor interno (incluyendo resaltado de sintaxis y análisis en vivo) directamente en Thinkin etiquetas. Para ello, el editor tiene acceso a los preguntas de los medios correspondientes, con cuya ayuda se asigna a continuación una hoja de estilo a un medio.
  • página y gestión de estilos: Cada proyecto puede contener varias páginas HTML y hojas de estilo, en los que se pueden asignar las hojas de diseño correspondientes a cada archivo HTML. También es posible ocultar hojas de estilo para un tiempo determinado.
  • comprobación de diseño web receptivo: Sin tener que salir Pensando en las etiquetas, usted puede probar su diseño para diferentes escenarios – por ejemplo, el ancho de la pantalla en diferentes dispositivos, como ordenadores de sobremesa, tabletas o teléfonos inteligentes puede ser emulado para detectar y eliminar cualquier inconsistencia.
  • optimización de la tipografía de fácil uso: Los cambios en la tipografía se prueban de forma rápida gracias a deslizadores votos. Además, se tiene acceso a más de 600 fuentes de la biblioteca de Google Fuente Web, que se puede integrar en su proyecto con un solo clic. Puntos débiles

del marco CSS

El mayor problema con los marcos como YAML es a menudo el período de formación a lo largo necesario para familiarizarse con el código de los diferentes módulos. Si quiere depender de los fragmentos de código creado previamente, a continuación, usted tiene que tratar extensamente con su principios operativos , incluso si ya tiene un profundo conocimiento de HTML, CSS y otros. Por lo tanto es importante adaptar el esfuerzo de trabajo individual a los enfoques conceptuales del marco con el fin de lograr el resultado final deseado. Para ello, ofrece YAML detalla la documentación en los componentes individuales. También es típico de los marcos es el hecho de que más código se carga generalmente para un proyecto YAML que en realidad se requiere – a menos que optimizar específicamente.

Otro inconveniente del marco CSS sensible es la licencias mencionó anteriormente. Aunque el 2,0 licencia Creative Commons Reconocimiento (CC-BY 2.0) le permite usar el framework de desarrollo web tanto en privado como en el mercado de forma gratuita, el requisito previo es que usted tiene que consulte la página web de YAML en su presencia en la web. Si desea publicar su proyecto bajo una licencia diferente, no se puede conseguir alrededor de la compra de uno de los modelos de licencia pagados (proyecto, en general, OEM, etc.). proyectos

que es adecuado para el marco YAML?

A juzgar por la forma en navegador del medio ambiente es, su enfoque de diseño web sensible, y el apoyo tanto de CSS3 y HTML5, YAML es un marco muy interesante para aplicaciones web, a pesar de ser el último comunicado de hace algún tiempo. Gracias al módulo de accesibilidad, que pueden dar forma a su presencia en línea en un formato legible por máquina, que no es más que un paso decisivo hacia la accesibilidad, pero también le gana puntos valiosos cuando se trata de optimización de motores de búsqueda . En combinación con Pensando en las etiquetas, que tiene todo lo que necesita para crear un moderna, presencia en la web compatible con el estándar . Además, si usted maneja el contenido de su proyecto con la ayuda de un sistema de gestión de contenidos apoyado, a continuación, puede concentrarse enteramente en la formación de la distribución y el diseño.

Sistema

requisitos y la instalación

Para utilizar la versión actual del marco CSS, primero tiene que descargar los archivos principales adecuados, que se pueden encontrar ya sea en el sitio web oficial o en el repositorio GitHub YAML. Estos también contienen documentación, varias demos de diseño, y la biblioteca de JavaScript jQuery, entre otras cosas. Para compilar la versión estándar del marco de los archivos existentes, se necesitan los siguientes cinco componentes:

  • Node.js: entorno de ejecución del lado del servidor basado en el motor JavaScript V8
  • Ronco-CLI: herramienta basada en la línea de comandos que se basa en Node.js y es necesario para automatizar las tareas (por ejemplo, compilación menos o archivos SCSS)
  • Ruby: lenguaje de programación orientado a objetos
  • Sass: lenguaje de estilo alternativo que permite el uso de variables y mix-ins, lo que simplifica la creación de hojas de diseño
  • Brújula: Marco que utiliza Sass como la biblioteca por defecto y proporciona el preprocesador con un gran número de ingredientes extra

una vez que haya instalado estos componentes y guardó los archivos YAML en su sistema, usted tiene que resolver e instalar todas las dependencias necesarias ronco . Las siguientes tareas se requieren para compilar correctamente el marco YAML:

  • ronco: Iniciar una simple secuencia de brújula para compilar los archivos Sass- / SCSS existentes en el reloj ronco CSS
  • : Activar la brújula función de control, que se utiliza para volver a compilar automáticamente los documentos / SCSS- Sass durante toda la tarde cambia
  • ronco construir: Recopilar archivos YAML toda estática CSS
  • ronco acumulación de UTF-8: Una función similar a la acumulación ronco, pero la regla @charset “UTF-8” se mantiene activo en los archivos de la CSS

Resumen: Exigir marco CSS para el sitio web complejo Distribuciones de

YAML simplifica el desarrollo de un nuevo proyecto web, así como su desarrollo visual a través de CSS de una manera poco común. El proceso de aprendizaje que el usuario del marco tiene que someterse, sin embargo, de ninguna manera debería ser subestimado: Usted tiene que estar familiarizado con HTML y CSS y estar dispuesto el abrazo de las ideas conceptuales de la base de desarrollo compatible con el estándar si quieren explotar al máximo todo su potencial. Con Pensando Etiquetas , desarrollador Dirk Jesse trajo una herramienta para el mercado para ayudar a los usuarios experimentados crear diseños YAML, apoyando activamente sus esfuerzos, y por lo menos, lo que facilita su entrada. Pero los recién llegados probablemente tendrán problemas con la estructura de disposición pre-diseñado, a pesar de la ayuda de la herramienta.

Un gran punto de preocupación es la capacidad futura del marco . La última actualización de la versión actual 4 salió en 2014. A pesar de que el trabajo en una quinta edición del marco CSS sensible ha sido confirmada por Jesse, queda por ver cómo y si un mayor desarrollo está teniendo lugar. Pero hasta ahora, YAML y Etiquetas Thinkin han proporcionado una plataforma absolutamente recomendable para proyectos web modernos, que se caracterizan por una estructura flexible y compatible con el estándar. desarrollo

  • 09/07/17
  • Web
  • ¿Qué te pareció el artículo? 3,54
  • Marco

  • CSS
  • Responsive

Deja un comentario