Ir al contenido principal

Deprecations: Add an explicit @return annotation to suppress this message in codeception

El mensaje viene mostrado no por el propio Codeception, sino por "phpunit-bridge", así que simplemente, eliminando este paquete, se eliminan estos mensajes ;)

Primeros pasos HTML5

E
n vista a que las principales compañías ya están usando esta tecnología para sus aplicaciones, nosotros no vamos a ser menos y nos disponemos a descubrir algunas de las novedades, y nada mejor que hacerlo con un ejemplo en el que crearemos nuestra primera página con HTML5.

Lo primero que debemos conocer son las diferentes etiquetas que podemos y debemos utilizar. Además de las ya conocidas <head> y <body> se incorporan algunas de mucha utilidad como <footer>, <nav> o <article>. Poco a poco iremos explicando todas y cada una de ellas.

Vamos a comenzar escribiendo algo de código:
<!DOCTYPE HTML>

<html lang="es-es">

<head>

<meta charset="UTF-8">

<link rel="stylesheet" type="text/css" href="estilo.css">

<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>


Comentaremos un poco la primera estructura:

- En HTML5 solo hay un DOCTYPE que es la primera línea de código que se ha de insertar.
- En la etiqueta HTML podemos indicar el lenguaje que utilizaremos.
- Dentro de <body> se han especificado nuevas etiquetas que nos indican la estructura interna de la página.

Estas etiquetas son:

o <header> que indica que se trata de la cabecera de la página, incluyendo normalmente el título de la página o el logotipo y también es habitual que se incluyan los heading tags.
o <nav> indica que se trata de una lista de enlace importantes (en este caso un menú de navegación).
o <section> Divide la página en secciones.
o <aside> Se utiliza para indicar que se trata de una zona cuyo contenido esta relacionado con la página principal y puede tener sentido por si mismo. Se utiliza normalmente para sidebars, publicad o grupo de enlaces.
o <footer> donde se incluye el pie de la página.

Una vez comentada la estructura general, en la segunda parte del artículo iremos dando contenido a cada etiqueta para que se vaya pareciendo lo más posible a una página de verdad.

Puedes ver la segunda parte del tutorial.

Si tienes dudas sobre si debes configurar Apache para soporta HTML5, consulta el siguiente artículo.

Comentarios

  1. Me parece muy bien y muy importante enseñar los cambios en el lenguaje HTML Tenemos que aprender otra estructura
    Me pregunto si esto funcionara en todos los navegadores actuales , creo que quedaran anticuados.

    ResponderEliminar
  2. Hola Anxel,

    ante todo agradecerte tu comentario. A tu pregunta de que si funcionará con todos los navegadores actuales, la respuesta es no, aunque si no me confundo quieren lanzar oficialmente HTML5 y CSS3 en 2011, momento para el que mozilla habrá lanzado Firefox 4 -totalmente compatilble con esta tecnología- y crome sacará alguna actualización (aunque ya tiene muchas compatibilidades). En contraste, IE 9 será el que ofrezca mayor compatibilidad (para mi casi increible teniendo en cuenta que siempre fue el menos compatible).

    Adicionalmente te dejo un enlace con una tabla de compatibilidades bastante interesante. http://es.engadget.com/2010/11/02/w3c-pone-a-prueba-la-compatibilidad-de-los-navegadores-con-html5/.

    Espero que te sirvan mis aclaraciones.

    Un saludu

    ResponderEliminar
  3. El link de pasar al segundo tutorial esta mál manda todo el rato al primer tutorial bueno yo ya se pasar pero solo es un dato

    ResponderEliminar

Publicar un comentario

Entradas populares de este blog

Exportar archivo de configuración de WinSCP

S i estamos trabajando con WinSCP seguro que ya hemos guardado distintas sesiones para acceder a ellas directamente en futuras ocasiones y evitar volver a introducir todos los parámetro de configuración. Seguro que también muchos de vosotros habéis agrupado las sesiones en carpetas dependiendo de la naturaleza de las mismas. Este trabajo ocupa un valioso tiempo que no nos podemos permitir repetirlo para todos los equipos que tenemos, por lo que lo más lógico es configurar todas las sesiones y exportar su configuración al resto de equipos , teniendo una sola versión y evitarnos tener que volver a configurar todas las sesiones en cada uno. El problema es que WinSCP no nos muestra la opción de exportar de una forma sencilla, por lo que tendremos que buscarnos la vida. Lo primero que debemos hacer es abrir el programa y acceder a Preferencias -> Almacenamiento (o su equivalente al inglés) En esta pantalla deberemos indicar que almacene la configuración en un arc...

Refrescar página web automáticamente con PHP

C uando necesitamos refrescar nuestra página web automáticamente cada cierto tiempo, lo primero que se nos ocurre es utilizar una función en JavaScript, pero debemos saber que también lo podemos hacer con código PHP. La función de refresco de página en PHP es muy sencilla, por lo que pasamos a verla directamente: $self = $_SERVER['PHP_SELF']; //Obtenemos la página en la que nos encontramos header("refresh:300; url=$self"); //Refrescamos cada 300 segundos Nota: 300 segundos = 5 minutos (para que los veáis más claramente).

Montar USB en Ubuntu (Server) modo consola

S i nuestro Linux no es capaz de reconocer nuestro pendrive o nuestro SO no dispone de entorno gráfico, como puede ser en el caso de que utilizemos un Server, nos vemos obligados a montar el USB de forma manual, en este caso con Ubuntu. Dado que los pendrives son montados como unidades de almacenamiento masivo y como si se tratasen de unidades scsi, el usb será nombrado con la tipología "sdxX" donde x (puede ser a,b,c,d) será el canal donde está conectado y X (1,2,3,4,5....) será el numero de dispositivo, cabe destacar que en algunas distribuciones no es necesario el uso del numero de dispositivo X como en slackware (y slamd64). Podemos ver las unidades disponibles con: $ ls /dev/sd* Aunque tal vez sea más conveniente ejecutar el comando: $ls -l /dev/sd* Para ver qué dispositivos se encuentran actualmente en uso nos mostrará las unidades que se encuentran disponibles. Ahora debemos crear una carpeta para montar el usb : #mkdir /media/usb y ejecutamos la siguiente in...