[Tutorial] Como crear una web profesional desde 0

<b>¿Como crear tú sitio Web Profesional desde 0?
¿Se puede o no se puede? Por Kitsch</b>

Bien este es posiblemente el tutorial más largo que he creado hasta a la fecha y surge a raíz de una platica con una buena amiga, fotógrafa y excelente y reconocida artista, la cual me pedía que le creara su si sitio portafolio; hasta ahí no hay problema pues un cliente es un cliente. El detalle esta en lo que ella me comentaba (y mas sabiendo que no le he iba a cobrar), pues ya antes había contratado otras agencias para el trabajo y hasta la fecha no quedaba satisfecha con lo que le han entregado ¿Por qué? No es que fuera un mal trabajo el obtenido por el desarrollador o el diseñador, es que simplemente no es lo que ella visualizaba para su sitio, el cual es una estampa y tarjeta de presentación para su arte y por consecuente para ella misma.

Así mismo, mi amiga me preguntaba y ¿Por qué no había un tutorial que enseñara a hacer esto? ¿Por qué a nadie se le ha iluminado la cabeza y lo a hecho? Que en fin, hay tutoriales para todo, desde como poner un texto en una foto con el Photoshop, hasta como armar una bomba casera lista para matar cristianos.

Y me quede pensando en esto todo el día y hoy al tener un tiempo libre gracias a la gripe que me ha caído este fin de semana, he aquí mi primer intento de tutorial: Como crear un sitio Web Profesional desde 0, y claro todo lo que esto implica hacer un sitio así (XHTML, CSS, maquetación, estructura, diseño, publicación, etc.).

Por razones bastante obvias, recomiendo primero que nada buscar un lugar cómodo para trabajar (porque si hablamos de niveles desde 0, vamos a pasar ahí un buen tiempo), tener una cafetera y heladera cercana (para el café y la cervezas para el estimulo laboral), cigarrillos al gusto (opcional) y las ganas de aprender, porque este manual de nada servirá si solo se bajan los archivos finales, se modifican un poco y se usa la siempre maravillosa técnica del “copiar y pegar”.

Para este tutorial recordé mis días de estudiante y me transporte a aquellos momentos en los que mis libros terminaban como venidos de la guerra, todos doblados, rayados, con apuntes por todas partes y las hojas sudadas y hasta mordidas a veces; por lo que recomendaría también para los que les sea posible, imprimir este archivo y estudiarlo un poco a detalle, poder tener lleno de anotaciones y apuntes cada hoja y cada lugar donde la cabeza nos da vuelta por no obtener los resultados deseados o simplemente porque algo nos llamo la atención.

<b>Antes de Comenzar</b>

Antes de comenzar es necesario saber que es lo que queremos hacer, es decir que deseamos obtener, para este tutorial crearemos este sitio. Sin embargo la idea de este tutorial no es copiar al pie de letra, si no enseñar como crear algo a partir de una idea, por lo que lo más importante es saber que es lo que queremos. Enlistare mi orden de prioridades (bastante relativas en cuanto a prioridades para cada uno):

<u>1.- ¿Qué es lo quiero mostrar? </u>

Creo que esto es lo más impórtate para una web y primero pensare como usuario, después de desarrollador; si necesito información de medicina, estaremos de acuerdo que lo ultimo que haría es buscar en Solophotoshop.com o Forocreativo.net ¿Verdad? Lo mas seguro es que busque en Facmed.unam o en Medspain.com ¿Qué quiero decir con esto? Que hay ser claros y tener una idea concreta de hacia donde estará orientado nuestro sitio web.

Esto es importante no solo por la uniformidad, si no que nos ayudara mucho para saber que diseño le daremos, como lo estructuraremos, como organizaremos y donde y como lo publicitaremos.

<u>2.- ¿Qué necesito?</u>

Esta es otra pregunta fundamental, debo antes que nada de visualizar que es lo que voy a necesitar para mi sitio ¿Qué programas? ¿Qué recursos? ¿Con que contamos? y ¿Cómo conseguiré lo que me falta?

Saber esto es sumamente importante dado que es un error muy común debido a una mala planeación (regresamos a la pregunta uno) a la mitad del camino nos faltara algo, un programa, un permiso, un recurso, el host, en fin, todas esas cosas que impedirán nuestro objetivo.

<u>3.- ¿Dónde me encuentro?</u>

Este punto toca otra verdad a la cual nos tendremos que enfrentar y esta es saber donde estoy situado en cuanto al mundo del web, informático y computacional en general. ¿Por qué es importante saber esto? Porque de este punto partiremos para saber como haremos nuestro sitio, que tecnologías usaremos y como las aplicaremos. Dicho con ejemplos más coloquiales, si nuestros conocimientos de computación son muy básicos, no intentaremos crear un impresionante sitio en Flash con animaciones muy elaboradas en AfterEffects y un contenido dinámico basado complejas bases de datos y sindicaciones de XML.

No es que lo anterior sea imposible, es solo que entonces si “nos meteremos en camisa de once varas” (expresión muy mexicana), lo ideal sería comenzar con una web mas modesta en cuanto a programación, pero bien estructurada y muy bien hecha en cuanto a contenido, con un diseño elegante y muy a nuestro actual alcance; “no hay que querer correr sin primero caminar” (otra expresión coloquial).

<b>¡A trabajar!</b>

Una vez planteada la idea, sabemos lo que necesitamos y tenemos una idea clara de nuestro alcance, es hora de empezar a trabajar y poner en orden los pasos necesarios para comenzar a pegarle.

Bien quiero crear un sitio de tecnología web, será un sitio donde enseñare a los usuarios de esta y como crear su propio sitio (que obvio ¿no?).

Para esta web necesitare el siguiente softwear: Adobe Photoshop, Macromedia Dreamweaver 8 y Flash Profesional, Easy-Php, Microsoft Word (para eso de la ortografía), Mozilla Firefox y el bloc de notas.

En nuestro sitio utilizaremos varias tecnologías, actualmente el estándar para la Internet. Usaremos XHTML como lenguaje base, definiremos todo el estilo de nuestro sitio con CSS, añadiremos interactividad y efectos visuales con flash y un poco de ActionScript, y usaremos un poco las tecnologías de lado del servidor para crear un sitio con contenido dinámico y de fácil actualización, para ello usaremos PHP (ASP o Cold Fusion no son practicos para estos ejemplos, ya que es mas fácil conseguir información para PHP, además de que al autor de tutorial le gusta más).

Por ultimo, entenderé que este tutorial esta dedicado a usuarios con conocimientos un poco mas allá de lo básico en informática y que tienen una mínima idea de cualquiera de los programas necesitados y del mundo de la Internet.

Un poco de teoría.

Se que esta es la parte mas aburrida de todo manual, libro y tutorial y es muy posible que muchos de nosotros nos saltemos al siguiente punto, sin embargo; a veces es necesario saber que es lo que estamos haciendo, de donde viene y por que funciona de tal manera la web.

Nuestro sitio usara varias tecnologías modernas para trabajar, como son el XHTML (Extensible Hypertext Markup Language “Lenguaje Extensible de Marcado de Hipertexto”) y CSS (Cascading Style Sheets, “Hoja de Estilo en Cascada”) que como antes mencionaba son actualmente el estándar de la web y estos se basan en la regulación de WC3, por lo que nos apegaremos a ello para tener un sitio valido para todo el mundo.

El XHTML no es otra cosa que una evolución del HTML tradicional, el cual ahora es mucho más versátil y utiliza XML como regulador, para el diseño de nuestro sitio utilizaremos el todo poderoso Photoshop para crear las imágenes, sin embargo maquetaremos por medio CSS, lo cual nos ahorra mucho, mucho tiempo en cuanto al diseño de nuestro sitio además de darle un aspecto muy agradable y profesional sin afectar nuestro XHTML original y por ultimo crearemos un sitio web modular basado en tecnología PHP (Hypertext Preprocessor originalmente: “Personal Home Page Tools”), que es actualmente el lenguaje de programación para web de lado de servidor mas usado y basado en Linux, el cual como tal es un Open Source (Programa de código abierto) y es de libre uso, (¡viva el softwear libre!).

Comenzando a trabajar

Bueno comenzamos con el trabajo; conforme avancemos iré explicando lo que estamos haciendo.

