Cómo poner superíndice al cuadrado ² y al cubo ³ en un editor de texto

Poner superíndices en un editor de texto es muy sencillo. Lo más normal en temática relacionada con la ingeniería y arquitectura es poner superíndices al cuadrado y al cubo, tenemos que hacer lo siguiente:

  • Superíndice al cuadrado, por ejemplo metros cuadrados (m²): Alt + 2 + 5 + 3
  • Superíndice al cubo, por ejemplo metros cúbicos (m³): Alt + 2 + 5 + 2

Cómo poner llamada o chat a un usuario o varios usuarios de Skype con HTML

Si queremos poner un enlace en una web para que puedan llamar o chatear a un usuario de Skype o varios usuarios es muy sencillo. Se utiliza skype: nombreskype y opciones adicionales, siendo nombreskype el skype id.

Tenemos las siguientes opciones:

  1. Si queremos que se pueda llamar a un usuario de skype pondremos lo siguiente:
  2. <a href="skype:nombreskype?call">Llamar a la cuenta de nombreskype</a>
  3. Chatear con el usuario de skype
  4. <a href="skype:nombreskype?chat">Chatear con la cuenta de nombreskype</a>
  5. Enviar un mensaje de voz al usuario de skype
  6. <a href="skype:nombreskype?voicemail">Enviar un mensaje de voz a la cuenta de nombreskype</a>
  7. Hacer una llamada a varios usuarios de skype a la vez
  8. <a href="skype:nombreskype;nombreskype2?call">Llamar a la cuenta de nombreskype y nombreskype2</a>
  9. Chatear con varios usuarios de skype a la vez
  10. <a href="skype:nombreskype;nombreskype2?call">Chatear con la cuenta de nombreskype y nombreskype2</a>

Cómo ocultar la ventana emergente InfoWindow que nos muestra al insertar un mapa de Google Maps

Cuando insertamos un mapa de Google Maps en nuestra web nos presenta una incómoda ventana InfoWindow (de información del sitio que mostramos) que puede que no queramos que aparezca, ya que afea el mapa.

Para eliminarla tenemos que seguir los siguientes pasos:

1) Elegimos el Google Maps el sitio que queremos que aparezca, imaginemos que es el Museo del Prado. Ponemos en el buscador de Google Maps «Museo del Prado» sin comillas y pinchamos en el primer resultado

Museo del Prado
Museo del Prado en Google Maps

2) Pulsamos en insertar mapa

Pinchar en enlazar Google Maps
Pinchar en enlazar Google Maps

3) Si no queremos personalizar el mapa, copiamos el código que viene debajo de «Pegar HTML para insertar en sitio web»

Código para insertar mapa de Google Maps
Código para insertar mapa de Google Maps

4) Vemos que nos sale una ventana emergente de información, que no queremos mostrar

Mapa de Google Maps con ventana emergente
Mapa de Google Maps con ventana emergente

5) Para eliminarla vamos a ver el código que hemos insertado: <iframe width=»425″ height=»350″ frameborder=»0″ scrolling=»no» marginheight=»0″ marginwidth=»0″ src=»https://maps.google.es/maps?f=q&amp;source=s_q&amp;hl=es&amp;geocode=&amp;q=museo+del+prado&amp;aq=&amp;sll=40.392385,-3.691964&amp;sspn=0.008776,0.021136&amp;gl=ES&amp;ie=UTF8&amp;hq=museo+del+prado&amp;ll=40.413752,-3.692242&amp;spn=0.016991,0.032015&amp;t=m&amp;output=embed»></iframe><br /><small><a href=»https://maps.google.es/maps?f=q&amp;source=embed&amp;hl=es&amp;geocode=&amp;q=museo+del+prado&amp;aq=&amp;sll=40.392385,-3.691964&amp;sspn=0.008776,0.021136&amp;gl=ES&amp;ie=UTF8&amp;hq=museo+del+prado&amp;ll=40.413752,-3.692242&amp;spn=0.016991,0.032015&amp;t=m» style=»color:#0000FF;text-align:left»>Ver mapa más grande</a></small>

6) Tenemos que añadir al final de src=»… lo siguiente: &amp;iwloc=near de forma que quedaría así: <iframe width=»425″ height=»350″ frameborder=»0″ scrolling=»no» marginheight=»0″ marginwidth=»0″ src=»https://maps.google.es/maps?f=q&amp;source=s_q&amp;hl=es&amp;geocode=&amp;q=museo+del+prado&amp;aq=&amp;sll=40.392385,-3.691964&amp;sspn=0.008776,0.021136&amp;gl=ES&amp;ie=UTF8&amp;hq=museo+del+prado&amp;ll=40.413752,-3.692242&amp;spn=0.016991,0.032015&amp;t=m&amp;output=embed&amp;iwloc=near«></iframe><br /><small><a href=»https://maps.google.es/maps?f=q&amp;source=embed&amp;hl=es&amp;geocode=&amp;q=museo+del+prado&amp;aq=&amp;sll=40.392385,-3.691964&amp;sspn=0.008776,0.021136&amp;gl=ES&amp;ie=UTF8&amp;hq=museo+del+prado&amp;ll=40.413752,-3.692242&amp;spn=0.016991,0.032015&amp;t=m» style=»color:#0000FF;text-align:left»>Ver mapa más grande</a></small>

6) Ahora vemos que el mapa de Google Maps no muestra la ventana emergente

Mapa de Google Maps sin ventana emergente
Mapa de Google Maps sin ventana emergente

Etiqueta hgroup de HTML5 eliminada

Etiqueta hgroup eliminada de HTML5
Etiqueta hgroup eliminada de HTML5

