hello world, mi primera página web en mi servidor recien configurado

Hello World. Tu primera página Web en tu servidor

Una vez que habéis configurado vuestro servidor, ya tenéis todo preparado para crear vuestra primera página web.

Antes de nada, os hago un listado de todo lo que hemos hecho para configurar el servidor:

  1. Tenemos un ordenador viejo o uno que no utilizamos. Vamos a descargar el Ubuntu 14.04 para crear un pendrive de arranque.
  2. Instalamos el Ubuntu 14.04 en nuestro servidor.
  3. Instalamos el Xampp y configuramos su panel de control

Una vez configurado el servidor, vamos a necesitar, dar permisos totales a la carpeta donde se van a almacenar las webs que creemos, y un editor html

Dando permisos a htdocs

Htdocs es el directorio donde se guardan las webs.

A dicho directorio, le tenemos que dar permisos de administrador para poder escribir, guardar y ejecutar las páginas que creemos.

Si abro un terminal (CTL+Alt+T) y tecleo la siguiente instrucción, podré ver los permisos que tiene el directorio htdocs:

$  sudo  ls -l /opt/lampp
Permisos del directorio htdocs

Permisos del directorio htdocs

Los permisos por defecto no son totales, sino parciales:

drwxr-xr-x 5 root root 4096 jun 4 07:29 htdocs 
Permisos parciales de htdoc

Permisos parciales de htdoc

Para que sean totales tienen que estar los tres grupos siguientes en rwxr (ahora solo está el primer grupo, cada grupo separado por un”-“).

Lo que significa cada letra es:

  • r: read . Permiso de lectura
  • w: write . Permiso de escritura
  • x: ejecutar . Permiso de ejecutar

Tecleo la siguiente instrucción, para darle los permisos:

$  sudo chmod a+w /opt/lampp/htdocs 

Cambiando los permisos al directorio

Para ver el resultado, vuelvo a preguntar por los permisos con la instruccción:

$  sudo  ls -l /opt/lampp

El resultado nos devuelve los tres grupos con permisos totales(rwx):

drwxr-rwx-rwx 5 root root 4096 jun 4 07:29 htdocs
Permisos parciales de htdoc

Permisos cambiados en htdocs

Una vez tenemos los permisos totales del directorio htdocs, vamos a crear una redirección a nuestro escritorio que vamos a llamar www. Con ésto vamos a ganar en comodidad, ya que tendrémos siempre a mano nuestro directorio de páginas web o www en nuestra carpeta “home”.

$  sudo ln -s /opt/lampp/htdocs ~/www 
Redirección al directorio www

Redirección al directorio www

Nota: Para sacar el símbolo ~, si no lo localizas en tu teclado, pulsa AlGr y el número 4 (AltGR + 4)

Para comprobar si se os ha creado correctamente, cierra el terminal y pulsa en el navegador de archivos (segundo icono del menú de navegación). Como podéis ver, vuestra carpeta home ya contiene el directorio www que acabáis de redireccionar.

Carpeta www creada en home

Carpeta www redireccionada a home

Para hacerlo más cómodo todavía, voy a arrastrar el directorio www a mi escritorio al más puro estilo Windows. Selecciono el directorio con el ratón y lo arrastro al escritorio.

Arrastra tu directorio www al escritorio

Arrastra tu directorio www al escritorio

Os dejo el artículo que me ha ayudado para los permisos de directorio

Instalación de un editor html.

Lo primero que necesito, es instalarme un editor, para ello me voy al icono que es como una cesta de la compra (Ubuntu SoftwareCenter) y busco uno. Si os fijáis en el menú izquierdo, haced clic sobre el el tercer punto: herramientas de desarrollo (developer tools)

Ubuntu software. Seleccionando developer tools

Ubuntu software. Seleccionando developer tools

Seleccionamos el icono Web.

Ubuntu software center. Buscando editor html

Ubuntu software center. Buscando editor html

Tras seleccinar, nos muestra una lista de editores html. Vamos a instalar el primero, Bluefish Editor, ya que es el más valorado de todos

Lista de editores html . Seleccionamos el más valorado

Lista de editores html . Seleccionamos el más valorado

Una vez instalado. se nos ancla al menu de navegación, automáticamente.

Bluefish Editor anclado al menú de navegación

Bluefish Editor anclado al menú de navegación

 

Nuestra primera página Web

Abrimos el editor Bluefish. En el menú lateral izquierdo, buscar el directorio que acabais de redireccionar al Escritorio.

Editor Bluefish, buscando mi directorio www

Editor Bluefish, buscando mi directorio www

En el menú superior seleccionamos la pestaña: Standard, y debajo de ella el icono de empiece rápido (quickstart)

Quick start en Bluefish editor

Quick start en Bluefish editor

Se nos abre una ventana donde podemos configurar la página.

En DTD podemos seleccionar si queremos una página HTML5 o anterior.

¿Qué significa ésto? Simplemente son formas de llamar a los elmentos que creemos dentro de la página, que siguen unos estandares a nivel mundial, con lo que ayudamos a que la página no solo se visualice correctamente en todos los navegadores, si no que además, si lo hacemos correctamente, ayudaremos a que nuestro contenido se pueda rastrear y posicionar en los buscadores (google por ejemplo). En mi siguiente artículo daré un pequeño tutorial de html, y como debemos llamar a cada elemento.

DTDhelloworldhtml5

DTD helloworld html5

Con ésto ya tenemos el html preparado para la configuración. Vamos a editarlo. Podéis ver como configurar los meta en éste artículo

Una vez que empezais a escribir, el editor os vá ayudando, ofreciendoos sus sugerencias de html.

Editando html de mi helloworld

Editando html de mi helloworld

Basicamente para que os hagais una idea, una página web se compone de una cabecera y un cuerpo.

<html>

<head></head>

<body></body>

</html>

Cabecera (head): es todo lo que va entre las etiquetas <head></head>

Aquí va todo lo relacionado con el nombre, y configuración de la página. Y es ahí donde enlazaremos a los estilos y scripts de la página.

El cuerpo (body): es todo lo que va entre las etiquetas <body></body>

Aquí es donde ponemos el contenido de la página web. La única precaución que debemos seguir para cumplir los estándares, es llamar a todo por su etiqueta. Por ejemplo <p>Esto es un párrafo</p>

Tras esta pequeña introducción al Html, creo mi primera página web:

Configuracion html

Configuracion html

Visualizando la página

Guardar la página como index.html (En el bluefish editor para guardar hay que dar en el menú superior, al icono tiene una flecha hacia abajo), en el directorio www recién creado.

Abrir vuestro navedador (acordaos que siempre teneis que arrancar el Xampp primero, para iniciar todos los servicios Web, si no lo haceis, no funcionará la pagina)

Teclear localhost/index.html

Hello world

Esto es todo, con esto ya teneis vuestra primera página web funcionando.. En mi próximo artículo os daré un pequeño tutorial de html. No te lo pierdas. Un saludo

hello.cookyourweb

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *