Elementos y atributos nuevos para formularios con HTML 5
En HTML 5 se han añadido nuevos elementos para emplear en los formularios. Éstos presentan nuevas funcionalidades, A continuación, se muestra un listado con los distintos types que se pueden usar en formularios con HTML 5:
text – Para introducir texto, simplemente.
search – Específico para input en un buscador.
url – Específico para direcciones de página web. Requiere http:// o http: simplemente.
tel – Se supone que para números de teléfono aunque no he conseguido que haga nada.
email – El nombre lo dice.
password – Escribe el contenido en asteriscos.
date – Para introducir un fecha (mes, día y año).
time – Para introducir una hora en formato 24 horas (horas, minutos y segundos).
datetime – Para introducir fecha y hora.
datetime-local – Igual que el anterior pero sin posibilidad de indicar zona horaria, ya que se entiende que es la local.
month – Para indicar el mes de un año.
week – Para indicar una semana de un año.
number – Específico para numeros.
range – Sale una barra para elegir un número entre un rango, el número hay que indicarlo entre un min=»10″ y un max=»12″ (los números son de ejemplo.)
checkbox – Para seleccionar y deseleccionar.
radio button – Para seleccionar, uno obligatorio.
color – Para seleccionar colores.
Nuevos atributos de HTML 5:
– Los elementos de fecha y hora permiten atributos max y min. Para indicar fecha/hora máxima y mínima.
– Required que nos permite indicarle al formulario que ese campo es obligatorio.
– Placeholder permite introducir un texto de ejemplo en el cuadro de texto. De esta forma se da a entender como tiene que ser el formato de lo que se introduce.
– List nos permite asociar una lista a un cuadro de texto. El valor de este atributo list, debe coincidir con el identificador de una lista definida con una etiqueta datalist (esta etiqueta también es nueva en HTML 5. El resultado es un efecto muy parecido a un select pero con las ventajas de un text.
– Autofocus hace que un determinado elemento tome el foco.
Cómo se ve, se pueden validar formularios sin ningún esfuerzo y sin necesidad de javascript. Ya que se encarga de realizar la validación el propio formulario. Incluso se pueden añadir funcionalidades con css en función de si se ha rellenado correctamente o no. Tal que así:
Este codigo modifica los colores de todos los input, que se encuentran dentro de un form cuyo id es «idForm», cuando son válidos o inválidos.
Tabla periódica con los elementos de HTML 5
Han creado un nuevo recurso para HTML 5 llamado Periodic Table of the Elements, muestra una tabla interactiva con los 104 elementos que figuran en el borrador de HTML5 además de 2 elementos (track y device) propuestos para formar parte y que han sido marcados con un asterisco mientras se decide su aceptación.
Cuando seleccionamos cada uno de los elementos de la tabla aparece una breve descripción en inglés además de uno o más enlaces hasta la página del World Wide Web Consortium (W3C) y otros portales sobre desarrollo web como w3schools o HTML5 Doctor.
Utilizar tags de HTML 5 en navegadores que no los soportan.
Para que funcionen las tags de html 5 en navegadores que no lo soportan (p.e. internet explorer 8 y anteriores). Basta con añadir el siguiente fragmento de javascript:
< script type="text/javascript"> document.createElement("nav"); document.createElement("header"); document.createElement("footer"); document.createElement("section"); document.createElement("article"); document.createElement("aside"); document.createElement("hgroup"); < /script>
Además, se debe añadir la siguiente regla en la hoja de estilos.
nav, header, footer, section, article, aside, hgroup{ display: block; }
Manejador de eventos con DOM (addEventListener y removeEventListener)
El método addEventListener nos permite incluir un manejador de evento. La sintaxis de addEventListener es la siguiente:
elemento_que_se_escucha.addEventListener('evento', función_a_lanzar, booleano);
elemento_que_se_escucha – es cualquier elemento presente en un documento al que se quiere asociar el evento.
evento – es el suceso ocurrido sobre el elemento (click, load,…).
función_a_lanzar – es cualquier función definida que queramos que se ejecute cuando ocurra el evento.
booleano – es un valor que define el orden del flujo de eventos. (*NOTA 1)
Si se quiere escuchar un evento sólo una vez y luego elimnaro se debe utilizar el método removeEventListener:
elemento_que_se_escuchaba.removeEventListener('evento', función_a_anular, booleano);
NOTA 1: Explicación del parámetro booleano del método addEventListener con un ejemplo.
Supongamos que tenemos esto:
< body >< /body >
Cuando hacemos clic en el botón no sólo lo estamos haciendo sobre él, sino sobre los elementos que lo contienen en el árbol del DOM, es decir, hemos hecho clic además sobre el elemento body y sobre el elemento div1. Sí sólo hay una función asignada a una escucha para el botón no hay mayor problema, pero si además hay una para el body y otra para el div, ¿cuál es el orden en que se deben lanzar las tres funciones?
Para contestar a esa pregunta existe un modelo de comportamiento, el flujo de eventos (inglés). Según éste, cuando se hace clic sobre un elemento, el evento se propaga en dos fases, una que es la captura —el evento comienza en el nivel superior del documento y recorre los elementos de padres a hijos— y la otra la burbuja —el orden inverso, ascendiendo de hijos a padres—. En un diagrama sería algo así:
Así, el orden por defecto de lanzamiento de las supuestas funciones sería body-div-button.
Una vez visto esto, podemos comprender el tercer parámetro de addEventListener, que lo que hace es permitirnos escoger el orden de propagación:
true: El flujo de eventos es como el representado, y la fase de captura ocurre al lanzarse el evento. El orden de propagación para el ejemplo sería, por tanto, el indicado, body-div-button
false: Permite saltar la fase de captura, y la propagación seguiría sólo la burbuja. Así, el orden sería button-div-body.
NOTA 2: En internet explorer no funciona en las versiones anteriores a la 7 (incluida).
Fuente
Resumen DOM (Document Object Model)
Un documento HTML presenta una estructura de árbol constituido por nodos. Estos nodos pueden pertenecer a uno de los siguientes tipos:
Elemento – Estos nodos representan los elementos del documento (br, input, select, p,…).
Atributo – Los nodos atributos representan las propiedades de los elementos.
Texto – Fragmento de texto del documento HTML.
Para obtener los elementos se pueden usar los siguientes métodos: getElementById, getElementsByTagName y getElementsByClassName. (El primero devuelve el elemento que tiene el id solicitado mientras que los dos últimos devuelven un array de elementos seleccionándolos por el tipo de tag html y de class respectivamente)
Y para trabajar con sus atributos: getAttribute y setAttribute
Por otro lado, se pueden utilizar los siguientes métodos para recorrer esa estructura de árbol:
parentNode – Obtiene el nodo padre del nodo actual.
childNodes – Obtiene los nodos hijos del nodo actual (devuelve un array). Entre sus nodos hijos tiene en cuenta los nodos de texto.
firstChild – Obtiene el primer hijo del nodo actual.
lastChild – Obtiene el último hijo del nodo actual.
previousSibling – Obtiene el hijo del nodo padre anterior al nodo actual.
nextSibling – Obtiene el hijo del nodo padre siguiente al nodo actual.
También se pueden utilizar las siguientes propiedades:
nodeName – El nombre del nodo, que se define dependiendo del tipo de nodo. (Se corresponde con la etiqueta HTML en el caso de un nodo elemento o #text si se trata de un nodo texto).
nodeValue – El valor del nodo, que se define dependiendo del tipo de nodo.
nodeType – Un número que representa el tipo de nodo del que se trata. Un número del 1 al 12 (1 para nodos elemento, 2 para nodos atributos, 3 para nodos texto).
Métodos para crear, eliminar y reemplazar nodos:
createElement – Con éste método del objeto document crearíamos un nuevo elemento con un tag determinado (Pertenece a Document) (var elemento = document.createElement(tag))
createTextNode – Crea un nodo texto. (Pertenece a Document)
cloneNode – Crea un nodo idéntico a otro existente. (var clonedNode = nodo_padre.clone(nodo_hijo))
appendChild – Añade un nodo como hijo de otro. Sirve para incorporar el nuevo nodo al árbol del documento. (nodo_padre.appendChild(nodo_hijo))
insertBefore – Inserta un nodo antes de otro en el árbol del documento. (nodo_padre.insertBefore(nuevo_nodo, viejo_nodo))
removeChild – Elimina un nodo hijo. (nodo_padre.removeChild(nodo_hijo))
replaceChild – Reemplaza un nodo hijo. (nodo_padre.replaceChild(nodo_hijo))
NOTA: Por último, tenemos el método innerHTML que se puede utilizar como alternativa a DOM. Esta función es, sin duda, la más utilizada para actualizar código html de nuestra página. Pero esta función no nos servirá para agregar nuevo código html sin eliminar el anterior. Es decir, si tenemos contenido dentro de un div y aplicamos innerHTML a este div, el contenido previo será eliminado y reemplazado por el nuevo.
Propiedades nth-child y first-child de jquery.
JQuery tiene varias propiedades que se pueden utilizar para acceder a nodos concretos que están dentro de un nodo padre. Entre estas propiedades voy a comentar el funcionamiento de: first-child y nth-child
Para ello voy a utilizar un ejemplo. Supongamos que tenemos un Select cuyo id es «selectPrueba».
first-child – Se puede utilizar para seleccionar el primer elemento.
p.e. esto seleccionaria en el combo el primer elemento.
$('select#selectPrueba option:first-child').attr("selected", "selected");
nth-child – Permite seleccionar un elemento concreto.
p.e. esto seleccionaria en el combo el elemento 4.
$('select#selectPrueba option:nth-child(4)').attr('selected', 'selected');
Más información con ejemplos: first-child y nth-child.
Lorem ipsum
Lorem ipsum es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías o de borradores de diseño para probar el diseño visual antes de insertar el texto final.
Se emplea como texto de prueba y relleno desde el año 1500, cuando debió ser empleado por un impresor desconocido. Su uso en algunos editores de texto muy conocidos en la actualidad ha dado al texto lorem ipsum nueva popularidad.
El texto en sí no tiene sentido, aunque no es completamente aleatorio, sino que deriva de un texto de Ciceron en lengua latina, a cuyas palabras se les han eliminado sílabas o letras. El significado del texto no tiene importancia, ya que sólo es una demostración o prueba, sino que es el aspecto tipográfico y de la maquetación lo que importa.
«Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.
Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei.
Blandit incorrupte quaerendum in quo, nibh impedit id vis, vel no nullam semper audiam. Ei populo graeci consulatu mei, has ea stet modus phaedrum. Inani oblique ne has, duo et veritus detraxit. Tota ludus oratio ea mel, offendit persequeris ei vim. Eos dicat oratio partem ut, id cum ignota senserit intellegat. Sit inani ubique graecis ad, quando graecis liberavisse et cum, dicit option eruditi at duo. Homero salutatus suscipiantur eum id, tamquam voluptaria expetendis ad sed, nobis feugiat similique usu ex.
Eum hinc argumentum te, no sit percipit adversarium, ne qui feugiat persecuti. Odio omnes scripserit ad est, ut vidit lorem maiestatis his, putent mandamus gloriatur ne pro. Oratio iriure rationibus ne his, ad est corrumpit splendide. Ad duo appareat moderatius, ei falli tollit denique eos. Dicant evertitur mei in, ne his deserunt perpetua sententiae, ea sea omnes similique vituperatoribus. Ex mel errem intellegebat comprehensam, vel ad tantas antiopam delicatissimi, tota ferri affert eu nec. Legere expetenda pertinacia ne pro, et pro impetus persius assueverit.
Ea mei nullam facete, omnis oratio offendit ius cu. Doming takimata repudiandae usu an, mei dicant takimata id, pri eleifend inimicus euripidis at. His vero singulis ea, quem euripidis abhorreant mei ut, et populo iriure vix. Usu ludus affert voluptaria ei, vix ea error definitiones, movet fastidii signiferumque in qui.
Vis prodesset adolescens adipiscing te, usu mazim perfecto recteque at, assum putant erroribus mea in. Vel facete imperdiet id, cum an libris luptatum perfecto, vel fabellas inciderint ut. Veri facete debitis ea vis, ut eos oratio erroribus. Sint facete perfecto no vel, vim id omnium insolens. Vel dolores perfecto pertinacia ut, te mel meis ullum dicam, eos assum facilis corpora in.
Mea te unum viderer dolores, nostrum detracto nec in, vis no partem definiebas constituam. Dicant utinam philosophia has cu, hendrerit prodesset at nam, eos an bonorum dissentiet. Has ad placerat intellegam consectetuer, no adipisci mandamus senserit pro, torquatos similique percipitur est ex. Pro ex putant deleniti repudiare, vel an aperiam sensibus suavitate. Ad vel epicurei convenire, ea soluta aliquid deserunt ius, pri in errem putant feugiat.
Sed iusto nihil populo an, ex pro novum homero cotidieque. Te utamur civibus eleifend qui, nam ei brute doming concludaturque, modo aliquam facilisi nec no. Vidisse maiestatis constituam eu his, esse pertinacia intellegam ius cu. Eos ei odio veniam, eu sumo altera adipisci eam, mea audiam prodesset persequeris ea. Ad vitae dictas vituperata sed, eum posse labore postulant id. Te eligendi principes dignissim sit, te vel dicant officiis repudiandae.
Id vel sensibus honestatis omittantur, vel cu nobis commune patrioque. In accusata definiebas qui, id tale malorum dolorem sed, solum clita phaedrum ne his. Eos mutat ullum forensibus ex, wisi perfecto urbanitas cu eam, no vis dicunt impetus. Assum novum in pri, vix an suavitate moderatius, id has reformidans referrentur. Elit inciderint omittantur duo ut, dicit democritum signiferumque eu est, ad suscipit delectus mandamus duo. An harum equidem maiestatis nec.
At has veri feugait placerat, in semper offendit praesent his. Omnium impetus facilis sed at, ex viris tincidunt ius. Unum eirmod dignissim id quo. Sit te atomorum quaerendum neglegentur, his primis tamquam et. Eu quo quot veri alienum, ea eos nullam luptatum accusamus. Ea mel causae phaedrum reprimique, at vidisse dolores ocurreret nam.»
Herramientas SEO para google muy útiles
Las herramientas seo nos ayudan a medir, comparar y analizar ciertos datos que en ocasiones son difíciles de conseguir.
En esta página puedes encontrar herramientas para:
– Cómo ve google nuestra web.
– Densidad de palabras clave.
– Calcular pagerank.
– Optimizar css.
Tabla de ASCII estándar, nombres de entidades HTML
(espacio en blanco)
Tabla de ASCII estándar, nombres de entidades HTML, ISO 10646, ISO 8879, ISO 8859-1 alfabeto romano numero 1 Soporte para browsers: todos los browsers |
||||||||||||||||||||||||
|
||||||||||||||||||||||||
|
||||||||||||||||||||||||
|
||||||||||||||||||||||||
|
||||||||||||||||||||||||
|
||||||||||||||||||||||||
|
||||||||||||||||||||||||
|
||||||||||||||||||||||||
|
||||||||||||||||||||||||
|
||||||||||||||||||||||||
|
||||||||||||||||||||||||
|
||||||||||||||||||||||||
|
HTML 4.01, ISO 10646, ISO 8879, alfabeto romano extendido A y B, Soporte para browsers: Internet Explorer > 4, Netscape > 4 |
||||||||||||||||||||||||
|
||||||||||||||||||||||||
|
Codificación de colores
Este es el listado de colores que recomienda usar la W3C y que, por lo tanto, funcionan (o deberían funcionar) en todos los navegadores.
En la tabla se puede ver tanto su valor hexadecimal como el nombre que tienen asignado.
Nombre del color | Código RGB | Nombre del color | Código RGB | |
---|---|---|---|---|
Aliceblue | #F0F8FF | Antiquewhite | #FAEBD7 | |
Aqua | #00FFFF | Aquamarine | #7FFFD4 | |
Azure | #00FFFF | Beige | #F5F5DC | |
Bisque | #FFE4C4 | Black | #000000 | |
Blanchedalmond | #FFEBCD | Blue | #0000FF | |
Blueviolet | #8A2BE2 | Brown | #A52A2A | |
Burlywood | #DEB887 | Cadetblue | #5F9EA0 | |
Chartreuse | #7FFF00 | Chocolate | #D2691E | |
Coral | #FF7F50 | Cornflowerblue | #6495ED | |
Cornsilk | #FFF8DC | Crimson | #DC143C | |
Cyan | #00FFFF | Darkblue | #00008B | |
Darkcyan | #008B8B | Darkgoldenrod | #B8860B | |
Darkgray | #A9A9A9 | Darkgreen | #006400 | |
Darkkhaki | #BDB76B | Darkmagenta | #8B008B | |
Darkolivegreen | #556B2F | Darkorange | #FF8C00 | |
Darkorchid | #9932CC | Darkred | #8B0000 | |
Darksalmon | #E9967A | Darkseagreen | #8FBC8F | |
Darkslateblue | #483D8B | Darkslategray | #2F4F4F | |
Darkturquoise | #00CED1 | Darkviolet | #9400D3 | |
Deeppink | #FF1493 | Deepskyblue | #00BFFF | |
Dimgray | #696969 | Dodgerblue | #1E90FF | |
Firebrick | #B22222 | floralwhite | #FFFAF0 | |
forestgreen | #228B22 | fuchsia | #FF00FF | |
gainsboro | #DCDCDC | ghostwhite | #F8F8FF | |
gold | #FFD700 | goldenrod | #DAA520 | |
gray | #808080 | green | #008000 | |
greenyellow | #ADFF2F | honeydew | #F0FFF0 | |
hotpink | #FF69B4 | indianred | #CD5C5C | |
indigo | #4B0082 | ivory | #FFFFF0 | |
khaki | #F0E68C | lavender | #E6E6FA | |
lavenderblush | #FFF0F5 | lawngreen | #7CCMC00 | |
lemonchiffon | #FFFACD | lightblue | #ADD8E6 | |
lightcoral | #F08080 | lightcyan | #E0FFFF | |
lightgoldenrodyellow | #FAFAD2 | lightgreen | #90EE90 | |
lightgrey | #D3D3D3 | lightpink | #FFB6C1 | |
lightsalmon | #FFA07A | lightseagreen | #20B2AA | |
lightskyblue | #87CEFA | lightslategray | #778899 | |
lightsteelblue | #B0C4DE | lightyellow | #FFFFE0 | |
lime | #00FF00 | limegreen | #32CD32 | |
linen | #FAF0E6 | magenta | #FF00FF | |
maroon | #800000 | mediumaquamarine | #66CDAA | |
mediumblue | #0000CD | mediumorchid | #BA55D3 | |
mediumpurple | #9370DB | mediumseagreen | #3CB371 | |
mediumslateblue | #7B68EE | mediumspringgreen | #00FA9A | |
mediumturquoise | #48D1CC | mediumvioletred | #C71585 | |
midnightblue | #191970 | mintcream | #F5FFFA | |
mistyrose | #FFE4E1 | moccasin | #FFE4B5 | |
navajowhite | #FFDEAD | navy | #000080 | |
oldlace | #FDF5E6 | olive | #808000 | |
olivedrab | #6B8E23 | orange | #FFA500 | |
orangered | #FF4500 | orchid | #DA70D6 | |
palegoldenrod | #EEE8AA | palegreen | #98FB98 | |
paleturquoise | #AFEEEE | palevioletred | #DB7093 | |
papayawhip | #FFEFD5 | peachpuff | #FFDAB9 | |
peru | #CD853F | pink | #FFC0CB | |
plum | #DDA0DD | powderblue | #B0E0E6 | |
purple | #800080 | red | #FF0000 | |
rosybrown | #BC8F8F | royalblue | #4169E1 | |
saddlebrown | #8B4513 | salmon | #FA8072 | |
sandybrown | #F4A460 | seagreen | #2E8B57 | |
seashell | #FFF5EE | sienna | #A0522D | |
silver | #C0C0C0 | skyblue | #87CEEB | |
slateblue | #6A5ACD | slategray | #708090 | |
snow | #FFFAFA | springgreen | #00FF7F | |
steelblue | #4682B4 | tan | #D2B48C | |
teal | #008080 | thistle | #D8BFD8 | |
tomato | #FF6347 | turquoise | #40E0D0 | |
violet | #EE82EE | wheat | #F5DEB3 | |
white | #FFFFFF | whitesmoke | #F5F5F5 | |
yellow | #FFFF00 | yellowgreen | #9ACD32 |
Categorias
- adobe (2)
- agile (1)
- Alfresco (1)
- Android (26)
- Angular (6)
- angularjs (10)
- apache (1)
- axis (2)
- Bases de datos (14)
- Bootstrap (1)
- C# (3)
- Cámara (1)
- chrome (3)
- Codeigniter (2)
- Control de Versiones (2)
- CSS (25)
- CVS (1)
- Django (9)
- Django Rest Framework (1)
- DNS (1)
- Docker (3)
- dominio (1)
- eclipse (5)
- Entity Framework (2)
- ETL (1)
- Firefox (6)
- flash (1)
- freecad (1)
- Git (12)
- GitHub (4)
- gpg (2)
- Groovy (1)
- Handlebars (1)
- hibernate (4)
- hosting (1)
- HTML (50)
- HTML 5 (26)
- Impresión 3D (9)
- Inkscape (1)
- IOS (2)
- ireports (3)
- Java (44)
- Javascript (55)
- JBoss (5)
- JPA (2)
- JQuery (20)
- Json (7)
- JSP (6)
- Keycloak (1)
- Lamp (1)
- LDAP (2)
- lean (1)
- linkedin (1)
- LINQ (1)
- linux (13)
- Livecycle (1)
- log (1)
- microcontroladores (1)
- MongoDB (4)
- MySQL (8)
- Node.js (5)
- OC4J (1)
- Openshift (2)
- Oracle (6)
- Patrones de Diseño (1)
- Photoshop (2)
- php (20)
- PostgreSQL (1)
- python (19)
- rabbitmq (1)
- Raspberry PI (13)
- Raspherry PI (5)
- React (6)
- seguridad (3)
- Selenium (3)
- Sencha Touch (1)
- Sin categoría (29)
- Spring (17)
- spring-boot (3)
- SQL (7)
- SQLServer (1)
- SSO (1)
- struts (2)
- SVN (1)
- Talend (1)
- Tomcat (6)
- unity (3)
- Visual Studio Code (2)
- vmware (5)
- Web Services (11)
- windows (18)
- wordpress (10)
- Xiaomi (1)
- xml (2)
Trabajos Realizados
- App Android – Autoka Fr
- App Android – Cartelera Cántabra
- App Android – Gramática y Vocabulario Ingles
- App Android – Hoja de Gastos
- App Android – Hotel Torre Cristina
- App Android – OcioEnjoy
- App Android – Visor CardBoard
- App Firefox – Managapp
- DiamanteBomba – DisasterCode
- Generador de Partes de Trabajo
- GitHub – Android Web Generator
- GitHub – Dynamic Angular Gallery
- GitHub – Dynamic React Gallery
- GitHub – Sotilizator
- GitHub – SpringAngularJS
- GitHub – Swiper Dynamic Angular Gallery
- HazParejas – DisasterCode
- RompeCabezas – DisasterCode
- Unity Game – English Couple
- Unity Game – Kill Wasp
- WordPress – El Buen Apicultor
- WordPress – El Cajón de los Retales
- WordPress – El Vestidito Azul
- WordPress – Feuchas
- WordPress – Fragua de Navajas Ponce
- WordPress – Humor a las Tres
- WordPress – Photo Places