[GUÍA] Como iniciarse en el mundo del diseño Web

vallekano

Bueno, visto que he recibido varios mails preguntándome por como hacer una Web o preguntas sobre SQL, hosting, etc… voy a hacer un mini tutorial de cómo empezar en este mundo del diseño Web. Primero comentar que hay “paquetes” para portales ya hechos como puede ser el phpnuke o foros como este en el que ponerlos a funcionar no tiene ningún misterio, pero la idea que tengo es como orientar a alguien que realmente lo que le interesa es aprender y no tener una Web operativa en 2 días. Espero no extenderme demasiado aunque ya me conocéis. xD Empecemos…. Entorno de trabajo Lo normal al hacer una Web es tener un entorno de test en el que desarrollar y modificar todo y una vez algo funcione pasarlo al entorno “real”. Como en todo hay que empezar por el principio y el principio es el HTML solo. El HTML es el lenguaje básico de toda Web. TODA, y repito, TODA Web lleva HTML como base. El HTML es un lenguaje muy sencillo que se puede aprender en una tarde. Es texto normal y corriente con una cierta sintaxis que el navegador (firefox por ejemplo) interpreta. Aprovecho para aclarar para los programadores que el HTML, PHP, ASP y similares no se compilan. No es como un programa en C que hay que compilar, en este caso es simplemente texto. Aquí tenéis un par de enlaces muy buenos para aprender, ya que el objetivo de este mini tutorial no es el hacer un manual de HTML, PHP ni ningún lenguaje por el estilo. <a href="http://www.programacion.net/html/tutorial/curso/" target="_blank">http://www.programacion.net/html/tutorial/curso/</a> <a href="http://www.webestilo.com/html/" target="_blank">http://www.webestilo.com/html/</a> Como he dicho hace falta un entorno de trabajo y en este caso el entorno es una carpeta sin más. El HTML es un texto guardado en un archivo con extensión .htm o .html el cual si abrimos con nuestro explorador (y si está bien escrito) nos interpretará. De la misma forma mediante enlaces podremos navegar por nuestra Web poniendo todos los archivos (paginas) en el mismo directorio o bajo este. Añadiendo dinamismo (Javascript) Si aquí acabase todo pues no se pagarían tantos € por una Web. El problema del HTML es que es totalmente estático por lo que es como si mostrásemos una foto pál caso. Por ello existe JavaScript. Javascript es un lenguaje con una sintaxis parecida a C o Java y podríamos decir que es levemente orientado a objetos. Es un lenguaje más complejo y si no se sabe nada de programación puede asustar mucho al principio. Este lenguaje se “incrusta” dentro del HTML de manera que podamos añadir dinamismo. Se pueden hacer cosas cuando ocurren eventos. Por ejemplo al pasar el ratón por encima de algún sitio, al pulsar una tecla, al pinchar, al redimensionar la ventana, etc… Esto nos permite hacer “chorradillas” como que al poner el ratón encima de una imagen esta se cambie por otra, o que suene un sonido, o incluso el que una imagen de un gato nos siga el ratón. Cosas que todos hemos visto. Pero también se usa para cosas importantes como para comprobar que los datos de un formulario tienen el formato que tienen que tener y si por ejemplo el email no es correcto darnos un mensajito. Todos lo hemos visto también. El código Javascript es código que ejecuta el navegador por lo que nos sigue funcionando el entorno anterior. <a href="http://www.webestilo.com/javascript/" target="_blank">http://www.webestilo.com/javascript/</a> <a href="http://www.desarrolloweb.com/manuales/20/" target="_blank">http://www.desarrolloweb.com/manuales/20/</a> ¿Y si necesitamos más? (PHP/ASP) Bueno, ya sabemos hacer páginas más “entretenidas” pero siguen si ser muy funcionales porque si la Web es un poco grande pues puede ser una locura escribir cosas 40 veces. Por ejemplo, supongamos que para la cabecera de la página usamos 25 imágenes con 27 tablas (es un ejemplo eh!!) y que tiene código javascript y mil cosas más. Bien, pues en cada pagina que hagamos tendríamos que copiar este código. También imaginaros que quiero sacar una lista en HTML de los 200 primeros números. Lo cual sería así: <pre><lu>
<li>1
<li>2
<li>3
<li>4
<li>5
.
.
.
<li>200
<lu></pre> Vamos, que puedes flipar. Bien, en estos dos casos un lenguaje como el PHP o el ASP nos ayuda mucho. Ambos lenguajes son parecidos. ASP es mucho más claro de leer y es más cómodo de escribir (opinión personal) pero por el contrario PHP es mucho más potente. Pero para un usuario normal (y no tan normal) cualquiera nos vale. En el primer caso (de la cabecera) haríamos un archivo llamado “cabecera.php” (hablo de PHP pero sería similar) con las 25 tablas y todas las imágenes de la cabecera. O sea, meteríamos solo el principio de una de las páginas. Y entonces en cada una de las páginas que creemos solo tendríamos que poner: <pre><?php include(‘cabecera.php’);?></pre> Con esto lo que haríamos es “incrustar” el archivo cabecera que acabamos de crear cada vez que se pida la página. Además esto tiene la ventaja de que cambiando el “cabecera.php” cambiaríamos la cabecera de todas las páginas ya que usan el mismo archivo. Pero CUIDADO!!!! Si metéis ese código y abrís vuestro archivo con el explorador no os funcionará. Y porque??? Pues porque el PHP y similares son lenguajes que no ejecuta el navegador, sino que se ejecutan en el servidor Web. ¿¿¿En el que??? Bien, hasta ahora no nos hacía falta servidor Web para probar ya que todo se ejecutaba en el navegador pero ahora nos es necesario. Habrá que instalar uno (recomiendo <a href="http://www.apache.org/" target="_blank">Apache</a>) y además habrá que instalar <a href="http://www.php.org" target="_blank">PHP</a> (o el que corresponda) para que sepa leer PHP. Tras configurar Apache correctamente para configurar nuestra carpeta de trabajo como la que tiene las páginas Web abriremos nuestro explorador y accederemos a <a href="http://localhost" target="_blank">http://localhost</a> Esta es nuestra dirección local. Acabamos de instalar un servidor en nuestro PC y si alguien se conecta a <a href="http://mi_ip" target="_blank">http://mi_ip</a> verá la Web. Si todo ha ido bien (que el instalar estas cosas a veces da bastante por saco) si accedemos a <a href="http://localhost/mipagina.php" target="_blank">http://localhost/mipagina.php</a> veremos como ahora si que funciona. NOTA: Ahora las páginas en vez de extensión .htm o .html tiene .php Esto es recomendable hacerlo en las páginas que tengan código PHP dentro, y las que no tengas dejarlas con .htm o .html. El funcionamiento es el siguiente: Cuando tu en el explorador pones <a href="http://localhost/mipagina.php" target="_blank">http://localhost/mipagina.php</a> estás haciendo una petición al servidor Web. Este coge el archivo “mipagina.php” y ejecuta todo el código PHP que se encuentra y te devuelve el resultado. En el caso de la cabecera el navegador NO recibirá el archivo “mipagina.php” y el “cabecera.php” y meterá el segundo dentro del primero. Será el servidor el que cogerá el segundo, lo meterá dentro del primero y el resultado (un único archivo) lo devolverá al navegador. Por esto es imposible ver el código PHP de las paginas Web que hay por ahí (este foro por ejemplo) porque se ejecuta en el servidor y el servidor nos devuelve el resultado (que debería ser código HTML válido), que es el que veremos. En el caso de los 200 números podríamos hacer: <pre>
<lu>
<?php
for ($i = 1 ; $i <= 200 ; $i++){
echo “<li>” + $i;
}
?>
</lu>
</pre> O sea, el servidor al ver este archivo nos devuelve el “<lu” ya que es HTML y luego se encuentra con código PHP, el cual ejecuta (es un bucle) y lo que hace es escribir: <pre>
<li>1
<li>2
<li>3
.
.
<li>200
</pre>y devolvérnoslo. Pero nuestro navegador no verá nada de PHP. Vamos, que el que vea la página no sabrá si se ha hecho “a mano” o con PHP. Pero como veis es mucho más cómodo para el programador. PHP tiene muchas utilidades Por ejemplo se pueden usar SESSIONES (para guardar variables globales como el lenguaje, el usuario conectado, etc..), se pueden usar Cookies, procesar los datos enviados en un formulario, cargar diferentes hojas de estilo, etc… Bueno, tiene mucha miga y aquí si que hay muuuucho que aprender. <a href="http://es2.php.net/manual/es/index.php" target="_blank">http://es2.php.net/manual/es/index.php</a> <a href="http://www.webestilo.com/php/" target="_blank">http://www.webestilo.com/php/</a> Rizando el rizo Y ya el último eslabón es el uso de bases de datos. Con bases de datos si que tenemos un abanico de posibilidades inmenso. Para usar una tendremos que instalar un servidor de bases de datos como puede ser <a href="MySQL" target="_blank">MySQL</a> @psgonza: <blockquote>Instalar APACHE+PHP+MySQL es windows es un poco rollo si lo haces por separado. Yo os recomiendo que useis APPSERV (<a href="http://www.appservnetwork.com" target="_blank">http://www.appservnetwork.com</a>) : AppServ 2.4.3 # PHP 4.3.10 # Apache 1.3.33 # MySQL 4.1.8 # Zend Optimizer 2.5.7 # phpMyAdmin 2.6.1-rc2 Todo eso en un solo paquete instalable al estilo windows, y que lo deja funcionando a la perfeccion. Ojo, esto lo recomiendo para hace las pruebas en el equipo de trabajo, no para estar de server de cara a internet…</blockquote> Bueno, aquí no me voy a extender más. Solo decir que para acceder a la base de datos se usa PHP o ASP y con todo lo comentado hasta aquí se puede hacer la Web más profesional que os imaginéis. Solo es cuestión de tiempo y sobretodo imaginación. Vale, ya tengo la Web en mi PC, ¿y ahora que? Bueno, ahora hay dos opciones. Alojar la Web en vuestro propio PC o en alguno de otra empresa (hosting). En mi PC (mu friki xD): Bien, lo lógico sería configurar nuestro servidor Apache para que si uso el puerto 80 (por defecto) use una carpeta y si uso otro (el 8080 por ejemplo) use otra carpeta. Esto se llama servidor virtual. De esta manera si accedemos a <a href="http://localhost:8080" target="_blank">http://localhost:8080</a> accedemos a nuestro entorno de test (lo suyo sería configurarlo para que solo se pueda acceder desde nuestro PC) y si accedemos a <a href="http://localhost:80" target="_blank">http://localhost:80</a> accedemos a nuestro entorno real, que es el que verá todo el mundo. Hay que tener en cuenta el ancho de banda que tenemos ya que puede que si estamos muy justos la página le valla fatal a la gente. Y que el PC tiene que estar siempre encendido porque sino la página no estará disponible. En otra empresa: Aquí vuelve a haber otras dos opciones: - Hosting Gratuito: Lo ofrecen muchos portales como lycos por ejemplo. Aquí se hablan de algunos: <a href="http://www.hardlimit.com/forum/showthread.php?t=28918&highlight=hosting+gratuito" target="_blank">http://www.hardlimit.com/forum/showthread.php?t=28918&highlight=hosting+gratuito</a> <a href="http://www.hardlimit.com/forum/showthread.php?t=16966&highlight=hosting+gratuito" target="_blank">http://www.hardlimit.com/forum/showthread.php?t=16966&highlight=hosting+gratuito</a> Te darán una cuenta FTP con el que subir todos los archivos y si admite base de datos alguna página a través de la cual administrarla. - De pago: Por ejemplo: <a href="http://www.piensasolutions.com/" target="_blank">http://www.piensasolutions.com/</a> El procedimiento es igual que el anterior. ¿Entonces cual? Las diferencias son que el gratuito normalmente meten publicidad en la página con lo cual queda muy feo y da mucho por saco. Además que sueles estar restringido a poco espacio o que no tienen bases de datos. El de pago pues hay que mirar que necesitamos pues cuanto más necesitemos más nos cobrarán (ancho de banda, espacio, bases de datos, PHP, soporte de mail, etc…) Dominio Bien, ya la tenemos en algún sitio xD pero como accedemos a ella?? Supongamos que está en mi PC, aunque el tema es similar. Para que mi tía la del pueblo vea mi página tendrá que poner <a href="http://mi_direccion_ip" target="_blank">http://mi_direccion_ip</a> Y claro, para empezar no creo que se acuerde, y claro a ver como pones tu Web así por ahí………….imposible. Lo suyo es que accedas en plan <a href="http://www.midominio.com" target="_blank">http://www.midominio.com</a> o .es o .org o .pp xD Para eso hay que obtener un dominio. Los hay gratuitos, de los que recomiendo el .tk (<a href="http://www.dot.tk/" target="_blank">http://www.dot.tk/</a>) tenéis que registraros, elegir el dominio que queréis (y que no esté usado) y poner a que IP tiene que apuntar. Así al poner el dominio de manera transparente se redirecciona a vuestra Web. NOTA: Cuidado con la gente que tiene IP dinámica que habrá que cambiarlo cada vez que nos la cambien y puede ser un autentico rollo. Y los hay de pago como por ejemplo los .com (unos 10€ anuales). A gusto del consumidor. Y creo que no me dejo nada así por encima. Al final me ha salido muy largo (si ya lo sabía yo xDxD). Espero que a alguno os sirva. Chao.

