Como crear / hacer una pagina web [Como programar HTML]

12 julio, 2012

Hace unos minutos se publico Como crear / hacer una pagina web [Conocimientos básicos] y despues de debatir un poco cual era mas importante entre conseguir un hosting + dominio vs como crear el codigo html, gano lo del codigo html, dado que no hace falta el hosting+dominio para esto.

Ahora bien, una de las interpretaciones que se le puede dar a como crear una pagina web, es solo la de como realizar el código html (la interfaz), pues bien, existen muchas maneras, dado que depende exactamente lo que quieras hacer, aunque en la teoría, solo te hace falta tener un editor de texto básico, como block de notas, para poder crear paginas completas, aunque también existen ya paginas preconfiguradas llamadas (CMS) que nos permiten tener en cuestiones de minutos paginas completas sin la necesidad de realizar ni una sola linea de codigo HTML, por lo tanto se hablaran en dos etapas, primero sobre CMS (que es lo mas sencillo si estas entrando al mundo de crear paginas web) y la segunda sera sobre codigo HTML mas lenguajes de programación web (PHP, Flash), con programas de desarrollo como dreamwaver.

CMS (Content Management System)

Segun Wikipedia

Un sistema de gestión de contenidos (en inglésContent Management System, abreviado CMS) es un programa que permite crear una estructura de soporte (framework) para la creación y administración de contenidos, principalmente en páginas web, por parte de los administradores, editores, participantes y demás roles.

Consiste en una interfaz que controla una o varias bases de datos donde se aloja el contenido del sitio web. El sistema permite manejar de manera independiente el contenido y el diseño. Así, es posible manejar el contenido y darle en cualquier momento un diseño distinto al sitio web sin tener que darle formato al contenido de nuevo, además de permitir la fácil y controlada publicación en el sitio a varios editores. Un ejemplo clásico es el de editores que cargan el contenido al sistema y otro de nivel superior (moderador o administrador) que permite que estos contenidos sean visibles a todo el público (los aprueba)

En otras palabras,  un CMS le proporciona a cualquier persona sin conociemientos de programación web, un portal que puede crear y modificar de manera visual sin realizar una linea de codigo, y con solo unos click, tener una pagina web totalmente funcional, la cual se puede adaptar a las necesidades de cada quien, dado que existen proyectos orientados a todo tipo de paginas, como blog (wordpress), foros (phpbb), comercio electronico (Magento), portal web (drupal, joomla) y esta lista podria continuar con cientos de ellos.

Dado que seguir hablando de esto, seria repetir información ya publicada en este blog, se colocan los link que complementan los conocimientos en cuanto CMS.

Buscando un buen CMS

Joomla vs Drupal vs WordPress

Como instalar wordpress paso a paso

Crear codigo HTML

Hasta hace unos años, para crear una pagina web solo se necesitaban conocimientos de HTML, el cual según wikipedia define como

HTML, siglas de HyperText Markup Language («lenguaje de marcado de hipertexto»), hace referencia al lenguaje de marcado predominante para la elaboración de páginas web que se utiliza para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. El HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>). HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo JavaScript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML [Wikipedia HTML]

En pocas palabras teniendo un editor de texto, y colocando ciertas etiquetas predeterminadas podemos crear una pagina web

Si dudas de esto crea un documento en block de notas (o alguno similar) guardalo como nombre.html y colocale esto en el documento

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
 <html lang="es">
   <head>
     <title>Ejemplo</title>
   </head>
   <body>
     <p>ejemplo</p>
   </body>
 </html>

Veras como tu explorador de internet predeterminado abre este archivo

Ahora bien, con solo codigo HTML no puedes crear una pagina, o no como seguro te la imaginas, dado que hoy en dia estamos ya acostumbrados a tener zona de comentario, inicio de sesiones, paginas interactivas, etc. (En realidad si puedes crear una, pero siempre con lo mismo, sin contenido variante o interactivo, aunque HTML5 promete un poco cambiar eso)

Por lo tanto para crear una pagina dinamica(como la mayoria hoy en dia), se necesitan conocimientos sobre algun lenguaje de programacion orientado a la web, o saber trabajar con un IDE (Entorno de desarrollo integrado) orientando nuevamente a la web, como lo es Dreamwaver.

Explicando un poco lo que es un IDE (Dreamwaver) es un programa informático, que nos permite casi de manera visual implementar opciones y características, para crear un pagina web dinámica, pero el problema que este tipo de programas, es que puedes implementar cosas complejas, aunque si buscas realizar una pagina con lo básico (inicio de sesion, comentarios, etc) sirve muy bien, para cosas mas complejas obligatoriamente tienes que aprender un lenguaje orientado a la web.

Un lenguaje orientado a la web como lo es PHP, te permite crear paginas, que se solo tu imaginación es el limite (o la tecnología del momento), aunque tan sencillo como hacer una pagina que imprima el nombre que se coloque en la url seria algo similar a:

echo $_GET['nombre'];

Se necesitaria tener un servidor con APACHE instalado en la PC, para que esto funcionara, y colocar en la URL ejemplo.com/?nombre=nicolas, para que saliera una pagina simple que dijiera

Nicolas

Por lo que en esta guia no se va explicar dicho proceso, si deseas aprender sobre esto, deja un comentario.

La mayoria de los CMS hoy en dia, estan creados en PHP, dado que es un lenguaje orientado solo a la web, muy flexible, que permite aprender a programar rápidamente, sin tener conocimientos sobre programación, aunque su punto fuerte realmente es lo flexible que es (mi criterio)

Facebook, este blog y la mayoria de los blog que veras en la web, estan hechos con PHP.

Otro lenguaje que puede ser orientado a la web, es Javascript, aunque existe una diferencia fundamental entre este tipo de lenguaje y por ejemplo PHP, para explicar mejor, javascript, es un lenguaje que se ejecuta del lado del cliente, mientras que PHP se ejecuta sobre el lado del servidor, confundido? Imagínate que hace una llamada telefónica a tu banco y le pides mover dinero, ellos te van a responder que debes realizar ciertos pasos, o como mínimo darles información para verificar que realmente eres tu, una vez hecho esto, tu banco realizara el movimiento de dinero, en conclusión, todo lo que hiciste es del lado del cliente, y lo que haga el banco es el lado del servidor (un poco confuso, pero no se me ocurre un ejemplo mejor).

Siguiendo con Javascript, lo que nos permite es de crear paginas interactivas, como seguro ya haz visto en la red, un ejemplo es las fotos que visualizamos en facebook, la ventana que nos sale con la foto que le hemos dado click (eso esta realizado con javascript)

Una duda que yo tenia a mis comienzos en esto, la cual consistia, en con solo javascript o PHP se puede crear una pagina web?  la respuesta es no, con javascript, solo puedes hacer interacciones con el usuario una vez cargada la pagina, mientras con PHP te encargas de leer los datos almacenados del usuario, crear paginas en el servidor, archivos, etc, en otras palabras con javascript, no puedes crear una zona de usuarios, comentarios, etc.