Una web por lo general tiene una web portada o de presentación, muchos usuarios no son participes de estas, así que este paso opcional.

1.- Abrimos el Dreamweaver (nuestro motor principal de este ejercicio) y vamos a: Archivo/Nuevo/Pagina Básica/HTML y en el cuadro combinable de la parte inferior izquierda, seleccionamos XHTML 1.0 de transición.

2.- Ahora en el Dreamweaver seleccionamos la vista de código y veremos algo más o menos así:
<img src="http://www.javiernavarro.be/tutoweb/images/1.jpg" border="0" alt="Imagen IPB" />

Localizamos la línea 4, la cual dicta la codificación de esta página y de forma predeterminada esta seleccionado “iso-8859-1” que es la codificación europea, para hacer mas accesible nuestro sitio, usaremos el estándar UTF-8, por lo que modificamos esta línea quedando de la siguiente manera:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Bien, queremos que nuestro sitio sea accesible y visible para todo el mundo, entonces deseamos también deseamos que sea indexado en los buscadores, como Google por ejemplo; estos motores de búsqueda trabajan buscando las cabeceras de las paginas, mejor conocidas como “Metas” y estas son etiquetas especiales que definen nuestra web.

Las etiquetas meta pueden definir el éxito de un sitio web o bien su fracaso, debido a que gracias a estas los buscadores harán su trabajo y para nuestra pagina he agregado las siguientes etiquetas:

<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1--><meta http-equiv="Content-Language" content="ES"><!--c2--></div><!--ec2-->

En está etiqueta definimos el lenguaje de nuestra pagina.

<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1--><meta name="robots" content="index,follow"><!--c2--></div><!--ec2-->

Con esta otra, le diremos a los buscadores que indexen nuestra pagina.

<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1--><meta name="keywords" content="web, informatica, tutorial, manual, xhtml, css, flash, photoshop, dreamweaver, php" /><!--c2--></div><!--ec2-->

Esta etiqueta es posiblemente una de las mas importantes para los buscadores, ya que esta definirá las palabras claves de nuestro sitio, y al igual que cualquier motor de busqueda, se buscara por estas para localizar nuestra pagina.

<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1--><meta name="description" content="Sitio de ejemplo del tutorial: Como crear una web desde 0. En esta web aprenderemos a crear otro sitios web aprendiendo los principios basicos hasta los avanzados." /><!--c2--></div><!--ec2-->

Por ultimo, la etiqueta que dará a los buscadores una descripción de nuestro sitio en los buscadores, generalmente es lo que el usuario lee y lo que hace que decida si entrar o no desde el buscador.

Hasta ahora nuestro archivo tiene las siguientes líneas de código:

<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ES">
<meta name="robots" content="index,follow">
<meta name="keywords" content="web, informatica, tutorial, manual, xhtml, css, flash, photoshop, dreamweaver, php" />
<meta name="description" content="Sitio de ejemplo del tutorial: Como crear una web desde 0. En esta web aprenderemos a crear otro sitios web aprendiendo los principios basicos hasta los avanzados." />
<title>Documento sin t&iacute;tulo</title>
</head>
<body>
</body>
</html><!--c2--></div><!--ec2-->

Hasta aquí tenemos la estructura básica de una página:

• Una pagina con un tipo de documento declarado.
• Una codificación establecida.
• Meta etiquetas para indexación en buscadores.

3.- Guardamos nuestro archivo como “index.html”

Ahora comenzaremos a agregar el texto introductorio de nuestra web y escribiremos las siguientes líneas de código a nuestro HTML:

<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1--><p>Este sitio ha sido creado como material de apoyo para el tutorial &quot;Como crear una web profesional desde 0&quot;. </p>
<p>ENTRAR</p>
<p>Este sitio se ve mejor con Firefox y necesita Flash Player. <br />
&nbsp;&nbsp;Recomendado para una resolución de 1024 x 768 px <br />
WC3 Validador </p><!--c2--></div><!--ec2-->

4.- Guardamos otra vez nuestro documento y previsualizamos como se ve, debe ser más o menos así:
<img src="http://www.javiernavarro.be/tutoweb/images/2.jpg" border="0" alt="Imagen IPB" />
Ver pagina: <a href="http://www.javiernavarro.be/tutoweb/index_sin_css.html" target="_blank">http://www.javiernavarro.be/tutoweb/index_sin_css.html</a>

