UNIVERSIDAD NACIONAL JOSE MARIA ARGUEDAS

ESCUELA PROFESIONAL DE INGENIERIA DE SISTEMAS

ASIGNATURA DOCENTE TEMA CICLO

: Ingeniera de Software III : Ivn Soria Sols : LESS : IX

PRESENTADO POR: Aiquipa Altamirano William Palomino Llanos Michael

ANDAHUAYLAS PERU

INTRODUCCION Seguramente hay muchos que conocen los preprocesadores de CSS que estn sacando ltimamente o quizs sea la primera vez que lo haga cuando lean est monografa, pero lo que s est claro es que las nuevas formas de trabajar de cara a la realizacin de una web se estn optimizando cada vez ms y se est pareciendo a un lenguaje de programacin estructurado. Si bien es cierto hasta ahora la mayor parte del diseo de un portal web se intentaba hacer una reutilizacin de estilos y llegaba un momento en el cual ya no se poda averiguar si el estilo al que se aplicaba ya lo habamos creado o no, se nos plantean unas dudas si realmente se estaba codificando correctamente o existira algn "Manual de buenas prcticas" para llevarlo a cabo. Por suerte en la actualidad podemos contar con excelentes herramientas que nos pueden ayudar a desarrollar nuestro sitio de la manera ms cmoda como nos sea posible. Este es el caso de LESS.

I.

Marco Conceptual 1. Hoja de estilo CSS

La idea que se encuentra detrs del desarrollo de CSS es separar la estructura de un documento de su presentacin. La informacin de estilo puede ser adjuntada como un documento separado o en el mismo documento HTML. En este ltimo caso podran definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo "<style>". 1.1. Niveles e historia CSS se ha creado en varios niveles y perfiles. Cada nivel de CSS se construye sobre el anterior, generalmente aadiendo funciones al previo. Los perfiles son, generalmente, parte de uno o varios niveles de CSS definidos para un dispositivo o interfaz particular. Actualmente, pueden usarse perfiles para dispositivos mviles, impresoras o televisiones. 1.1.1. CSS1 La primera especificacin oficial de CSS, recomendada por la W3C fue CSS1, publicada en diciembre 1996, y abandonada en abril de 2008.

Algunas de las funcionalidades que ofrece son:

Propiedades de las Fuente, como tipo, tamao, nfasis... Color de texto, fondos, bordes u otros elementos. Atributos del texto, como espaciado entre palabras, letras, lneas, etctera. Alineacin de textos, imgenes, tablas u otros. Propiedades de caja, como margen, borde, relleno o espaciado. Propiedades de identificacin y presentacin de listas. 1.1.2. CSS2 La especificacin CSS2 fue desarrollada por la W3C y publicada como recomendacin en mayo de 1998, y abandonada en abril de 2008.

Como ampliacin de CSS1, se ofrecieron, entre otras:

Las funcionalidades propias de las capas (<div>) como de posicionamiento relativo/absoluto/fijo, niveles (z-index), etctera. El concepto de "media types", Soporte para las hojas de estilo auditivas Texto bidireccional, sombras, etctera. 1.1.3. CSS3 A diferencia de CSS2, que fue una gran especificacin que defina varias funcionalidades, CSS3 est dividida en varios documentos separados, llamados "mdulos". Cada mdulo aade nuevas funcionalidades a las definidas en CSS2, de manera que se preservan las anteriores para mantener la compatibilidad. Los trabajos en el CSS3, comenzaron a la vez que se public la recomendacin oficial de CSS2, y los primeros borradores de CSS3 fueron liberados en junio de 1999. Debido a la modularizacin del CSS3, diferentes mdulos pueden encontrarse en diferentes estadios de su desarrollo, de forma que a fechas de noviembre de 2011, hay alrededor de cincuenta mdulos publicados, tres de ellos se convirtieron en recomendaciones oficiales de la W3C en 2011: "Selectores", "Espacios de nombres" y "Color". Algunos mdulos, como "Fondos y colores", "Consultas de medios" o "Diseos multicolumna" estn en fase de "candidatos", y considerados como razonablemente estables, a finales de 2011, y sus implementaciones en los diferentes navegadores son sealadas con los prefijos del motor del mismo.

1.2. Limitaciones y ventajas 1.2.1. Limitaciones Algunas limitaciones que se encuentran en el uso del CSS hasta la versin CSS2.1, vigente, pueden ser:

Los selectores no pueden usarse en orden ascendente segn la jerarqua del DOM (hacia padres u otros ancestros) como se hace mediante XPath. La razn que se ha usado para justificar esta carencia por parte de la W3C, es para proteger el rendimiento del navegador, que de otra manera, podra verse comprometido. XSLT soporta en la actualidad un mayor nmero de sistemas operativos. As mismo, tambin es mejor para trabajar con la mayora de buscadores de Internet.

