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

Alan++ · « **Respuesta #20 en:** Mayo 24, 2013, 03:14:16 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)

Pd: depende la cantidad de comentarios que obtenga el post va a ser la periodicidad con la que voy a continuarlo...

Continuar a la Clase Nº 4

Jum4r0 · « **Respuesta #21 en:** Mayo 24, 2013, 03:36:10 pm »

Gracias, Alan.

Ya he comentado, ahora aumenta tu ritmo. XD

JAG · « **Respuesta #22 en:** Mayo 24, 2013, 03:43:29 pm »

jajaja están geniales estos aportes Alan... esto ya me lo explicaste una vez así que sigo esperando nuevos temas. Como ya sabes no acostumbro a usar las etiquetas nav, section o article pero bajo mi punto de vista esto no quiere decir que mi código html no sea decente. Esto depende de la manera de organizarse que tenga cada uno y como lleve su css... aunque también te doy la razón con esto de que html5 es lo que toca ahora... en fin, gracias de nuevo por estos aportes.
Un saludo!

NSB · « **Respuesta #23 en:** Mayo 24, 2013, 07:38:26 pm »

Gracias Alan!!!!!!!

Q venga rapido la clase 04!!!!!!

Qfa · « **Respuesta #24 en:** Mayo 24, 2013, 08:20:46 pm »

Siempre eh estado interesado en aprender HTML5 y css Me pongo al dia con las Clases!
Gracias!!

larson32 · « **Respuesta #25 en:** Mayo 24, 2013, 08:28:32 pm »

estan buenas las clases
esperamos mas...

ale2112 · « **Respuesta #26 en:** Mayo 25, 2013, 08:10:24 pm »

Genial las clases!!
Esperamos la prox!

Salu2

lordorlando · « **Respuesta #27 en:** Mayo 27, 2013, 01:45:26 pm »

es algo basico pero esta bien , espero algo mas complejo y mas clases

Prow · « **Respuesta #28 en:** Mayo 27, 2013, 08:18:22 pm »

Cita de: lordorlando en Mayo 27, 2013, 01:45:26 pm

es algo basico pero esta bien , espero algo mas complejo y mas clases

No ha iniciado desde 0, ha comenzado desde -3. Ja ja ja xD

Dejando los chistes afuera... Espero puedas continuar las clases Alan, será un excelente material para los que han comenzado a ver el diseño web por primera vez. Me hubiera gustado tener algo tan básico al comienzo y que fuera avanzando de forma muy gradual.

Muy bueno Alan!

kid_goth · « **Respuesta #29 en:** Mayo 28, 2013, 04:19:12 pm »

para validar también pueden usar esta web: http://validator.w3.org/ ya sea si esta online ponen el link, sino pegan el código fuente y hasta de css validator hay así que pueden probar y aprender de los consejos que allí también exponen...

por ultimo ya que se habló de la estructura básica del HTML y sobre todo que es HTML5 les dejo esta tabla:
http://foro.hackxcrack.net/forum/index.php?topic=18955.0

Saludos

Vuelve a España Google News después de 8 años y trae todas estas novedades

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

Alan++

Diseño web by Alan++ (clase 03)

Jum4r0

Re:Diseño web by Alan++ (clase 03)

JAG

Re:Diseño web by Alan++ (clase 03)

NSB

Re:Diseño web by Alan++ (clase 03)

Qfa

Re:Diseño web by Alan++ (clase 03)

larson32

Re:Diseño web by Alan++ (clase 03)

ale2112

Re:Diseño web by Alan++ (clase 03)

lordorlando

Re:Diseño web by Alan++ (clase 03)

Prow

Re:Diseño web by Alan++ (clase 03)

kid_goth

Re:Diseño web by Alan++ (clase 03)