Desde luego, que la apariencia de nuestra pagina es todo menos profesional, pero esto esta bien, en un poco mas pasaremos al diseño mediante CSS.

5.- Creamos un documento CSS nuevo y lo nombramos “estilo1.css”

6.- Regresamos a nuestro documento HTML para vincular nuestra hoja de estilos y definir el aspecto de este documento.

Agregamos la siguiente línea:

<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1--><link href="estilo1.css" rel="stylesheet" type="text/css" /><!--c2--></div><!--ec2-->

Con la etiqueta “link” y la propiedad “stylesheet” definimos que tipo de documento se vincula, en este caso “text / css”.

7.- Regresamos a nuestra hoja de estilos y empezamos escribir lo que será la apariencia para nuestra página.

La estructura de CSS es mucho muy simple y como su nombre lo indica, define el aspecto de cierta clase, etiqueta o selector añadiendo propiedades especificas que se serán aplicadas al interpretarse por el navegador. La estructura de CSS es mas o menos la siguiente

<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->selector {
propiedad1: color;
propiedad2: tamaño
}<!--c2--></div><!--ec2-->

Con este tipo de estructura tan simple se pueden crear diseños bastante complejos y se puede aplicar a todas las etiquetas compuestas de un HTML o XHTML, además de que es aquí donde las etiqueta <div> juega un papel importante ya que se pueden crear “bloques” tantos como necesitemos en nuestra hoja de estilos.

8.- Comenzaremos a definir las propiedades de nuestro HTML, para ello primero definiremos las propiedades del cuerpo, párrafo y links en sus tres estados: normal, sobre y visitado.

<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->body {
&nbsp;&nbsp;&nbsp;&nbsp;background-color: #FFFFFF;
&nbsp;&nbsp;&nbsp;&nbsp;margin: 15px;
&nbsp;&nbsp;&nbsp;&nbsp;background-image: url(images/back1.jpg);
&nbsp;&nbsp;&nbsp;&nbsp;background-repeat: no-repeat;
}<!--c2--></div><!--ec2-->

Este pedazo de script define que la “body” tendrá un color de fondo en blanco (basado en color hexadecimal) , un margen de 15 píxeles para sus cuatro extremos (superior, inferior, izquierdo y derecho). Además en la tercera línea establecemos que el fondo poseerá una imagen la cual no se repetirá, según la instrucción de la línea cuatro.

<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->p {
&nbsp;&nbsp;&nbsp;&nbsp;font-family: Verdana, Arial, Helvetica, sans-serif;
&nbsp;&nbsp;&nbsp;&nbsp;font-size: 12px;
&nbsp;&nbsp;&nbsp;&nbsp;font-style: normal;
&nbsp;&nbsp;&nbsp;&nbsp;line-height: normal;
&nbsp;&nbsp;&nbsp;&nbsp;font-weight: normal;
&nbsp;&nbsp;&nbsp;&nbsp;color: #000000;
}<!--c2--></div><!--ec2-->

En la anterior definición la etiqueta afectada es la de párrafo, en la cual únicamente hacemos una especificación del texto y sus propiedades aplicables.

