Thursday, October 23, 2014

Look Inside: Las etiquetas HTML

Vamos a darle un vistazo a las etiquetas  HTML.

Previamente introduje algunas etiquetas como <body> y <p> (cuerpo y párrafo). Ahora voy a explicar la lógica de su estructura.


En este caso tenemos el elemento *Párrafo* el cual se identifica con el character o caracter *p*. Para introducir cualquier etiqueta HTML debemos usar los caracteres (<) y ( >) (símbolo de menor que y mayor que). 

En medio de ellos se indica el propósito(por así llamarlo) del elemento que queremos añadir. Esta seria la primera etiqueta llamaba Opening Tag o etiqueta de apertura.

Por consiguiente, existe la etiqueta para cerrar o concluir el elemento *p* (párrafo). Se le conoce como Closing Tag y se escribe de la misma manera que la etiqueta de apertura pero con un */* (separador) después del símbolo menor que (<), tal como se muestra en la imagen de color rojo.

En medio de estas dos etiquetas irá el texto que va a mostrarse como un párrafo en la página web:

EJ:  <p> Esto es un ejemplo de un párrafo </p>

Existen muchas otras propiedades o atributos que se pueden agregar en la etiqueta de apertura para ajustar y ayudar a identificar cada elemento. Por ejemplo el id, nombre, tamaño (si es un botón), etc. 

Las iré mencionando poco a poco para incluir un poco de diseño y CSS. 

- Leja.  


Saturday, October 18, 2014

HTML Structure: Detrás del documento.

Como pudo apreciar en el ejemplo anterior de headings y subheadings, crear una página web es recrear documentos cotidianos. Pero que pasa detrás de todas esas imágenes y texto?

El código HTML nos ayuda a crear la estructura y esta compuesto de muchos elementos para que el navegador web los pueda interpretar e imprimir exactamente lo que queremos mostrar.

Cada elemento está compuesto de dos etiquetas. Una de apertura y una de cierre. La de apertura la usamos para indicarle al navegador que sección es y que atributos contiene. La de cierre por ende es para finalizar dicha sección o elemento. Existen muchos elementos en este código web como títulos, imágenes, párrafos, saltos de página, marcaciones, pie de página, columnas, lineas, etc.


Resalté las etiquetas HTML en azul para que pueda tener una idea del mismo. Estas nos dejan recrear la idea básica de un documento en código HTML. 

Voy a analizar poco a poco las etiquetas, para que sirven y donde deben ser puestas. 

Cualquier documento html debe comenzar con la etiqueta <html> y finalizar con esta misma pero cerrada </html> . Esto no indica que que todo lo que hay en medio de estas etiquetas es básicamente código HTML.

La etiqueta <body> nos dice que el contenido entre estas dos etiquetas son otros elementos que se van a mostrar en el navegador web </body>.

Las palabras entre <h1> <h2> <h3> son Títulos y subtítulos </h3></h2></h1>.

Un párrafo de texto se puede insertar con las etiquetas <p> Texto </p>.


Poco a poco iremos conociendo mas elementos HTML para que le agreguemos mas cuerpo o forma a la página web. 


Para mas información los invito a comprar el libro de Jon Duckett : HTML y CSS

- Leja



Friday, October 17, 2014

Structure: Estructura de una página web.

Para comenzar a diseñar y codificar una página web, debemos tener claro su estructura, las reglas y principios de sus etiquetas y los elementos que la componen.

Muchas paginas web son como versiones electrónicas de los documentos que manejamos día a día, como el periódico, formularios de inscripción, catálogos de revistas, etc.

En su contenido vamos a encontrar títulos, párrafos, imágenes, iconos, listas, entre varios elementos que ayudan al visitante del sitio web a ubicarse como tal, leer la información y navegar por el mismo.

Heading and Sub-Heading

EL uso de headings y subheadings en un documento (Titulo y sub-titulo) refleja herencia en la información, Así podemos organizar el contenido en orden de importancia o relevancia.




- Leja


Wednesday, October 8, 2014

Cómo funciona la web?

How the WEB works?

Cuando visitamos un sitio web, el servidor web que hospeda el sitio puede estar ubicado en cualquier parte del mundo. Usted puede estar en Armenia, Colombia y visitar el sitio de Sony.com que se encuentra hospedado en Tokyo, Japón.

Toda esta operación es realizada en instantes a través del DNS (Domain Name System) ó Sistema de Nombre de Dominios.


Primero el navegador en Armenia contacta un DNS en Colombia. Luego el DNS le dice al navegador web(Google Chrome) dónde se encuentra el Servidor Web del sitio de Sony en Japón.

Así mediante la comunicación del SW y el DNS es que interactúan los sitios web del mundo.

Cuando usted se conecta a la web, lo hace a través del Proveedor de Servicio de Internet (ISP). Usted introduce la dirección URL del sitio web al que quiere ser dirigido en su navegador e internamente los servidores y comandos operan para que salga la página www.google.com por dar un ejemplo.

El número único que el servidor DNS retorna a su computador, le permite a su navegador contactar el servidor WEB que hospeda el sitio web al que quiere ingresar. El servidor WEB es constantemente bombardeado de peticiones para enviar páginas web a los usuarios.


XOXO - Leja


Welcome ...

Con el fin de repasar y mejorar mis conceptos de diseño, hoy les voy a compartir este nuevo segmento para que estudiemos juntos el libro de Jon Duckett : HTML & CSS Design and build websites, entre otros más.


Este libro me ha parecido además de útil, entretenedor y directo al grano. En toda mi carrera de Ingeniería de Software, siempre me caían mal los libros de la biblioteca porque solo eran viejos y llenos de códigos que solo el autor podrá entender. 

Compré el libro en BARNES & NOBLE en Washington, DC. y me quedé como 2 horas (no les miento) leyendo y facinada de las buenas interpretaciones de código que pude hacer desde el principio. 

Me di cuenta que nos complicaron mucha la vida en la Universidad aprendiendo a programar aplicaciones web en un desorden terrible. También supe que este libro y yo seriamos buenos compañeros en el Otoño e Invierno. El diseño y la ingeniería van muy de la mano. 

XOXO - Leja