Vista dinámica

miércoles, 4 de septiembre de 2013

Como montar un buen blog - PARTE 4: HTML y JavaScript


¿Ya estas agregando contenido de calidad a tu blog? Si es así, estas en el camino correcto! Sin embargo, es posible que necesites alguna función que Blogger no te pueda proporcionar, por ejemplo un slider, un efecto visual, un botón flotante, etc. En ese caso tendrás que añadir un “elemento HTML” a la estructura de tu blog. Para no cometer errores que puedan arruinar nuestra plantilla, lo mejor es conocer su estructura básica. Comencemos!

Vamos a hacer una introducción rápida a este lenguaje. Existen varios tipos de lenguaje de programación Web: HTML, JavaScript, PHP, ASP, ASP.net, JSP, Pyton, Ruby, Perl, etc. ¿Demasiados no? No te preocupes, no vamos a volvernos locos aprendiendo todos estos lenguajes porque no nos hace falta. Solo haremos una breve introducción al HTML y al final explicaré básicamente como hacer uso del JavaScript.

A - HTML: el idioma de Internet


HTML

El HTML (Hyper Text Markup Language - Lenguaje de Marcación de HiperTexto) es el lenguaje de marcas de texto utilizado normalmente en la World Wide Web. El HTML no es propiamente un lenguaje de programación como C++, Visual Basic, etc., sino un sistema de etiquetas.

El entorno para trabajar HTML es simplemente un procesador de texto, como el que ofrecen los sistemas operativos, ejemplo: Bloc de Notas o Word, etc. El conjunto de etiquetas creadas, se deben guardar con la extensión .htm o .html.

Como vemos, HTML no presenta ningún compilador, por lo cual hay que revisar muy bien el código escrito antes de enviarlo. Blogger puede detectar en nuestra plantilla algunos errores de compilación, en cuyo caso nos avisa antes de guardar algún cambio, sin embargo algunos errores pueden colarse y ser interpretados como están.