<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->a:link {
&nbsp;&nbsp;&nbsp;&nbsp;font-family: Verdana, Arial, Helvetica, sans-serif;
&nbsp;&nbsp;&nbsp;&nbsp;font-size: 12px;
&nbsp;&nbsp;&nbsp;&nbsp;font-style: normal;
&nbsp;&nbsp;&nbsp;&nbsp;line-height: normal;
&nbsp;&nbsp;&nbsp;&nbsp;font-weight: normal;
&nbsp;&nbsp;&nbsp;&nbsp;color: #0000CC;
&nbsp;&nbsp;&nbsp;&nbsp;text-decoration: underline;
}
a:hover {
&nbsp;&nbsp;&nbsp;&nbsp;font-family: Verdana, Arial, Helvetica, sans-serif;
&nbsp;&nbsp;&nbsp;&nbsp;font-size: 12px;
&nbsp;&nbsp;&nbsp;&nbsp;font-style: normal;
&nbsp;&nbsp;&nbsp;&nbsp;line-height: normal;
&nbsp;&nbsp;&nbsp;&nbsp;font-weight: normal;
&nbsp;&nbsp;&nbsp;&nbsp;color: #990000;
&nbsp;&nbsp;&nbsp;&nbsp;text-decoration: none;
}
a:visited {
&nbsp;&nbsp;&nbsp;&nbsp;font-family: Verdana, Arial, Helvetica, sans-serif;
&nbsp;&nbsp;&nbsp;&nbsp;font-size: 12px;
&nbsp;&nbsp;&nbsp;&nbsp;font-style: normal;
&nbsp;&nbsp;&nbsp;&nbsp;line-height: normal;
&nbsp;&nbsp;&nbsp;&nbsp;font-weight: normal;
&nbsp;&nbsp;&nbsp;&nbsp;color: #0000CC;
&nbsp;&nbsp;&nbsp;&nbsp;text-decoration: underline;
}<!--c2--></div><!--ec2-->

En los últimos 3 bloques afectamos directamente a la etiqueta “a” que es la que define lo vínculos de nuestra página, sin embargo a esta etiqueta le hemos añadido especificaciones en su selección y estos son los comportamientos de la etique en tres estados diferentes, “link normal”, “sobre el link” y “link visitado”; con CSS le podemos aplicar una propiedad especifica a cada estado.

<b>La etiqueta DIV</b>

La función de esta etiqueta es realizar divisiones en las páginas de manera que podamos indicar las propiedades de cada una de estas divisiones por separado, esto nos permite crear bloques de propiedades únicos para cada parte de nuestro sitio; por ejemplo lo que serian las partes principales de una web: la cabecera, menú, contenido y pie de página.

El método de utilización de una etiqueta DIV es bastante simple, basta con escribir la etiqueta y agregarle un nombre identificador, el que nos servirá como selector para nuestra hoja de estilos.

<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1--><div id="menu1"><!--c2--></div><!--ec2-->

Esta etiqueta esta en nuestro HTML, en la cual creamos una división para el menú, en este caso el único menú es la palabra ENTRAR, pero queremos que esta tenga un aspecto diferente en proporción al resto de los textos y enlaces de la pagina, para ellos agregamos el siguiente bloque de código:

<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->#menu1 {
&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;
}
#menu1 a:hover {
&nbsp;&nbsp;&nbsp;&nbsp;color: #FF6600;
&nbsp;&nbsp;&nbsp;&nbsp;text-decoration: blink;
&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;
}<!--c2--></div><!--ec2-->

Si somos observadores veremos que al selector le hemos aplicado un símbolo de numero “#”, el cual es el indicador de selección de división, en este caso menu1.

Por ultimo hay otro DIV en nuestro HTML, que determina las propiedades del pie de pagina de nuestra pagina.

