miércoles, 3 de junio de 2015

Editor HTML

Durante estas entradas del curso de Web desde0 estaremos aprendiendo a escribir html y desarrollaremos una página web, pero para escribir el codigo es importante (pero no necesario) tener donde escribirlo y que sea comodo.

Existen muchos editores especificos o que tienen compactibilidad con html, esto quiere decir que los editores son capaces de resaltar la sintaxis de nuestro código, esto hace que sea de mucha utilidad y facilita la escritura.

Aún así al principio es recomendable usar un editor simple para que aprendas como se escriben las etiquetas y que vallas grabandote las estructuras.

De los editores que existen hay unos muy populares como dreamweaver, pero es un software de alto costo para nuestros intereses que ahora es aprender. Existen editores gratuitos y que hacen lo mismo, porque realmente el que hace todo es el html.

Si deseas usar un editor que tenga resaltado de sintaxis yo te recomiendo Brackets el cual es gratuito y muy fácil además de rápido de usar.
Existen otras muy buenas alternativas (algunos consideran mejores) como Sublime Tex 2 o Notepad++

La desición de cual usaras para aprender es tuya y todos son muy buenos editores y lo que hacen es crear un resaltado de sintaxis y algunos te dan recomendaciones de como escribir las etiquetas facilitando tu desarrollo.

Si estas interesado en alguno y deseas que te explique como funciona no dudes en decirlo

Como comercial, si estas en Ubuntu o alguna otra distro basada en ella puedes instalar brackets con este mini tutorial

Web desde0 -Y donde lo escribo?

Siguiendo con las entradas de Webdesde0 ahora empezaremos a escribir nuestro código.

En la entrada anterior aprendimos la estructura genérica de una página web html pero si aun no sabes como implementarlo aquí te enseñare.

Importante durante este pequeño curso se emplea la palabra "página web" o "página" simplemente, pero también haremos uso de "sitio web" así que debemos diferenciar entre uno y otro.
Primero página web es cualquier archivo que este desarrollado y destinado para visualizarse en un navegador, mientras que sitio web es una colección de páginas que se encuentran en un mismo servidor o almacén.
 Por ahora nos quedaremos con esta breve definición y pasaremos a la escritura.

Teniendo como base el ejemplo anterior:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Nuestra Primer Página HTML</title>
</head>
<body>
    Esta es mi Primer página web que hemos echo


</body>
</html>


Para continuar hemos eliminado los comentarios que no son útiles ahora.

Donde escribir nuestro código html es el siguiente paso y esto se realizará en un editor de texto plano, esto quiere decir que no tenga un formato establecido como Microsoft Word pongo como ejemplo este por ser un editor de los mas populares. Si estas en Windows puedes iniciar con el Bloc de Notas lo único que tienes que hacer es copiar y pegar el código de arriba o si prefieres (y yo recomiendo mas) escribir el código tu mismo. Si estas en linux hay muchos editores planos que incluso pueden crear un marcado de las etiquetas, no pongo un ejemplo especifico porque dependiendo la distro que uses puedes tener uno u otro, ejemplo yo uso Xubuntu y tengo Mousepad.

Una vez escrito nuestro código en el editor escogido lo siguiente es guardarlo con formato html, esto se hace colocando el formato al final, para este ejemplo yo lo guarde como estructura.html. Asegurate de que solo tenga el nombre y la extensión html y no tenga una extensión superpuesta como: estructura.html.txt ya que esto es un error y no podrás visualizar tu archivo.

Para ver tu archivo (guardado correctamente) solo deberás hacer doble click sobre el y el navegador que tengas predeterminado lo abrirá automaticamente.

Web desde0 -Estructura HTML

Ahora que ya conocemos la estructura y como funcionan las etiquetas html pasaremos a conocer la estructura de nuestra primer página web y empezaremos a conocer mas etiquetas que iremos usando.

Actualmente el estándar usado para el desarrollo web es HTML5 así que nos basaremos en este para conocer sus etiquetas y su estructura.

Nuestra primer página