Dificultad para el alineamiento vertical; as como el centrado horizontal se hace de manera evidente en CSS2.1, el centrado vertical requiere de diferentes reglas en combinaciones no evidentes, o no estndares. Ausencia de expresiones de clculo numrico para especificar valores (por ejemplo margin-left: 10% 3em + 4px;). Un borrador de la W3C para CSS3, propone calc() para solventar esta limitacin. Las pseudo-clases dinmicas (como :hover) no se pueden controlar o deshabilitar desde el navegador, lo que las hace susceptibles de abuso por parte de los diseadores en banners, o ventana emergentes. 1.2.2. Ventajas Algunas ventajas de utilizar CSS (u otro lenguaje de estilo) son:

Control centralizado de la presentacin de un sitio web completo con lo que se agiliza de forma considerable la actualizacin del mismo. Separacin del contenido de la presentacin, lo que facilita al creador, diseador, usuario o dispositivo electrnico que muestre la pgina, la modificacin de la visualizacin del documento sin alterar el contenido del mismo, slo modificando algunos parmetros del CSS. Optimizacin del ancho de banda de la conexin, pues pueden definirse los mismos estilos para muchos elementos con un slo selector; o porque un mismo archivo CSS puede servir para una multitud de documentos.

Mejora en la accesibilidad del documento, pues con el uso del CSS se evitan antiguas prcticas necesarias para el control del diseo (como las tablas), y que iban en perjuicio de ciertos usos de los documentos, por parte de navegadores orientados a personas con algunas limitaciones sensoriales.

2. Preprocesadores de CSS La primera vez que descubr los preprocesadores de CSS, primero pens que era esto de preprocesadores, si el CSS se procesaba slo, pero luego indagando un poco ms me di cuenta de lo mucho que puede facilitar el trabajo el uso de un preprocesador de CSS, as de cmo se pueden crear hojas de estilo CSS optimizadas y fciles de mantener. La facilidad de uso del CSS es ideal para principiantes en su uso, pues tiene una curva de aprendizaje muy sencilla. El problema viene cuando el proyecto empieza a crecer y los estilos se empiezan a multiplicar. Empezamos a tener un montn de cdigo duplicado por todas partes y cuando queremos cambiar algo, tenemos que volvernos locos con el Ctrl+F de nuestro editor de textos. Lo has vivido alguna vez? Yo cada vez que quiero cambiar algo del diseo de esta web me vuelvo medio loco con el buscar y reemplazar. Y aqu es donde entra en juego un preprocesador de CSS, pues te permite crear un cdigo mucho ms limpio y fcil de mantener. Existen varios preprocesadores de CSS, los ms conocidos son LESS, STYLUS y SASS o una segunda versin de SASS que es SCSS. Me imagino que la preferencia por uno o por otro es ms una cuestin de gustos que otra cosa. Adems, instalar el compilador LESS es muy fcil y trabajaremos con Sublime Text v.2. 2.1. Preprocesador LESS LESS CSS es una ampliacin a las famosas hojas de estilo CSS, pero a diferencia de ests funciona como un lenguaje de programacin, permitiendo el uso de variables, funciones, operaciones aritmticas, entre otras, para acelerar y enriquecer los estilos en un sitio web.

LESS CSS no reemplaza a CSS, de hecho el resultado final es una hoja de estilos css completamente funcional y compatible, simplemente ofrece mejoras en el rea de desarrollo, por lo que usarlo se vuelve recomendable si quieres ahorrar tiempo de desarrollo, utilizar caractersticas avanzadas de estilos y para ahorrarte trabajo de all su nombre: less css (menos css). Caractersticas Las caractersticas de LESS CSS son demasiadas, e incluso combinndolas pueden conseguir ms, sin embargo, intentar mencionar las ms notables: a. Variables

Las variables en less funcionan de forma similar a las constantes en los lenguajes de programacin, permitiendo definir valores que podrn ser reutilizados en cualquier parte de la hoja de estilo, e incluso entre otras hojas de estilo. Su sintaxis es la siguiente: @variable: valor; b. Mixins

Los mixins son, como a mi me gusta llamarlos, clases dinmicas, porque funcionan de forma similar a las clases CSS pero con caracteristicas de funciones de programacin. Es decir que pueden ser llamadas desde otras clases para obtener su valor y adems permiten parametros, aunque no es necesario utilizarlos. Est caracteristica hace posible definir una clase dando flexibilidad para variar algunos estilos como el color o tamao del elemento. Su sintaxis, en el caso de que usemos parametros, es la siguiente: .mi_mixin(color: valordefecto){ font-size:2em; color:@color; margin:0.2em; } c. Funciones de Color

Las funciones de color son funciones pre-definidas de Less CSS que permiten alterar un color, para hacerlo ms claro, oscuro, saturado, desaturado, cambiarle la tonalidad, etc.

Son una gran herramienta para definir una paleta de colores sin estar buscando cdigos de color. Las funciones de color son:

