Please note that all the SIEpedia's articles address specific issues or questions raised by IAC users, so they do not attempt to be rigorous or exhaustive, and may or may not be useful or applicable in different or more general contexts.
Esta es la situación: tienes que hacer una página web personal o un proyecto lo que se dice ya, pero no sabes cómo empezar. Aquí va una guía rápida para tener una web en internet si meterse en muchos detalles.
Para hacer páginas web se usa HTML, un lenguaje de marcado muy simple que se crea con un editor de textos. Por ejemplo, una página simple sería la siguiente:
El HTML es un conjunto de etiquetas como <strong>Esto va en negrita</strong> que dan formato a un texto. Para que un documento de texto sea HTML, basta con que esté encerrado entre etiquetas <html> y </html> y posea una cabecera limitada por <head> y </head> y una parte principal donde va el contenido encerrado por <body> y </body>, como en el ejemplo anterior. Dentro de <body> damos formato al texto con otras etiquetas como <p> para párrafos, <h1>, <h2>, <h3>, ... para cabeceras de título, etc. Otras etiquetas HTML comunes son:
Puedes aprender más HTML con estas guias:
aunque lo que sabemos ya es suficiente para seguir.
El HTML es un lenguaje marcado, que indica qué es cada cosa en un documento, un párrafo, un título, una tabla, etc, pero no cómo es o qué aspecto tiene. Aunque HTML tiene propiedades de estilo, para hacer webs actualmente se utiliza HTML sólo para marcado y para el estilo (colores, fuentes, formas, etc.) se usan hojas de estilo o CSS. Las hojas de estilo no son más que otro documento de texto que dice cómo es el aspecto del HTML y ese documento, de extensión .css debe llamarse desde el HTML con una líneas como
el la parte <head> del documentoo incluirse en el propio HTML. Un ejemplo simple de documento CSS sería:
que le da color de fondo gris claro a todo el documento (color hexagesimal #dddddd) pone de color verde todas las cabeceras y le da otras propiedades a los párrafos (etiqueta <p>). Las hojas de estilo tienen bastante más chicha y distintos navegadores a veces las interpretan un poco distinto debido a bugs. Lee más sobre CSS en los siguientes sitios:
En principio, basta con saber algo de HTML y CSS para crear páginas web. Para empezar, deberíamos crear un documento index.html y luego su hoja de estilo, pero como se supone que no tenemos tiempo para eso y en internet hay de todo, usaremos una platilla hecha para empezar. Visita alguno de estos sitios y elije una plantilla que guste y se adapte a la página que tienes en mente:
yo he decidido usar el diseño llamado Sinorca. Bajamos el zip y lo descoprimimos en una carpeta, donde tenemos el index.html (nombre para la página de inicio por defecto) y sus hojas de estilo .css. En principio podemos abrir el index.html con un editor de texto y editarlo al gusto, pero también es muy útil hacerlo con el Composer de Mozilla (ejecutar Mozilla y pulsar Control+4) o con su versión avanzada, nvu, que son editores gráficos de HTML que también permiten editar código. Lo mismo hacemos con la(s) hoja(s) de estilo.
Ahora que cambiamos las partes principales del index.html como el título y los menús a nuestro gusto, podemos crear otras páginas con la misma plantilla:
[japp@carlota ~/web]$ cp index.html trabajos.html
y poner los contenidos que queramos.
Con esto ya está terminada nuestra página básica, sólo necesitamos un sitio dónde ponerla en internet. Para tener un sitio en el servidor externo del IAC, debemos rellenar el formulario de solicitud que está en http://goya/webexterna/ y según sea una página personal o de proyecto nos darán un directorio u otro en un servidor interno y en el externo. Hay que copiar nuestras páginas a ese directorio del servidor interno, al que se accede por /net/rives/si/www/, por ejemplo, para mi página personal, debo copiar todo a
[japp@carlota ~/web]$ cp -r * /net/carlota/datos/ext/galeria/japp/
una vez copiados podemos ver inmediatamente el resultado en el servidor interno apuntando el navegador a:
http://carlota:82/galeria/japp/
si las páginas funcionan correctamente sólo tenemos que usar el formulario web para que se copien en el momento:
http://carlota/devel/distribuir/dist_vivaldi.html
ahora sí podemos ver nuestra página en el servidor externo del IAC:
http://research.iac.es/galeria/japp/
Aunque crear ahora nuevas página copiado index.html es fácil, en caso de necesitar editar partes comunes como el menú de la izquierda o la cabecera, tendremos que hacerlo de una en una, un fastidio si son muchas páginas. PHP nos puede ayudar a mantener fácilmente la página creando una única plantilla con PHP donde incluiremos las páginas que iremos haciendo por separado. La plantilla no es más que el index.html renombrado a index.php con el contenido principal vacío poco con una línea de PHP como esta:
aquí le estamos diciendo que incluya in página llamada $_GET['page'], que una variable en PHP. Ahora sólo hay que decirle qué valor (qué pagina) es es variable y eso se indica por la URL de la siguiente manera;
http://carlota:82/galeria/japp/index.php?page=intro.html
Así enviamos por URL (método GET, de ahí el $_GET) la variable page (que se recoje como $_GET['page']) con valor "intro.html) y así es la página que incluye. Se podrían enviar la variables que quisiésemos así:
http://carlota:82/galeria/japp/index.php?page=intro.html&menu=principal.html&year=2006
Para hacer más simple la URL y sobre todo más seguro, podríamos poner el código PHP como:
de manera que siempre espera páginas .html y así poner en la URL index.php?page=intro únicamente. También sería útil poner unas líneas en caso de que no encuentre la página:
Ahora todas las páginas están en el directorio pages/ y verifica que existe antes de incluirla y si no se pasa ninguna variable que ponga una página de inicio por defecto (home.html).
Par hacer un enlace a cualquiera de estas páginas, por ejemplo desde el menú de la izquierda, basta poner el enlace tal como es pondría en el URL:
Hay que recordar que cuando usamos PHP en una página, el documento debe tener extensión .php y debe subirse al servidor (rives o externo) para probarse; ya no puede cargarse simplemente en el navegador como se hacía con html porque es PHP es un lenguaje de servidor y debe pasar por el servidor para que lo interprete.