<!doctype html><!-- Indica el tipo de documento -->
<html><!-- Inicio de la página web... etiqueta de apertura -->
<head><!-- Inicia el encabezado del documento... esto no se ve en la página web -->
    <meta charset="UTF-8"><!-- Definimos la codificación de nuestra página -->
    <title>Nuestra Primer Página HTML</title><!-- Creamos el titulo -->
</head><!-- etiqueta de cierre de nuestro encabezado -->
<body><!-- Inicia el contenido de nuestra página, esto se vizualizara en pantalla -->

Esta es mi Primer página web que hemos echo


</body>
<!-- Termina nuestro contenido -->
</html><!-- Etiqueta de cierre de nuestro archivo html -->


Con este código hemos creado la estructura de una página web, ahora vamos a explicar un poco las etiquetas que usamos. Del código escrito lo único relevante es lo que esta resaltado en negrita, recordemos que todo lo demás son comentarios, los cuales ya fueron tratados en la entrada anterior y que no van a aparecer a la hora de visualizar nuestro archivo en un navegador.

Ahora esplicare las nuevas etiquetas para que las vallas reconociendo. 

En primer lugar tenemos nuestro: <!doctype html> el cual lo que hace es indicar el tipo de documento que estamos creando, en este caso html, anteriormente en versiones html mas antiguas, declarar un doctype era un poco complicado por la cantidad de valores a introducir dentro de el, pero ahora con el uso del html5 muchos cambios se realizaron e hicieron más fácil y mas entendible las etiquetas, y el doctype quedo realmente fácil de usar.

La segunda etiqueta usada: <html> es la que indica nuestro inicio del documento a realizar, notaras que su etiqueta de cierre se encuentra hasta el final y que a su vez estas encierran mas etiquetas dentro de ellas.

Este punto fue saltado en la entrada sobre las etiquetas porque no era de utilidad en su momento, pero ahora es nuevo punto a tomarse en cuenta, las etiquetas pueden encerrar otras etiquetas dentro de ellas y las que se encuentren dentro tomarán las caracteristicas de las que las encierre, a esto se le llama modelo de caja, pero por ahora no será importante y no trataremos este tema sino hasta más adelante.
Nuestra siguiente etiqueta es: <head> Esta etiqueta es el encabezado de nuestro documento, este contenido no se mostrará en nuestro navegador pero dentro de esta etiqueta se encerrarán otras que son de gran importacia para el navegador así como para los indexadores de contenido como google.

La siguiente etiqueta usada es: <meta> Esta etiqueta en si no dice ni hace nada y aquí empezamos a usar las propiedades, meta es una etiqueta con diversas propiedades para este caso empleamos charset y le asignamos un valor charset="UTF-8"lo que le dijimos es que a meta le asignemos una codificación UTF-8, que es el tipo de caracteres que usaremos para crear nuestros documentos, existen más codificaciones pero para emplear acentos y caracteres especiales es el que te recomiendo.
Otra cosa importante de la etiqueta <meta> es que es una etiqueta que no tiene cierre, es decir solo se declara la apertura y se agregan sus propiedades con su valor pero esta no necesita encerrar ningún contenido.
La siguiente etiqueta empleada es <title> que es la etiqueta que encerrará el titulo para nuestra página web, esta etiqueta tiene apertura y cierre y su contenido será lo que muestre nuestro navegador como titulo de nuestra web.

Importante no explicare las etiquetas de cierre porque ya fueron tratadas en la entrada anterior y estas solo sirven para encerrar un bloque de texto o etiquetas, además estas etiquetas no tiene propiedades.
Nuestra etiqueta <body> es donde se escribirá toda la estructura de nuestra página web y por lo tanto será dentro de ella que se escriban todas nuestras etiquetas que usemos para nuestra página.

Esta estructura será repetida cada vez que hagamos una nueva página web así que si no la conoces o no la sabes debes ir aprendiendola, es de gran importancia.

Mira como quedo nuestro ejemplo

Web desde 0 -introducción al HTML

HTML es el lenguaje estándar para el desarrollo de páginas web, este lenguaje es el encargado de dar la estructura a nuestra páginas.

Hay que tener presente que HTML no es un lenguaje de programación si no un lenguaje de marcado, el cual es interpretado por el navegador para generar nuestra pagina, claro el omitir saber esto no cambia como funciona pero nunca esta de menos saberlo.

