martes, 10 de febrero de 2015

DIA CIENTO CINCUENTA Y OCHO 10/02/2015

Hoy hemos dado más teoría de historia del arte en diseño para, posteriormente, preparar un trabajo que presentaremos mañana sobre distintas caligrafías, en mi caso, afortunadamente me tocó la japonesa, espero no excederme en la exposición dado que debe ser de 5 minutos y le he puesto mucho entusiasmo dado que me encanta.
En programación seguimos preparando el examen que acontecerá mañana, así como la subida de ejercicios y teoría al blog.

VALIDACION DE FORMULARIOS - EXPRESIONES REGULARES

¿Qué son las expresiones regulares?

Las expresiones regulares son modelos que describen las combinaciones de caracteres en el texto. Se podrían definir como una serie de caracteres que forman un patrón, que representan a otro grupo de caracteres mayor, de tal forma que podemos comparar el patrón con otros conjuntos de caracteres para ver las coincidencias. Las expresiones regulares pueden utilizarse en múltiples lenguajes de programación pero en esta entrada vamos a ver un ejemplo de validación de formularios mediante Javascript y haciendo uso de expresiones regulares.

¿Cómo interpretarlas?

Ejemplos:

– Número de teléfono nacional (sin espacios) 

• Ejemplo: 954556817 

• Exp. Reg.: /^\d{9}$/ o también /^[0-9]{9}$/ 

Comienza (^) por una cifra numérica (\d) de la que habrá 9 ocurrencias ({9}) y aquí acabará la cadena ($). 

NOTA: La expresión “\d” equivale a la expresión “[0-9]”, y representa a un carácter de una cifra numérica, es decir, ‘0’ o’1’ o ‘2’ o ‘3’ ... o ‘9’.

– Número de teléfono internacional

• Ejemplo: (+34)954556817 

• Exp. Reg.: /^\(\+\d{2,3}\)\d{9}$/ 

Comienza (^) por un paréntesis (\(), le sigue un carácter + (\+), después una cifra numérica (\d) de la que habrá 2 o 3 ocurrencias ({2,3}), después le sigue un paréntesis de cierre (\)), luego viene una cifra numérica de la que habrá 9 ocurrencias ({9}), y aquí acabará la cadena ($). 

NOTA: Puesto que los caracteres: (, ), +, *, -, \, {, }, |, etc... tienen significados especiales dentro de una expresión regular, para considerarlos como caracteres normales que debe incluir una cadena deben de ir precedidos del carácter de barra invertida \. 

– Fecha con formato DD/MM/AAAA

• Ejemplo: 09/01/2006 

• Exp. Reg.: /^\d{2}\/\d{2}\/\d{4}$/ 

Comienza (^) por una cifra numérica (\d) de la que habrá 2 ocurrencias ({2}), después una barra (\/), seguida de 2 cifras numéricas, otra barra, 4 cifras numéricas, y aquí acabará la cadena ($). 

– Código postal

• Ejemplo: 41012 

• Exp. Reg.: /^\d{5}$/ 

Únicamente contiene 5 cifras numéricas. 

– Email

• Ejemplo: usuario@servidor.com 

• Exp. Reg.: /^(.+\@.+\..+)$/ 

Comienza (^) por caracteres cualesquiera que no sean salto de línea (.) de los que habrá al menos una ocurrencia (+), después el carácter arroba (\@), seguido de al menos un carácter que no podrá ser el salto de línea (.+), después viene el carácter punto (\.), seguido de al menos un carácter donde ninguno podrá ser el salto de línea (.+), y aquí acabará la cadena ($). 

– Número entero

• Ejemplo: -123 

• Exp. Reg.: /^(\+|\-)?\d+$/ o también /^[+-]?\d+$/ o también /^[+-]?[0-9]+$/ 

Comienza (^) opcionalmente (?) por el carácter + o por el carácter -, por lo que puede que incluso no aparezcan ninguno de los 2; seguidamente vienen caracteres de cifras numéricas (\d) de los que al menos debe introducirse uno (+), y aquí acabará la cadena ($). 

– Número real

• Ejemplo: -123.35 o 7,4 o 8 

• Exp. Reg.: /^[+-]?\d+([,.]\d+)?$/ 