<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->#footer1 {
&nbsp;&nbsp;&nbsp;&nbsp;font-family: Verdana, Arial, Helvetica, sans-serif;
&nbsp;&nbsp;&nbsp;&nbsp;font-size: 10px;
&nbsp;&nbsp;&nbsp;&nbsp;font-style: normal;
&nbsp;&nbsp;&nbsp;&nbsp;line-height: normal;
&nbsp;&nbsp;&nbsp;&nbsp;font-weight: normal;
&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;
&nbsp;&nbsp;&nbsp;&nbsp;vertical-align: bottom;
}
#footer1 a:link {
&nbsp;&nbsp;&nbsp;&nbsp;font-family: Verdana, Arial, Helvetica, sans-serif;
&nbsp;&nbsp;&nbsp;&nbsp;font-size: 10px;
&nbsp;&nbsp;&nbsp;&nbsp;font-style: normal;
&nbsp;&nbsp;&nbsp;&nbsp;line-height: normal;
&nbsp;&nbsp;&nbsp;&nbsp;font-weight: normal;
&nbsp;&nbsp;&nbsp;&nbsp;color: #0066CC;
&nbsp;&nbsp;&nbsp;&nbsp;text-decoration: underline;
}
#footer1 a:hover {
&nbsp;&nbsp;&nbsp;&nbsp;font-family: Verdana, Arial, Helvetica, sans-serif;
&nbsp;&nbsp;&nbsp;&nbsp;font-size: 10px;
&nbsp;&nbsp;&nbsp;&nbsp;font-style: normal;
&nbsp;&nbsp;&nbsp;&nbsp;line-height: normal;
&nbsp;&nbsp;&nbsp;&nbsp;font-weight: normal;
&nbsp;&nbsp;&nbsp;&nbsp;color: #FF0000;
&nbsp;&nbsp;&nbsp;&nbsp;text-decoration: none;
}
#footer1 a:visited {
&nbsp;&nbsp;&nbsp;&nbsp;font-family: Verdana, Arial, Helvetica, sans-serif;
&nbsp;&nbsp;&nbsp;&nbsp;font-size: 10px;
&nbsp;&nbsp;&nbsp;&nbsp;font-style: normal;
&nbsp;&nbsp;&nbsp;&nbsp;line-height: normal;
&nbsp;&nbsp;&nbsp;&nbsp;font-weight: normal;
&nbsp;&nbsp;&nbsp;&nbsp;color: #0066CC;
&nbsp;&nbsp;&nbsp;&nbsp;text-decoration: underline;
}
<!--c2--></div><!--ec2-->
Ver sitio con CSS aplicado: <a href="http://javiernavarro.be/tutoweb/index.html" target="_blank">http://javiernavarro.be/tutoweb/index.html</a>

Para obtener más información sobre las etiquetas HTML y CSS ver los siguientes enlaces:
<a href="http://www.htmlhelp.com/es/reference/css/properties.html" target="_blank">http://www.htmlhelp.com/es/reference/css/properties.html</a>
<a href="http://www.ccim.be/ccim328/htmlsp/REF.htm" target="_blank">http://www.ccim.be/ccim328/htmlsp/REF.htm</a>
<a href="http://ima.udg.es/~dagush/cursoHTML/etiquet1.htm" target="_blank">http://ima.udg.es/~dagush/cursoHTML/etiquet1.htm</a>
<a href="http://ima.udg.es/~dagush/cursoHTML/etiquet1.htm" target="_blank">http://ima.udg.es/~dagush/cursoHTML/etiquet1.htm</a>
<a href="http://www.keysca.com/Tutoriales/html/dichtml.html" target="_blank">http://www.keysca.com/Tutoriales/html/dichtml.html</a>

Primera parte del tutorial; trabajando en la segunda

 

Gracias Kitsch

Luego lo leo mas detenidamente :mrgreen:

Buen Aporte :arriba:

 

Solo por el tiempo que te habra llevado hay que darte las gracias

 

Gracias por el aporte kitsch!!

Aqui mismo en el foro varios tambien hemos puesto aportes relacionados con sitios, Quique y yo entre otros.

Por ejemplo, para utilizacion mas a fondo de css, estan los dos tutos de introduccion a los CSS que hice:


<a href="http://www.forocreativo.net/ipb/index.php?showtopic=10414" target="_blank">PRIMERA PARTE</a>
<a href="http://www.forocreativo.net/ipb/index.php?showtopic=10459" target="_blank">SEGUNDA PARTE</a>

Creo que quique luego talvez podria cocatenar los diferentes tutos en el tópico en orden de procedimientos, y categoriarlos a diferentes tipos de sitios (css, tablas, php, etc). Mucho trabajo, pero seria una rica libreria de referencias. Talvez incluso a manera de libreria... que dices quique? mucho trabajo? (ya se la respuesta jejeje, solo era una idea, no disparen! somos de los mismos! :huh: )

 

muy bueno kisch... seguro que a muchos le es de gran ayuda

 

Gracias por los comentarios, pero de hecho esta solo es la primera pate de 14 que sera este mismo tuto, ahora estoy escribiendo como loco la segunda parte, donde tratare de enseñar como combinar CSS y PHP para hacer una web modular multimplate; y en el tercero empezar de lleno al diseño. Si veo que esto tiene el resultado que espero, para la 4ta entrega espero meterme un poco en bases datos (con ayuda de Quique no le he preguntado pero seguro que aceptara) y asi suscesivamente hasta tener un sitio profesional trabajando

 

excelente aporte kitsch

 