psgonza

Solo añadir una cosa Vallekano…

Instalar APACHE+PHP+MySQL es windows es un poco rollo si lo haces por separado.

Yo os recomiendo que useis APPSERV (http://www.appservnetwork.com) :

AppServ 2.4.3

PHP 4.3.10

Apache 1.3.33

MySQL 4.1.8

Zend Optimizer 2.5.7

phpMyAdmin 2.6.1-rc2

Todo eso en un solo paquete instalable al estilo windows, y que lo deja funcionando a la perfeccion.

Ojo, esto lo recomiendo para hace las pruebas en el equipo de trabajo, no para estar de server de cara a internet…

Espero que os sirva de algo

salu2

vallekano

Pues mira, yo no conocía ese paquete y siempre me he vuelto loco instalando cada cosa por separado.

Forenaits

Esta muy bien tu miniguia Vallekano, precisamente esta tarde he reinstalado el appserv para hacer un par de webs com Mambo Open Source (cms).

Ovatha

yo utilizo un paquete que se llama foxserv.

ahora mismo estoy montando un e107, y traduciendolo al español algunas cosas, e intentando meter un pluggin de galeria de imagenes, todo para una ong

Yorus

Bueno, pués me estoy poniendo a buscar un hosting baratito y he llegado a esta rama. Solo una pregunta, ¿como es que esta rama no está fijada?. Moderadores, tiraros el rollo… ;D

vallekano

@Yorus:

Bueno, pués me estoy poniendo a buscar un hosting baratito y he llegado a esta rama. Solo una pregunta, ¿como es que esta rama no está fijada?. Moderadores, tiraros el rollo… ;D

Gracias por esa petición, jeje. Te debo una nave de batalla :risitas: :risitas:

MonXP

Me uno a la petición de fijar esta rama. Me parece muy completa y útil. Gallifante positivo para tí.

Nota mental: Tengo que empezar a jugar a OGAME, así vallekano me regalará una nave de batalla también.

Dami

Estoy empezando en este mundo de la programación/diseño web, gracias vallekano por tu guía, como consulta y recomendación te pido si puedes ampliarla con comentarios acerca de editores web como Dreamweaver o Frontpager, es decir cuando utilizarlos, su conveniencia, etc.

Gracias y un saludo.

Elwe

@vallekano:

Gracias por esa petición, jeje. Te debo una nave de batalla :risitas: :risitas:

Mu wena Vallekano, pagando en especie

Pepe

Simplemente comentar otro paquete: wamp
www.wampserver.com
muy buena la guía

saludos

tilt

Va, otro que tb busca hosting, sugerencias?

vallekano

De pago??
Abansys NO te lo recomiendo.

Por una cosa solo: Tienen desactivado en el servidor web la opción de que te muestre los errores PHP en el explorador. Y es una %&&/(/·

Osea, si te falta un ";" pues lo normal es que tu ves el error al cargar la página. Pues con esta gente no, se queda la página en blanco con lo cual es una locura depurar.

Además si vas a tratar con imágenes (galería GD) no tienen casi juego. Si la imagen supera los 250-300KB muchas veces la página da error.

Ahora, no se cual recomendarte. Tampoco tengo referencias.

tilt

si, de pago..

masj

@vallekano:

De pago??
Abansys NO te lo recomiendo.

Por una cosa solo: Tienen desactivado en el servidor web la opción de que te muestre los errores PHP en el explorador. Y es una %&&/(/·

Osea, si te falta un ";" pues lo normal es que tu ves el error al cargar la página. Pues con esta gente no, se queda la página en blanco con lo cual es una locura depurar.

Además si vas a tratar con imágenes (galería GD) no tienen casi juego. Si la imagen supera los 250-300KB muchas veces la página da error.

Ahora, no se cual recomendarte. Tampoco tengo referencias.

Las paginas se depuran en un ordenador cercano, no en web. Solo tienes que montar el server de prueba en tu ordenador.

Un saludo.

vallekano

@masj:

Las paginas se depuran en un ordenador cercano, no en web. Solo tienes que montar el server de prueba en tu ordenador.

Un saludo.

Si, pero no.

Efectivamente (está puesto en la guia) tu programas en un entorno de test, que lo lógico es que sea tu PC o alguno que esté en una red local para que sea rápido el trabajo.

Pero luego la realidad no es tan bonita y cuando pasas al entorno real hay cosas que no funcionan. Te lo digo por experiencia.

Por ejemplo, cosas que me han pasado:

Tu tienes una librería GD más nueva que la del entorno real y en tu PC va pero en el host no.
Time-outs más cortos en el host. Esto me pasó con unos scripts que redimensionaban una burrada de fotos (muy garndes) a la vez, y en el host daban time-out.
El tamaño de imagen usable. En mi PC lo tenía configurado para trabjar ocn imagenes muy grandes, pero en el host no.
Distintos permisos de escritura/lectura sobre arichivos/directorios… etc

Vamos, que al final es muycomún que algo no funcione igual, y lo lógico es que el servidor "cante" los errores.

Gunfett

Rescato la rama, que estaba un poco pez el tema de webs, un 10 para Vallekano.

Una pregunta, con php se puede hacer una web tipo blog?
Lo digo porque un amigo me ha ofrecido que le haga una web, el diseño y los hostings y tal me lo curro yo, pero el quiere actualizarla semanalmente (fotos y texto) como un weblog.
Aparte de weblog tendra secciones fijas, de las que me encargaria yo. (como por ejemplo tu pagina Vallekano ;D )

Mi pregunta es, ¿podria montarla yo en mi pc, e instalarle a mi amigo algun tipo de software para que el desde su casa añada nuevas entradas cuando le apetezca ?
Otra cosilla, las noticias con mas de X dias que desaparezcan de forma automatica, sin tener que eliminarlas a mano, se podria hacer no ?

PD: a ver si la fijan que es muy util

vallekano

@Gunfett:

Rescato la rama, que estaba un poco pez el tema de webs, un 10 para Vallekano.

Una pregunta, con php se puede hacer una web tipo blog?
Lo digo porque un amigo me ha ofrecido que le haga una web, el diseño y los hostings y tal me lo curro yo, pero el quiere actualizarla semanalmente (fotos y texto) como un weblog.
Aparte de weblog tendra secciones fijas, de las que me encargaria yo. (como por ejemplo tu pagina Vallekano ;D )

Mi pregunta es, ¿podria montarla yo en mi pc, e instalarle a mi amigo algun tipo de software para que el desde su casa añada nuevas entradas cuando le apetezca ?
Otra cosilla, las noticias con mas de X dias que desaparezcan de forma automatica, sin tener que eliminarlas a mano, se podria hacer no ?

PD: a ver si la fijan que es muy util

Así está echa mi web. Con PHP y una base de datos. Se podría hacer con ficheros pero es peor. Normalmente todos los blog que ves están echos en PHP.

Respecto a que tu amigo pueda poner noticias es facil. Yo lo hago en mi web desde cualquier sitio. Hay una página protegida por contraseña en la que puedo escribir toda la notcia y subir alguna foto y al darle a enviar se añade.

Ahora, veo que no controlas mucho, porque has preguntado cosas un poco básicas así que el hacer una web parecida a la mía desde 0 es un poco locura. Es muuuucho tiempo, mucho.

Buscaté un paquete ya echo e instalaló. Pero en ese tema yo ya no se, espera que alguien más te aconseje.

krampak

Mmmm ahora he visto esto de Febrero

Pues mira, yo no conocía ese paquete y siempre me he vuelto loco instalando cada cosa por separado.

Yo uso el EasyPHP, apache+mySQL es muy muy sencillo de instalar (siguiente siguiente).

tilt

paquetes? XAMPP powa!

Gunfett, tu necesitas WordPress
www.wordpress.org