About Taringa!

Popular channels

Crear una web con HTML5 con Dreamweaver CS6

HTML5 ha venido a cambiar casi por completo la forma en que generalmente se diseñan las páginas web utilizando código, como bien sabemos desde ya hace algún tiempo el HTML ha sido el código base para la creación de páginas webs, lamentablemente aun bastante sencillo este código comenzó a ser lo obsoleto para diferentes acciones que Internet exige.

De ahí que los desarrolladores se han dado a la tarea de crear páginas web enfocadas a los recursos multimedia y mejora del código con el HTML5 o por así decir la versión mejorada de HTML.

En esta ocasión nos gustaría darte los pasos a seguir para crear una web en HTML5 de una manera sencilla y eficaz, sin complicaciones. Como ya sabremos el camisa a crear una web por medio de código se divide en dos, los usuarios con conocimientos avanzados en este código y los que utilizan programas que diseñan de una manera intuitiva para nosotros.

En este breve tutorial utilizaremos Dreamweaver CS6 como editor de código, este software nos permite practicar tanto con el código como en formato diseño lo que es bastante agradable para usuarios con poco conocimiento en el tema.

Utilizar la combinación de HTML5 y Dreamweaver es relativamente sencillo por lo cual hasta usuarios con poco conocimiento podrán dominarlo fácilmente, basta con crear un árbol de archivos organizado para que nuestra web funcione correctamente.

HTML5 con Dreamweaver CS6

  • Estructura de archivos
  • Index.html
  • Contenido
  • Imágenes
  • Enlaces y archivos


Creación de estructura de archivos

Es importante tener en cuenta que un elemento vital es crear una estructura clara de archivos al momento de crear nuestra web para poder subirla fácilmente a nuestro servidor. Para ello es recomendable crear un folder con el nombre del proyecto dentro del cual colocaremos todas las páginas de nuestra web con la extensión HTML , que por supuesto incluirá nuestra página principal llamada “Index.html”.

Dentro de este mismo folder crearemos otros folders para las imágenes, videos, documentos y script de se necesarios. Cada vez que agreguemos una imagen, documento o video a nuestra plantilla previamente deberemos de haberlo colocado en el folder correspondiente y desde ahí insertarlo.

Esto permite crear un sistema jeragico que utilizaremos en el servidor que nos permitirá tener nuestra web en online rápidamente. La forma más sencilla de comprender este sistema de archivos es comprendiendo que en este mismo orden deberemos de crear un sistema de carpetas en nuestro servidor a las cuales luego solo deberemos de subir nuestros archivos.


Pasos para crear nuestro Index

  • Lo primero será activar nuestro programa Dreamweaver CS6 y en la página de inicio seleccionaremos HTML como opción, esto abrirá inmediatamente nuestra primera página, el programa se encargara de crear el esqueleto del código que poco poco aumentaremos.
  • Hay que guardar nuestro archivo html con el nombre “Index” nombre que permite a los servidores reconocer la pagina principal de nuestra web cuando lo subimos.
  • Lo siguiente que haremos será seleccionar si trabajaremos “Diseño” o “Código”, sin importar el caso lo recomendable es utilizar ambos para observar cómo va nuestro trabajo.
  • Ahora vamos a seleccionar si utilizaremos una de las plantillas predefinidas de Dreamweaver o si importaremos alguna, sin importar nuestra selección una vez carga la plantilla observaremos como esta posee diferentes partes que son modificables.
  • Ahora toca modificar la plantilla para que esta se acople a nuestras necesidades.

En este punto podemos comenzar a cambiar el color de nuestro fondo de plantilla seleccionado con el ratón cada una de las áreas de la plantilla, agregando texto o agregando imágenes.

Cabe resaltar que debemos de agregar un menú para poder enlazar todas las páginas que contendrá nuestra web, para cada una de las secciones del mismo deberemos de crear un archivo HTML y renómbralo con un nombre sencillo de recordar y que haga referencia al mismo.



Creación de contenido para nuestra web

Una vez hayamos aprendido a modificar nuestra plantilla utilizando HTML5 y Dreamweaver lo siguiente será crear contenido para la misma, para lo cual abriremos una nueva página en Dreamweaver y cargaremos la plantilla que utilizaremos.

Lo único que deberemos de hacer es modificar nuestra plantilla agregando el texto que deseamos colocar, la mayoría de plantillas prefabricadas ya poseen el espacio para introducir el texto que deseamos por lo cual lo único que deberemos de hacer será modificar el mismo.

Asimismo, deberemos de maquetear el texto colocando negritas en las palabras que lo ameriten así como resaltando títulos y utilizando cursivas cuando sea necesario.

En caso que deseemos agregar algún elemento textual extra basta con colocarnos con el curso donde deseamos agregar el texto y buscar la opción “Insertar “ y seleccionar el tipo de elemento a insertar que en este caso es una caja de texto o de titulo.

