Autor Tema: Diseño web by Alan++ (clase 03)  (Leído 966 veces)

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado Alan++
  • [L0] Ladrón de espacio en la BD
  • Mensajes: 19
    Ingreso: Abril de 2014
  • Sexo: Masculino
  • ar
  • ¿donde estoy?
    • Ver Perfil
Diseño web by Alan++ (clase 03)
« on: 18 Abril de 2014, 06:08 pm »
Siempre uno comienza por lo que es mas espectacular, lo que uno puede ver o lo que nos genera una reaccion, por esta misma razon uno cuando aprende a diseñar deja rapidamente de lado html y se dedica a aprender css que es en pocas palabras quien nos brinda la identidad de nuestro diseño web... lo cual esta mal

Html no es particulamente complejo, sin embargo hacer un html decente es quizas uno de los mayores retos que se van a enfrentar cuando deban diseñar una web, no porque caigan en una zona desconocida sino porque en muchos casos uno agrega etiquetas a diestra y siniestra y es alli donde una /, una etiqueta no cerrada o cualquier error de sintaxis genera un problema que en muchos casos el mismo navegador oculta haciendo funcionar la web como nosotros pensamos que deberia funcionar... en otros casos el navegador no puede adivinar y la situacion se vuelve frustrante

Como ya comente en la "clase 02" las etiquetas son duales salvo alguna excepcion, toda el codigo web debe encontrarse entre las marcas de html y dentro de ella hay dos marcas fundamentales head y body... el primer boceto de una pagina web invariablemente es...


Código: [Seleccionar]
<html>
<head>
</head>
<body>
</body>
</html>


Este es un codigo tipico, infaltable y tambien obsoleto...

Es obsoleto porque la etiqueta html aunque sigue funcionando pero con las nuevas implementaciones, como por ejemplo html5 se genero una nueva etiqueta que abarcara a las ya preexistentes, a partir de eso nacio el tan popularisimo !doctype, para que el codigo no quede trunco lo vuelvo a crear con este agregado que comente


Código: [Seleccionar]
<!DOCTYPE html>
<head>
</head>
<body>
</body>
</html>

Ahora si es un codigo html decente, actual y funcional al 100%, hice una breve idea de porque se necesita esta nueva etiqueta y si alguno le interesa saber mas al respecto puede buscar en internet y va a encontrar mucho al respecto

Bien... lo importante de esto es que entre otras cosas vamos a poder darle mejor utilidad a etiquetas pertenecientes a html5, indexacion y orden

Es momento de hablar sobre lo mas interesante de este asunto, hay muchisimas etiquetas que sirven para un indefinifo tipo de caracteristicas pero en general siempre cumplen las mismas reglas

HEAD: en el head lo mas normal es encontrar contenido acerca de los detalles externos de una web, etiquetas como "title" (que da el nombre de la solapita entre pestañas), "favicon" (imagen de la solapita entre pestañas), importacion de archivos (pueden ser css, scripts, fuentes), como quiero que sea visualizada la web y tambien los famosos "meta"

BODY: por otro lado en el body vamos a ver el contenido de la web (como ya dije el que y no el como) pero a su vez las etiquetas que ingresemos aqui nos van a ayudar definir y ordenar de que se trata cada grupo de objetos, la virtud del html5 es que facilita esto definiendo etiquetas claras y por sobre todo que google indexa mejor

Las etiquetas que yo suelo usar de html5 son:

-header
-nav
-section
-article
-aside
-footer

No creo que haga falta aclarar "header" y "footer", la primera es el encabezado y la segunda el pie de pagina, en cuanto a "nav" es la botonera de navegacion interna de la web, los botones para ir de una seccion a otra, "section" y "article" van de la mano, "section" es la zona donde va a estar el contenido de nuestra web, es decir la parte interesante y "article" va a ser cada contenido de esa web, para que sea mas facil de entender si mi web se trata de notas periodisticas y tengo 3 entrevistas, las tres van a ir dentro del mismo "section" pero en diferentes "article", en cuanto al "aside" como su traduccion lo indica es el contenido web que no se relaciona con la web en forma directa, vinculos a webs amigas, detalles del autor/empresa de la web y ese tipo de cosas

En definitiva un html mas decente aun podriamos decir que es...


Código: [Seleccionar]
<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<header></header>
<nav></nav>
<section>
<article></article>
<article></article>
<article></article>
</section>
<footer></footer>
</body>
</html>


No he agregado todo lo que hablamos pero si lo mas importante por ahora, los objetos dentro del BODY pueden cambiar su posicion entre si y esto no seria algo malo, solamente hay que tener bien en claro cuando abrir y cerrar, lo mismo con HEAD pero nunca entre BODY y HEAD

Para finalizar esta clase hay una pregunta que debe ser respondida... ¿como se cuando mi html no es decente?

Cuando el codigo html tiene alguna falla solo debemos desde el navegador observar el codigo fuente, mozilla (y creo que chrome tambien) marca con un rojo fuerte que algo no esta bien, lamentablemente solo marca desde donde no funciona y no donde esta el error asi que el resto es investigar, observar y probar para descrubrir cual es el error y repararlo, siempre es mas facil no cometer el error que repararlo pero a veces no hay opcion

Continuara (clase 04 - "Hagase el color" o "Maldita ñ" aun no lo he definido)

----->
No podemos matar el tiempo sin herir la eternidad