Estos documentos (html`s) pueden ser mostrados por los visores o "browsers" de paginas Web en Internet, como Netscape Navigator, Mozilla Firefox, Safari, Mosaic, Opera y Microsoft Internet Explorer.


B - Tú Web desde cero


Tú Web desde cero

En “norfipc” nos muestran como hacer una página Web de forma fácil. Veamos un resumen de lo más importante que debes saber en relación a la estructura de etiquetas o plantilla de una página Web. Lo aprendido te servirá para conocer la estructura de las plantillas prediseñadas, creadas por profesionales.


1. El código HTML elemental
El código HTML elemental se muestra a continuación. Puedes crear un archivo index.html, editarlo con el Bloc de notas, guardarlo y al hacer doble clic, verás el resultado en tú navegador.

<html>
<head>
<title>Mi Primera Página</title>
</head>
<body>
Esta es mi primera página web
</body>
</html>

• Cada elemento que va entre los signos < y > es un tag o etiqueta. Donde quiera que hay un tag algo sucederá en la representación del documento, algunas veces visualmente y otras de manera oculta.
• Es importante observar que las etiquetas deben cerrarse y la forma es: <etiqueta>contenido</etiqueta> o en algunos casos <etiqueta/>.
• La etiqueta <html> le indica a tu navegador que tu documento es una página web y debe representarla como tal.
• Las etiquetas <title> encierran el título de la página, es imprescindible su uso. Se muestra en la barra superior del navegador.
• Los elementos que se encuentran entre las dos etiquetas <head> que es el encabezado, contiene datos e información para el funcionamiento la página, que el usuario no ve.
• En el espacio comprendido entre las etiquetas <body> está incluido todo el contenido que quieres visualizar.

Siempre tendrás la alternativa de utilizar algún programa WYSIWYG (muestran dos pantallas, en una el código y en la otra el resultado). Te dejo un par de ellos: Editor 1 ó Editor 2.


2. Agregarle un título o encabezado a la página Web
Podemos agregarle un titulo en letras grandes y un subtitulo, es decir estamos dando formato y jerarquía al texto plano, copia y pega por supuesto en la siguiente línea después del <body>:

<h1>
Mi Página</h1>
<h3>
Esta es mi primera Web</h3>


3. Agregarle una imagen a la página Web
Puedes insertar una imagen nombrada “imagen.jpg”. La etiqueta necesaria para llevar a cabo esto es de la forma: <img />. Además necesitaremos agregar unas palabras llamadas atributos. Lo que nos quedaría así:

<img src="imagen.jpg"/>

El atributo “src” indica cual es la dirección donde se aloja la imagen -indispensable-, en este caso es el mismo directorio donde se encuentra el index.html, pero puede ser cualquier otra. También podemos agregarle el atributo “alt” que sirve para que el navegador coloque un texto alternativo en caso de que la imagen no pueda ser accedida:

<img src="imagen.jpg" alt="Esta es mi casa"/>

¿Comillas dobles o comillas simples?
Se deben usar “comilla dobles”. Dejaremos las ‘comillas simples’ para otros códigos.

¿Que tipo de ruta es conveniente colocar?
Existen tres tipos de rutas de vínculos:
- Rutas absolutas (como http://miweb.com.ar/subnivel1/subnivel2/index.html).
- Rutas relativas al documento (como subnivel2/index.html).
- Rutas relativas a la raíz del sitio (como subnivel1/subnivel2/index.html).

Utilice el tipo de vínculo que prefiera y le resulte más cómodo, ya sea relativo a la raíz del sitio o al documento. Utilizar rutas absolutas tiene como inconveniente que si transladamos el sitio a otra dirección web se romperían todos los enlaces. Utilizaremos direcciones absolutas siempre que queramos referenciar archivos que no estén en nuestro sitio y para los enlaces internos nos volcaremos a utilizar rutas relativas.


4. Agregarle un link o vínculo a un sitio Web
Otra cosa que podemos agregar es un enlace o vínculo al lugar que especifiques. La forma de la etiqueta es <a></a>, puedes ponerla en la parte del <body> que gustes:

<a href="miotraweb.com.ar">Ir a otra página</a>

El atributo “href” es indispensable e indica a cual dirección vamos a ir. Abajo se muestra un ejemplo que agrega otro atributo llamado “title” que sirve para mostrar un tooltip cuando colocamos el cursor sobre el enlace.

<a href="http://www.google.com/" title="Clic">Para ir a Google</a>

Vamos a tener en cuenta lo mismo sobre las rutas relativas y absolutas explicadas en el punto anterior.


5. Agregar texto o contenido al cuerpo de la página
Ahora le toca el texto con el contenido de la página (con el tag <p> le estas indicando que es un párrafo):

<p>Aquí todo lo que quieras escribir.</p>

También se puede transformar cualquier texto en negrita, cursiva o subrayar los mismos:

<b> Texto negrita </b>
<i> Texto cursiva </i>
<u> Texto subrayado </u>

También puedes crear una pequeña lista:

<ul>
<li>Otra página</li>
<li>Otra mas</li>
<li>Acerca de mi</li>
</ul>

Se puede convertir en lista de menú con vínculos a otras páginas:

<ul>
<li><a href="página1.html">Otra pagina</a></li>
<li><a href="página2.html">Otra mas</a></li>
<li><a href="about.html">Acerca de mi</a></li>
</ul>


6. Agregar una tabla
Cuando se necesita ordenar el contenido en forma de filas y/o columnas se suele utilizar la etiqueta <table>. Luego y entre las etiquetas <table>, para las filas utilizamos <tr>, y para las columnas <td>:

<table>
<tr> <td>Celda 1</td> <td>Celda 2</td> </tr>
<tr> <td>Celda 3</td> <td>Celda 4</td> </tr>
</table>


7. Agregar un bloque entrecomillado y un salto de línea
Útil para hacer una cita textual, es decir, repetir un fragmento dicho con anterioridad.

<blockquote>Texto entrecomillado</blockquote>

La etiqueta <br/> indica un salto de línea. Es lo que comunmente sucede en cualquier procesador de texto cuando presionamos la tecla enter.


8. Alineación de textos e imágenes
Queremos que nuestro sitio se vea gráficamente ordenado. Para alinear una imagen horizontalmente podemos hacerlo de la misma forma que el texto, es decir, utilizando el atributo align dentro de una etiqueta <p> o <div>. La etiqueta <div> se emplea para definir un bloque de contenido o sección de la página.

Este código mostrará la imagen en el centro:

<div align="center"><img src="imagen.jpg"></div>

Este código mostrará el texto en el centro:

<div align="center">Texto</div>

El atributo “align” también puede aceptar los valores “left” y “right”. También podemos usarlo dentro de la etiqueta <img/>, pudiendo alinear verticalmente a la imagen con un texto. En el ejemplo de abajo también hemos modificado las dimensiones de la imagen usando los atributos “width” y “height” expresados en pixeles, por ejemplo:

<img src="imagen.jpg" align="absmiddle" width="100" height="100"/>Mi casa.


9. Agregar el estilo CSS a la página
Los estilos CSS son instrucciones para darle un elegancia gráfica precisa a cualquiera de los elementos que componen la página. Las hojas de estilo en cascada (Cascading Style Sheets - CSS) hacen referencia a un lenguaje de hojas de estilos usado para describir la presentación semántica (el aspecto y formato) de un documento escrito en lenguaje de marcas. Es posible modificar el tamaño del texto, los colores, el tipo de fuente, como se muestran las imágenes, etc.

Para lograr esto se incluyen algunas líneas encerradas entre dos etiquetas <style>, todo esto lo metemos en alguna parte del <head>.

En este ejemplo se incluyen algunos comentarios (encerrados entre los caracteres /* */) de esta manera no se tienen en cuenta por el navegador. Solo sirven para que se comprenda el significado de los valores para una posterior modificación.

<style>
body{
background: #b7e5ff; /*el color del fondo*/
font-size: 20px; /*tamaño del texto en pixeles*/
color: black; /*color de las letras*/
padding: 20px; /*el espacio entre el borde y el contenido*/
border: 6px solid white; /*tamaño, forma y color del borde de la página*/
}
h1{color: red;} /*color del encabezado*/
h3{margin: 10px;} /*espacio entre el borde y los demás elementos del entorno*/
</style>

En la primera linea le hemos asignado un color al fondo de nuestra página web, expresado a través un código en RGB. La paleta de colores RGB consta, básicamente, de tres colores primarios aditivos: Rojo-Verde-Azul. Estos colores primarios aditivos, en HTML, están representados por tres pares hexadecimales del tipo 0xHH-HH-HH según el siguiente formato: #RRGGBB. También son reconocidos algunos colores por su nombre por ejemplo: green, white, etc. En la Wiki hay una tabla que les puede servir de guía.


10- Agregar la declaración y meta descripción
Ya está casi lista nuestra página, solamente pegaremos el DOCTYPE al comienzo para que sea compatible con todos los navegadores. Además especificaremos que se debe mostrar en idioma español:

<!DOCTYPE html>
<html lang="es">

La etiqueta <meta> se utiliza para añadir información sobre la página. Esta información puede ser utilizada por los buscadores. Más adelante conoceremos más en detalle a esta importante etiqueta.

Los ejemplos de metadato mostrados a continuación sirven para indicarle al buscador el tipo de contenido:

Ej. 1:
<meta http-equiv="content-type" content="text/html;charset=windows-1252">
Ej. 2:
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

El contenido de la página es: código HTML y su codificación de caracteres es la codificación de caracteres del alfabeto latino.

¿Que charset utilizar?
Es muy importante etiquetar siempre los documentos Web en forma explícita, caso contrario el explorador utilizará la codificación preferida del lector o navegador. Hay muchos tipos: charset iso-8859-1; windows-1252; UTF-8; etc. El HTTP 1.1 dice que el charset predeterminado es ISO-8859-1.

Cuanto más extenso sea el uso de una codificación de caracteres, mayor será la probabilidad de que el explorador la comprenda. La codificación Unicode, UTF-8, es una buena opción debido a varios motivos.

- Soporta varios idiomas e incluso combinaciones de dichos idiomas en páginas y formularios.
- Además, se debe tener en cuenta, particularmente, que todos los caracteres ASCII en UTF-8 utilizan exactamente los mismos bytes que en la codificación ASCII, lo que generalmente favorece la interoperatividad y retrocompatibilidad.


Finalmente, el código completo quedaría mas o menos así:

<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Mi Primera Pagina</title>
<style>
body{background:#b7e5ff;
font-size:20px;
color:black;
padding:20px;
border:6px solid white;}
h1{color:red;}
h3{margin: 10px;} /*espacio entre el borde y los demás elementos del entorno*/
</style>
</head>

<body>
<h1>
Mi Página</h1>

<h3>
Esta es mi primera página web</h3>

<div align="center">
<img src="http://www.lossimpsonsonline.com.ar/la-casa/la-casa.gif" alt="Esta es mi casa" align="absmiddle" width="150" height="100"/>Mi hermosa casa </div>

<a href="http://www.google.com/">Link para ir a Google</a>

<p>
Esta es una página web sencilla, pequeña, casi está vacia,
pero bonita porque es mi primera página web.</p>

<blockquote>
"página web sencilla"</blockquote>

<table align="center" border="1">
<tr> <td>Celda 1</td> <td>Celda 2</td> </tr>
<tr> <td>Celda 3</td> <td>Celda 4</td> </tr>
</table>

<ul>
<li><a href="página1.html">Otra pagina</a></li>
<li><a href="página2.html">Otra mas</a></li>
<li><a href="about.html">Acerca de mi</a></li>
</ul>

</body>
</html>


10. Elementos id y class
Id: este atributo asigna un nombre a un elemento. Este nombre debe ser único en un documento.
Class: este atributo asigna un nombre de clase o un conjunto de nombres de clase a un elemento. Se puede asignar el mismo nombre o nombres de clase a cualquier número de elementos. Ejemplos:

<p id="miparrafo1">
Esto es un párrafo con un nombre único.</p>

<p id="tuparrafo1">
Esto también es un párrafo con un nombre único.</p>

<p class="parrafo2">
Esto es un párrafo con un nombre.</p>

<p class="parrafo2">
Esto también es un párrafo con el mismo nombre anterior.</p>

El atributo id tiene varios papeles en HTML:
- Como selector para las hojas de estilo.
- Como vínculo destino para vínculos de hipertexto.
- Como medio de hacer referencia a un elemento en particular desde un script.
- Como nombre de un elemento OBJECT declarado.
- Para procesos generales por parte de agentes de usuario (p.ej., para identificar campos cuando se transfieren datos desde páginas HTML hasta una base de datos, para traducir documentos HTML a otros formatos, etc.).

Por otra parte, el atributo class, también tiene varias funciones en HTML:
- Como selector para hojas de estilo.
- Para procesos generales por parte de agentes de usuario.

Agregando estilos con id y class:

<style>
#miparrafo{
margin: 10px;
color: red;
}
.parrafo{
margin: 5px;
color: blue;
}
</style>

<p id="miparrafo1">Primer párrafo.</p>

<p class="parrafo2">Segundo párrafo.</p>

Notar que se utilizó "#" para id y "." para class.

Agregar más elementos a la página web creada
Lo creado hasta este punto es una página Web elemental, deberás irle agregando sucesivamente secciones, imágenes, más texto, vínculos y estilos. Después crea otras páginas de forma similar y enlazarlas a cada una de ellas mediante los vínculos, el resultado será un pequeño sitio Web, donde la primera página creada llamada index es su página principal.


C - Las etiquetas más utilizadas en el código HTML



Ya que conocemos la estructura básica de una Web, no vamos a tener inconvenientes a la hora de colocar códigos HTML a nuestro blog o mejorar algún aspecto visual con CSS.

Las siguientes son algunas de las etiquetas más utilizadas, es necesario conocerlas para poder interpretar correctamente un código y comprender la función de cada una de ellas.



D - JavaScript


JavaScript

JavaScript es un lenguaje interpretado que se embebe en una página Web HTML. Un lenguaje interpretado significa que a las instrucciones las analiza y procesa el navegador en el momento que deben ser ejecutadas. Principalmente se utiliza en páginas Web HTML para realizar operaciones, permitiendo mejoras en la interfaz de usuario y páginas Web dinámicas, únicamente en el marco de la aplicación cliente.

JavaScript se diseñó con una sintaxis similar al C, aunque adopta nombres y convenciones del lenguaje de programación Java. Sin embargo Java y JavaScript no están relacionados y tienen semánticas y propósitos diferentes. Todos los navegadores modernos interpretan el código JavaScript integrado en las páginas Web.

¿Cómo se escribe el JavaScript?
Los scripts de JavaScript se escriben de forma similar a los de VBScript, pero su sintaxis es mucho más estricta, y esta es una de las causas más habituales de error. Todo código JS debe ser colocado entre las etiquetas <script></script> y dentro del HEAD o el BODY de tu plantilla HTML.

Nuestro primer programa será el famoso "Hola Mundo", es decir un programa que muestre en el documento HTML el mensaje "Hola Mundo".

<html>
<head>
</head>
<body>
<script type="text/javascript">
document.write('Hola Mundo'); /* notar que la instrucción termina con punto y coma */
</script>
</body></html>

En JavaScript, a diferencia de VBScript, no se pueden escribir mayúsculas. No es lo mismo MiFuncion() que mifuncion(), y si escribimos, por ejemplo, Document.Write() no funcionará. Sea por ejemplo:

<script LANGUAGE=JavaScript>
<!--
document.write("Esto ha sido escrito por JavaScript")
// -->
</SCRIPT>

Observen que dentro de la etiqueta HTML <SCRIPT> y antes del código JavaScript propiamente dicho, aparece el símbolo del comentario HTML <!--. Esto se hace para evitar que los navegadores que no son capaces de interpretar el script muestren el código.

Otra cosa importante son las dos barras (//) que aparecen justo antes del cierre del comentario html: -->. Estas barras son el indicativo de que lo que viene a continuación es un comentario también, pero del propio JavaScript en este caso, y hay que ponerlas para evitar que el intérprete JavaScript tome el cierre del comentario html como una instrucción y produzca un error de sintaxis. Esto es válido siempre que el comentario vaya a tener una sola línea. Si va a tener más se utilizarán /* ... */.

JavaScript entiende que una instrucción ha terminado cuando encuentra un retorno de línea, pero si se desea escribir más de una instrucción en la misma línea hay que separarlas con ; al final de cada instrucción, excepto la última que no lo necesita, aunque no ocurre nada si se escribe.

Por si quieren aprender más les dejo una Web que explica muy bien JS.


E - ¡A crear sus propias paginas Webs!


Si tienen intención de crear sus propias páginas desde cero, para ahorrar tiempo, pueden usar esta plantilla básica. Además les dejo para que descargen un archivo de registro para que puedan crear archivos HTML desde el menú contextual, es decir cuando hacen clic secundario -en el escritorio, o el explorador de Windows-, luego dentro del menú van a “Nuevo” y podrán seleccionar "Nuevo documento HTML", una vez creado lo editan con el Bloc de notas por ejemplo. Para instalarlo deben hacer doble clic en el archivo de registro (descomprimirlo primero) y reiniciar la PC.

Para que no tengan que quemarse el cerebro existen soluciones prácticas a la hora de crear sus propias webs como Dreamweaver. Pero lo que he intentado explicar básicamente sirve para entiender los códigos y la manera de insertarlos en un blog de Blogger. Así como también una noción básica de cómo solucionar los problemas comunes que aveces se presentan en el código HTML de tú plantilla o en los códigos externos que agregas a tu blog.

No obstante, cualquier duda que se les presente respecto a la utilización o la semántica de los códigos HTML, les aconsejo que no pierdan tiempo buscando en diferentes sitios, vayan directo a la web de "w3schools".

Esto ha sido todo por hoy, la semana que viene les traigo material de ayuda para configurar correctamente Blogger y una explicación detallada de las meta etiquetas, que ayudan a los buscadores a conocer el contenido sus blogs. Voilà!

Mas info: monografias, norfipc, uv-
Palabras clave: código, HTML, Javascript, etiquetas, montar, blog, lenguajes, programación, ordenador, blog, CSS, estilos, Hipertexto, World Wide Web, Internet, tutorial básico.

No hay comentarios:

Publicar un comentario

Todos los mensajes son moderados por el administrador