Crea tu pag web sin saver HTML, sin anuncios

---

Wellcome

Hola amigos taringueros aqui les enseño a crear su pag web desde 0 sin saber nada de web ni de diseño ademas a subirla y por que no? a hospedarla.
Bueno primero que nada mi nickname es nicolbolas328 pero díganme Vencer


Para la realización de este tema me vaso en temas que prácticamente eh echo primero con la intención de llegar a este tema.



Antes de cualquier cosa les presentare lo que son sus herramientas de trabajo que serian las siguientes.

*Dreamweaver;
con este programa diseñaremos la pag web y este es la parte mas importante para la realización de tu web.
Aqui les dejo el link de el post con descarga directa:


*Adobe photoshop;
Con este programa crearemos las imágenes, o usa tu editor de imágenes que mas te convenga.
(de este no dejo link ya que casi todos lo tienen, y si no busquen no es difícil buscar este programa)
Aquí les dejo link para que busques el photoshop que mas te convenga:


*CuteFTP;
Con este programa subiremos la web al host que mas te convenga.
Aquí el link para el post con descarga directa:


*El host que mas te convenga;
Recuerda tener los datos que te da el host para poder usarlo
Ejemplo:


*Recomendaciones;
Antes de leer el post completo quiero que lean o vean los libros que les pongo en un post ya que servirán de apoyo y refuerzo, para que sea mas dinámico el post, si no lee el post completo y después los libros como mas te convenga, solo es un tip

Aqui el post de los libros:








Definiéndolo de forma sencilla, "HTML es lo que se utiliza para crear todas las páginas web de Internet". Más concreta-mente, HTML es el lenguaje con el que se "escriben" la mayoría de páginas web.

Los diseñadores utilizan el lenguaje HTML para crear sus páginas web, los programas que utilizan los diseñadores generan páginas escritas en HTML y los navegadores que utilizamos los usuarios muestran las páginas web después de leer su contenido HTML.

Aunque HTML es un lenguaje que utilizan los ordenadores y los programas de diseño, es muy fácil de aprender y escribir por parte de las personas. En realidad, HTML son las siglas de HyperText Markup Language y más adelante se verá el significado de cada una de estas palabras.

El lenguaje HTML es un estándar reconocido en todo el mundo y cuyas normas define un organismo sin ánimo de lucro llamado World Wide Web(mejor como WWW) Consortium, más conocido como W3C. Como se trata de un estándar reconocido por todas las empresas relacionadas con el mundo de Internet, una misma página HTML se visualiza de forma muy similar en cualquier navegador de cualquier sistema operativo.

El propio W3C define el lenguaje HTML como "un lenguaje reconocido universalmente y que permite publicar información de forma global". Desde su creación, el lenguaje HTML ha pasado de ser un lenguaje utilizado exclusivamente para crear documentos electrónicos a ser un lenguaje que se utiliza en muchas aplicaciones electrónicas como buscadores, tiendas online y banca electrónica.

Mas info el libro Introduccion al HTML...






JavaScript es un lenguaje de programación que se utiliza principalmente para crear páginas web dinámicas.

Una página web dinámica es aquella que incorpora efectos como texto que aparece y desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de aviso al usuario.

Técnicamente, JavaScript es un lenguaje de programación interpretado, por lo que no es necesario compilar los programas para ejecutarlos. En otras palabras, los programas escritos con JavaScript se pueden probar directamente en cualquier navegador sin necesidad de procesos intermedios.

Mas info el libro Introduccion al JavaScript...






El término AJAX se presentó por primera vez en el artículo "Ajax: A New Approach to Web Applications" publicado por Jesse James Garrett el 18 de Febrero de 2005. Hasta ese momento, no existía un término normalizado que hiciera referencia a un nuevo tipo de aplicación web que estaba apareciendo.

En realidad, el término AJAX es un acrónimo de Asynchronous JavaScript + XML, que se puede traducir como "JavaScript asíncrono + XML".

Las tecnologías que forman AJAX son:

* XHTML y CSS, para crear una presentación basada en estándares.
* DOM, para la interacción y manipulación dinámica de la presentación.
* XML, XSLT y JSON, para el intercambio y la manipulación de información.
* XMLHttpRequest, para el intercambio asíncrono de información.
* JavaScript, para unir todas las demás tecnologías.


Desarrollar aplicaciones AJAX requiere un conocimiento avanzado de todas y cada una de las tecnologías anteriores.(como les habia comentado)

En las aplicaciones web tradicionales, las acciones del usuario en la página (pinchar en un botón, seleccionar un valor de una lista, etc.) desencadenan llamadas al servidor. Una vez procesada la petición del usuario, el servidor devuelve una nueva página HTML al navegador del usuario.
Mas info en el libro Introduccion a AJAX...






CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas web complejas.

