lucho5200

Antes que nada, vale aclarar que es un post de este tipo inedito en T!, se me ocurrió por que es original e importante.. espero que les guste comunidad! Las llaves son uno de los mecanismos más básicos y esenciales que utilizamos a diario. La mayoría de la gente lleva de 5 a 10 llaves con ellas siempre que sale. En tu llavero puede ser que tengas varias llaves para la casa, una o dos más para el coche y algunas para la oficina o la casa de un amigo. Tu llavero es una demostración clara de cómo esta tecnología de las cerraduras se encuentra en todas partes. La razón principal por la que utilizamos cerraduras por todas partes, es que proveen un sentido de seguridad. Pero en películas y en la televisión, los espías, los detectives y los ladrones pueden abrir una cerradura muy fácilmente, a veces usando solamente un par de clips de papel. pero: ¿Es realmente posible que alguien abra una cerradura tan fácilmente? En este artículo, hablaremos de la practica de abrir cerraduras, explorando la tecnología de las cerraduras y llaves. Los cerrajeros definen "falsear una cerradura" como la manipulación de los componentes de una cerradura para abrir una cerradura sin la llave. Para entender esto, primero tienes que saber como funcionan las cerraduras y las llaves. Las cerraduras vienen en todas las formas y tamaños, con muchas variaciones innovadoras de diseño. Puedes hacerte una idea clara del proceso de abrir una cerradura examinando una cerradura simple. La mayoría de las cerraduras se basan en conceptos bastante similares. Para la mayor parte de nosotros, la cerradura más familiar es la cerradura estándar de pasador que puedes encontrar en una puerta delantera de una casa. En una cerradura normal de pasador, un perno o cierre movible se encaja en la puerta, de tal forma que puede ser introducido en el lado de la puerta. Este perno se alinea con una muesca en el marco. Cuando das vuelta a la cerradura, el perno se introduce en la muesca del marco, así que la puerta no puede abrirse. Cuando contraes el perno, la puerta puede abrirse libremente. El único trabajo de una cerradura de pasador es hacerla simple para alguien con la llave correcta mover el perno pero difícil para alguien sin la llave. En la sección siguiente, veremos cómo ésta trabaja en una cerradura de cilindro básica. Cerraduras de cilindro La mayoría de los cierres de pasador utilizan una cerradura de cilindro. En la cerradura de cilindro, la llave da vuelta a un cilindro, que da vuelta a una leva unida al pasador. Cuando el cilindro da vuelta, la leva hala hacia adentro el pasador y la puerta puede abrirse. Cuando el cilindro regresa a su pocisión, la leva desliza el pasador y el resorte lo encaja a presión (en las cerraduras con resorte) así que la puerta no puede abrirse. En una cerradura de pasador sin resorte, el cilindro que da vuelta desliza el pasador adelante y atrás. Una cerradura de pasador sin resorte es más segura que un cierre con resorte puesto que es mucho más duro empujar el pasador adentro del lado de la puerta. Dentro de una cerradura de cilindro, hay una especie de rompecabezas, que solamente la llave correcta puede solucionar. La variación principal en diseños de la cerradura es la naturaleza de este rompecabezas. Uno de los rompecabezas mas comunes es el diseño del tambor de pines, demostrado abajo. Los componentes principales en el diseño del tambor de pines son series de pequeños pines de longitud variable. Los pines se dividen hacia arriba en pares. Cada par se reclina en un eje que corre atravez del tambor central de la cerradura y en la cubierta alrededor del cilindro. Los resortes en la tapa de los ejes mantienen los pines en posición. Cuando no se inserta ninguna llave, el pin inferior en cada par está totalmente dentro del tambor, mientras que el pin superior esta en una posición intermedia entre el tambor y el cilindro. La posición de estos pines superiores impide que el tambor de vuelta -- los pines traban el tambor al cilindro. Así es cómo trabaja: Cuando insertas una llave, la serie de muescas en el cuerpo de la llave empujan los pines hasta diversos niveles. La llave incorrecta empujará los pines de modo que la mayor parte de los pines superiores todavía estén en parte en el tambor y en parte en el cilindro. La llave correcta empujará cada par de pines lo suficiente de modo que el punto adonde los dos pines se juntan, se alinie perfectamente con el espacio adonde el cilindro y el tambor se juntan (este punto es llamado la línea de esquileo). Sin ninguno de los pines que bloqueen el cilindro, puede rotarse el tambor libremente y tú puedes mover el pasador hacia adentro y hacia fuera. Este diseño simple del rompecabezas es muy eficaz. Puesto que los pines se ocultan dentro de la cerradura, es bastante difícil para la mayoría de la gente mover el tambor sin la llave correcta. Pero, con mucha práctica, es posible solucionar el rompecabezas por otros medios. En la sección siguiente, veremos cómo un cerrajero va a forzar esta clase de cerradura. Forzar una cerradura de Tambor de pines: En la sección pasada, vimos que la llave correcta colocará los pines en una cerradura de tambor de pines de modo que todos los pines más bajos queden en el tambor y todos los pernos superiores queden en el cilindro. Para forzar esta clase de cerradura, simplemente mueves cada par de pines a la posición correcta, uno por uno. Hay dos elementos principales implicados en el proceso de forzar esta cerradura: Ganzúa - las ganzuas son herrameintas largas, finas de metal que curvan hacia arriba en el extremo (como el examinador de un dentista). Se utilizan para empujar los pines hacia arriba Llave de la tensión - las llaves de la tensión vienen en todas las formas y tamaños. Funcionalmente, no son muy complejas. La clase más simple de llave de tensión es un destornillador de cabeza llana fino. El primer paso en forzar una cerradura es insertar la llave de tensión en el ojo de la cerradura y darle vuelta en la misma dirección que darías vuelta a la llave. Esto da vuelta al tambor para presionarlo levemente contra el cilindro alrededor de él, esto crea una repisa leve en el eje de los pines. Mientras que se aplica presión en el tambor, insertas una ganzúa en el ojo de la cerradura y comienzas a levantar los pines. El objetivo es levantar cada par de pines hasta el nivel en el cual el pin superior se mueve totalmente en el cilindro, como si fuera empujado por la llave correcta. Cuando haces esto mientras que aplicas presión con la llave de la tensión, sientes u oyes un chasqueo leve cuando el pin cae en la posición correcta. Éste es el sonido del pin superior que cae en lugar en la repisa en el eje. La repisa mantiene el perno superior acuñado, así que no caerá de nuevo abajo en el tambor. De esta manera, mueves cada par de pines a la posición correcta hasta que todos los pines superiores se insertan totalmente en el cilindro y todos los pines más bajos se quedan dentro del tambor. A este punto, el tambor rota libremente y puedes abrir la cerradura. De forma conceptual, el proceso de forzar la cerradura es absolutamente simple, pero es una habilidad muy difícil de dominar. Los cerrajeros tienen que aprender exactamente la presión correcta a aplicarse y qué sonidos esperar escuchar. También deben afinar con certeza su sentido del tacto al punto donde pueden sentir las fuerzas leves de los pines y del tambor móviles. Además, deben aprender a visualizar todas las piezas dentro de la cerradura. Forzar acertadamente una cerradura depende de la familiaridad completa con el diseño de la misma. Otros tipos de cerraduras: En la sección anterior vimos las cerraduras de cilindro y tambor de pines. Esta clase de cerradura se encuentra por todas partes, Son tan populares porque dan un buen nivel de seguridad de forma relativamente barata. Para una cerradura típica de tambor y pines, con cinco pines, hay alrededor de un millón de diversos tipos de configuración. Cuando consideramos el número de compañías que hacen cerraduras, las posibilidades de que un criminal tenga la misma llave que tu, es muy remota. Las cerraduras tubulares ofrecen protección superior a las cerraduras del tambor de pines, pero son también más costosas. En vez de una fila de pines, las cerraduras tubulares tienen pines colocados alrededor de la circunferencia del tambor del cilindro. Esto las hace mucho más dificiles de forzar. Las técnicas convencionales para forzarlas, generalmente no trabajan en este tipo de cerradura. Cambio de registro y creación de llaves maestras El proceso de cambiarle el registro a una cerradura es muy simple. El cerrajero quita todos los pines del tambor. Entonces, tomando de una colección de pines de repuesto de varios tamaños, el cerrajero selecciona los pines de abajos (del tambor) nuevos que caben perfectamente entre las muescas de la llave y la línea del esquileo, de esta manera, cuando insertas la nueva llave, los pines más bajos empujarán todos los pines del cilindro (superiores) justo sobre la línea del esquileo, permitiendo que el tambor dé vuelta libremente. (Este proceso puede variar dependiendo del diseño particular de la cerradura.) No importa cuan largos sean los pines superiores (puesto que ellos estaran todo el tiempo sobre la línea del esquileo cuando se inserte la llave), así que el cerrajero simplemente reinserta los seis pines superiores originales de la cerradura. Y eso es todo allí está el cambio de registro. El proceso entero toma solamente algunos minutos. Las llaves maestras son una tecnología interesante relacionada algo con forzar una cerradura. Algunas cerraduras se diseñan para trabajar con dos llaves diferentes. La llave original abrirá solamente esa cerradura específica, mientras que la llave maestra abrirá esa cerradura y varias otras en un grupo. En estas cerraduras, algunos del los pares de pines son separados por un tercer pin llamado espaciador principal. Cuando tres pines se combinan en un eje, hay dos maneras de colocar los pines de forma que abren la cerradura. La llave original puede levantar los pines de modo que la línea del esquileo quede justo sobre el espaciador principal, mientras que la llave maestra levantaría los pines así que la línea del esquileo esté debajo del espaciador principal. En ambos casos, hay un boquete en la línea del esquileo y la llave puede dar vuelta. En este diseño de cerradura, el pin de abajo debe ser de la misma longitud en cada cerradura en el grupo, pero el espaciador principal varia de longitud. Esto permite a una persona, que es el encargado del edificio, tener acceso a muchas puertas, mientras que cada llave original puede abrir solamente su propia cerradura. En la sección siguiente, veremos más de cerca las diferencias entre la forma en que los cerrajeros forzan una cerradura y la forma ilegal de hacerlo. Cerrajeria: El código del cerrajero Los cerrajeros experimentados pueden lograr bueno resultados con algunos clips de papel y un destornillador básico, pero el trabajo es mucho más fácil cuando tienen las herramientas apropiadas. Un kit básico de la cerrajeria contiene una llave de tensión y diversas opciones de herramienta. Las opciones difieren principalmente en la forma de sus cabezas. Diversas cabezas se utilizan para clases particulares de cerraduras y las técnicas particulares de la cerrajeria. Algunos cerrajeros también utilizarán una pistola eléctrica de cerrajeria. Una pistola de cerrajeria consiste en básicamente una ganzúa que vibra. Insertas estas varillas largas de metal en la cerradura. Mientras las varillas de metal vibran, empujan los pines hacia arriba. Esto funciona como el rastrillo de una cerradura. Se da vuelta a la pistola mientras que las varillas vibran, hasta que consigues alinear todos los pines con el borde del cilindro, simultáneamente. Estos dispositivos abrirán a veces la cerradura en cuestión de segundos, y en otras ocasiones no funcionarán del todo. La mayoría de los cerrajeros por hobby evitan estos dispositivos porque le quitan el elemento de desafio al proceso. La cerrajería es una habilidad esencial para los cerrajeros porque los deja abrir cerraduras sin destruirlas. Cuando las personas se quedan fuera de su casa o pierden su llave, un cerrajero puede dejarte entrar muy fácilmente. Las habilidades de la cerrajeria no son particularmente comunes entre ladrones, principalmente porque hay muchas maneras más simples de entrar en una casa (por ejemplo, lanzar un ladrillo a través de una ventana trasera). Para la mayor parte, solamente los intrusos que necesitan cubrir sus pistas, tales como espías y detectives, tratarán de abrir una cerradura con estas técnicas. Entre el cerrajero y el ladrón está el cerrajero amateur, a veces llamado un hacker. Como los hackers de computadora expertos, su objetivo es abrir cerraduras solamente por el desafío. Por supuesto, no hacen esto con cerraduras en una propiedad privada, ya que consideran esto ilegal y poco ético. Si una persona intenta abrir una cerradura que pertenezca algún otro, es muy probable que, de ser descubierta, sea sujeta a arresto por invasión de propiedad privada. Simplemente entender el cómo funciona una cerradura, y como abrirlas sin llave, puede cambiar puede cambiar tu actitud entera hacia las cerraduras y las llaves. El hecho que se pueda abrir una cerradura sin la llave apropiada demuestra claramente que las cerraduras normales no son dispositivos infalibles. Proporcionan un nivel de la seguridad que se puede comprometer con un esfuerzo mínimo. La mayoría de las cerraduras sirven solamente para mantener honesta a la gente, y para desalentar a criminales. Con las herramientas correctas, un intruso determinado puede abrir casi cualquier cerrojo. "Una cerradura es un mecanismo de metal que se incorpora a puertas y cajones de armarios, cofres, arcones, etc., para impedir que se puedan abrir sin la llave y así proteger su contenido. Este mecanismo se puede accionar mediante una llave de metal, normalmente acero. En la actualidad, aparte de las cerraduras mecánicas, existen otras como las electro-mecánicas o las electrónicas, en las que la llave puede ser una tarjeta de plástico o PVC. La llave encaja en la cerradura por el llamado «ojo», que es un agujero situado normalmente en la parte central del cilindro de la cerradura. En la actualidad, aproximadamente el 80% de las cerraduras con cilindros mecánicos (con llaves de dientes de sierra o de puntos) e incluyendo entre éstas a las de las puertas de seguridad y acorazadas, han dejado de ofrecer la seguridad con la que fueron concebidas a causa de la difusión por internet de técnicas como la del bumping -hasta ahora utilizada en asaltos por bandas organizadas pero hoy accesible a todo tipo de delincuentes- que suponen un riesgo evidente para sufrir accesos indeseados, robos y hurtos. Por ello la tecnología ofrece soluciones aplicadas a las cerraduras que aportan verdadera seguridad, como el caso de las cerraduras con cilindros electrónicos, con el sistema BlueChip o similar. Por otra parte, cabe agregar que el sistema de cerraduras con llaves de diente de sierra es superado - en terminos de factibilidades de violación- por las llamadas cerraduras doble paleta. Las cerraduras doble paleta son cerraduras cuyo bocallave u «ojo» corresponden a llaves del tipo doble paleta: las llaves doble paleta son llaves de dos paletas que por lo general reflejan un par de conjunto de «dientes» (reflejos de la ubicación de cada una de las combinaciones) de manera diametralmente opuestas; en otros términos, por lo general, en las llaves doble paleta, el último diente de un lado equivale al primer diente del otro lado". Partes de una cerradura Todo el mecanismo de la cerradura está encerrado en una-caja de hierro llamada palastro. Esta caja se compone de un fondo rectangular sobre el cual están aplicados los bordes realzados o dobleces de los cuales los tres por donde no pasa el pestillo se denominan el tabique. A veces en lugar de doblar el hierro para formar la caja los rebordes se construyen aparte dejándoles unas colas salientes que se robran sobre el palastro. El pestillo de la cerradura es una especie de cerrojo movido por una llave. La cabeza del pestillo es la parte que sale de la cerradura. El pestillo lleva por un lado unas partes salientes o barbas sobre las cuales obra la llave, por otro hay unas muescas sobre las cuales cae el fiador del muelle, parte indispensable para retener el pestillo en su sitio e impedir que corra sin la acción de la llave la cual al mismo tiempo que empuja el pestillo por una de las barbas, levanta el muelle y saca el fiador de su sitio. El pestillo es simple o de rastrillo según esté formado de un solo trozo o tenga varios dientes. En el interior de la cerradura hay ciertas piezas contorneadas que encajan en unos recortes de la llave llamados guardas. Éstas sirven para oponerse al movimiento de toda llave que no tenga las muescas proporcionadas. La llave se compone del anillo en que se aplica la nano, del tronco horadado con botón y del paletón. El paletón consta del morro, parte plana y corva que toca al pestillo de la cerradura y de cuerpo que es la parte comprendida entre el morro y el tronco. El paletón tiene diferentes muescas para dar paso a las guardas de la cerradura las cuales reciben diferentes nombres según sus posiciones como el tornillo, la bocina, la cruz cumplida, la de Caravaca, la muleta, el báculo, etc. El tronco no siempre tiene un agujero cilíndrico algunas veces es de forma de trébol, de hierro de lanza, etc. Todos estos orificios se corresponden con la espiga de la cerradura fijada con solidez al palastro. Clases de cerraduras Cerradura de bombillo. La que abre con llave que tiene hendiduras longitudinales en su tija actuando como el émbolo de una bomba. Cerradura de combinación. La que solo se puede abrir de un modo determinado. Cerradura de dos pestillos. La que los tiene, uno de llave y otro de picaporte. Cerradura de dos vueltas. Aquélla en que sale el pestillo en dos veces, cada una a cada vuelta de la llave. Cerradura de golpe. La de resorte que cierra con solo empujar la puerta. Cerradura de guardas movibles. La que para mayor seguridad tiene estos accesorios. Cerradura de loba. Aquélla en que los dientes de las guardas son semejantes a las del lobo. Cerradura de llave de pezón. La común de llave maciza que se puede abrir por los dos lados. Cerradura de molinillo. Antiguamente, la que tenía el caño por donde entra la tija de la llave, movible y giratorio sobre el palastro de la cerradura. Cerradura de secreto. La que una vez cerrada solo se puede abrir de una manera determinada. Cerradura de vuelta y media. La que primero actúa como llave y luego como picaporte. Cerradura empanada. La que resulta introducida en una caja en el grueso de larguero de la hoja en que se coloca. Cerradura guarnecida al revés. La más ordinaria que deja ver su mecanismo después de montada. Cerradura recercada. La que oculta su mecanismo dejando ver el pestillo cuando sale hacia el cerradero link: http://www.youtube.com/watch?v=81pwiI6wxZg link: http://www.youtube.com/watch?v=QlodN7Jm2Po link: http://www.youtube.com/watch?v=2RZPgqWE0XQ

