GUIA MUY BUENA

Invitado Mar Ago 04, 2009 4:58 am

HOLA LES DEJO ESTA GIA PARA CREAR WEBS

ESPERO Q NO SEA MUY COMPICADO...

Guia rápida para crear páginas web
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.

Lo que hay que saber
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:

[Get Code]
<html>
<head>
<title>Mi primera página web</title>
</head>
<body>
¡Hola mundo!
</body>
</html>

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:

[Get Code]

<a href="http://www.google.com">Enlace a Google</a>
<strong><em>Texto en cursiva y negrita</em></strong>
<img src="image.jpg" width="220" height="100" /> 

Puedes aprender más HTML con estas guias:

Notas de (X)HTML (SIEpedia)
Tutoriales de W3Schools

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

[Get Code]
<link rel="StyleSheet" href="estilo.css" type="text/css" media="all" />

el la parte <head> del documentoo incluirse en el propio HTML. Un ejemplo simple de documento CSS sería:

[Get Code]

body { background-color: #dddddd;}

h1,h2,h3 {color: green;}

p {
text-align: center;
color: black;
font-family: arial,verdana,helvetica;
}

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:

Notas de CSS (SIEpedia)
Tutoriales de W3Schools
Guia CSS de htmlhelp.org

Manos a la obra
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:

Open Source Web Design
Open Web Design

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@marta ~/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/gabinete/web/ 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@marta ~/web]$ cp -r * /net/rives/si/www/galeria/japp/

una vez copiados podemos ver inmediatamente el resultado en el servidor interno apuntando el navegador a:

http://ttwww/galeria/japp

si las páginas funcionan correctamente sólo tenemos que esperar a que se copien automáticamente al servidor externo cada varias horas o usar el formulario web para que se copien en el momento:

https://ttwww/sic/distribucion/dist.html

ahora sí podemos ver nuestra página en el servidor externo del IAC:

http://www.iac.es/galeria/japp

Una plantilla simple con PHP
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:

[Get Code]
<?php
include ($_GET['page']);
?>

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://ttwww/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://ttwww/galeria/japp/index.php?page=intro.html&menu=principal.html&year=2006

Para hacer más simple la URL, podríamos poner el código PHP como:

[Get Code]
<?php
include ($_GET['page'] . ".html");
?>

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:

[Get Code]
<?php
if (isset($_GET['page'])) {
$page = $_GET['page'];
if (file_exists("pages/$page.html")) { include ( "pages/$page.html");
}
else {
print "<h2>Page not found</h2>";
}
}
else { include ("pages/home.html");
}
?>

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:

[Get Code]
<a href="?c=intro" title="Presentación de mi sitio">Introducción</a>
<a href="?c=enlaces" title="Enlaces relacionados">Enlaces</a>

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.

Para saber más de PHP
http://www.freewebmasterhelp.com/tutorials/phpmysql
http://es.tldp.org/Manuales-LuCAS/manual_PHP/manual_PHP/index.htm
http://www.ignside.net/man/php/