Separar la definición de los contenidos y la definición de su aspecto presenta numerosas ventajas, ya que obliga a crear documentos HTML/XHTML bien definidos y con significado completo (también llamados "documentos semánticos". Además, mejora la accesibilidad del documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo documento en infinidad de dispositivos diferentes.

Al crear una página web, se utiliza en primer lugar el lenguaje HTML/XHTML para marcar los contenidos, es decir, para designar la función de cada elemento dentro de la página: párrafo, titular, texto destacado, tabla, lista de elementos, etc.

Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cada elemento: color, tamaño y tipo de letra del texto, separación horizontal y vertical entre elementos, posición de cada elemento dentro de la página, etc.

Mas info el libro Introduccion CSS...






jQuery es una biblioteca o framework de JavaScript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el arbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la tecnología AJAX a páginas web. Fue presentada el 14 de enero de 2006 en el BarCamp NYC.

jQuery es software libre y de código abierto, posee un doble licenciamiento bajo la Licencia MIT y la Licencia Pública General de GNU v2, permitiendo su uso en proyectos libres y privativos. jQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas en JavaScript que de otra manera requerirían de mucho más código, es decir, con las funciones propias de esta biblioteca se logran grandes resultados en menos tiempo y espacio.

Las empresas Microsoft y Nokia anunciaron que incluirán la biblioteca en sus plataformas. Microsoft la añadirá en su IDE Visual Studio y la usará junto con los frameworks ASP.NET AJAX y ASP.NET MVC, mientras que Nokia los integrará con su plataforma Web Run-Time.
Mas info .

Desarrollo

Bueno empezaremos con la practica:

Ustedes elijan una plantilla de diseño, hay muchas y muy buenas y se editan pero por que no hacerla a tu gusto y con tus normas

Primer paso.

Abrimos nuestro dreamweaver y elegimos pagia HTML;


Después en el recuadro de arriba hay 3 opciones las cuales son:
* Código
*Dividir
*Diseño
Nosotros elijemos el de dividir para estar al tanto, después de eso le ponemos nombre a nuestra pagina y eso se ve en el recuadro de abajo;




Ya que esta esto haremos nuestro fondo de pantalla:
¿Como lo hago?
Bueno para eso hay 2 opciones
Color: Puedes poner un color especifico pero por estética no se ve bien
Background: Esta es la opción con la que puedes poner una imagen de fondo de pantalla pero recuerden;
Solo se puede 1 imagen de fondo a la vez así que hay que ser precavidos al elegirla.



Estadística mente una pagina web tiene de largo 1020 pixeles de ancho por el largo que ustedes deseen.
Así que si quieren una imagen procuren que tenga 1020 pixeles de ancho
¿Como veo si mi imagen es adecuada?
Cuando pones el cursor en sima de tu imagen aparecerá una breve descripción de la imagen.

Y así sabrás su es la ideal para tu web.

Tip's: Si no tienes imágenes de esa medida y dudo que tengan bueno existe una solución rápida sencilla y eficaz, ¿cual es? Existe algo llamado Photoshop
Pero no se usar el photoshop
Aquí te digo rapido como hacerlo.

Mini guia de phoshop

Abrimos el PS
Y creamos un nuevo archivo



Les saldría ventana que te pide varias cosas:
*En el primer recuadro le ponemos el nombre de el documento (obvio que ustedes le pondrán un nombre mas corto no c como fondo o algo asi)
*Segundo cuadro: El ancho del documento, como ya había mencionado es de 1020 el tamaño de la web
*tercer Cuadro: la altura bueno le puse 1500 por que no se si mi pagina valla a tener mucho contenido, ustedes le pueden estimar.



Le dan Ok y aparecera el documento lo unico que haremos sera arrastrar la imagen que queremos y la ponemos adentro del documento, ajustamos el ancho y el largo, le damos un toque especial y wala presto
Quedaría asi:

La guardan ya esta listo el fondo.






Ahora seguimos con el dreaweaver

Apretan el siguiente comando: CTRL + J
Y les aparecera una ventana que dice "propiedades de la pagina" bueno por el momento nadamas le vamos a mover en 3 recudros que marco;
*1: color de fondo como les habia explicado es un fondo normal de color y si no le mueven les saldra por defaul el color blanco, bueno aqui es desicion de ustedes si desean moverle o no.
*2: Repetir; si no le cambian nada en esa opcion pasara lo siguiente; la imagen si no esta al tamaño de ancho ni de largo se repetira ¡si por eso la imagen agustada! , alli le ponen no repetir repetir x y
estas dos ultimas X Y sirvan que si quieres que se repitan a lo ancho o a lo largo bueno tambien consideren moverle a su convenencia.
*3:Examinar; Como dice su nombre busca la imagen de fondo que quieres.

Le apretan aplicar y aceptar veran que aparecieron nuevas letras y abajo tiene la imagen
Bueno eso es por que agregamos el fondo, y quedaria asi


Consejo irrefutable: Creen una carpeta con el nombre de su web y dentro de esa crean carpetas donde pondran las imagenes, codigos, etc..
Esto es i mportante ya que al momento de guardar si no esta la imagen donde deveria de estar censillamente no sale o sale error
Ejemplo




Ya que elijieron su fondo y la carpeta que va a tener todas la imagenes y todo el contenido
bueno iniciaremos con el contenido

Agregando contenidos a su web

Depende el gusto de cada persona la estructuracion de su web y como la quieren asi que aconsejo que agan un borrador en sucio de como quieren que quede la estructura de su web ejemplo:
*Donde quieren que se ponga el menu
*" " el contnido
*" " enlaces externos
*" " otros

Aciendo realidad tus ideas

Para esto nesecitamos las piesas para armar el rompecavezas



*Header; El header es la parte que esta hasta arriva y es donde va el logo junto con el nombre de la compañia o de la web, de preferencia es una imagen grande que abarca todo el ancho de la pagina y se ve espectacular asi que aremos una;
Como referencia recomiendo que agan el ancho del header unos 10 o 20 pixeles para que se vea bien y aqui te dejo mas omenos la muestra:


Y la imagen quedaria asi:

Botones del menu

Ahora aremos los botones del menu y aqui dende muchos se complican la vida y la existencia que spry que acordeon ¡nada!.
Como primera lean este post que tambien ise:


Esta seran las imagenes que usare en el menu:

out;


in;


Barra que servira de fondo;


Y bien mas omenos quedaria asi;


Bueno los botones acavados ahora a ponerlos en el dreamweaver

Paso 3

En nuestro dreamweaver agarramos y ponemos una etiqueta div que seria asi:
Van a diseño;

Y escojen la etiqueta div;

Les saldra una ventanita ojo no le mueva nada solo acepten y listo ya tienen una div
¿Ypara que sirve?
Bueno la etiqueta div es para que aliniemos el contenido al centro
¿Y eso en que me afecta?
En nada pero es para evitar errores.

Bueno ya la pusieron y que sale una leyenda "inserta aqui el contenido del div"

Bueno lo borran, y noten que les quedara asi mas omenos su codigo

dijo:

<div></div>

Bueno procuren que cuando ponan la otra cosa que les dire quede exactamente enmedio de >"Aqui"<

Ok ahora insertaremos una tabla de 2 filas y 1 columna sin borde, un grosor de tabla al 100%, relleno 0 y espacio 0
Asi lo llenan;


Ahora veran que aparecio una tabla punteada en dos secciones bueno apretan la seccion de arriva y ahora se van a la barra de herramientas y seleccionan comun y le ponen que imagen diseñaron de header.


y en la seccion de abajo que creen le agregamos otravez con las mismas especificaciones.
Ahora en la seccion de arriva que creen otra tabla pero esta la hacen asi;


En donde cada seccion le pondremos la imagen de sustitucion que ya havia dicho que vieran el post y si no se acuerdan aqui esta de nuevo:


Y que creen ya vamos de gane jojo.

Paso 4

Bueno ya agregamos lo que son el fondo de pantalla, el header, los botones de menu.

Ahora el contenido
Eso es lo mas facil del mundo jaja.
Nadamas le ponen lo que quieran poner de contenido y wala ya esta su pagina terminada.

Nota: El contenido le puedes poner lo que quieras ya que esta libre jaja, le puedes poner lo que son mas tablas, imagenes, letras, de todo; lo que aqui cuenta es tu creatividad.

Importante: Al guardar su pagina ponganle el nombre de index.
¿Porque index y no juancho?
Por que los hsting leen como archivo pricipal al index y si no existe es como si no cargaras nada.

Ahora ya tengo mi web, Quiero subirla a mi host.

Bueno aqui les presento el siguiente paso.

Paso 5

Bueno ya que tienes tu pagina terminada y que lusiria mas o menos asi:


Busquen un host desente y bueno de acuerdo con las nesecidades de cada uno.
¿Y como la subo a la web?
Pues mira este post que ise para que veas como se suve rapido sencillo y eficas:





Bueno por lo pronto seria todo por mi parte espero que les guste y recuerden:

Si tienen dudas no duden PREGUNTEN


Para el proximo post publicare un menu echo en AJAX para que no agan tatas paginas para su web



Recuerda que te puedo ayudar en lo que tengas dudas aqui estare y si no pues te respondo cuando lo este.



Grasias por sus comentarios y espero ser NFU pronto jajaja
Y como dijo hitler

dijo:

Sino me ago NFU me corto las bolas

En serio.


Te gustan mis post?
hasmelo saber ya quie si no propero me dedicare a la ayuda individual o comentar siquiera en post de novatos