jueves, 12 de marzo de 2015

Permisos de archivo en Linux


Objetivos:
-Comprender el sistema de permisos para el acceso a archivos y directorios.
-Utilizar los comandos de cambio de permisos: chmod, chown, chgrp.
-Resolver los ejercicios propuestos.


En un sistema GNU/Linux, se atribuyen privilegios a todos los archivos por 3 identidades:


  • El propietario: es el usuario que ha creado el archivo o el usuario que root ha designado como propietario.
  • El grupo (que no es necesariamente el grupo del propietario)
  • Los otros (aquellos que no hacen parte del grupo)


El comando ls –l nos permite mostrar los privilegios de un archivo en GNU/Linux. Para cada
identidad (ver más arriba), existen 3 privilegios para acceder:

r - read (privilegio de lectura)

w - write (privilegio de escritura)

x - execute (privilegio de ejecución)

La visualización de los privilegios está representada por una cadena de 9 caracteres, precedida de un carácter, que representa el tipo de archivo. Estos 9 caracteres, reagrupados de 3 en 3 (rwx rwx rwx), definen las 3 identidades (propietario, grupo y los otros). 

Para cada privilegio existente vemos una letra entre r,w o x (ver más arriba) y si no existe un privilegio utilizamos un guion (no confundir con el primer guion que significa – archivo regular).






Ejemplo: -rwxr-x--- Lo que significa que:


  • Se trata de un archivo regular (el 1er carácter es un guion -)
  • El propietario tiene todos los privilegios (ReadWriteExecute o sea LeerEscribirEjecutar)
  • Los miembros del grupo tienen el privilegio de Leer (el 1er carácter es r) y Ejecutar (el 3
  • carácter es x), en cambio no tienen el privilegio de Escribir (el 2do carácter es un guion -)
  • Los otros no tienen ningún privilegio, ni de lectura, ni de escritura, ni de ejecución (los 3 caracteres son guiones - )



El comando chmod (CHangeMODe) permite definir y cambiar los privilegios de acceso de un archivo o un conjunto de archivos.

Este es el uso de letras que ya le son conocidas r, w y x para especificar los privilegios que se deseen. La novedad es que vamos a utilizar también letras para designar las identidades de las que hemos hablado líneas arriba: el propietario, el grupo y los otros. Chmod utiliza la notación siguiente:

u- para el propietario (user)

g- para el grupo (group)

o- para los otros (other)

a- para todos (all)


Otra notación será utilizada para atribuir y/o retirar privilegios.
  • + (más) para atribuir
  • - (menos) para retirar
  • = (igual) para fijar el acceso exacto



Ejercicios:


1)En un directorio vacío (nuevo), crear 9 archivos (archiv1,archiv2,etc.) utilizando el comando touch. Quitarle todos los permisos con el comando “chmod a-rwx archiv*”


 




2)Modificar los permisos usando el operador '=' del 'chmod', para que queden de la siguiente manera: 




3)Modificar los permisos de los archivos anteriores utilizando los operadores + y - del 'chmod' para que queden de la siguiente manera (Los cambios son relativos a los archivos del ejercicio anterior): 






4)Crear 9 archivos (num1,num2,etc.) utilizando el comando touch. 






5)Sobreescribir los permisos utilizando el comando chmod con argumento numérico (octal) para que queden de la siguiente manera: 





6)Con una sola instrucción, quitar permisos de lectura, escritura y ejecución para "otros" a todos los archivos utilizados en el último ejercicio.





7)Crear un directorio y quitarle todos los permisos de ejecución. Explicar qué pasa al intentar entrar al directorio con el comando cd. Explicar el significado de los permisos r,w y x para directorios. 






8) Informarse sobre los grupos a los que pertenece su usuario.  





martes, 10 de marzo de 2015

Seguridad básica en Linux

Seguridad básica en Linux


Algunas técnicas sencillas para proteger los sistemas Linux...

1. Introducción.


