- Crea tu web

Crea tu Web

Introducción:

Les voy a hacer varios "tutorials" (explicaciones) de como trabajar en una página, como hacerla, un poco de HTML, PHP y otras cositas. Esto les puede servir de base, para que empiecen con su primera página y luego busquen información mas compleja sobre los temas expuesto aquí.

Tabla de Contenido:

1- Idea
2- Programas Necesarios y Útiles
-> Editor HTML
-> FTP
-> Gráficos
3- Hospedaje
4- HTML
5- PHP
6- Publicidad
7- Servicios y Ayuda

Idea:

Muy probable, les va a parecer entupido a muchos que divida una parte del �tutorial� para la �idea�. Pero es una parte muy importante, ya que si no tienes una vision clara de lo que quieres hacer no llegaras a ningún lado. Ahora es el momento de pensar en tus gustos, ¿Qué te gusta? ¿Por qué quieres hacer una página de eso? ¿Qué nombre le pondré a la página?

Digamos que te decidiste ya por una Web de video juegos, para informar a la gente y aprender mas de los videos juegos. Escoge un nombre que nadie tenga (busca en www.google.com diferentes nombres, y el que no salga ninguna Web con ese nombre, pues úsalo.) Desde ahora ten en cuenta que es importante ser originales, empezando desde el nombre de tu Web, hasta el contenido que esta en ella.

Programas Necesarios y Útiles:

-> Editor HTML

Si eres un principiante y nunca has trabajado con HTML ni PHP. Es muy recomendado (y necesario) que tengas un editor de HTML. Un editor de HTML es un programa que instalas en tu ordenador (computadora/PC) que lo puedes usar para hacer tablas, ver códigos HTML antes de subirlos a tu Web, etc.

Para hacer AnimeOmega y Pokémon de Puerto Rico yo utilicé un editor de HTML llamado �Microsoft Front Page�. Lo puedes comprar en cualquier tienda que vendan programas para PC o lo puedes bajar de KaZaA (busca: �Office XP with Front Page� y te saldrá).