Comienza (^) opcionalmente (?) por el carácter + o por el carácter -, por lo que puede que incluso no aparezcan ninguno de los 2; seguidamente vienen caracteres de cifras numéricas (\d) de los que al menos debe introducirse uno (+), y, opcionalmente, aparecerá un punto o coma decimal seguido de al menos una cifra numérica, y aquí acabará la cadena ($).

Creación de expresiones regulares


Par crear una expresión regular, puede utilizarse dos métodos: 

1) La primera opción compila la expresión regular cuando se evalúa el script, por lo que es mejor cuando la  expresión regular es una constante (delimitada por barras) y no va a variar a lo largo de la ejecución del programa. 

exp_reg1 = /^[0-9]+/; 

La variable se convierte en una variable del tipo expresión regular, por tanto, puede usarse con ella el método test para validar la cadena. 


 if(exp_reg1.test(“123”)==false)

2) La segunda opción compila la expresión regular en tiempo de ejecución (guardada en una variable de tipo cadena o en un campo de un formulario). Aquí los delimitadores son las comillas dobles, no las barras. 

exp_reg2 = new RegExp("^[0-9]+"); // Ahora exp_reg2 es una variable que contiene una expresión regular. 

 exp_reg3 = new RegExp(formu.campo1.value); 

// exp_reg3 tendrá como expresión regular el contenido del campo campo1 del formulario formu. 

exp_reg4 = new RegExp(cadena1); 

// exp_reg4 tendrá como expresión regular el contenido de la variable de cadena cadena1. 


if(exp_reg3.test(“123”)==false) // Ahora podrá usarse el método test en las variables.

Patrón de expresiones regulares


Expresiones regulares especiales




Ejemplos:

Letra minúscula 

[a-z]

Correo electrónico 

 /^[\w-\.]{3,}@([\w-]{2,}\.)*([\w-]{2,}\.)[\w-]{2,4}$/ 

URL 