La progresiva disminución de costes del hardware, así como la constante mejora de su funcionalidad, ha generado un aumento considerable de instalación de redes tanto a nivel empresarial como doméstico.
Los perjuicios económicos provocados por los ataques mediante todo tipo de técnicas, ya sean virus, troyanos, gusanos, exploits, etc, o usuarios malintencionados, son tales que la seguridad en cualquier instalación informática se ha convertido en un tema prioritario.
Hay que tener en cuenta es que, en la medida en que el sistema es mas seguro se pierde funcionalidad. Hay que encontrar, por tanto, un equilibrio entre seguridad y funcionalidad. Desactivar todos aquellos servicios que no sean necesarios y proteger el sistema con todo aquello que sea básico es imprescindible.
Lógicamente la seguridad entendida por una entidad bancaria no es igual que en una fabrica o en un centro de cálculo o en una instalación militar estratégica. Pero todas ellas deben garantizar la integridad y confidencialidad de sus datos, así como asegurar la disponibilidad de los mismos. Para ello los objetivos de sus normas o medidas de seguridad deben ser la prevención, la detección y la recuperación. Y, básicamente la consecución de estos objetivos puede resumirse en la denegación del acceso a usuarios no autorizados.

2. Seguridad. Y ¿qué se entiende por seguridad?. La norma ISO (Organización Internacional de Normalización) dice que la seguridad consiste en minimizar la vulnerabilidad de bienes y recursos. La seguridad en un sistema se basa en los mecanismos de protección que ese sistema proporciona. Estos mecanismos deben permitir controlar qué usuarios tienen acceso a los recursos del sistema y qué tipo de operaciones pueden realizar sobre esos recursos.

Para controlar el acceso de los dominios a los recursos se utilizan las Listas de Control de Acceso por cada recurso. La Lista de Control de Acceso (ACL) especifica qué dominios tienen acceso al recurso y qué operaciones asociadas al recurso pueden utilizar.

El problema que plantea la lista de control de acceso es su tamaño variable, ya que depende del numero de dominios que tengan acceso al recurso y de las operaciones que pueda realizar cada uno de ellos. En Linux, para conseguir Listas de tamaño constante, se utilizan 2 técnicas:
  1. Reducir el número de dominios que aparecen en la lista. Esto se consigue mediante el concepto de grupos de usuarios.
  2. Reducir el numero de operaciones posibles sobre un recurso (archivo): podemos controlar 3 operaciones sobre los archivos, que son la lectura (r), escritura (w) y la ejecución (x).


Todos los usuarios de un sistema Linux deben pertenecer, al menos, a un grupo. Existen 3 grupos o categorías en la relación entre un dominio ( usuario ) y un recurso (archivo ):

  • Propietario: indica quién creó el archivo
  • Grupo del propietario: reúne a todos los usuarios que pertenecen al grupo del propietario.
  • Resto de usuarios: los que no crearon el archivo y no pertenecen al grupo del propietario.

Con estos 2 mecanismos la Lista de control de acceso se reduce a 9 bits, organizados en 3 grupos de 3. Esta Lista de control de acceso está situada en la Palabra de protección del nodo-i, que es donde se mantienen todos los atributos asociados a un archivo.



3. Control de acceso al sistema.

Cuando encendemos el ordenador se ejecuta un software, llamado BIOS (Basic Input/Output System) cuya función es determinar la configuración de la máquina y proporcionar un sistema básico de control sobre los dispositivos. Este software se suele almacenar en memoria ROM (Read o­nly Memory) o FLASH que permite la actualización de la BIOS sin cambiar el chip.

En el momento del arranque se puede acceder a la BIOS de la máquina mediante la pulsación de una tecla o combinación de ellas. Desde la interfaz de dicho software es posible modificar parámetros del sistema, como la fecha y hora del sistema, secuencia de arranque, etc. Lógicamente el acceso a la BIOS puede estar protegida con contraseña, si se habilita. 