HTML al igual que cualquier otro lenguaje tiene sus propias normas para interpretarse, en este concreto caso usa etiquetas de marcado, estas etiquetas normalmente encierran el contenido que se desea que englobe.

Para entenderlo mejor, las etiquetas son las encargadas de decidir que tipo de contenido estamos colocando, ya sea una imagen un texto o un audio.

Las etiquetas tienen una estructura general que es:
<a>Link</a>

Como se muestra se emplean los signos de mayor y menor que para encerrar el nombre de la etiqueta, en este caso se trata de un enlace porque la etiqueta encerrada es a.

Antes de seguir y para poder entenderlo mejor les hablare sobre los comentarios en html.

Comentarios


Los comentarios son párrafos dentro de nuestro código html el cual sirve para identificar o para separar partes de nuestro html, los comentarios se encierran dentro de las siguientes etiquetas:

<!-- Comentario -->

Este párrafo escrito dentro del html no significara nada y el navegador lo ignorará, no se visualiza en nuestra página, por lo tanto es útil para emplearlo en partes que sean difícil de recordar o para indicar alguna sección que requiera cambios.


Etiquetas

Ahora que sabemos que son los comentarios y como usarlos los podremos usar para nuestro ejemplo de etiquetas.

<a>Link</a> <!-- Enlace o vinculo -->

Como se aprecia en el ejemplo las etiquetas normalmente tienen 3 secciones:

Etiqueta de apertura: <a>
Contenido que encierra: Link
Etiqueta de Cierre*: </a>
Se debe aclarar que no todas las etiquetas tienen algún cierre pero si la mayoría y las que no lo tengan serán tratadas igualmente en este pequeño curso
 Ahora debemos mirar directamente a la etiqueta y empezar a desglozarla y nos damos cuenta que las etiquetas también tiene partes internas:

<a>link</a>

Etiqueta de apertura
Apertura de etiqueta: <
Nombre de la etiqueta: a
Cierre de la etiqueta: >

 Si nos fijamos notaremos la diferencia que existe entre la etiqueta de apertura con la de cierre y esa diferencia es: </> la barra diagonal o slash, el cual nos indica que se trata de la etiqueta de cierre.

Etiqueta de Cierre 
Apertura de etiqueta: <
Diagonal o slash: /
Nombre de la etiqueta: a
Cierre de la etiqueta: >

Un punto importante aunque tal vez muy simple es el echo de que tanto la etiqueta de apertura como la de cierre deben llevar el mismo nombre, para este ejemplo es a.

Propiedades de etiquetas

Ahora que ya sabemos como crear las etiquetas vamos a aprender un poco acerca de las propiedades de las etiquetas y como se declaran.

En el ejemplo anterior usábamos "<a>Link</a>" y habíamos dicho que se trataba de un enlace o vinculo a otra página, pero realmente este "vinculo" no hace nada porque no esta enlazado a ninguna pagina, es más si lo escribimos tal cual en html ni siquiera lo considerará un enlace. Para eso están las propiedades, pero en este punto solo mostrare como se declaran y no ampliare su uso porque esto solo es una "no tan pequeña" introducción.

Siguiendo con nuestro ejemplo:

<a href="http://webdesde0.blogspot.com">Visita nuestra Página Web</a>

Como te habrás dado cuenta realice unos pequeños cambios a nuestra etiqueta de enlace y adicionalmente agregue un texto más largo y representativo a su contenido: Visita nuestra Página Web.

El resultado de esa etiqueta sería algo como esto:   Visita nuestra Página Web



Como se había mencionado las etiquetas encierran un contenido y todo el contenido que se encuentre dentro de ellas es afectado por la etiqueta sin importar que existan espacios o cuan largo sea el contenido.

Ahora si podemos hablar de las propiedades y su declaración:

<a href=" ">link</a>

Las propiedades están establecidas por el organismo encargado de la estandarización de la web W3C y son declaradas después del nombre de la etiqueta:  <a href 
precedido del signo "igual": <a href
Finalizando con comillas simples o dobles para encerrar el valor de la propiedad: <a href="valor">

En el caso de los vinculos se tratan enlaces a otros o al mismo sitio web. Con esto termino la introducción sobre los puntos más importantes desde mi punto de vista.