Insertar imágenes a nuestra plantilla

Como es de esperarse la mayoría de usuarios utilizan las imágenes para reforzar el contenido de una web, para ello necesitaremos insertar una imagen a nuestra plantilla lo que resulta bastante sencillo si utilizamos Dreamweaver.



Lo primero que debemos de hacer es colocarnos en la pagina HTML en la que insertaremos la imagen y luego colocar el cursor sobre el área donde deseamos que se inserte la imagen. Damos clic en la opción “Insertar” e insertamos desde nuestro folder de imaganes previamente creado para nuestro proyecto, esto permitirá que todo el contenido este completamente enlazado.



Ya una vez nuestra imagen esta insertada procedemos a maquillarla centrándola en el texto o simplemente agregándole bordes por ejemplo. Este mismo procedimiento se realiza para insertar videos en caso que así lo deseemos con la salvedad que deberemos de previamente colocar el video en nuestro conjunto de archivo y desde el folder correspondiente insertarlo a la plantilla.



Creación de links y archivos para descargar

Los links son sin duda parte fundamental de una web ya que estos nos permiten movernos de una página a otra enlazando nuestro contenido, para crear un link basta con seleccionar la palabra que será el referente del link y buscamos nuevamente la opción “Insertar” y luego “Hipervínculo” la cual nos permitirá seleccionar de nuestro árbol de archivos la pagina HTML que enlazara el vinculo.



Esto permite la creación sencilla de links para nuestra web de esa misma manera realizamos el procedimiento para enlazar archivos que podrán ser descargados o leídos en online, tomando en cuenta que estos pueden ser en casi todos los formatos conocidos.



De esta sencilla manera podemos crear nuestra web HTML 5 en Dreamweaver y tenerla lista para subirla a un servidor, es importante recordar que la clave es crear el sistema de archivos y folders y mantener la misma estructura al momento de subir nuestra web.



Ya que esto le indicara a nuestro servidor como debe de leer nuestra web una vez la misma este arriba y cargada en nuestro directorio principal. Este procedimiento puede ser realizado de manera muy similar en cualquier editor para páginas web del mercado.


Cómo subir nuestra web a nuestro servidor


Una vez hayamos creado nuestra web es el momento de subir los archivos de la misma a nuestro servidor, para ello con anticipación deberemos de haber contratado un plan de hosting para hospedar nuestra web y haber por supuesto comprado un dominio para el mismo propósito.



Lo que haremos es muy sencillo ingresaremos a nuestro Cpanel con nuestro nombre de usuarios y password y luego nos dirigiremos a la opción de “Administrador de Archivos” y buscaremos el directorio principal de nuestro servidor que será la ubicación donde subiremos nuestros archivos. Existen dos formas para subir nuestros archivos utilizando el gestor de archivos de nuestro servidor de forma manual o utilizando un cliente FTP, nosotros explicaremos brevemente ambos casos.



Subida de archivos de forma manual

Utilizando esta opción lo que deberemos de hacer es ir a “Administrador de Archivos” y crear la misma estructura de folders que tenemos en local en nuestro directorio principal (folder de imágenes, video, documentos, script etc…), luego de lo cual comenzaremos a subir nuestros archivos con el gestor de archivos.



Tomando muy en cuenta que todos los archivos de extensión html deberán quedar fuera de cualquier folder y en el directorio principal, por lo cual se recomienda que sean estos los primeros en ser subidos a nuestro servidor.



Luego de esto ingresamos por ejemplo a nuestro poder de imágenes en el servidor web y con el estor de archivos comenzamos a subir los archivos de nuestra carpeta de imágenes que tenemos en el ordenador y así sucesivamente para cada folder, tomando en cuenta que ningún folder debe de ser cambiado de nombre en el servidor web manteniendo la estructura y nombre de los que están en el ordenador.



Subida de archivos utilizando cliente FTP

La utilización de un cliente FTP automatiza nuestro trabajo lo único que deberemos de hacer es darle acceso a nuestro cimente con nombre de usuarios y password a nuestro servidor y comenzar a crear la misma estructura de archivos que poseemos en el ordenador.



El cliente FTP nos permitirá simplemente con arrastras los archivos de la sección local a online para que nuestros archivos estén en el servidor en unos minutos, dependiendo de peso de cada uno de estos. Luego de esto, bastará con enlazar los DNS de nuestro servidor en nuestro registrador de dominio y luego de unos minutos tendremos en online nuestra página web, esto sin utilizar los tradicionales gestores de contenido como WordPress.



Crear páginas web en código HTML5 facilitará el correcto desarrollo de nuestro proyecto y no depender necesariamente de una plantilla en especifico si deseamos desarrollarla desde cero teniendo los conocimientos básicos de este tipo de código de programación de páginas web como lo es HTML5.
0No comments yet
      GIF