Una vez arrancada la máquina se ejecuta el gestor de arranque, que puede ser LILO (Linux Loader) o GRUB GNU (Grand Unified Boot Loader) y que es el responsable de la carga del sistema operativo seleccionado.



4. Protección de los archivos. La palabra de protección contiene 16 bits cuyo contenido se interpreta según se muestra en la figura siguiente:





La palabra de protección forma parte del contenido del nodo-i del archivo, que es la estructura que almacena información relativa a dicho archivo, como son el propietario, grupo, fechas de creación-modificación-acceso, tamaño, etc. Parte de los contenidos del nodo-i son visibles con la orden ls y la opción -l.


-rwxr--r-- 1 root root 512 Nov 24 17:59 arranque.mbr



Es conveniente que el administrador asigne al sistema, por defecto, una máscara de permisos umask restrictiva. Por ejemplo 077 e incluirla en /etc/profile. La orden umask establece los permisos que no se asignaran a los archivos. En el caso de 077 (---rwxrwx) al crear un archivo tendrá los permisos rw-------. Ejecución no se asigna por defecto.

  
Sticky-bit (bit t/T sobre other) que activado sobre un directorio indica que un archivo de ese directorio solo puede ser borrado por: el propietario del archivo, el propietario del directorio o el root. Si aparece t, el bit sticky está a uno y el bit de ejecución de otros (other) está también a 1. Si aparece T el bit sticky está a uno y el bit de ejecución de otros está a 0. La orden que activa el sticky-bit sobre el directorio /home/usuario1/ es la siguiente:

# chmod +t /home/usuario1/
# ls -l /home
drwxr-xr-t 13 usuario1 usuario1 4096 Apr 16 2004 usuario1

Esta opción está activada por defecto en los directorios del sistema /tmp y /var/tmp/, que son utilizados por muchos programas. Estos programas presuponen que nadie puede borrar sus archivos una vez que han sido creados. Si se elimina de ellos el sticky-bit pueden quedar expuestos a ataques symlink. Este tipo de ataque aprovecha la creación de archivos temporales, por parte de algunos programas, en estos directorios y si dichos archivos tienen los permisos adecuados es posible crear enlaces simbólicos entre ellos y archivos del sistema, como /etc/passwd, y conseguir el permiso de escritura sobre él al ejecutar dicho script.


  • Bit SGID (bit s/S sobre group) que activado sobre un archivo, da los derechos del grupo a quien lo ejecuta, y solo durante la ejecución. Si aparece s el bit de setgid está a uno y el bit de ejecución del grupo está a 1. Si aparece Sel bit de setgid está a uno y el bit de ejecución del grupo está a 0.

  • Bit SUID (bit s/S sobre owner) que activado en un archivo ordinario, asigna los derechos del propietario del archivo a quien lo ejecuta, y solo durante el tiempo de ejecución. El sentido de s/S es el mismo que en SGID. La orden que activa el bit SUID sobre un archivo es la siguiente:

# chmod +s /home/archivo

  • El clásico ejemplo de archivo setuidado es el comando /usr/bin/passwd. Y es necesario que sea asi, ya que el usuario que cambia su password debe poder escribir sobre el archivo /etc/shadow cuya propiedad es del root y necesita temporalmente los privilegios del root.

-rwsr-xr-x 1 root root 26616 May 10 2004 /usr/bin/passwd






lunes, 9 de marzo de 2015

Cómo funciona la Web

Como funciona la web - Protocolo TCP/IP


Esto es lo que ocurre cuando hacemos click en un enlace en internet:

-Se dirige un flujo de información hacia un departamento del ordenador, donde se empaqueta esta informacion mediante un protocolo de comunicación llamado IP. Aquí se decide como se va a codificar la información, incluyendo el tipo de paquete que es, el destinatario, y el receptor, ademas de una etiqueta para que lo reconozca el servidor. Una vez hecho esto se envía hacia la red de area local o LAN.