Pero ese programa no es tu única opción, en la sección de programas de AnimeOmega (http://animeomega.com/home.php?id=downloads/programas.htm) de ahí puedes bajar el �Macromedia Dreamwaver MX� y el crack (el crack es otro programa que hace gratis el programa�).

-> FTP

Una ves ahí, vas a necesitar un programa de FTP. En la sección de programas de AnimeOmega hay varios y también en: www.download.com

*FTP = File Transfer Protocol*

El programa de FTP se usa para conectarse al servidor de hospedaje donde esta tu web, y asi que puedas subir tus archivos.

Programas de FTP recomendados: (solo 1 es nesesario!)
- Cute FTP Pro
- WS_FTP Pro

Trabajar con un sistema de FTP es fácil� solo tienes que dale a �new� poner estos datos.

EJEMPLO de info. de un hospedaje en miarroba.com:
Host: user.webcindario.com
Usuario (User): user
Contraseña (Password): micontraseña

Después de eso dale al botón de conectar (conect) y listo, solo tienes que pasar los files de tu PC a tu hospedaje. Buscas el file que quieres subir en tu PC, poner el Mouse sobre el file, dejas el Mouse pegado y mueves el file hacia la ventanita que se conecto al servidor (la cual muestra todos los files que has subido)� esa es una forma de subir files.

Miarroba.com, por ejemplo tiene un �Web FTP� en el Control Panel, que solo tienes que buscar los files y subirlos y listo! Nada de conectar a un programa� pero es mas lento este proceso echo de esta forma y mucho mas limitado.

-> Gráficos

Ahora necesitas un programa para editar gráficos, recomiendo el Fireworks MX de la sección de programas de AnimeOmega. Trabajar con el Fireworks es sensillo, abres el programa, le das a �New� (Nuevo), escoges unas medidas (700 x 200 por ejemplo) para hacer un banner de cabecera para la Web (tu escoges el tamaño que mas te guste), luego de eso se abre un cuadro del tamaño que escojistes, ahí le pones fotos (click derecho --> import --> buscas la foto --> Ok --> clic para ponerla) y pones texto (Ctrl + T)� cuando termines tu banner lo puedes guardar de 2 formas.

File
--> Save As.. --> le pones un nombre a la imagen y la guardas en formato �.png�. Si la guardas así puedes darle OPEN y abrir la foto para editarla, pero al ser .png tendrá mucho peso como para ser puesta en la web, asi que la tienes que guardar de otra forma.

La 2da forma de guardar una imagen seria. File --> Export Preview (Exportar) --> escoger de formato .gif o .jpg --> Export� --> ponerle nombre a la imagen --> Ok. Asi la foto esta guardada en formato jpg o gif, tiene poco peso, pero no se puede editar. La foto que guardes con este 2do procedimiento, es la que pondrás en tu página.

Básicamente eso es todo lo que necesitas por ahora�

Hospedaje:

Vas a tener que hospedar tu Web en algún lugar� AnimeOmega por ejemplo esta hospedada en www.iefactory.com.

El termino hospedaje = servidores donde puedes subir tu Web, para compartirla con el publico general.

Un buen servidor gratis para comenzar es: www.miarroba.com

Ellos dan suporte PHP, 20 MB de espacio, una cuenta de MySql y solo ponen un pequeño botón de miarroba al final del tu página.

Es muy fácil sacar hospedaje ahí, solo tienes que ir a su pagina (www.miarroba.com) rellenar un formulario con tu nombre de usuario, contraseña, etc. Y activar tu espacio de Web (mira el menú donde dice �Espacio de Web�)

Una ves tengas tu espacio vamos a continuar con la creación de tu página.

Otras alternativas de hospedaje (Buscador de Hospedaje):

http://www.clickherefree.com/hosting-free/

Free Hosting/Hospedaje Gratis:

www.freewebs.com
www.lycos.fr
www.lycos.es
www.iespana.es
www.50free.com
www.100free.com
www.geocities.com
www.iefactory.com
www.metropoliglobal.com

*Les recomiendo que los visiten todos, luego de verlos todos, escojan el que les parezca mejor y lo traten� si no resulta pues cambien a otro que consideren mejor. Suerte!

*Otra recomendación, es sacar otro e-mail en (yahoo.com o hotmail.com) ya que muchas veces cuando te registras te piden el e-mail y se te puede llenar el Inbox (bandeja de entrada) de SPAM (e-mail no deseado).

HTML:

No pretendo enseñarles a ser unos maestros en HTML ni nada por el estilo, para eso hay tutorials de varias páginas (busquen en www.google.com). Esto es bien breve, pero les servirá de introducción al mundo del HTML.

Antes de ir al HTML como tal, tienen que abrir el editor de HTML que instalaron previamente. Si no lo han instalado, pues bájenlo e instálenlo ahora.

Una vez abierto el editor de HTML podemos comenzar a hacer la Pág.. Vamos a empezar haciendo� les voy a explicar como hacer unas tablas y cositas y ustedes modifican a su gusto!

-> Hacer Tablas

Puedes hacerlas fácilmente con Front Page, Dreamwaver, y hasta Microsoft Word, pero para que tengan el conocimiento. Lean sobre el HTML de las tablas.

Importante nota para principiantes:

<código> (abrí el código)
</cerrar el código> (vea la �/� que añadí, eso cierra el código)

Para hacer una tabla, vas a la sección de HTML (en front page por ejemplo y pones códigos como los siguientes.) Si por alguna razón no te sale el código (si no el texto con color, igual que lo copiastes. Trata de escribir el código tu solo, o primero pasar el código a Notepad y luego pasarlo al editor de HTML. Aquí están los códigos resaltados con el color rojo.

<TABLE> y </TABLE> son las etiquetas donde está contenida la tabla
<TR> y </TR> son las etiquetas que indican el comienzo y fin de una fila (<th> y </th> si es una fila de cabecera)
<TD> y </TD> señalan una celda.

La tabla se va definiendo declarando una fila y a continuación las celdas que contiene esa fila, luego otra fila y sus celadas, etc. No es necesario que todas las filas contengan el mismo número de celdas.

La tabla (2x2) más sencilla que podemos hacer es la siguiente:

<TABLE >
<TR>
<TD>1 </TD> <TD> 2 </TD>
</TR> <TR>
<TD>3 </TD> <TD> 4</TD>
</TR>
</TABLE>

Y verás algo asi:

1	2
3	4

Puedes añadirle cosas como:

BORDER="5" . Indica el tamaño del borde en píxels, en este caso 5. Si no se indica nada� pues no tiene ningun borde la web.
WIDTH="5" o WIDTH="50%" . Es el ancho de la tabla, puede especificarse en valor absoluto (5 píxels) o como un porcentaje (50% del ancho disponible)
CELLSPACING="2" . Es el espacio entre las celdas, por defecto es 2
CELLPADDING="5" . Es el espacio entre el contenido de las celdas y el borde de las mismas, por defecto es 1
ALIGN=" left", "right", "center" . Alinea la tabla a la izquierda , derecha o en el centro.

Puedes ver el diseño aquí:

------------
servicios/layout.htm
------------

Ya sabemos algo de HTML� y tenemos un diseño que podemos editar/mejorar/cambiar. Cortesía de Ryuujin, webmaster de AnimeOmega.

Si quieres aprender PHP te recomiendo que busques manuales por www.google.com igual si quieres aprender bien el HTML. Pero aqui les doy una breve introduccion y unos códigos bastante buenos.

Para este tutorial debes saber un poco de HTML y tu hospedaje debe aceptar códigos PHP de lo contrario no servirá...

-> Paso 1 - PHP Basico

PHP es otro lenguaje de programar, es un excelente complemente para el HTML (y visa versa). Pero para empezar a trabajar en PHP debes decirle a tu Server que esto es en PHP. Igual que el HTM hay códigos para abrir y cerrar PHP que los puse a continuación.

<? (abir codigo PHP)
?> (cerrar codigo PHP)
y así sucesivamente... estos también tienen la misma función:

1. <? ?>
2. <?php ?>
3. <% %>
4. <script language="php"> </script>

El #2 es el ideal, el que yo recomiendo almenos.

Las extensiones PHP tienen que ser: .php, .phtml, .php3, ó .php4

Todo depende de lo que te de tu hospedaje + lo que quieras usar.

-> Paso 2 - Hacer un file PHP

Vamos a comenzar a hacer algo, envés de solo leer y leer. Has un file que se llame "test.php" (sin las "comillas"). El código PHP lo voy a representar con letra azul y el HTML con letra roja.

Codigo que vas a poner en test.php:

<? include('http://tu_web.com/arriba.txt'); ?>

<p>Mira mi web!<p>

<? include('http://tu_web.com/abajo.txt'); ?>

Guarda el file: test.php

Te preguntarás, que significa "include" eso significa "incluir". Osea que si pones un file de texto llamado "arriba.txt" en http://tu_web.com/arriba.txt y luego pones otro file llamado "abajo.txt" en http://tu_web.com/abajo.txt pues la información que esta dentro de esos files se va a reflejar en "test.php" gracias al código PHP que pusiste. Ahora pones ese código PHP en tu diseño y solo tienes que editar "arriba.txt" y la parte de arriba de tu Web se actualizará en todas las páginas al editar solo 1 file (arriba.txt por ejemplo.). Eso hace que la actualización sea súper fácil. Recuerda que todas las extensiones (el final) de los files deben estar .php

-> Paso 3 - Hacer ejemplos de "arriba.txt" y "abajo.txt"

Código para arriba.txt:

<html>
<head><title>Mi web</title></head>
<body bgcolor="#FFFFFF" text="#ffffff">

<p>menú: link link link link</p>

Código para abajo.txt:

<p>Gracias por visitar!</p>
</body></html>

Guarda ambos files.

-> Paso 4 - Sube todos los files

Una ves hayas subido todos los files, verás lo que dije mas arriba sobre actualizar la web y usar los "include".

Ahora vamos a PHP, para que sea facil actualizar la web, les enseñare un truquito (osea, un codigo PHP) que estoy usando en AnimeOmega.

El codigo PHP lo puse con color azul, para que lo puedan distinguir fácilmente.

<?php $page=$_GET['id'];
define('IN_SITE', true);
if(FILE_EXISTS("$id")) {
include("$id");
} else { include("ALGO.HTM");
} ?>

Pues eso lo pones en donde quieras que salga el contenido de tu web (debajo del banner y alado de la/s tabla/s por ejemplo). Una ves hayas puesto ese codigo en un file php (index.php por ejemplo). Vas a subir el file, y vas a ir a:
www.tu_web.com/index.php

Ahora, vas a ir a note pad y escribir:

<b>test</b>

Ese texto lo guardas en �test.txt�
Subes el file en el mismo directorio que esta el index.php

y vas a buscar:
www.tu_web.com/index.php?id=test.txt

El la direrccion + el codigo PHP que pusistes básicamente esta diciendole al navegador �vas a sacar el diseño del index.php y la información del text.txt)

En el codigo veras lo que dice �ALGO.HTM� eso lo cambias por el file que quieres que salga donde va la info. en el file index.php (por ejemplo, el file de las noticias, que podria ser news.txt)

Publicidad:

Ahora que tienes lista tu página en la web. Necesitad darla a conocer al mundo, y hay muchas formas para hacer esto.

-> Buscadores

Hay muchos buscadores que simplemente tienes que rellenar una información, pones el link de tu web y listo.

Algunos links:

www.google.com
www.yahoo.com
www.altavista.com
www.wepa.com
etc.

-> Intercambios de Banner/Botones

Esto es muy sensillo, te registras y pones un codigo HTML donde se mostrara 1 web de uno de los miembros del intercambio y por cada banner que tu pongas te dara un credito para tu web y tu web saldrá en 1 de los banner de los otros miembros del intercambio.

Aquí hay un buen intercambio de banners:
http://elanime.com/animebannerxchange/

-> Topsite

Un topsite es una lista de paginas que son ordenadas deacuerdo a la cantidad de visitas que resiban. Para contar la cantidad de visitas que resiben tienes que poner un boton. Algunos sistemas de topsite enves de contar las visitas cuentan cuantas personas le dan clic al boton del topsited desde tu web.

Aquí hay un buen topsite:
http://animeomega.com/fclick/fclick.php?fid=anitop

-> Directorios de Links

Básicamente un lugar donde hay muchos links/enlances ordenados por categorías, es bien paresido (de no ser igual) a un buscador, solo que muchas veses estos directorios tienden a ser mas pequeños que los buscadores (un buscador: www.google.com que ya lo mensione arriba).

-> Informate

Entra a foros, busca amigos que tengan páginas, conose personas que ya hayan echo una web, o busca un amigo que quiera ayudarte a hacer la web asi aprenden juntos o si el ya sabe te puede enseñar a ti. Recuerda que en la union esta la fuerza! Asi que yo te deseo mucha suerte si desides hacer tu paginas de web!

Servicios y Ayuda:

-> Servicios

Si sabes ingles y tienes bastante conocimiento de PHP y HTML te recomiendo que instales tus propios �servicios� o �scripts�. Aquí podras encontrar muchos: www.hotscripts.com

De no saber tanto, simplemente con reyenar información puedes tener muy buenos servicios en tu web.

E-mail Gratis:
www.zzn.com ahí puedes dar un servisio de e-mail gratis a tus usuarios, es completamente gratis para ti y para los usuarios. El e-mail seria algo asi: usuario@tuweb.zzn.com (webmaster@animeomega.zzn.com por ejemplo)

Foros:
Los foros son una comunidad virtual donde la gente puede poner temas y post, y comentar sobre ellos. Aquí puedes hacer unos foros sin publicidad ni nada: www.foros.ws

Contador:
Un contador cuenta las visitas a tu web (desde que lo instalas, hasta que lo quites de tu web). Puedes conseguir un buen contador aquí: http://www.bcentral.com/products/fc/default.asp

Estadisticas:
Básicamente un contador pero mas complejo, cuenta las visitas que entran cada dia a tu página, da información sobre donde viene la persona, etc. Puedes ver un ejemplo del contador en el botoncito azul alfina de la tabla izquierda de AnimeOmega. Puedes conseguir un buen contador (gratis!) aquí: http://www.nedstatbasic.net/

-> Ayuda

Si necesitas ayuda en cualquier detalle, cualquier pregunta (aunque pienses que la pregunta es tonta), puedes venir a la parte de tecnología/webmaster del foro de AnimeOmega y preguntar cualquier cosa sobre tu página y la creación de ella