Nota Aparte: Tal vez si ya conoces sobre HTML te preguntes porque empecé con etiquetas y no hablando sobre la estructura real de html, esto es porque desde mi perspectiva es importante conocer las etiquetas y su declaración para poder entender como se estructura el html. Muchas veces cuando empezamos a aprender html hacemos la estructura que nos dicen pero sin entender porque deben llevar esa sintaxis, es por eso que decidí empezar por el medio para luego ir al principio.

Si te gusto esta entrada puedes seguir las siguientes para que sigas aprendiendo sobre html o dejar algún comentario sobre lo que pienses de este curso.

Favicon Transparente para tu Web

Actualmente la mayoria de sitios web contienen un favicon, por si eres de los pocos que no sabes que es, se trata del icono que muestran los navegadores en sus pestañas, el cual normalmente se trata de el logotipo que representa tu marca o tu pagina web.


Un favicon te puede servir para darle presencia y personalidad a tu página web y que los visitantes sean capaces de reconocer tu marca de forma fácil.

Para crear nuestro favicon usaremos una página web que nos permitira crearlo en base a una imagen, la cual puede tener los formatos: gif, jpg, png, y bmp.

Creando nuestro favicon

1. Acceder a tools.dynamicdrive.com/favicon
2. Cargamos nuestra imagen en el icono examinar y le damos a create icon


3. Ahora nos aparecera un preview de nuestro icono creado y le damos en descargar (Download FavIcon).
Descargar FavIcon




Ahora debemos colocar nuestro archivo favicon.ico en la raíz de nuestro sitio para que los navegadores lo reconozcan.
Adicionalmente y para asegurarnos que nuestro favicon sea reconocido por todos los navegadores añadiremos esta linea en nuestro head de nuestra página:

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

La linea lo que hace referencia al favicon, la propiedad rel indica el tipo de relación que tiene mientras en la propiedad href le indicamos donde y cual es el nombre de nuestro favicon, la propiedad type indica el tipo de archivo relacionado.

Existen muchas herramientas en internet para crear nuestro favicon, algunas de ellas con ciertas limitaciones o un poco complicadas para usar, yo e elegido dynamicdrive.com porque nos permite crear nuestro favicon con traspareciencias que le dara un aspecto mas elegante a nuestro icono.

Como habrán visto esta página lo que nos permite es crear nuestro icono para nuestro sitio en base a una imagen no crear nuestro icono desde0 para crear nuestro icono debemos usar otras herramientas de edición de imagenes. Para nuestro ejemplo y nuestro icono e utilizado Inkscape el cual es una herramienta gratuita, despues mejorare nuestro icono y mostrare como hacerlo mediante dicho software, tu puedes hacer uso de cualquier editor de imagenes, como gimp, photoshop, kripta u algún otro software. 

Recuerda que si quieres crear un favicon con trasparencia debes guardar tu imagen en formato png y dejar las trasparencias que tu quieras
Nuestro Favicon Usado

Inicio

webdesde0 es un blog en el cual te enseñare aquellas pequeñas o grandes cosas que te puedan servir para tus desarrollos web.

Muchos temas serán realizados de manera suelta, es decir que tendrán sus propios apartados sin seguir un orden. Dependiendo el exito o fracaso del blog entonces podré decidir si seguire con la realización de pequeños tutoriales, o si inicio la webdesde0 con un desarrollo completo de principio a fin de una página web

Por lo mientras espero y te sean utiles las herramientas o consejos que te ire dando para que realices tus proyectos, ya sean escolares o personales e incluso te servirá para algún proyecto donde existan recursos de por medio.

Con el fin de hacer mas completo e interesante este blog he decido hacer uso de un servidor gratuito para realizar las pruebas y puedas ver los resultados del blog de manera visual. Actualmente no he desarrollado la página completa pero pronto la tendré lista. Adicionalmente y si quieres aprender como usar el servidor que uso crearé un pequeño tutorial para que aprendas como hacerlo.

Actualmente a fecha de hoy talvez no encuentres mucho en nuestro sitio pero conforme avance en el blog lo ire haciendo a la par con nuestra página de pruebas, sin mas puedes visitarlo.