El router local lee la dirección e identifica los paquetes que deben salir a internet y cuales permanecen en el area local. De aquí pasan al switch.

El
switch clasifica los paquetes y los redirecciona al siguiente nivel: el proxy.

El
proxy es una herramienta de seguridad que funciona como un intermediario para identificar el tipo de paquete y busca la direccion html del paquete y si éste es válido para entrar en internet. Se clasifica por válido o no en función de las políticas corporativas o de distribución. Una vez pasa por este nivel el paquete vuelve a nuestra red LAN. El próximo paso es el firewall.

El
firewall es el sistema de seguridad que no permite pasar paquetes indeseables y que evita que salga de nuestro ordenador información importante. Una vez los paquetes pasan el firewall éstos pasan a internet.
Internet es una serie de redes entre routers y servidores interconectados por todo el planeta. Las rutas o caminos que toman los paquetes que viajan por internet son satelites, antenas parabolicas, etc. y estos pueden recorrer varias veces el planeta en unos milisegundos hasta llegar a su destino. (De aquí el World Wide Web)
Antes de llegar al ordenador o servidor de entrada donde está la pagina web solicitada encontraremos de nuevo el firewall. El firewall puede ser un respaldo de seguridad o un terrible adversario, dependiendo de qué lado estemos o cuales sean nuestras intenciones. El firewall está diseñado para dejar pasar solo los paquetes que cumplen el criterio de selección. En caso de que el firewall tenga abierto los puertos 25 y 80 sólo permitirá la entrada de paquetes que corresponden con la puerta de entrada de correo y el servidor web.

Los paquetes que entran en el
servidor web se vacían de la información entrante para devolver por el mismo camino la información requerida hasta nuestra línea local, donde la interfaz de nuestro ordenador procesará los datos recibidos y los traducirá si tenemos el plugin adecuado para ejecutar el contenido en nuestro navegador web.

martes, 24 de febrero de 2015

Técnicas de verificación

PROCESO DE VALIDACIÓN

HTML:



  • El PRECÓDIGO, es el antes del código, bocetos más la preparación de la estructura.

  • Comprobar el acceso a archivos externos .JS y .CSS

  • Comprobación METAS, Title y H1 para comprobar que tienen coherencia entre ellos y mejorar así la indexación.

  • Verificar la tabulación del código HTML y separar las partes del código bien diferenciadas con comentarios. Ejemplo <!-- MENÚ LATERAL DERECHO -->

  • Apartado NOSCRIPT bien complementado.

  • Comprobar las buenas prácticas de programación en variables y nombres, identificadores, clases etc.. que tengan sentido con la tarea función que realizan.

  • Realizar un prueba de caja Negra completa a la página.

  • Realizar pruebas unitarias es comprobar individualmente un elemento cuando una prueba de caja negra da fallida.

  • Compruebo que la declaración de documento sea actual y completo. DOCTYPE.

  • Usar los Id como identificador único, no aplicar el mismo a varios elementos, para eso están las class.

  • Que una página web no dependa del js, css, flash o span y no abusar de estos.

  • Colocar directorio base para tener el html, js, css en una carpeta y el resto en otra.<BASE>

  • Hacer validación completa de formularios incluidos en la web.

  • Definir mal o no definir la codificación de caracteres.<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  • Realizar pruebas de caja blanca, principalmente en los formularios. Las principales técnicas de diseño de pruebas de caja blanca son:
    • Pruebas de flujo de control
    • Pruebas de flujo de datos
    • Pruebas de bifurcación (branch testing)
    • Pruebas de caminos básicos

  • Las herramientas para desarrolladores nos sirven para detectar errores en tiempo real y para localizar partes del código deseado para realizar pruebas posteriores. Para hacer pruebas de posicionamiento sin tocar el código fuente.

  • Verificar en validador de HTML.
    • Etiquetas que no están bien cerradas o fallos de código.
    • Declaración de idioma.
    • Etiquetas alt de las imágenes.
    • Código obsoleto.