En este tutorial, vamos a crear una página de blog a través de la próxima generación de técnicas de. El tutorial tiene como objetivo demostrar la forma en que será la construcción de sitios web, cuando las especificaciones son finalizados y los fabricantes de navegadores han implementado. Si ya sabes HTML y CSS, debe ser fácil de seguir adelante. 1. HTML 5 HTML 5 es la próxima gran versión de HTML. Se introduce un montón de nuevos elementos que harán que nuestras páginas sean más semántica. Esto hará que sea mucho más fácil para los motores de búsqueda y lectores de pantalla para navegar por nuestras páginas, y mejorar la experiencia web para todos. Además, HTML 5 también incluirá APIs para dibujar gráficos de fantasía en la pantalla, el almacenamiento de datos fuera de línea, arrastrar y soltar, y mucho más. Vamos a empezar el marcado de la página del blog. 2. Basic Structure Antes de comenzar el marcado de la página que debe recibir toda la estructura recta: En HTML 5 existen etiquetas específicas destinadas a marcar el encabezado, la navegación, la barra lateral y pie de página. En primer lugar, eche un vistazo a las marcas y voy a explicar después: dijo:<!doctype html> <html> <head> <title>Page title</title> </head> <body> <header> <h1>Page title</h1> </header> <nav> <!-- Navigation --> </nav> <section id="intro"> <!-- Introduction --> </section> <section> <!-- Main content area --> </section> <aside> <!-- Sidebar --> </aside> <footer> <!-- Footer --> </footer> </body> </html> Todavía se parece a formato HTML, pero hay algunas cosas a tener en cuenta: En HTML 5, sólo hay un tipo de documento. Se declara en el comienzo de la página <! DOCTYPE html>. Simplemente le dice al navegador que está tratando con un documento HTML. La cabecera nueva etiqueta se envuelve alrededor de los elementos introductorios, como el título de la página o un logotipo. También podría incluir una tabla de contenido o un formulario de búsqueda. Cada cabecera suele contener una etiqueta de encabezado de <h1> a <h6>. En este caso, la cabecera se usa para introducir toda la página, pero vamos a utilizar para introducir una sección de la página un poco más tarde. La unidad la etiqueta se utiliza para contener los elementos de navegación, tales como la navegación principal en un sitio o una navegación más especializados, como siguiente / anterior-links. La sección de etiqueta se utiliza para denotar una sección en el documento. Puede contener todo tipo de marcas y varias secciones se pueden anidar unos dentro de otros. además se utiliza para envolver alrededor de los contenidos relacionados con el contenido principal de la página que aún podía soportar por sí mismo y tener sentido. En este caso lo estamos utilizando para la barra lateral. El pie de página de etiquetas deben contener información adicional sobre el contenido principal, tales como información acerca de quién lo escribió, la información de copyright, enlaces a documentos relacionados y así sucesivamente. En lugar de utilizar divs que contienen las diferentes secciones de la página que ahora estamos utilizando etiquetas apropiadas, semántica. Se hará mucho más fácil para los motores de búsqueda y los lectores de pantalla para averiguar qué es lo que en una página. 3. Marking Up the Navigation La navegación se caracteriza exactamente igual que lo haríamos en HTML 4 o XHTML, utilizando una lista desordenada. La clave es que esta lista se coloca dentro de las etiquetas de navegación. dijo:<nav> <ul> <li><a href="#">Blog</a></li> <li><a href="#">About</a></li> <li><a href="#">Archives</a></li> <li><a href="#">Contact</a></li> <li class="subscribe"><a href="#">Subscribe via. RSS</a></li> </ul> </nav> 4. Marcar la Introducción Ya hemos definido una nueva sección en el documento utilizando la etiqueta de sección. Ahora sólo necesitamos algo de contenido. dijo:section id="intro"> <header> <h2>Do you love flowers as much as we do?</h2> </header> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p> </section> Añadimos un id de la etiqueta de sección para que podamos identificar más tarde, cuando el estilo. Nosotros usamos la etiqueta de cabecera para cubrir a la introducción elemento h2. Además de describir un documento conjunto, la cabecera de etiqueta también debe ser usado para describir las distintas secciones. 5. Marcar el área de contenido principal Nuestra área de contenido principal consta de tres secciones: la entrada del blog, los comentarios y el formulario de comentarios. Usando nuestro conocimiento acerca de las nuevas etiquetas estructurales en HTML 5, que debería ser fácil para marcar. Marcar el post en tu blog Pasar por el marcado y voy a explicar los nuevos elementos después. dijo:<section> <article class="blogPost"> <header> <h2>This is the title of a blog post</h2> <p>Posted on <time datetime="2009-06-29T23:31:45+01:00">June 29th 2009</time> by <a href="#">Mads Kjaer</a> - <a href="#comments">3 comments</a></p> </header> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio...</p> </article> </section> Comenzamos una nueva sección y envolver la entrada en el blog en un artículo conjunto de etiquetas. La etiqueta del artículo se utiliza para indicar una entrada independiente en un blog, la discusión, enciclopedias, etc, y es ideal para usar aquí. Ya que estamos viendo los detalles de un solo puesto que sólo tenemos un artículo, pero en la página principal del blog nos envuelva cada mensaje en un artículo de etiqueta. El elemento de encabezado se utiliza para presentar el encabezado y los metadatos de la entrada en el blog. Le decimos al usuario cuando el mensaje fue escrito, quién lo escribió y la cantidad de comentarios que tiene. Tenga en cuenta que la fecha y hora está envuelto en una etiqueta. Esta etiqueta también es nuevo en HTML 5 y se utiliza para marcar un lugar específico en el tiempo. El contenido de los atributos de fecha y hora debe ser: 1) El año seguido de un guión gráfico (un signo menos para que no la tipografía nerds) 2) El mes, seguidos por un guión figura 3) de la fecha 4) A mayúscula para indicar que vamos a especificar la hora local 5) La hora local en el formato hh: mm: ss 6) La zona horaria con respecto a GMT. Estoy en Dinamarca, que es de 1 hora después de GMT, por lo que escribo 01. Si usted estuviera en Colorado que sería de 7 horas GMT, y podría escribir -07. Marcar los Comentarios Marcar los comentarios es bastante sencilla. No hay nuevas etiquetas o atributos que se utilizan. dijo:<section id="comments"> <header> <h3>Comments</h3> </header> <article> <header> <a href="#">George Washington</a> on <time datetime="2009-06-29T23:35:20+01:00">June 29th 2009 at 23:35</time> </header> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p> </article> <article> <header> <a href="#">Benjamin Franklin</a> on <time datetime="2009-06-29T23:40:09+01:00">June 29th 2009 at 23:40</time> </header> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p> </article> </section> Marcar el formulario para comentarios Varias mejoras en las formas se han introducido en HTML 5. Que ya no tienen que hacer validación en el cliente de los campos requeridos, correos electrónicos, etc El navegador se encarga de esto para usted. dijo:<form action="#" method="post"> <h3>Post a comment</h3> <p> <label for="name">Name</label> <input name="name" id="name" type="text" required /> </p> <p> <label for="email">E-mail</label> <input name="email" id="email" type="email" required /> </p> <p> <label for="website">Website</label> <input name="website" id="website" type="url" /> </p> <p> <label for="comment">Comment</label> <textarea name="comment" id="comment" required></textarea> </p> <p><input type="submit" value="Post comment" /></p> </form> Hay nuevos dos nuevos tipos de entradas, correo electrónico y URL. Correo electrónico especifica que el usuario debe introducir una dirección de correo electrónico y URL que el usuario debe introducir una dirección web válida. Si se escribe como un atributo necesario, el usuario no puede presentar un campo vacío. "Obligatorio" es un atributo booleano, nuevo HTML 5. Sólo significa que el atributo es que se declare sin valor. Marcar la barra lateral y pie de página El marcado de la barra lateral y pie de página es muy simple. Algunos tramos con algo de contenido dentro de la correspondiente retirada de tierras y las etiquetas de pie de página. Usted puede ver el formato final, sin estilo aquí. Ahora, por el estilo. 6. Estilo con CSS 3 CSS 3 se basa en los principios sobre los estilos, selectores y la cascada que tan bien conocemos de versiones anteriores de CSS. Se añade un montón de nuevas características, incluyendo los nuevos selectores, pseudo-clases y propiedades. El uso de estas nuevas características se convierte en mucho más fácil para configurar su diseño. Vamos a zambullirse Configuración básica Para empezar vamos a definir algunas normas básicas relativas a la tipografía, el color de fondo de la página, etc Usted reconoce todo esto de CSS 2.1 dijo:/* CSS Reset */ { margin: 0; padding: 0; } /* Dicen que el navegador muestre los elementos HTML5 como el bloqueo */ header, footer, aside, nav, article { display: block; } body { margin: 0 auto; width: 940px; font: 13px/22px Helvetica, Arial, sans-serif; background: #f0f0f0; } h2 { font-size: 28px; line-height: 44px; padding: 22px 0; } h3 { font-size: 18px; line-height: 22px; padding: 11px 0; } p { padding-bottom: 22px; } En primer lugar, restablecer el margen y el relleno estilos, con una simple regla. En un entorno de producción que usaría un Reset CSS más completa, como Eric Meyer (de CSS 2.1) pero para el alcance de este tutorial esto va a hacer. Le decimos que el navegador muestre todos los nuevos elementos de HTML 5 como bloque. Los navegadores están muy bien con los elementos que no reconocen (por eso de HTML 5 es algo compatible), pero no saben cómo esos elementos deben ser prestados de forma predeterminada. Tenemos que decir esto hasta que la norma se aplica en todos los ámbitos. También tenga en cuenta lo que he elegido el tamaño de las fuentes de píxeles en lugar de ems o%. Esto es para mantener el carácter progresivo de la tutoría. Cuando los navegadores más importantes un día son completamente terminada la aplicación de HTML 5 y CSS 3 que todos tendrán acceso a la página de zoom en lugar de cambiar el tamaño de texto que se acaba. Esto elimina la necesidad de definir un tamaño en unidades relativas, como el navegador de la escala de la página de todos modos. Vea lo que la página se parece con el estilo básico que se aplica. Ahora podemos pasar a un estilo que el resto de la página. No hay estilos adicionales son necesarios para la cabecera, así que vamos a ir directamente a la navegación. 7. El estilo de la navegación Es importante tener en cuenta que la anchura de la carrocería se ha definido como 940px y que se ha centrado. Nuestra barra de navegación de las necesidades para abarcar todo el ancho de la ventana, así que tendremos que aplicar algunos estilos adicionales: dijo:nav { position: absolute; left: 0; width: 100%; background: url("nav_background"; } Hemos puesto el NAV-elemento absolutamente, alinear a la izquierda de la ventana y hacer que abarcan todo el ancho. Vamos a centrar la lista anidada para que se muestre dentro de los límites de la disposición: dijo:nav ul { margin: 0 auto; width: 940px; list-style: none; } Ahora vamos a definir algunos estilos adicionales para hacer que los elementos de navegación vea más bonita y alinearlos a la red se basa en el diseño. También he incluido un estilo para resaltar la página que el usuario está activado, y algunos un estilo personalizado para la suscripción de enlace. dijo:nav ul li { float: left; } nav ul li a { display: block; margin-right: 20px; width: 140px; font-size: 14px; line-height: 44px; text-align: center; text-decoration: none; color: #777; } nav ul li a:hover { color: #fff; } nav ul li.selected a { color: #fff; } nav ul li.subscribe a { margin-left: 22px; padding-left: 33px; text-align: left; background: url("rss.png" left center no-repeat; } 8. El estilo de la Introducción El marcado de la introducción es bastante simple: una sección con un título y un párrafo de texto. Sin embargo, vamos a utilizar algunos de los nuevos trucos de CSS 3 para que se vea más atractivo. dijo:#intro { margin-top: 66px; padding: 44px; background: #467612 url("intro_background.png" repeat-x; background-size: 100%; border-radius: 22px; } Estamos utilizando dos nuevas propiedades. El primero es el fondo de tamaño, lo que le permite escalar la imagen de fondo. En nuestro caso, se escala al 100% en ambos ejes. Si la caja se expande a medida que agregamos más contenido a la misma, el fondo degradado a escala también. Esto es algo que no era posible en CSS 2.1 no sin marcado semántico y diversos asuntos navegador. La segunda novedad es la propiedad border-radius, que se aplica esquinas redondeadas para el elemento. El radio de nuestro esquinas redondeadas son 22px en cada esquina. Usted puede especificar valores diferentes para cada esquina o elegir para redondear las esquinas sólo individual. Desafortunadamente, ninguna de las propiedades se aplican plenamente en los principales navegadores. Sin embargo, podemos obtener algún tipo de apoyo mediante el uso de atributos específicos del proveedor. Antecedentes de tamaño con el apoyo de las nuevas versiones de Safari, Opera y Konqueror. Border-radius se apoya en las nuevas versiones de Safari y Firefox. dijo:#intro { ... /* Antecedentes de tamaño aún no implementadas */ -webkit-background-size: 100%; -o-background-size: 100%; -khtml-background-size: 100%; /* Border-radius pendientes de aplicación */ -moz-border-radius: 22px; -webkit-border-radius: 22px; } Ya que tenemos un background-color definido, no habrá mayores problemas en los navegadores que no soportan el fondo de tamaño, como por ejemplo Firefox. Ahora sólo tenemos que el estilo del título y el texto. dijo:#intro h2, #intro p¬†{ width: 336px; } #intro h2 { padding: 0 0 22px 0; font-weight: normal color: #fff; } #intro p { padding: 0; color: #d9f499; } La imagen de la flor se pueden añadir fácilmente dando # intro una imagen de fondo en segundo lugar, algo que soporta CSS 3. dijo:#intro { ... background: #467612 url("intro_background.png" top left (287px 100%) repeat-x, url("intro_flower.png" top rightright (653px 100%) no-repeat; ... } Damos las dos imágenes de fondo dimensiones explícitas para asegurar que no se superpongan, y listo. Tenga en cuenta la notación abreviada de fondo de tamaño. Desafortunadamente, no hay ningún navegador fiable apoya esta, sin embargo, por lo que tendremos que hacerlo de la manera tradicional: mediante la inclusión de una imagen en línea y la posición que el uso de CSS. Vea el ejemplo final para ver cómo se ha hecho. 9. El estilo del área de contenido y Sidebar El área de contenido y la barra lateral van a estar alineados uno junto al otro. Tradicionalmente, podría hacer esto mediante el uso de flotadores, pero en CSS 3 que vamos a utilizar las tablas! "¿Qué? Tablas? ", Puede preguntar y mirada confusa. Es probable que aprendí hace años que el uso de tablas para maquetar web es una gran no-no, y lo sigue siendo. Usted nunca debe utilizar la tabla de elementos para marcar un diseño. Sin embargo, en CSS 3, podemos hacer que los elementos se comportan como las tablas sin que nunca muestran en el margen de beneficio! Para empezar, vamos a necesitar algunos divs a agrupar las secciones de una manera poco más lógico. dijo:<div id="content"> <div id="mainContent"> <section> <!-- Blog post --> </section> <section id="comments"> <!-- Comments --> </section> <form> <!-- Comment form --> </form> </div> <aside> <!-- Sidebar --> </aside> </div> Todo lo que sigue teniendo sentido semántico, pero ahora podemos estilo de ella. Queremos que el div # contenido a comportarse como una mesa, el n º mainContent y aparte que en la tabla de las células. Con CSS 3, esto es muy fácil: dijo:#content { display: table; } #mainContent { display: table-cell; width: 620px; padding-right: 22px; } aside { display: table-cell; width: 300px; } Eso es todo! No más flotante, falso imágenes columna de fondo, compensación o colapso de los márgenes. Hemos hecho los elementos se comportan como una mesa, y esto hace que sea mucho más fácil para nosotros hacer el diseño. 10. El estilo de la publicación en tu blog El estilo de la cabecera del mensaje es más bien trivial, así que voy a pasar a la parte divertida: el diseño de varias columnas. varias columnas Varias columnas de texto antes era imposible sin manualmente la división del texto, pero con CSS 3 es un juego de niños, aunque hay que añadir un div en todo el varios párrafos para que esto funcione con los navegadores actuales. dijo:<div> <p>Lorem ipsum dolor sit amet...</p> <p>Pellentesque ut sapien arcu...</p> <p>Vivamus vitae nulla dolor...</p> ... </div> ahora podemos añadir dos propiedades simples y lo llaman un día. dijo:.blogPost div { column-count: 2; column-gap: 22px; } Queremos dos columnas y un espacio de 22px entre las columnas. El div adicional es necesario porque actualmente no hay manera de hacer compatible un lapso elemento más de una columna. En el futuro, sin embargo, usted será capaz de especificar la propiedad de la columna-span, y podemos escribir simplemente: dijo:.blogPost { column-count: 2; column-gap: 22px; } .blogPost header { column-span: all; } Por supuesto, las propiedades del número de columnas y columnas vacío-sólo son compatibles con algunos navegadores, Safari y Firefox. Tenemos que usar el proveedor de las propiedades específicas, por ahora. dijo:.blogPost div { /* Columna de conteo aún no implementadas */ -moz-column-count: 2; -webkit-column-count: 2; /* Column-gap aún no implementadas */ -moz-column-gap: 22px; -webkit-column-gap: 22px; } Box shadow Si te fijas bien en la imagen de la entrada en el blog verás una gota de sombra. Somos capaces de generar este uso de CSS 3 y la propiedad box-shadow. dijo:.blogPost img { margin: 22px 0; box-shadow: 3px 3px 7px #777; } El primer "3px" indica al navegador que queremos dejar a la sombra en sentido horizontal. El segundo "3px" le dice a donde queremos dejar la sombra vertical. El último "7px" es la forma borrosa la frontera debe ser. Si se establece en 0, será completamente sólido. Por último se define el color base de la sombra. Este color es, por supuesto, se desvaneció, en función de lo mucho que desenfoque la sombra. Probablemente no es ninguna sorpresa que esta propiedad no está implementada en todos los navegadores todavía. De hecho, sólo funciona en Safari, y usted tiene que utilizar la propiedad específica del proveedor. dijo:.blogPost img { margin: 22px 0; -webkit-box-shadow: 3px 3px 7px #777; } 11. Zebra-striping los Comentarios Zebra-striping, o resaltar todos los elementos segundo de una serie, siempre ha implicado la selección de todos los elementos a través de JavaScript, a continuación, recorrer a través de ellos y destacando todos los elementos extraños. CSS 3 introduce la pseudo-clase "nth-child", lo que lo hace ridículamente simple de hacer esto sin javascript. Vamos a utilizar para la cebra de banda de los comentarios. dijo:section#comments article:nth-child(2n+1) { padding: 21px; background: #E3E3E3; border: 1px solid #d7d7d7; /* Border-radius aún no implementadas */ -moz-border-radius: 11px; -webkit-border-radius: 11px; } El extraño valor "2n +1" es en realidad bastante simple si usted entiende lo que significa: 2n selecciona todos los elementos segundo. Si usted escribió 3n que se seleccione todos los elementos en tercer lugar, 4n cada cuarto punto, y así sucesivamente. El 1 indica al navegador que comienzan en el elemento 1. Si está familiarizado con la programación que usted probablemente sabe que todos los arreglos comienzan en 0, y esto también es cierto aquí. Esto significa que un elemento es en realidad el segundo elemento de la serie dijo:section#comments article:nth-child(odd) { ... } Dado que la norma incluye a los dos más utilizados los valores como forma abreviada, pares e impares. El resto del diseño comentario debe ser fácil de entender con sus nuevos conocimientos. El estilo del formulario de comentarios, Pie de página y la barra lateral Un par de CSS 3 técnicas se vuelven a utilizar en el diseño del formulario de comentarios, pie de página y la barra lateral. En el formulario de comentarios y el pie de página que he usado el mismo tipo de técnica de la tabla de diseño utilizadas en el diseño principal. En la barra lateral border-radius se utiliza para añadir esquinas redondeadas a las diferentes secciones. 12. El diseño final Ver el diseño final con todo el estilo aplicado. compatibilidad La página se representa correctamente en Safari 4 y los navegadores más recientes basados ??en WebKit, como es el motor de renderizado único que admite todas las técnicas de CSS 3 que hemos utilizado. Firefox 3 tiene algunos problemas de aplicación de las esquinas redondeadas a nuestra imagen de la flor y no es compatible con el fondo de tamaño, pero aparte de eso el diseño de las obras. He decidido hacer caso omiso de Internet Explorer, ya que requiere un poco de hacking para obtener HTML 5 para trabajar. También puede definir las reglas un poco más y conseguir que todo funcione en todos los navegadores importantes, pero todo esto está fuera del alcance de este tutorial. conclusión Cuando HTML 5 y CSS 3 es un día implementado en todos los navegadores que será mucho más fácil para crear sitios web. Finalmente será capaz de dejar de usar flotadores para el diseño (que nunca fueron destinados a ser utilizados para), y vamos a pasar mucho menos tiempo escribir Javascript para escalar nuestras imágenes de fondo o de cebra de banda nuestras mesas. Espero que podamos utilizar todo este tiempo extra para estudiar algunas áreas descuidado durante mucho tiempo de diseño de páginas web, como la optimización de front-end y arquitectura de la información adecuada.