lighten para aclarar un color. darken para oscurecerlo. saturate para saturarlo, o aumentar el color. desaturate para desaturarlo, o reducir el color. fadein para resaltarlo quitandole transparencia. fadeout para disimularlo usando transparencia. fade para cambiar la transparencia a 50%. spin para cambiar el tono de color. mix para mezclar dos colores.

su sintaxis es similar a est: lighten(@color, 30%); darken(@color, 30%);

3. Servidor Apache El servidor HTTP Apache es un servidor web HTTP de cdigo abierto, para plataformas Unix (BSD, GNU/Linux, etc.), Microsoft Windows, Macintosh y otras, que implementa el protocolo HTTP/1.12 y la nocin de sitio virtual. Cuando comenz su desarrollo en 1995 se bas inicialmente en cdigo del popular NCSA HTTPd 1.3, pero ms tarde fue reescrito por completo. Su nombre se debe a que Behelendorf quera que tuviese la connotacin de algo que es firme y enrgico pero no agresivo, y la tribu Apache fue la ltima en rendirse al que pronto se convertira en gobierno de EEUU, y en esos momentos la preocupacin de su grupo era que llegasen las empresas y "civilizasen" el paisaje que haban creado los primeros ingenieros de internet. Adems Apache consista solamente en un conjunto de parches a aplicar al servidor de NCSA. En ingls, a patchy server (un servidor "parcheado") suena igual que Apache Server. 3.1. USO Apache es usado principalmente para enviar pginas web estticas y dinmicas en la World Wide Web. Muchas aplicaciones web estn diseadas asumiendo como ambiente de implantacin a

Apache, o que utilizarn caractersticas propias de este servidor web. Apache es el componente de servidor web en la popular plataforma de aplicaciones LAMP, junto a MySQL y los lenguajes de programacin PHP/Perl/Python (y ahora tambin Ruby). Este servidor web es redistribuido como parte de varios paquetes propietarios de software, incluyendo la base de datos Oracle y el IBM WebSphere application server. Mac OS X integra apache como parte de su propio servidor web y como soporte de su servidor de aplicaciones WebObjects. Es soportado de alguna manera por Borland en las herramientas de desarrollo Kylix y Delphi. Apache es incluido con Novell NetWare 6.5, donde es el servidor web por defecto, y en muchas distribuciones Linux. Apache es usado para muchas otras tareas donde el contenido necesita ser puesto a disposicin en una forma segura y confiable. Un ejemplo es al momento de compartir archivos desde una computadora personal hacia Internet. Un usuario que tiene Apache instalado en su escritorio puede colocar arbitrariamente archivos en la raz de documentos de Apache, desde donde pueden ser compartidos. Los programadores de aplicaciones web a veces utilizan una versin local de Apache con el fin de previsualizar y probar cdigo mientras ste es desarrollado. Microsoft Internet Information Services (IIS) es el principal competidor de Apache, as como Sun Java System Web Server de Sun Microsystems y un anfitrin de otras aplicaciones como Zeus Web Server. Algunos de los ms grandes sitios web del mundo estn ejecutndose sobre Apache. La capa frontal (front end) del motor de bsqueda Google est basado en una versin modificada de Apache, denominada Google Web Server (GWS). Muchos proyectos de Wikimedia tambin se ejecutan sobre servidores web Apache. 3.2. Configuracin La mayor parte de la configuracin se realiza en el fichero apache2.conf o httpd.conf, segn el sistema donde est corriendo.

Cualquier cambio en este archivo requiere reiniciar el servidor, o forzar la lectura de los archivos de configuracin nuevamente. 3.3. Ventajas Modular Cdigo abierto Multi-plataforma Extensible Popular (fcil conseguir ayuda/soporte)

II.

TUTORIAL Para poder empezar a programar css con less es muy sencillo, a continuacin les mostramos una gua de instalacin. Instalacin del servidor Apache App server es un software que incluye el servidor apache y php.

Instalacin del LESS:

Primero necesitamos un servidor http, nosotros utilizaremos el servidor apache. Para utilizar LESS debemos usar un editor de textos que nos permita guardar archivos con la extension .less, as como tener instalado un compilador de LESS que nos transforme el cdigo de los archivos .less a .css. Te recomiendo utilizar el editor de textos Sublime Text v.2, que adems de ser multiplataforma te permite instalar dos plugins para que te reconozca los archivos de LESS y los compile. En total necesitamos 3 archivos para empezar a programas con less un archivo index.html el archivo less-1.3.0.min.js que es una librera java script y un archivo estilos.less. Ahora si podemos programar css con less en el archivo estilos.less

A continuacin se muestra el ejemplo echo con less en el navegador web.

CONCLUSIONES

 La facilidad de uso del LESS CSS es ideal para principiantes en su uso, pues tiene una curva de aprendizaje muy sencilla. LESS nos permite crear una estructura ms limpia y fcil de mantener que si trabajamos directamente con CSS. LESS agrega a CSS comportamiento dinmico como variables, mixins, operaciones y funciones. LESS funciona tanto en el lado del cliente (Chrome, Safari, Firefox) y del lado del servidor, con Node.js y Rhino.