CSS:



  • Buen enlace del HEAD al archivo, comprobar su ejecución.

  • Comprobar que los selectores se dirigen hacia el elemento adecuado y funcionan correctamente.

  • Comprobar que otros selectores tienen más prioridad y están sobreescribiendo una propiedad y/o valor.

  • Que le posicionamiento corresponde con el objetivo que pretendemos y sus efectos.

  • Utilizar colores codificados en Hexadecimal o RGB o RGBA. Por el motivo de que el rojo en cada navegador es diferente.

  • Siempre que se pueda utilizar expresiones de CSS reducidas.

  • Combinación de selectores con código común, para reducir líneas de código.

  • Utilizar selectores coherentes y no utilizar palabras reservadas para ellos.

  • OJO al dato señor@s con los caracteres especiales tipo Ñ o @ o “” etc…

  • Comentar el código correctamente, al igual que tabularlo y dejar espacios para su correcta visualización.

  • Colocar el código por zonas comentado par su mejor búsqueda. Ejemplo Menú.

  • Para validar el código CSS incrustado en el HTML utilizar validador con este archivo específico de CSS.

  • Pasar un validador de CSS validador CSS del W3C.:
    • Las propiedades están mal escritas o tienen valores no permitidos
    • Errores de sintaxis, llaves, llamadas a selectores, propiedades etc…
    • El punto y coma después de cada línea.


Efectos de javascript

En esta unidad formativa hemos realizado varios tipos de efectos que dan un poco de vida a la pagina.


A continuación, presento unos ejemplos de lo que hemos conseguido:

Adaptación de un div desplegable con un efecto de transición que se ejecuta al pasar el ratón por encima del div y se oculta al salir del div.





Efecto de icono que se rota al pasar por encima el ratón y aparece la información.




 Efecto de sombra en un div y en el texto y efecto ejemplo de imagen reducida en .png de 8, 16 y 32 bits.




 Efecto de area de imagen que modifica una imagen al pasar el ratón por encima de una  zona delimitada.




Se ha añadido a la página original una pestaña adicional a la que hemos llamado "Motocross" y en ella hemos incrustado un .gif de alta resolución y un Lettering en la tipografía GREENCLEW.




 En la página contacto, se ha añadido un formulario de consulta y un iframe de un mapa de google maps.



HTML:


<!DOCTYPE html>
<html dir="ltr" lang="en-US"><head><!-- Created by Artisteer v4.0.0.58833 -->

<!-- Cambio de Estilos CSS en función del tamaño de la pantalla del navegador desde el que se visualiza-->

<link rel="stylesheet" type="text/css" media="screen and (max-width: 1600px)" href="style.css"/>  
        <link rel="stylesheet" type="text/css" media="screen and (max-width: 999px)" href="style2.css"/>
   
        
        
     
        
    <title>Main</title>
    <meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">


<!--Estilo CSS que hace que el objeto y los textos con la class cajafotos tenga un borde y una sombra-->


   <style>
   
    .cajafotos
{
position: relative;
bottom: 10px;
background-color: #ffffff;
border-radius: 11px;
opacity: 0.70;
box-shadow: 0px 0px 13px #000000;
width:10%;
height:35%;
left:10px;
margin-left: 10px;
text-align:center;
color: white; 

/*Efecto de sombra chula para el texto*/
text-shadow: black 0.05em 0.05em 0.2em;

/*Efecto de sombra chula con drop-shadows*/
-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
    </style>

    <script src="jquery.js"></script>
    <script src="script.js"></script>
    <script src="script.responsive.js"></script>
    
  
    
    <!--Fichero de funciones y plugin Jquery -->
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    
<meta name="description" content="Description">
<meta name="keywords" content="Keywords">


</head>
<body>
<style>
#lat{

position:absolute;
right:1px;
top:100px;
/* Con transition ajustamos la velocidad de despliegue del DIV */
transition: 1s;
background-color: #e0e0e0;

}
#social{
position:relative;
right:1px;
width:138px;
top:5px;
height: 433px;
transition: 1s;
}