Muy bueno Kitsch

 

Excelente aporte Kitsch y ya sabes que cuentas conmigo y preguntame cuanto quieras.

Yo tengo en mente muchos tutos de PHP pero mi tiempo me mata y mejro te voy diciendo a ti y cuando sepas los haces tu jajaj

Sato, lo de separar los tutos y demas tambien esta en mente, de hacer un indice aca en el mismo foro y bueno estan expuestos los que me autorizan en los otros dos sitios <a href="http://www.solophotoshop.com" target="_blank">www.solophotoshop.com</a> y <a href="http://www.tallerwebmaster.com" target="_blank">www.tallerwebmaster.com</a>

Que por su formato son mas faciles de encontrar los tutos y les pongo un link de consultas en el foro (al menos al los ultimos)

 

Kitsch fijate que en el punto 4 hay una imagen que no aparece aca

<!--quoteo--><div class='quotetop'>CITA</div><div class='quotemain'><!--quotec-->
4.- Guardamos otra vez nuestro documento y previsualizamos como se ve, debe ser más o menos así:
Imagen IPB
Ver pagina: <a href="http://www.javiernavarro.be/tutoweb/index_sin_css.html" target="_blank">http://www.javiernavarro.be/tutoweb/index_sin_css.html</a>
<!--QuoteEnd--></div><!--QuoteEEnd-->

 

Muchisimas gracias por el tutorial Kitsch!!!
A mi me pasa como a tu amiga, siempre me he preguntado donde podria encontrar un tutorial que explicara todo desde cero y nunca lo he encontrado hasta ahora.

Animo y sigue con ello, que lo esperamos ansiosos

 

Kitsch!!!, la verdad este tutorial lo deja a uno sin palabras..hermano espero con ansias las demas partes..uqe excelente foro es aqui donde he aprendido lo que se...Gracias amigos y pa' delante. Chao.
Saludos desde Cartagena, Colombia.

 

LA VERDAD ME PARECE MUY BUENO Y SIRVE COMO COMPLEMENTO DE LOS QUE HA REALIZADO <!--coloro:#ff0000--><span style="color:#ff0000"><!--/coloro--><b>SATO::::::</b><!--colorc--></span><!--/colorc-->

<b><!--coloro:#ff0000--><span style="color:#ff0000"><!--/coloro-->[/color]</b>

<b><!--coloro:#ff0000--><span style="color:#ff0000"><!--/coloro--><!--coloro:#ff0000--><span style="color:#ff0000"><!--/coloro--><!--colorc--></span><!--/colorc--></b><!--colorc--></span><!--/colorc-->

<b><!--coloro:#ff0000--><span style="color:#ff0000"><!--/coloro--><!--coloro:#ff0000--><span style="color:#ff0000"><!--/coloro--> :vale: <!--coloro:#ff0000--><span style="color:#ff0000"><!--/coloro--><!--colorc--></span><!--/colorc--></b><!--colorc--></span><!--/colorc--><!--colorc--></span><!--/colorc-->

<b><!--coloro:#ff0000--><span style="color:#ff0000"><!--/coloro--><!--colorc--></span><!--/colorc--></b>

<b><!--colorc--></span><!--/colorc--></b>

<b><!--coloro:#ff0000--><span style="color:#ff0000"><!--/coloro-->::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::ESPERANDO EL SEGUNDO:::::::::::::::::::<!--colorc--></span><!--/colorc--></b>

 

Cierto, a ver cuando aparece la segunda parte

 

ya casi::::

 

ya merito, ya merito

 

Me ha encandado el tutorial...yo que estoy empezando con esto, ni te digo lo que me vas ayudar..
Darte las gracias por quitar horas a tu tiempo para mostrarnos este pedazo de tutorial..
Muchas gracias por tu ayuda
Gotkika

 

Si, como dice Gothika, este tutorial nos sirve mucho de ayuda para guiarnos en esto del diseño web. :clapping:

 

jeje he visto respuestas nuevas y pensaba que el tutotial habia continuado

Ya se que esto lleva mucho trabajo, pero señor Kitsch, no se olvide usted de nosotros que necesitamos continuar con su gran tutorial

 

si eso mismo pense que ya habia continuado


seguimos esperandote