/^(ht|f)tp(s?)\:\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(\/?)([a-zA-Z0-9\-\.\?\,\’\/\\\+&%\$#_]*)?$/

Fecha

 /^\d{1,2}\/\d{1,2}\/\d{2,4}$/

Hora 

/^(0[1-9]|1\d|2[0-3]):([0-5]\d):([0-5]\d)$/

Tarjeta de crédito 

/^((67\d{2})|(4\d{3})|(5[1-5]\d{2})|(6011))(-?\s?\d{4}){3}|(3[4,7])\ d{2}-?\s?\d{6}-?\s?\d{5}$/ 

Número teléfono 

/^[0-9]{2,3}-? ?[0-9]{6,7}$/ 

Código postal

 /^([1-9]{2}|[0-9][1-9]|[1-9][0-9])[0-9]{3}$/

Ejemplo:





VALIDACIÓN DE FORMULARIOS

Primera plantilla

Visualización


Js 


function validacion(formulario)

{
//Creamos una variable y asignamos una expresión regular que indica que sólo se podrán introducir nueve dígitos en este campo
var regular_telefono=/^\d{9}$/;  
//ahora una para cinco dígitos
var regular_cp=/^\d{5}$/
//y una para caracteres alfabéticos en minúscula o mayúscula
var regular_nombre=/^[A-Za-z]{3,15}$/
var regular_apellido=/^[A-Za-záéíóúñ]{2,}([\s][A-Za-záéíóúñ]{2,})+$/
//entre 15 y 150 caracteres
var regular_mensajetext=/^[A-Za-z]{5,150}$/
if (regular_telefono.test(formulario.tele.value)==false)
{
formulario.tele.style.border="red 3px solid"
window.alert("Introduzca nueve dígitos")
document.formulario.tele.focus()
return false
}
if (regular_cp.test(formulario.cp.value)==false)
{
formulario.cp.style.border="red 3px solid"
window.alert("Código postal no válido")
document.formulario.cp.focus()
return false
}
if (regular_nombre.test(formulario.minombre.value)==false)
{
formulario.minombre.style.border="red 3px solid"
window.alert("Introduzca caracteres alfabéticos")
document.formulario.minombre.focus()
return false
}
if (regular_apellido.test(formulario.apelli.value)==false)
{
formulario.apelli.style.border="red 3px solid"
window.alert("Introduzca caracteres alfabéticos")
document.formulario.apelli.focus()
return false
}
if (regular_mensajetext.test(formulario.mensa.value)==false)
{
formulario.mensa.style.border="red 3px solid"
window.alert("Introduzca entre cinco y ciento cincuenta caracteres")
document.formulario.mensa.focus()
return false
}
window.alert("El formulario se rellenó correctamente")
return true
}

Html


<!DOCTYPE html>
<html dir="ltr" lang="es"><head><!-- Created by Artisteer v4.0.0.58475 -->
    <meta charset"utf-8" />
    <title>Contacts</title>
    <meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">

    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <link rel="stylesheet" href="style.css" media="screen">
    <!--[if lte IE 7]><link rel="stylesheet" href="style.ie7.css" media="screen" /><![endif]-->
    <link rel="stylesheet" href="style.responsive.css" media="all">


     <script src="mijs.js"></script>
    <script src="jquery.js"></script>
    <script src="script.js"></script>
    <script src="script.responsive.js"></script>
<meta name="description" content="Description">
<meta name="keywords" content="Keywords">



<style>.art-content .art-postcontent-0 .layout-item-0 { padding-right: 10px;padding-left: 10px;  }
.ie7 .post .layout-cell {border:none !important; padding:0 !important; }
.ie6 .post .layout-cell {border:none !important; padding:0 !important; }

</style></head>
<body>
<div id="art-main">
<nav class="art-nav clearfix">
    <ul class="art-hmenu"><li><a href="inicio.html">Inicio</a></li><li><a href="contacts.html" class="active">Contacts</a></li></ul> 
    </nav>
<header class="art-header clearfix">


    <div class="art-shapes">
<h1 class="art-headline" data-left="50%">
    <a href="#">Introduzca Título del Sitio</a>
</h1>
<h2 class="art-slogan" data-left="50%">Introduzca Eslogan del Sitio</h2>


            </div>

                
                    
</header>
<div class="art-sheet clearfix">
            <div class="art-layout-wrapper clearfix">
                <div class="art-content-layout">
                    <div class="art-content-layout-row">
                        <div class="art-layout-cell art-content clearfix"><article class="art-post art-article">
                                <div class="art-postmetadataheader">
                                        <h2 class="art-postheader">Contacts</h2>
                                                            
                                    </div>
                                <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-0" style="width: 100%" >
        <p>Eros sit pretium phasellus lorem massa volutpat risus.  Suspendisse nunc dapibus curabitur et metus nulla ipsum  eu turpis gravida adipiscing a ut quis vestibulum est.</p><p>Quis nullam cras quis ornare ut mi libero pellentesque amet augue. Ut velit condimentum varius. Et auctor sem eget interdum urna aliquet nec donec vitae posuere.  Aliquam donec id eleifend arcu pellentesque. </p><p style="font-weight:bold;">Laoreet id.</p><p>Sit felis vel dapibus mollis. <br>  Principal Ciudad, Country 12345-6789</p><p>Et adipiscing quis.<br>  Fusce eget leo vel.</p><p>A. <a href="#">http://www.domain.com<br></a>A. <a href="#">email@domain.com</a></p>
    
        <div id="tabla">
  <form name="formulario" onsubmit=" return validacion(this)">
   <p></p>
   <table id="borde" width="432" border="0">
     <tr>
       <td>*Nombre:</td>
       <td>&nbsp;</td>
       <td>*Apellidos:</td>
        </tr>
     <tr>
       <td width="461"><input type="text" name="minombre" required autofocus/></td>
       <td width="42">&nbsp;</td>
       <td width="415"><input type="text" name="apelli" required/></td>
        </tr>
     <tr>
       <td>*Email:</td>
       <td>&nbsp;</td>
       <td>Tel&eacute;fono:</td>
        </tr>
     <tr>
       <td><input type="email" required/></td>
       <td>&nbsp;</td>
       <td><input name="tele" value="" type="text"/></td>
        </tr>
     <tr>
       <td>*Direcci&oacute;n:</td>
       <td>&nbsp;</td>
       <td>*C&oacute;digo postal:</td>
        </tr>
     <tr>
       <td><input type="text" required/></td>
       <td>&nbsp;</td>
       <td><input name="cp" value="" type="text" required/></td>
        </tr>
     <tr>
       <td colspan="3">*Mensaje:</td>
        </tr>
     <tr>
       <td colspan="3"><textarea name="mensa" cols="30" rows="10" required></textarea></td>
        </tr>
      </table>
   <p>&nbsp;</p>
    
  <input type="submit" value"Enviar"/>
  </form>
    </div>
    
    
        </div>
    </div>
</div>
</div>
                                
                </article></div>
                        <div class="art-layout-cell art-sidebar1 clearfix"><div class="art-vmenublock clearfix">
        <div class="art-vmenublockheader">
            <h3 class="t">Vertical Menu</h3>
        </div>
        <div class="art-vmenublockcontent">
<ul class="art-vmenu"><li><a href="inicio.html">Inicio</a></li><li><a href="contacts.html" class="active">Contacts</a></li></ul>
                
        </div>
</div><div class="art-block clearfix">
        <div class="art-blockheader">
            <h3 class="t">Reasons to Travel Green</h3>
        </div>
        <div class="art-blockcontent"><ol><li>In ante  diam lacus eget rutrum ultricies ultricies.  <a href="#">more</a></li><li>Tempus nisi integer fusce primis mattis ligula ante ipsum.  <a href="#">more</a></li><li>Vestibulum ipsum mi.  Netus maecenas sociis. <a href="#">more</a></li><li>Montes sagittis praesent nec ultricies volutpat ut nunc.  <a href="#">more</a></li><li>Sem at pellentesque euismod justo.  <a href="#">more</a></li><li>Mi nunc magna blandit id pulvinar gravida ac lacus egestas quam. <a href="#">more</a></li></ol></div>
</div><div class="art-block clearfix">
        <div class="art-blockheader">
            <h3 class="t">Quick Links</h3>
        </div>
        <div class="art-blockcontent"><p><a href="#">Suspendisse pharetra auctor</a></p><p><a href="#">Nunc a sollicitudin est</a></p><p><a href="#">Lobortis sit purus dapibus nunc at.</a></p><p><a href="#">Tellus nullam pede nunc amet. </a></p><p><a href="#">Fusce eget curae tempus odio. </a></p></div>
</div><div class="art-block clearfix">
        <div class="art-blockheader">
            <h3 class="t">Follow Us</h3>
        </div>
        <div class="art-blockcontent"><p><img width="60" height="60" alt="" src="images/1311950644_facebook.png"><img width="60" height="60" alt="" src="images/1311950637_flickr.png"><img width="60" height="60" alt="" src="images/1311950634_rss.png"></p></div>
</div><div class="art-block clearfix">
        <div class="art-blockheader">
            <h3 class="t">Photo Gallery</h3>
        </div>
        <div class="art-blockcontent"><p><img width="205" height="136" alt="" src="images/shutterstock_12843229.jpg" style="margin:0;"></p></div>
</div></div>
                    </div>
                </div>
            </div><footer class="art-footer clearfix">
<p><span style="font-size:13px;"><span style="font-weight:bold;">Fusce et sapien.<a href="#">Privacy Policy</a><span style="font-size:11px;">|</span></span></span>Icono <a href="http://www.iconfinder.com/browse/iconset/web2badges/#readme">set</a> A.<a href="http://www.soulvisual.com/blog/">Jeremy Roux</a></p><p><br></p>
</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>

Segunda plantilla

Visualización


Js

function validarnombre(){ //De tres a cinco caracteres en mayúscula o minúsculavar validanombre=/^[A-Za-z]{3,15}$/
if (validanombre.test(formulario.minombre.value)==false) { //Si no es correcto,el recuadro del input pasará a ser rojo formulario.minombre.style.border="red 3px solid" window.alert(" El nombre de usuario debe ser entre tres y quince letras") document.formulario.minombre.focus() return false }     //Si es correcto, pasará a ser verde else { formulario.minombre.style.border="green 3px solid" return true }

}
function validarcontraseña(){ //Se admitirán en mayúsculas o minúsculas de 3 a 8 caracteres y posteriormente números opcionalesvar validacontraseña=/^[A-Za-z]{3,8}\d?$/
if (validacontraseña.test(formulario.contra.value)==false) { //Si no es correcto,el recuadro del input pasará a ser rojo formulario.contra.style.border="red 3px solid" window.alert(" El nombre de usuario debe ser entre tres y ocho letras, los dígitos son opcionales") document.contra.minombre.focus() return false } //Si es correcto, pasará a ser verde else { formulario.contra.style.border="green 3px solid" return true }

}function validacion(){        var uno= validarnombre() var dos= validarcontraseña() //Si ambas funciones devuelven true, saldrá éste mensaje if (uno==true&&dos==true) { window.alert("Gracias por rellenar correctamente el formulario") return true }}

Html

<!DOCTYPE html>
<html dir="ltr" lang="es"><head><!-- Created by Artisteer v4.0.0.58475 -->
    <meta charset"utf-8" />
    <title>Contacts</title>
    <meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">
    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <link rel="stylesheet" href="style.css" media="screen">
    <!--[if lte IE 7]><link rel="stylesheet" href="style.ie7.css" media="screen" /><![endif]-->
    <link rel="stylesheet" href="style.responsive.css" media="all">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Arimo&amp;subset=latin">
    <script src="mijs.js"></script>
    <script src="jquery.js"></script>
    <script src="script.js"></script>
    <script src="script.responsive.js"></script>
<meta name="description" content="Description">
<meta name="keywords" content="Keywords">



<style>.art-content .art-postcontent-0 .layout-item-0 { padding-right: 10px;padding-left: 10px;  }
.ie7 .post .layout-cell {border:none !important; padding:0 !important; }
.ie6 .post .layout-cell {border:none !important; padding:0 !important; }
</style></head>
<body>
<div id="art-main">
<header class="art-header clearfix">

    <div class="art-shapes">
<div class="art-textblock art-object165573267" data-left="100%">
        <div class="art-object165573267-text"><p style="color: #511200; font-size:19px;font-family:Arimo, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;font-weight:normal;font-style:normal;text-decoration:none">Welcome To Our Site</p><p style="color: #380C00; font-size:14px;font-family:Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;text-decoration:none">Hello and Welcome.</p><p style="font-size:14px;font-family:Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;text-decoration:none"><a style="color: #511200" href="#">More →</a></p></div>
   
</div>
            </div>
<nav class="art-nav clearfix">
    <ul class="art-hmenu"><li><a href="inicio.html">Inicio</a></li><li><a href="contacts.html" class="active">Contacts</a></li></ul>
    </nav>
                   
</header>
<div class="art-sheet clearfix">
            <div class="art-layout-wrapper clearfix">
                <div class="art-content-layout">
                    <div class="art-content-layout-row">
                        <div class="art-layout-cell art-sidebar1 clearfix"><div class="art-vmenublock clearfix">
        <div class="art-vmenublockheader">
            <h3 class="t">Vertical Menu</h3>
        </div>
        <div class="art-vmenublockcontent">
<ul class="art-vmenu"><li><a href="inicio.html">Inicio</a></li><li><a href="contacts.html" class="active">Contacts</a></li></ul>
               
        </div>
</div><div class="art-block clearfix">
        <div class="art-blockheader">
            <h3 class="t">Reasons to Travel Green</h3>
        </div>
        <div class="art-blockcontent"><ol><li>In ante  diam lacus eget rutrum ultricies ultricies.  <a href="#">more</a></li><li>Tempus nisi integer fusce primis mattis ligula ante ipsum.  <a href="#">more</a></li><li>Vestibulum ipsum mi.  Netus maecenas sociis. <a href="#">more</a></li><li>Montes sagittis praesent nec ultricies volutpat ut nunc.  <a href="#">more</a></li><li>Sem at pellentesque euismod justo.  <a href="#">more</a></li><li>Mi nunc magna blandit id pulvinar gravida ac lacus egestas quam. <a href="#">more</a></li></ol></div>
</div><div class="art-block clearfix">
        <div class="art-blockheader">
            <h3 class="t">Photo Gallery</h3>
        </div>
        <div class="art-blockcontent"><p><img width="205" height="136" alt="" src="images/shutterstock_12843229.jpg" style="margin:0;"></p></div>
</div><div class="art-block clearfix">
        <div class="art-blockheader">
            <h3 class="t">Follow Us</h3>
        </div>
        <div class="art-blockcontent"><p><img width="60" height="60" alt="" src="images/1311950644_facebook.png"><img width="60" height="60" alt="" src="images/1311950637_flickr.png"><img width="60" height="60" alt="" src="images/1311950634_rss.png"></p></div>
</div><div class="art-block clearfix">
        <div class="art-blockheader">
            <h3 class="t">Quick Links</h3>
        </div>
        <div class="art-blockcontent"><p><a href="#">Suspendisse pharetra auctor</a></p><p><a href="#">Nunc a sollicitudin est</a></p><p><a href="#">Lobortis sit purus dapibus nunc at.</a></p><p><a href="#">Tellus nullam pede nunc amet. </a></p><p><a href="#">Fusce eget curae tempus odio. </a></p></div>
</div></div>
                        <div class="art-layout-cell art-content clearfix"><article class="art-post art-article">
                                <div class="art-postmetadataheader">
                                        <h2 class="art-postheader"><span class="art-postheadericon">Contacts</span></h2>
                                    </div>
                                               
                <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-0" style="width: 100%" >
        <p>Eros sit pretium phasellus lorem massa volutpat risus.  Suspendisse nunc dapibus curabitur et metus nulla ipsum  eu turpis gravida adipiscing a ut quis vestibulum est.</p><p>Quis nullam cras quis ornare ut mi libero pellentesque amet augue. Ut velit condimentum varius. Et auctor sem eget interdum urna aliquet nec donec vitae posuere.  Aliquam donec id eleifend arcu pellentesque. </p><p style="font-weight:bold;">Laoreet id.</p><p>Sit felis vel dapibus mollis. <br>  Principal Ciudad, Country 12345-6789</p><p>Et adipiscing quis.<br>  Fusce eget leo vel.</p><p>A. <a href="#">http://www.domain.com<br></a>A. <a href="#">email@domain.com</a></p>
   
        <div id="tabla">
   <form name="formulario" onsubmit=" return validacion()">
   <p></p>
   <table id="borde" width="432" border="0">
     <tr>
       <td>*Usuario:</td>
       <td colspan="2">*Contraseña:</td>
     
        </tr>
     <tr>
       <td width="144"><input type="text" name="minombre" value="" required autofocus  onblur="validarnombre()"/></td>
       <td colspan="2"><input type="password" name="contra" value="" onblur="validarcontraseña()" required/></td>
     
        </tr>
      </table>
   <p>&nbsp;</p>
   
  <input type="submit" value"Enviar"/>
  </form>
    </div>
   
        </div>
    </div>
</div>
</div>
                               
                </article></div>
                        <div class="art-layout-cell art-sidebar2 clearfix"><div class="art-block clearfix">
        <div class="art-blockheader">
            <h3 class="t">Search</h3>
        </div>
        <div class="art-blockcontent"><div>
  <form action="#" class="art-search" method="get" name="searchform">
    <input type="text" value="" name="s" />
    <input type="submit" value="Search" name="search" class="art-search-button" />
  </form>
</div></div>
</div><div class="art-block clearfix">
        <div class="art-blockheader">
            <h3 class="t">Categories</h3>
        </div>
        <div class="art-blockcontent"><div>
  <p>Lorem ipsum dolor sit amet. Nam sit amet sem. Mauris a ante.</p>
  <ul>
    <li>
      <a href="#" title="All News">All News</a> (50)
    </li>
    <li>
      <a href="#" title="Best of the Year">Best of the Year</a> (4)
    </li>
    <li>
      <a href="#" title="Hyperlink">Hyperlink</a> (24)
    </li>
    <li>
      <a href="#" title="Visited link" class="visited">Visited link</a> (17)
    </li>
    <li>
      <a href="#" title="Hovered link" class="hover">Hovered link</a> (6)
    </li>
  </ul>
</div></div>
</div><div class="art-block clearfix">
        <div class="art-blockheader">
            <h3 class="t">Archives</h3>
        </div>
        <div class="art-blockcontent"><div>
  <ul>
    <li>
      <a href="#" title="November 2008">November 2008</a>
    </li>
    <li>
      <a href="#" title="October 2008">October 2008</a>
    </li>
    <li>
      <a href="#" title="September 2008">September 2008</a>
    </li>
    <li>
      <a href="#" title="June 2008">June 2008</a>
    </li>
  </ul>
</div></div>
</div><div class="art-block clearfix">
        <div class="art-blockheader">
            <h3 class="t">Blogroll</h3>
        </div>
        <div class="art-blockcontent"><div>
  <ul>
    <li>
      <a href="#">My first blog</a>
    </li>
    <li>
      <a href="#">Who will prevail?</a>
    </li>
    <li>
      <a href="#">Stay positive!</a>
    </li>
    <li>
      <a href="#">Oil still going up</a>
    </li>
    <li>
      <a href="#">Gripes and Grins</a>
    </li>
    <li>
      <a href="#">2012 Olympics</a>
    </li>
    <li>
      <a href="#">How to SEO</a>
    </li>
    <li>
      <a href="#">On Global Warming</a>
    </li>
    <li>
      <a href="#">Can you guess?</a>
    </li>
  </ul>
</div></div>
</div></div>
                    </div>
                </div>
            </div><footer class="art-footer clearfix">
<p><span style="font-size:13px;"><span style="font-weight:bold;">Fusce et sapien.<a href="#">Privacy Policy</a><span style="font-size:11px;">|</span></span></span>Icono <a href="http://www.iconfinder.com/browse/iconset/web2badges/#readme">set</a> A.<a href="http://www.soulvisual.com/blog/">Jeremy Roux</a></p><p><br></p>
</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>

DISEÑO DE TAPAS DE UN LIBRO


lunes, 9 de febrero de 2015

LA INVENCION DE LA IMPRENTA

La invención de la imprenta



¿Qué es?


La imprenta es un método mecánico destinado a reproducir textos e imágenes sobre papel, tela u otros materiales. En su forma clásica, consiste en aplicar una tinta, generalmente oleosa, sobre unas piezas metálicas (tipos) para transferirla al papel por presión. Aunque comenzó como un método artesanal, su implantación trajo consigo una revolución cultural.

Historia


Ya los romanos tuvieron sellos que imprimían hojas de inscripciones sobre objetos de arcilla alrededor del año 440 a. C. y el 430 a. C. Entre 1041 y 1048, Bi Sheng inventó en China —donde ya existía un tipo de papel de arroz— el primer sistema de imprenta de tipos móviles, a base de complejas piezas de porcelana en las que se tallaban los caracteres chinos; esto constituía un complejo procedimiento por la inmensa cantidad de caracteres que hacían falta para la escritura china, no obstante dado que en dicho idioma se precisan de 2000 a 40000 caracteres, descartaron la idea por su poca practicidad. Sin embargo, la imprenta moderna no se creó hasta el año 1440 aproximadamente, de la mano de Johannes Gutenberg.


    Imprenta china

               


Hasta 1450 y aun en años posteriores, los libros se difundían en copias manuscritas por escritores, muchos de los cuales eran monjes y frailes dedicados exclusivamente al rezo y a la réplica de ejemplares por encargo del propio clero o de reyes y nobles. A pesar de lo que se cree, no todos los monjes copistas sabían leer y escribir. Realizaban la función de copistas, imitadores de signos que en muchas ocasiones no entendían, lo cual era fundamental para copiar libros prohibidos que hablasen de medicina interna o de sexo. Las ilustraciones y las letras mayúsculas eran producto decorativo y artístico del propio copista, que decoraba cada ejemplar que realizaba según su gusto o visión. Cada uno de sus trabajos podía durar hasta diez años.


     Imprenta de Gutenberg


La Biblia de Gutenberg no fue simplemente el primer libro impreso, sino que, además, fue el más perfecto. Su imagen no difiere en absoluto de un manuscrito. El mimo, el detalle y el cuidado con que fue hecho, sólo su inventor pudo habérselo otorgado.

La imprenta se conoce en América una vez concluida la conquista española.


     Imprenta moderna


A finales del siglo XIX, se perfeccionó el proceso, gracias a la invención en 1885 de la linotipia, por Ottmar Mergenthaler.
Con la linotipia, el operador, al pulsar una tecla de un dispositivo similar a una máquina de escribir seleccionaba un carácter tipográfico determinado, y automáticamente la matriz o molde de la letra particular quedaba libre y salía de un depósito que se situaba en lo alto de la máquina. Dicho molde descendía a un centro común, donde dicha letra, seguida de otras, formaba las palabras y espaciados del texto.


    Linotipia 




    Imprenta digital



DIA CIENTO CINCUENTA Y SIETE 09/02/2015

Hoy seguimos aún con los formularios dado que es preciso repasar para el examen que tendrá lugar el miércoles.
En diseño hicimos un pequeño trabajo por grupos y lo presentamos, el nuestro concretamente fue sobre la invención de la imprenta.
En Northink ya nos decidimos por un logotipo y comenzamos a trabajar en distintas propuestas de diseño del manual de identidad corporativa.

analytics