</style>

<div id="art-main">
<nav class="art-nav clearfix">
    <ul class="art-hmenu"><li><a href="main.html" class="active">Main</a></li><li><a href="motocross.html">Motocross</a></li><li><a href="contact-us.html">Contact Us</a></li></ul> 
    </nav>
<header class="art-header clearfix">


    <div class="art-shapes">
<h1 class="art-headline" data-left="18.01%">
    <a href="#">Greenclew</a>
</h1>
<h2 class="art-slogan" data-left="18.43%">Web Design and Internet Marketing</h2>


            </div>

                
                    
</header>

<!--Div desplegable al pasar el raton por encima y contraible al dejar de estár con el ratón por encima//-->
<div id="lat" onmouseover="lat.style.width='100px'" onmouseout="lat.style.width='30px'">
<!-- Imágenes que se despliegan en el div//-->
  <img id="social" src="social.jpg"  alt="social" />
  </div>
 
<div class="art-sheet clearfix">
            <div class="art-layout-wrapper clearfix">
              
                    <div class="art-content-layout-row">
                        <div class="art-layout-cell art-content clearfix"><article class="art-post art-article">
                                
                                                
                <div class="art-postcontent art-postcontent-0 clearfix"><div class="art-content-layout">
    <div class="art-content-layout-row">
    <div class="art-layout-cell layout-item-1" style="width: 100%" >
    
    
    
        <br style="line-height: 450px">
        <div style="position:absolute;top:110px;left:50px;text-shadow:3px 3px #cccccc;">
        <h5>Fresh<br>
        actual<br>
        ImPressive</h5>
        </div>
    </div>
    </div>
</div>
<div class="art-content-layout-br layout-item-0">
</div><div class="art-content-layout layout-item-2">
    <div class="art-content-layout-row">

    <!-- Efecto que hace que al pasar por encima el mouse, gire la imagen y aparezcan las características en su lugar-->

    <!-- Flip ITEM 1-->
    <div class="art-layout-cell layout-item-3" style="width: 25%" >
            
   <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<p style="text-align:center;"><img width="201" height="201" alt="" src="images/green1.jpg" class=""></p><!-- front content -->
</div>
<div class="back">
<br><br><br><br><br><br><h4 style="text-align:center;">Projects</h4>
<p style="text-align:center;">Etiam pharet, tellus sit amet congue vulputate.</p><!-- back content -->
</div>
</div>
   </div>
   
    </div>
    
    <!-- ITEM 2-->
    
    <div class="art-layout-cell layout-item-3" style="width: 25%" >
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">    
<p style="text-align:center;"><img width="201" height="201" alt="" src="images/green2-2.jpg" class=""></p>
</div>
<div class="back">
<br><br><br><br><br><br><h4 style="text-align:center;">Ideas</h4>
<p style="text-align:center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
     </div>
        
    <!-- ITEM 3-->
        
    <div class="art-layout-cell layout-item-3" style="width: 25%" >
        <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">    
<p style="text-align:center;"><img width="201" height="201" alt="" src="images/green3-2.jpg" class=""></p>
</div>
<div class="back">
<br><br><br><br><br><br><h4 style="text-align:center;">process</h4>
<p style="text-align:center;">Aenean citudin imperdiet dignissim posuere id.</p>
</div>
</div>
</div>
    </div>
    
     <!-- ITEM 4-->
    
    <div class="art-layout-cell layout-item-3" style="width: 25%" >
      <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">    
<p style="text-align:center;"><img width="201" height="201" alt="" src="images/green4.jpg" class=""></p>
</div>
<div class="back">
<br><br><br><br><br><br><h4 style="text-align:center;">Offers</h4>
<p style="text-align:center;">Cras elit nisl, rhoncus nec dolor iaculis ultricies.</p>
</div>
</div>
</div>
    </div>
    </div>
