Seguimos avanzando, con formularios tenemos mucho aún pero vamos a descansar un poco de ellos. Por lo pronto así no saturamos, es importante que se practique mucho. Si tienen algún amigo que les pueda colocar el siguiente php en un servidor para probar, se los dejo aquí:
<?PHP
echo "nombre: ".$_POST['nombre'];
echo "mensaje: ".$_POST['mensaje'];
?>
Por lo pronto no es necesario entender el código, pero si les servirá para generar un formulario con los campos: nombre y mensaje, y enviarlos a ese script php y les mostrará lo que rellenen en el formulario.
Empecemos con la clase de hoy:
¿que es la maquetación en el diseño web?:
Es saber separar el código html (utilizar bien las prácticas de html 5) y el código semántico, poner el diseño con css y saber potenciarlo con Javascript. si siguieron las clases saben ya un poco de javascript y css, almenos las nociones básicas. ¿pero a que te refieres con semántico?. Vamos a verlo:
Ahora con HTML5 hay lo que se conoce como semántica web, lo que nos dice que debe haber etiquetas que le den significado al contenido, como <a> le da significado a un link, o <p> le da sentido a un párrafo, por eso nacen las etiquetas <article> y <seccion>, las cuales ya vimos en clases anteriores, pero hoy las vamos a rever y aprender una nueva y compararlas.
Div:
En html 4 se utilizaban mucho, es para encerrar un bloque en una sección de la página, ejemplo:
<div>
<p>
este es un párrafo
</p>
</div>
En este ejemplo encerramos un párrafo dentro de la etiqueta div. más adelante le daremos más sentido.
Article:
Quizá es por lógica el uso que le vamos a dar, porque su función es la de agrupar lo que sea contenido valioso de un sitio. Por ejemplo, en el blog podríamos declarar una etiqueta <article> a este post, desde el título hasta el último punto y aparte de este artículo, porque es contenido valioso, lo que hace que le de valor al sitio. Hay que aclarar que por contenido valioso puede referirse a un artículo, un post, un párrafo, un comentario, e incluso algo estático como una descripción del blog o sitio web, todo aquel contenido que englobe algún tipo de texto que sea importante para el lector.
Por otro lado, no podríamos usar un article para declarar una barra de links, o de imágenes a redes sociales, porque no es parte del contenido.
Section:
Section se debe usar cuando tenemos contenido estático que si bien no forma parte fundamental del contenido mismo si se puede usar para diferenciarlo entre el contenido que es puramente dinámico y no aporta información relacionada con el artículo principal. Por ejemplo, si tuviéramos un post y este fuera muy largo podríamos poner un section para la introducción, uno para el desarrollo y otro para las conclusiones, son secciones de nuestro contenido, mientras que todo estaría englobado en un articule porque es nuestro contenido de valor.
Otro ejemplo podría ser cuando tenemos una lista de noticias o enlaces estáticos muy definidos con una pequeña descripción, en ese caso todo esa sección sería una section porque tendríamos contenido útil y relevante, y dentro de ellos cada mini noticia sería un article.
Como acomodar los bloques:
Cada una de estas 3 etiquetas tiene un atributo id que podemos darle valor para seccionar en bloque nuestra web:
<div id="menu">
aqui todo el menú
</div>
<section id="noticias">
<article id="n1">
noticia 1
</article>
<article id="n2">
noticia 2
</article>
</section>
De esa forma con los divs generamos un bloque de contenido del menú, y el resto forma toda la parte de noticias, de esta forma tenemos todo separado en nuestra web.
Antiguamente el div era la única forma de generar una capa que cree un bloque, y por eso en javascript y dhtml (dinamic html) se utiliza mucho para generar contenidos dinámicos en la web, en próximas clases veremos un poco mas de ello.
práctica: Completar el código de ejemplo poniendo en el menú una lista de enlaces, y en las noticias una con un título y su párrafo.
hasta la próxima clase!
No hay comentarios:
Publicar un comentario