La etiqueta hgroup, que fue una de las novedades en HTML5, ha sido eliminada.

Esta etiqueta se usaba para agrupar los títulos y subtítulos, pudiendo contener solamente elementos h1–h6.

A principios de marzo, Steve Faulkner (coeditor de HTML5) pidió que la etiqueta hgroup fuese revisada sugiriendo eliminarla. W3C estudió este caso cuyo resultado final fue tomar la decisión de eliminar la etiqueta hgroup de HTML5.

 

Nuevas etiquetas en HTML5

HTML5 tiene nuevas etiquetas frente a HTML. Lo que antes nos llevaba a crear div definidos con diferentes clases para decir cual es el div del encabezado, el del menú de navegación, el div del contenido principal, el div de la barra o barras laterales y cual es el div del pie de la página web ahora está estandarizado con HTML5.

¿Que ventajas tienen estas nuevas etiquetas?
La principal es que revisando cualquier documento en HTML5 sabemos donde está cada sección, no tenemos que ir averiguando cada div con su clase a donde pertenece. Y también construir un documento en HTML5 es más fácil ya que no tenemos que inventar nombres para los div.

Gráficamente quedarían así definidas las diferencias en etiquetas entre HTML y HTML6:

Nuevas etiquetas en HTML5
Nuevas etiquetas en HTML5

Ahora vamos a ver rápidamente las nuevas etiquetas que forman la estructura de las páginas HTML5:

  • header: Define el encabezado de nuestra página web
  • nav: Aquí ponemos el menú principal
  • article: Esta es el contenido principal de la web.
  • section: Esta etiqueta conlleva algo de confusión y debate. Nos quedamos con la explicación que section son como las partes de un periódico: Nacional, Internacional, Cultura, Deporte, etc, dentro de las cuales hay artículos y dentro de los cuales hay a su vez otras secciones que podríamos llamar subsecciones.
  • aside: Es el contenido secundario de la web, como una barra lateral
  • footer: Es el pie de página de la web

Vistazo rápido a HTML5

Logo de HTML5
Logo de HTML5

EL nuevo estándar de HTML es HTML5. Aunque algunas funcionalidades no están operativas para todos los navegadores (sobre todo para nuestro querido IE) es un punto y aparte en el diseño web. HTML5 ha dado un paso para integrar la web en HTML.

Una de las características más importantes es Canvas, ya que se integra en HTML5 si necesidad de tener que añadir otras aplicaciones como Flash.

Como podemos ver en la documentación el mínimo de un documento HTML5 es lo siguiente:

<!DOCTYPE html>
<html>
<head>
<title>Título del documento</title>
</head>
<body>
El contenido del documento......
</body>
</html> 

Vemos que la declaración se ha simplificado al máximo, solamente hay que declarar:

<!DOCTYPE html>

Hipervínculo que cambia de color cuando pasamos el ratón por encima

Si queremos tener un hipervínculo que cambie de color cuando pasamos el ratón por encima podemos utilizar el siguiente código:

<a href="#" onMouseOver="this.style.color='#b93139'" onMouseOut="this.style.color='#545454'">Text</a>

Con lo que tenemos:

Text

Posible solución cuando no funciona en IE (Internet Explorer) tr bgcolor

Imagen HTMLCuando queremos colorear una fila de una tabla (<tr></tr>) lo podemos hacer así:

<tr BGCOLOR=»#F2F2F2″>, siendo #F2F2F2 el color de relleno de la fila.

Sin embargo puede que no funcione en IE (Internet Explorer). El problema en mi caso es que tenía:

background-color:Transparent;

afectando a las filas.

La solución fue comentar el CSS implicado y se solucionó. Seguramente es un caso puntual y muchas veces no se verá en nuestro «estimado» IE por mil razones, pero esta solución me funcionó.

Solucionar menu desplegable debajo de películas flash (swf) con wmode =»opaque»

Imagen HTMLCuando tenemos un menú horizontal desplegable es probable que al colocar una pelicula flash (swf) debajo del menú, los submenus del menú desplegable queden tapados por la película flash (swf).

Cuando intentamos solucionarlo por mucho que modifiquemos el z-index no obtenemos un resultado positivo (no funciona contra toda lógica y aunque pongamos la película dentro de un div y modifiquemos el z-index). Para solucionarlo tenemos que agregar wmode =»opaque» a la etiqueda embed. Si tenemos:
<embed src=»ejemplo.swf» quality=»high» pluginspage=»http://www.macromedia.com/go/getflashplayer» type=»application/x-shockwave-flash» width=»472″ height=»685″>
En el ejemplo de arriba puede que los submenus del menú horizontal queden por debajo del swf.

Para corregirlo tenemos que añadir lo siguiente:
<embed src=»ejemplo.swf» quality=»high» pluginspage=»http://www.macromedia.com/go/getflashplayer» type=»application/x-shockwave-flash» width=»472″ height=»685″  wmode =»opaque»>

Crear un link de la dirección de un correo electrónico (mailto) en HTML

Imagen HTMLPara crear un link de la dirección de un correo electrónico o email en HTML, por ejemplo del correo electrónico prueba@prueba.com tenemos que introducir el siguiente código:

<a href=»mailto:prueba@prueba.com»>Enviar email con HTML</a>

Y quedaría: Enviar email con HTML

Y si queremos enviar un email a varios correos a la vez, ponemos las direcciones de correo electrónico separadas por una coma:

<a href=»mailto:prueba@prueba.com,prueba2@prueba.com»>Enviar email con HTML</a>

Y quedaría: Enviar email con HTML