</div>

 <!-- Ejemplo inserción de objeto iframe, en este caso, un video de youtube-->

<center><iframe width="640" height="360" src="https://www.youtube.com/embed/4tDGuqEps7Y?controls=0" frameborder="0" allowfullscreen></iframe></center>
<br><br><br>

 <!-- Ejemplo imagenes .png 8 bits, 16 bits 32 bits-->

<div class="art-content-layout-br layout-item-0">
</div>
<div class="art-content-layout layout-item-2">
<h3>PROGRESSION IMAGE QUALITY</h3>
 <br><br>
  <div class="art-content-layout-row">
    <div class="art-layout-cell layout-item-3" style="width: 30%" >
        
        <div class="cajafotos">
<h6>.png</h6>
<br><p>8 bits</p>
        </div>
     <p style="text-align:center;"><img width="201" height="201" alt="" src="images/8bit.png" class=""></p>
     <center> Ejemplo de imagen a 8 bits.</center><br clear="all">
    </div>
  </div>  
  
  <div class="art-content-layout-row">
     <div class="art-layout-cell layout-item-3" style="width: 30%" >
        <div class="cajafotos">
<h6>.png</h6>
<br><p>16 bits</p>
        </div>
        <p style="text-align:center;"><img width="201" height="201" alt="" src="images/16bit.png" class=""></p>
        <center>Ejemplo de imagen a 16 bits.</center><br clear="all">
     </div>
  </div>
  <div class="art-content-layout-row">   
     <div class="art-layout-cell layout-item-3" style="width: 30%" >
        <div class="cajafotos">
<h6>.png</h6>
<br><p>32 bits</p>
        </div>
        <p style="text-align:center;"><img width="201" height="201" alt="" src="images/32bit.png" class=""></p>
        <center>Ejemplo de imagen a 32 bits.</center><br clear="all">
     </div>
  </div>
</div>

        

<div class="art-content-layout-br layout-item-0">
</div><div class="art-content-layout layout-item-2">
    <div class="art-content-layout-row">
    <div class="art-layout-cell layout-item-3" style="width: 25%" >
        <h3>Latest News</h3>
        <div class="newsdate">
        <h6>17</h6>
        <p>Apr</p>
        </div>
        Lorem ipsum dolor sit amet aenean sollicitudin arcu.<br clear="all">
        <div class="newsdate">
        <h6>27</h6>
        <p>Mar</p>
        </div>
        Etiam pharetra, tellus sit amet congue vulputate.<br clear="all">
        <div class="newsdate">
        <h6>05</h6>
        <p>Mar</p>
        </div>
        Curabitur gravida felis, sit amet scelerisque.<br clear="all">
        <div class="newsdate">
        <h6>19</h6>
        <p>Feb</p>
        </div>
        Donec vel neque in neque porta sed sit amet lectus.<br clear="all">
        <div class="newsdate">
        <h6>24</h6>
        <p>Jan</p>
        </div>
        Morbi tristique posuere consequat vel neque in neque.
    </div><div class="art-layout-cell layout-item-3" style="width: 50%" >
        <h1>Quality and Efficiency</h1>
        
        
        <!-- Ejemplo de mapa de imagenes-->
        
        
          <!--La etiqueta <map> define el área del objeto donde queremos hacer la acción-->
       
        <map name="mapa1">  
        <area shape="RECT" coords="217,78,389,207" onmouseover="mouseover1()" onmouseout="mouseout1()">
        </map> 
     
        
        <!--Scripts para sustituir la imagen del mapa de imagen al pasar por encima con el ratón-->
        
        <script>
        
        function mouseover1() 
{
document.getElementById("imagsust").src = "images/tele2.jpg";
}

        function mouseout1() 
{
document.getElementById("imagsust").src = "images/tele1.jpg";
}
        </script>
        
        
        <img id="imagsust" width="449" height="300" alt="Mapa de imágenes. Pasa el raton sobre la pantalla del televisor." border="0" usemap="#mapa1" src="images/tele1.jpg" style="margin-right:-50px;" class="">
        
       
         <!-- Efecto Jquery que hace agrandarse el texto al hacer click en el botón-->


<button id="readbuton" class="art-button">&raquo;Zoom Text</button>


<script>
// Using multiple unit types within one animation.

$( "#readbuton" ).click(function() {
  $( "#textoanimado" ).animate({
    width: "80%",
    opacity: 1,
    marginLeft: "0.6in",
    fontSize: "2em",
    borderWidth: "10px"
  }, 1500 );
});
</script>

<div id="textoanimado">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pharetra, tellus sit amet congue vulputate, nisi erat iaculis nibh, vitae feugiat sapien ante eget mauris.&nbsp;Pellentesque ac felis tellus.</p>
        </div>
        
     
    </div><div class="art-layout-cell layout-item-3" style="width: 25%" >
        <h3>Services</h3>
        <ul>
        <li>Suspendisse pharetra auctor pharetra.</li>
        <li>Nunc a sollicitudin est.</li>
        <li>Curabitur ullamcorper gravida felis</li>
        <li>Sit amet scelerisque lorem iaculis sed.</li>
        <li>Donec vel neque in neque porta venenatis sed sit amet lectus.</li>
        <li>Morbi tristique posuere consequat.</li>
        <li>Maecenas ut lorem lacus.</li>
        <li>Suspendisse et sem eleifend massa.</li>
        <li>Donec ut hendrerit enim.</li>
        </ul>
    </div>
    </div>
</div>
</div>
                                
                </article></div>
                    </div>
                </div>
            </div><footer class="art-footer clearfix">
<div class="art-content-layout layout-item-0">
    <div class="art-content-layout-row">
    <div class="art-layout-cell layout-item-1" style="width: 20%">
        <p style="font-size:18px;">INFO</p>
        <br>
        <ul>
        <li><a href="#">Welcome</a></li>
        <li><a href="#">People</a></li>
        <li><a href="#">Management</a></li>
        </ul>
    </div><div class="art-layout-cell layout-item-1" style="width: 18%">
        <p style="font-size:18px;">LOCATION</p>
        <br>
        <ul>
        <li><a href="#">Map</a></li>
        <li><a href="#">Address</a></li>
        <li><a href="#">Contact Us</a></li>
        </ul>
    </div><div class="art-layout-cell layout-item-1" style="width: 25%">
        <p style="font-size:18px;">ABOUT</p>
        <br>
        <ul>
        <li><a href="#">Company</a></li>
        <li><a href="#">Terms</a></li>
        </ul>
    </div><div class="art-layout-cell" style="width: 37%">
        <p style="text-align:right;"><br></p>
        <p style="text-align:right;"><img width="32" height="32" alt="" src="images/rss_32-2.png" style="margin:5px;"><img width="32" height="32" alt="" src="images/picasa_32-2.png" style="margin:5px;"><img width="32" height="32" alt="" src="images/facebook_32-2.png" style="margin:5px;" class=""><img width="32" height="32" alt="" src="images/flickr_32-2.png" style="margin:5px;" class=""><br>
        <a href="http://artdesigner.lv"></a></p>
        <p style="text-align: right;"><span style="text-align: right;"><br></span></p>
        <p style="text-align: right;"><span style="text-align: right;">Copyright © 2011-2012. All Rights Reserved.<br>
        Icons by <a href="http://artdesigner.lv">Artdesigner.lv</a></span><br></p>
        <p style="text-align: right;"><br></p>
        <p style="text-align: right;"><br></p>
    </div>
    </div>
</div>

</footer>

    </div>
    <p class="art-page-footer">
        <span id="art-footnote-links"><a href="http://www.artisteer.com/" target="_blank">Web Template</a> created with Artisteer.</span>
    </p>
</div>


</body></html>