Post on 23-Mar-2016
description
P á g i n a | 1
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
P á g i n a | 2
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
Presentación
Con el libro "Crea y Publica Páginas Web Paso a Paso" aprenderás fácilmente a crear y publicar Páginas web como un profesional.
El libro está realizado por el experimentado diseñador web Pablo Sámano Quiroz que a ordenado, sintetizado y estructurado consejos estratégicos e indispensables a la hora de diseñar una página de internet tal y como lo hacen los profesionales. Este libro facilita el aprendizaje del diseño web a toda persona que disponga de computadora, conexión a internet, Dreamweaver®, Photoshop® y un servicio contratado de host.
Te invitamos a disponer de los conocimientos necesarios para crear, publicar y mantener Páginas web de inmediato.
Trabaja como diseñador web. Domina una nueva habilidad. Consigue un mejor trabajo. Entra a una empresa o agencia de diseño. O mejor aún, monta tu propio negocio.
Esta información te ayudará a organizar mejor tus proyectos web y sacar mejor provecho del tiempo
que inviertes en cada uno de ellos. Te invito a disfrutar de la calidad de vida que te puedes brindar
con ayuda de internet, busca un lugar tranquilo, ponte cómodo y asegúrate que nadie te moleste.
Procúrate este mismo espacio y ambiente por el tiempo que tú consideres justo diariamente para
ver y repasar cada uno de los módulos de este libro. Esto te ayudará a tener mayor concentración y
entendimiento para lo que aquí te enseñaré, te recomiendo ampliamente también que consultes el
sitio oficial del libro http://www.redbai.com donde encontrarás información de interés y herramientas
de consulta y capacitación.
Todas las recomendaciones que yo te doy me han funcionado personalmente una y otra vez, de
ninguna manera te recomendaría algo que antes yo no hubiera corroborado que funcione. Aprende
todo lo que puedas y se hábil con tu mente para estructurar cada elemento que en esta guía te
detallo. Muchas felicidades por que a partir de hoy tu vida puede dar un giro de 180 grados.
Abróchate los cinturones y empecemos!
Te invito a aprender paso a paso, claramente y a tu propio ritmo a planear, crear y publicar páginas web como un profesional.
P á g i n a | 3
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
Índice
1. Los 3 pasos para crear Páginas web
a. PLANEA
b. CREA
c. PUBLICA
2. Planea los contenidos de la página de internet y la navegación del usuario
a. Tipos de Páginas web
b. Tipos de usuarios
c. Tipos de empresas o dueños de Páginas web (clientes)
d. Tipos de estrategias en internet
e. Árbol de Navegación
f. Descriptivo
g. Diagramación de la interfaz gráfica
3. Aprende de manera sencilla y ágil lenguaje HTML y CSS
a. Conoce el lenguaje HTML
b. Etiquetas HTML
c. Contenido y Diseño
d. Conoce las hojas de estilos CSS
e. Aplicando estilos a mi página HTML
4. Diseña y personaliza Páginas web como un profesional
a. Navegabilidad y Usabilidad
b. Diagramación del contenido de la página
c. Implementación de estilos CSS
d. Integración de una imagen en el archivo HTML
e. Diseño de textos
f. Integrando un Link a una imagen del logotipo
g. Creación del cabezal de la página web
h. Creación del menú principal
i. Creación de la parte del contenido
j. Creación del pié de la página
k. Diseño y creación de las páginas internas
5. Sube y modifica los archivos de la página vía FTP
a. Explicación del proceso de publicación web
b. Información requerida para configurar clientes FTP
c. Configuración de una cuente FTP
d. Subir y bajar archivos vía FTP
e. Visualizar la página en internet
6. Crea formularios de contacto
a. Funcionalidad del formulario
b. Código PHP
c. Creación del documento envio.php
d. Publicación y pruebas
e. Visualización de la página de internet en el browser
P á g i n a | 4
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
1. Los 3 pasos para crear Páginas web
Al principio cuando tenía que hacer un sitio web me preguntaba la manera más adecuada de
realizarlo, sabía por experiencia propia o ajena que los proyectos para web son complicados y
laboriosos. Hoy vas a aprender los 3 pasos para crear una página de internet de manera ágil y
profesional. Estos pasos son:
1. PLANEA
2. CREA
3. PUBLICA
Estos son los 3 tiempos que yo personalmente uso al momento de desarrollar cada una de las
Páginas web que desarrollo día a día.
1.1. PLANEA
La planeación es INDISPENSABLE para realizar correctamente cualquier proyecto, con la planeación vamos a definir claramente cómo queremos la página de internet, también vamos a saber con qué información contamos y qué otra vamos a necesitar, la GRAN ventaja de hacer una planeación es que vamos a poder cumplir expectativas o requerimientos previamente especificados por el cliente o dueño de la página de internet, estructuraremos nuestro contenido y sabremos claramente qué lugar va a ocupar cada elemento en la interfaz gráfica de la página de internet antes de hacerla.
La planeación que yo personalmente contemplo para crear Páginas web maneja 6 aspectos principales:
Objetivos Información
Requerimientos
Árbol de navegación
Contenido estructurado
Esquema de la interfaz gráfica
Teniendo estos 6 aspectos cubiertos podemos dar acción al desarrollo de la página de internet con la correcta visión, alcances y expectativas. A continuación te voy a describir claramente cada uno de ellos para que los entiendas con mayor claridad y te dispongas a usarlos en tu próximo proyecto web:
P á g i n a | 5
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
Objetivos. Un objetivo se puede definir como un resultado esperado. Cuando nos
planteamos correctamente los objetivos de nuestra página de internet estamos desde un
inicio con la visión clara de lo que vamos a obtener al final como resultado.
Los objetivos más comunes para una página de internet son los siguientes:
1. Tener presencia en internet de forma profesional 2. Promover un servicio o producto en particular 3. Mostrar un catálogo completo de productos en internet 4. Aumentar las ventas con ayuda de internet 5. Mejorar la comunicación con los clientes, proveedores, distribuidores o prospectos
Cada una de estas necesidades nos determinaran los alcances y características que tendrá nuestra página de internet.
Ahora voy a describirte los ejemplos de objetivos en una redacción que yo uso personalmente para plantearme y cumplir con las necesidades que tiene cada uno de los objetivos de arriba, en orden sería más o menos así:
1. Diseñar una página de internet de manera profesional para la empresa. Con contenidos relevantes presentados de manera ágil y clara
2. Diseñar un página de internet del tipo promocional, en donde se mostrará lo más atractivo del producto o servicio
3. Desarrollar un catálogo en línea con la información relevante de cada producto y organizados por categoría
4. Crear un sistema de comercio electrónico y apoyarlo con una campaña de referenciamiento web
5. Implementar en la página de internet con sistemas de comunicación directa con el usuario como Chat en vivo, Foros o Formulario de contacto.
El primer grupo de objetivos se refiere a la necesidad que tiene el dueño de la página de internet. El segundo grupo se refiere a los objetivos que tiene y se debe plantear el diseñador web que lleve a cabo la tarea de diseñar la página de internet.
Información. La información disponible que pueda ser de utilidad para diseñar la página
web, se puede organizar en externa e interna de la empresa.
La información interna de la empresa es toda aquella que habla de la organización y sus detalles, casi siempre es generada dentro de la misma empresa o por proveedores contratados por la misma algunos ejemplos de información interna de la empresa son:
1. Presentación de la empresa en PPT u otro formato como PDF
2. Fotografías de la empresa y sus productos 3. Listas de productos con descripciones 4. Cartas de presentación o ventas 5. Herramientas de comunicación como carteles, folletos, catálogos o página de internet
actual
P á g i n a | 6
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
La información externa se refiere al entorno que rodea a la empresa, como puede ser la competencia, investigaciones de mercado, nuevas tecnologías, congresos y asociaciones del giro de la empresa, etc.
Hay que recopilar toda la información posible, entre más información recopilemos más abundante será nuestro contenido y más herramientas tendremos para estructurar la página de internet.
Requerimientos. Los requerimientos son las necesidades particulares de la página de
internet, hay requerimientos:
1. TÉCNICOS
2. FUNCIONALES
3. IMAGEN
Los requerimientos se refieren a todas aquellas especificaciones que tengamos a bien contemplar
en el proceso de planeación de nuestra página de internet.
TÉCNICOS: Se refieren a especificaciones del servidor web y la tecnología con la que será creada
la página de internet, el presente libro está diseñado para que el sitio web que creemos sea
compatible con prácticamente cualquier servidor web del tipo LINUX.
FUNCIONALES: Se refieren a todos los detalles de interactividad que queramos de antemano
presentes en nuestro sitio de internet, esto es con referencia a momentos especiales que
queramos integrar en la navegación del usuario.
IMAGEN: Los requerimientos de imagen se refieren a las especificaciones de identidad que maneje
la empresa o dueño de la página de internet.
Árbol de navegación. El árbol de navegación nos ayudará a dimensionar detalladamente
cada parte de la página de internet, es una herramienta indispensable en la planeación del
proyecto.
En un árbol de navegación se desglosan todas las secciones de la página de internet que vamos a
crear, cada sección está representada por un nodo y está organizado a manera de organigrama.
En este esquema podemos ver claramente el número de secciones que va a tener nuestra página
de internet, y por consiguiente podemos deducir que va a contener 9 secciones en total.
También este esquema nos ayuda a saber cuáles van a ser las secciones principales que va a
contener nuestro menú principal, en el siguiente ejemplo nuestro menú principal se va a conformar
por las siguientes secciones: INICIO, PRODUCTOS, SERVICIOS, LA EMPRESA Y CONTACTO.
P á g i n a | 7
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
Contenido estructurado. Tener el contenido listo y estructurado acelerará el diseño de la
página de internet, se puede redactar a manera de documento de texto organizado como un
libro.
El contenido estructurado es un documento en Word o cualquier otro editor de texto, con el texto
organizado y basado en las secciones que se mencionan en el Árbol de Navegación. Este
documento contendrá un índice, sugiero importar el esquema del Árbol de Navegación a manera de
índice y cada sección desarrollada en texto finalizado y validado para incorporar a la página de
internet, sugiero colocar comentarios adicionales a imágenes a utilizar u otro elemento importante.
Esquema de la interfaz gráfica. Es clave tener en un diagrama rápido de hacer la
ubicación prevista para cada elemento que queremos que esté en la página de internet,
debemos tomar en cuenta los siguientes factores al momento de realizar el esquema de la
interfaz gráfica:
1. Dimensiones en pixeles 2. Ubicación 3. Contenido
DIMESIONES EN PIXELES. se refiere a la utilización como unidad de medida para cualquier
elemento a utilizar en la página de internet los pixeles, tanto para las imágenes hechas en
Photoshop® como los elementos montados en la página de internet con ayuda de Dreamweaver®.
UBICACIÓN. La ubicación que va a tener cada elemento en la pantalla, arriba, a la derecha,
izquierda o abajo.
CONTENIDO. El contenido es la indicación del tipo de contenido que va a contener esta área
específica de la interfaz gráfica.
Con ayuda del Libro "Crea y Publica Páginas Web Paso a Paso" vas a aprender a:
Dimensionar correctamente una página de internet Organizar correctamente la información disponible Cumplir los requerimientos más comunes para crear y publicar una página de internet Realizar un árbol de navegación de forma rápida y ágil Estructurar el contenido con respecto a las secciones de la página de internet Saber realizar esquemas de interfaz gráfica de forma sencilla y profesional
P á g i n a | 8
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
1.2. CREA
Una página de internet está conformada por archivos HTML entrelazados mediantes Enlaces Hipertextuales, también llamados Links, Botones, Menús, etc. Un enlace ayuda a los usuarios a "navegar" por la página de internet y así permitirle todos los documentos enlazados a la página de internet. Los enlaces pueden estar presentes en diferentes formas dentro de la página de internet, las más comunes son:
Texto con enlace Imagen con enlace Animación con enlace Menú con varios enlaces ya sea en texto o imagen, incluso los hay con animación
Cada documento HTML puede contener los siguientes elementos :
1. Texto 2. Imagen 3. Animaciones Flash® 4. Archivos de audio MP3 5. Videos en formatos QuickTime®, WMV o FLV 6. Código en JavaScript 7. Código en CSS
Con ayuda del Libro "Crea y Publica Páginas Web Paso a Paso" vas a aprender a:
Crear una página de internet como un profesional Entender y escribir código HTML Conocer y aplicar estilos CSS
Crear links, insertar imágenes, hacer columnas en HTML, etc. Aprender funcionalidades básicas de Dreamweaver® Recomiendo ampliamente utilizar Photoshop®
P á g i n a | 9
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
1.3. PUBLICA
Para publicar una página en internet y lograr que todo el mundo pueda verla es necesario contar con dos servicios indispensable:
1. Nombre de Dominio
2. Hospedaje Web
Nombre de Dominio. Es la dirección que los usuarios van a escribir para encontrar la página
que vamos a publicar
Elige un nombre de dominio siguiendo estas sencillas reglas: o El nombre de dominio consiste en tres partes divididas por un punto:
www.nombrededominio.com
El nombre de dominio no debe tener espacios entre caracteres ni caracteres especiales (ñ, ó, ü, ", @)
La extensión es el tipo de dominio en que se suscribirá nuestro nombre, hay de muchos tipos y cada vez hay más pero el más comercial es el .com
o Puedes contratar tu dominio con el mismo proveedor en donde adquieras tu hosting, o bien puedes hacerlo directamente en nic.com en donde también podrás ver la disponibilidad del dominio así como información de los dominios que ya estén contratados.
Hospedaje Web. Es un espacio en un servidor web, tiene varios nombre en el mercado, algunos
lo llaman host, hosting, hospedaje web o web host.
Aspectos fundamentales para contratar un servicio de hosting: 1. Espacio en disco 2. Transferencia 3. Cuentas de correo electrónico 4. Soporte técnico
Navegador Web. Es un software que sirve para visualizar Páginas web. Los hay de diferentes
marcas, entre los más usados están: Internet Explorer, FireFox, Safari, Opera y Chrome.
Con ayuda del Libro "Crea y Publica Páginas Web Paso a Paso" vas a aprender en sencillos pasos a:
Publicar la página de internet Visualizarla por medio de diferentes navegadores de internet Actualizar archivos de la página de internet
P á g i n a | 10
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
2. Planea los contenidos de la página de internet y la navegación del usuario
Para poder planear los contenidos de una página de internet primero debemos saber qué tipo de
página vamos a hacer, esto nos ayudará a dirigir nuestros esfuerzos de la manera correcta ya que
cada tipo de página de internet tiene enfoques diferentes, así mismo requerirán contenidos de
diferente naturaleza.
Tipos de Páginas web Los principales tipos de páginas web que se usan actualmente son:
Página de contacto o Landing Page
Consiste en una sola hoja y su objetivo es captar prospectos de forma automatizada. Está formada
por la imagen del producto o servicio, una descripción en texto, una invitación a registrarse y un
formulario de contacto. Generalmente se utilizan para lanzamientos y ventas directas.
Página promocional
Hablan de un tema en particular y está diseñadas de forma muy atractiva para captar la atención
del cliente y cautivarlos con el producto. Tiene aparte de información detallada del producto o
servicio, un formulario de contacto que generalmente se acompaña por una promoción para
registrarse en la página de internet. Generalmente se utiliza para lanzamientos y promociones.
Página empresarial
Informan al público sobre la empresa, sus productos y servicios, información y formas de contacto,
así como información adicional de relevancia para la empresa y su público, como pueden ser
noticias de la empresa o su sector, documentos de uso frecuente o incluso links a otras páginas
que sean de referencia para la empresa y su público. Generalmente se utilizan para iniciar la
presencia en internet de empresas de todo tamaño.
Página corporativa
Pueden contener aplicaciones en lenguajes de programación web como pueden ser JAVAScript o
PHP. Este tipo de Páginas web se enfocan en presentar de manera detallada y profesional al
corporativo, la información más utilizada es: Presentación de la empresa, Misión, Visión, Historia,
Filosofía de la empresa, Organigrama, Forma de trabajo, Instalaciones, Reconocimientos,
Certificaciones, Productos o Servicios, Categorías o Líneas de productos, Ficha por cada producto,
Preguntas Frecuentes, Atención al cliente y sistema de soporte y asistencia en línea, Aplicación
para Proveedores, Aplicación para Distribuidores, Noticias, Informes relevantes, Acceso al webmail,
Sistema de intranet. Generalmente se utilizan para proyectar a una empresa como líder en su ramo
y sobre todo atender de forma eficiente las comunicaciones tanto con su equipo de trabajo como
P á g i n a | 11
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
con el entorno de la empresa conformado de proveedores, distribuidores, aliados, clientes,
prospectos y público en general.
Sitio especializado
Consiste en varias hojas entrelazadas que pueden contener aplicaciones en lenguajes de
programación web como pueden ser JavaScripts o PHP. Este tipo de Páginas web tocan temas
variados organizados en secciones también llamados canales. Cada canal trata de manera
monográfica un tema en particular. Los portales se alimentan constantemente con contenido nuevo
periódicamente, y al igual que las publicaciones tradicionales está enfocado a ser consultado por un
gran número de lectores. Se utilizan para captar un gran número de visitantes con gustos similares
y su estrategia comercial está enfocada en ofertar espacios publicitarios y servicios online.
Tienda virtual
Es un catálogo de productos online con opción de compra en línea, puede contener programación
web para permitir administrar la lista de productos y otras funcionalidades. Este tipo de Páginas
web se enfocan cien por ciento a las ventas, en donde la estrategia comercial está presente en
cada hoja a manera de banner promocional, ofertas, suscripciones, cupones, etc. Las tiendas
virtuales se alimentan y administran constantemente ya que la interacción del usuario es frecuente
y requiere de respuestas oportunas y útiles. Las tiendas virtuales se utilizan para aumentar las
ventas con ayuda de una herramienta que llega a todo el mundo y funciona las 24 horas, los 7 días
de la semana.
Blog
Consiste en una aplicación en línea a manera de diario, que nos permite publicar periódicamente
artículos, entradas o post´s. Este tipo de Páginas web se utilizan para desarrollar una cierta
temática y dejar testimonio constante de los sucesos y datos más importantes. Se organiza por
categorías y fechas a manera de archivo mensual. Los blogs se actualizan y administran
constantemente ya que una de sus características primordiales es la periodicidad con que se
actualiza y el gran contenido que esto generará. Los bolgs se pueden utilizar para desarrollar un
tema que nos apasione y compartirlo con las demás personas, también puede ser un blog
administrado por varias personas, en estos casos un blog puede funcionar para llevar la bitácora de
un proyecto o empresa, con la finalidad de tener a todos al tanto y al día de los sucesos más
relevantes.
Redes sociales
Este tipo de páginas web son en realidad sistemas automatizados con los que el usuario interactúa
directamente, pueden ser para todo tipo de usos imaginables, se caracterizan por ser necesario un
registro por parte del usuario para tener acceso al sistema, usa por lo general perfiles de usuario,
grupos, métodos de interacción de usuario a usuario como chats, muros dinámicos, foros,
mensajería en el mismo sitio web o vía email, juegos, etc.
Galería de fotos o videos
Descripción: Consiste en varias hojas entrelazadas organizadas por categorías y que muestran de
forma primordial imágenes, fotografías o videos de una cierta colección. Se utilizan para mostrar el
trabajo de artistas visuales, arquitectos, diseñadores, fotógrafos, artesanos, etc. Las galerías de
P á g i n a | 12
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
fotos se caracterizan por darle prioridad a la imagen, por consiguiente son de diseños muy sencillos
y discretos y contempla un espacio predominante la imagen.
Tipos de usuarios
Principiante
Como su nombre lo indica tiene muy poca experiencia usando internet, sus escasos conocimientos
lo limitan en la navegación y requiere de indicadores claros y explícitos para entender el
funcionamiento de la página de internet. Su actividad online es escaza.
Intermedio
Es el groso de la gente que usa internet, este usuario es activo y le gusta experimentar con la
interfaz gráfica de la página de internet. Sin embargo agradece la ayuda que la interfaz le puede dar
y requiere de más medios para permanecer en el sitio por más tiempo, ya que su habilidad le da
movilidad y puede navegar libremente por los buscadores y otras Páginas web. Su actividad online
es frecuente.
Experimentado
El grupo de usuarios experimentado en internet se refiere a personas que se dedican de alguna u
otra forma a hacer internet, ya sea como programadores, diseñadores web, mercadologos,
empresarios, etc. Estos usuarios son muy hábiles para encontrar el contenido que buscan, pero
requieren y valoran una página de internet bien organizada y funcional. Usan si así lo requieren los
medios que tenga la página de internet para entrar en contacto con la empresa y son muy exigentes
con la correcta funcionalidad de cada parte de la página de internet.
Tipos de empresas o dueños de Páginas web Cada página de internet tiene un responsable y beneficiario, puede ser una empresa, persona física
u organización y es importante tener esto en cuenta para saber de qué manera vamos a diseñar la
página de internet, así como la manera en la que vamos a validarla con el o los responsables.
Personas físicas
Una persona física puede ser un profesionista independiente, consultor, freelance, y toda aquella
persona que trabaja por su cuenta. Las Páginas web para personas físicas se enfocan en presentar
de manera ordenada los servicios y experiencia de la persona, le da especial importancia a
presentar a la persona mediante fotografías e información escrita como puede ser: Experiencia,
Curriculum Vitae, Recomendaciones y Especialidades.
P á g i n a | 13
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
Pymes
Las PyMe´s son empresas pequeñas y medianas que por su mismo crecimiento requieren Páginas
web profesionales y que proyecten correctamente su marca en internet. Generalmente es más de
una persona la que valida la página de internet. Este tipo de clientes comparte el objetivo de
distinguirse de las demás empresas y requieren funcionalidades más comerciales dentro de la
página de internet, como pueden ser cotizador en línea, tienda virtual, soporte técnico online, etc.
Empresa grande
Una empresa grande es una empresa ya consolidada en el mercado, generalmente son empresas
ya reconocidas que tienen prestigio y por lo mismo requieren de Páginas web profesionales y de
vanguardia. Son empresas con su propio departamento de diseño, sistemas y mercadotecnia,
cuando requieren servicios externos de diseño web, generalmente lo hacen por falta de personal
interno o experiencia en el ramo, es conveniente asegurar cada una de las cuestiones que se
prometen a la hora de hacer la propuesta ya que este tipo de clientes son exigentes y tienen varias
personas revisando los resultados del sitio web.
Corporativo
Un corporativo es un grupo de empresas que comparten una misma dirección, generalmente son
de varios tipos y sectores pero su estrategia única puede llevarlos a todas las empresas a ser
consideradas dentro de la página de internet del corporativo en donde se va a redireccionar a toda
persona interesada en cada uno de los aspectos del corporativo. Este tipo de clientes a parte de
requerir una página de internet que proyecte su marca en internet, también requieren secciones
para entablar comunicación con sus mismos empleados, socios, inversionistas y proveedores, en
donde en cada aspecto pueden tener una estrategia de comunicación específica.
Asociaciones y organizaciones
Las Asociaciones u Organizaciones civiles son agrupaciones que se encargan de gestionar
aspectos referentes a sectores muy específicos, pueden ser agrupaciones de empresas, personas
o ambas. Lo más importante para este tipo de clientes para con su página de internet es entablas
una comunicación directa y abierta con su público y brindar atención e información de valor a sus
asociados, generalmente comparten documentos a sus asociados mediante accesos restringidos
por medio de sistemas de logueo.
Gobierno
El gobierno es el último de los tipos de clientes que podemos tener en nuestra labor como
diseñadores web, con el gobierno se puede llegar por medio de licitaciones o participación por
medio de un tercero que es el que a su vez haya ganado la licitación para hacerle un servicio al
gobierno. Al igual que los grandes corporativos el Gobierno tiene departamentos especializados, los
cuales se encargan de revisar cada uno de los aspectos que le confiere la página de internet.
P á g i n a | 14
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
Tipos de estrategias en internet Estos tipos de estrategias que actualmente se utilizan en internet están por lo general mezcladas,
por razones de claridad voy a describir cada una.
Presencia en internet
La presencia en internet se refiere a tener información de calidad y diseñada para posicionar de la
mejor forma posible nuestra empresa cumpliendo metas comerciales y de comunicación. La
presencia en internet se refiere a hacer disponibles archivos que contengan información específica
montada en un servidor web que la hace disponible al usuario de internet de manera permanente.
Puedo asegurar que es el primer paso en la carrera por el referenciamiento en internet y yo te
ayudaré a tener la correcta presencia en internet para que tus esfuerzos subsecuentes de
promoción web sean más eficientes y den los mejores resultados.
Promoción web
La promoción web ya contempla una presencia básica en internet, y su objetivo es captar el mayor
número de visitas posible, podemos usar varias herramientas que nos permitan lograr este objetivo,
las más comunes son: Email marketing, Banners y publicidad en internet, intercambio de links,
Social media, Publicidad offline, recomendación directa, etc.
Comunicación
Cuando una página de internet está diseñada para mejorar la comunicación de una empresa
requiere que la equipemos con herramientas interactivas que acerquen al público con la empresa,
para esto lo más conveniente es utilizar: Formularios de contacto, Chat, Foros, Tickets,
Comentarios, Redes sociales, y un sistema integrado de software y recursos humanos a la manera
de Help Desk para darle soporte a todas las dudas y comentarios que pueda tener el público.
Venta en línea
Es una de las estrategias más solicitadas para internet, por su gran potencial internet es hoy por
hoy LA herramienta de ventas, y para muestra un botón, como es el de PayPal, Checkout, o se
puede también realizar tranferencia electrónica. Las tiendas virtuales son más complejas ya que
contienen una gran cantidad de productos organizados por categorías. Para hacer eficientemente
una venta en línea vas a necesitar adquirir el libro especializado de “Cómo vender en internet” en
donde explico detalladamente todo lo pasos a seguir para tener una página de internet lista para
vender.
P á g i n a | 15
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
Árbol de Navegación El árbol de navegación es el desgloce esquemático de todas las secciones y subsecciones que va a
tener la página de internet, en él vamos a poder visualizar sus dimensiones y la organización de
cada sección y subsección.
En este proceso vamos a definir todas las secciones de las que se va a componer nuestra página
de internet. Definiremos nombres, sub-secciones, orden y con anotaciones podremos especificar
hasta el nombre de cada archivo HTML para mejor orden y claridad al momento de desarrollar el
sitio.
FIGURA 1: ÁRBOL DE NAVEGACIÓN
Descriptivo Un descriptivo es un documento de texto que nos ayudará a aterrizar todas nuestros planes para
con la página de internet, está organizado por los siguientes capítulos:
1. Objetivos
2. Descripción de la página de internet
3. Tecnología a utilizar
4. Requerimientos técnicos
5. Árbol de navegación
6. Diagrama de interfaz gráfica
7. Tiempos de desarrollo
8. Propuesta económica
P á g i n a | 16
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
Diagramación de la interfaz gráfica Un diagrama de interfaz gráfica nos ayuda a definir los elementos y su ubicación que va a contener
gráficamente la página de internet de forma rápida, a manera de diagrama vamos a poder realizar
un prototipo de nuestra página para previsualizar la forma en que los usuarios van a poder navegar
por la página de internet.
Para mayor claridad de estos tres elementos les pongo enseguida un ejemplo de esquema de
interfaz gráfica.
FIGURA 2: DIAGRAMA DE INTERFAZ GRÁFICA
P á g i n a | 17
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
3. Aprende de manera sencilla y ágil lenguaje HTML y CSS
Conoce el lenguaje HTML HTML significa HyperText Markup Language, como su traducción bien lo indica es un lenguaje de
programación para internet, de hecho es el predominante para la elaboración de Páginas web, algo
así como el estándar el que todos los que se dedican a internet usan o conocen algo.
Un documento HTML puede ser por lo tanto una hoja web. Un grupo de archivos HTML conforman
una página de internet. Ahora, para hacer que haya comunicación entre ellos, es decir para
entrelazarlos unos con otros se utiliza el Hyperlink o enlaces, ¿recuerdas que vimos los enlaces?
Lo siguiente que hay que saber es: si es un lenguaje de etiquetas… ¿qué son las etiquetas?
Las etiquetas en HTML tienen la siguiente forma:
<nombre> </nombre>
Una etiqueta casi siempre está conformada por dos partes:
1. <nombre>
Esta es la parte de la etiqueta que abre
2. </nombre>
Esta es la parte de la etiqueta que cierra
Se les llama etiquetas por que al igual que las etiquetas físicas que conocemos nos ayudan a
identificar cada elemento con su propio nombre. Es importante que estas etiquetas cierren y abran
de manera correcta, para mejor referencia imagínate que son cajas las cuales vas a ir acomodando
una dentro de otra, vamos a hacer la estructura básica de una página de internet.
<html>
<head>
</head>
<body>
</body>
</html>
En el ejemplo tenemos las tres etiquetas principales de un documento HTML, esta amigos míos es
la base de cualquier documento HTML que se pueda realizar. Describiré rápidamente y de manera
sencilla cada una de estas tres etiquetas:
<html> Es la etiqueta que da inicio a un documento HTML, abre y cierra el documento
P á g i n a | 18
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
<head> Es la cabeza del documento y contiene información aplicable a todo el documento, como
enlaces a hojas de estilos y scripts especiales
<body> Es el cuerpo del documento, aquí se pondrá todo el contenido que se visualizará en el
navegador web del usuario que visite la página de internet que realizaremos
Cada caja o etiqueta a parte de contener otras cajas puede contener más cosas, como texto o
imágenes incluso videos o scripts de programación. Veamos algunos ejemplos:
<html>
<head>
<title>Título de la página de internet</title>
</head>
<body>
<h1>Título</h1>
</body>
</html>
Ahora vamos escribir esto en un archivo nuevo dentro de Dreamweaver® y previsualizarlo en
internet, es necesario guardar el documento antes y te sugiero que lo realices dentro de una
carpeta nueva exclusiva para tu página de internet, los cuales serán los que subirás al servidor.
Guarda el archivo como “index.htm” y después busca la opción de “Vista previa en navegador”
dentro del menú Archivo o presiona F11. Para dar un ejemplo, en este caso incluimos dentro de “la
caja” head una nueva caja de etiqueta <title> dentro de la cual escribí el texto “Título de la página
de internet”. También dentro de body etiquetamos la palabra Título con la etiqueta h1.
FIGURA 3: CÓDIGO BÁSICO EN HTML
P á g i n a | 19
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
FIGURA 4: GUARDAR EL ARCHIVO HTML
FIGURA 5: PREVISUALIZACIÓN DEL ARCHIVO HTML EN EL NAVEGADOR WEB FIREFOX
P á g i n a | 20
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
Te voy a enseñar a insertar los siguientes elementos en este archivo HTML:
Logo
Menú
Textos alineados
Imágenes
Botones
Animaciones
Pero antes tenemos que darle una estructura al documento, y con estructura me refiero a organizar
el espacio por medio de cajas de acomodo gráfico. A manera de ejemplo tenemos que acomodar
cuatro elementos en el siguiente espacio y haremos la analogía en el código HTML.
Ahora que ya ubicamos nuestros divs en el archivo HTML, podemos utilizarlos como cajas
contenedoras para cada elemento que vamos a insertar en nuestro archivo HTML. Para identificar a
cada div usamos una etiqueta especial llamada “id” la cual nos ayuda a diferenciar cada uno de los
divs al momento de que les vayamos a integrar un estilo.
A continuación vamos a ver cómo se vería en código HTML una estructura de cajas o div´s, nos
basaremos en la estructura que previamente definimos en la FIGURA 2: DIAGRAMA DE LA
INTERFAZ GRÁFICA.
FIGURA 6: ESTRUCTURA DE DIVS USANDO “ID” COMO IDENTIFICADOR
P á g i n a | 21
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
Etiquetas HTML Te voy a enlistar las etiquetas más importantes que usamos los diseñadores profesionales en
HTML:
<html> Es la etiqueta de inicio de un documento HTML
<head> Aquí se agrupan enlaces externos y metas identificativos
<title> Es donde deberá ir el nombre del documento HTML
<body> Aquí se ubicará el contenido de la página
<a> Representa un enlace
<p> Representa un párrafo de texto
<br> Representa un salto de línea
<div> Representa un div o caja
<h1> Representa un título principal
<img> Representa una imagen
<input> Espacio donde el usuario puede escribir algo para ser enviado por medio de un
formulario
<form> Representa un formulario
<ul> Representa una lista desordenada
<ol> Representa una lista ordenada
<li> Representa un elemento de una lista
Contenido y Diseño En diseño web aplicamos la ley de separar el contenido del diseño, esto es que los archivos HTML
van a tener en lo posible puro contenido y el archivo CSS el puro diseño. Por el momento sólo es
importante que esto lo tengas en mente. Ya más adelante entenderás a lo que nos referimos con
contenido y diseño.
Conoce las hojas de estilo CSS Cascading Style Sheets (CSS) Es el nombre en inglés y oficial para denominar a estos archivos que
se encargan de dar formato y diseño a los archivos HTML.
Te voy a mostrar lo simple que es la sintaxis de este lenguaje de estilos llamada CSS. Primero
vamos a ver los elementos de los que se compone, los cuales a continuación te enlisto:
Selectores
Propiedades
Valores
Un ejemplo de una declaración en lenguaje de estilos CSS sería:
body { background-color:#000;}
P á g i n a | 22
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
Donde body es el selector, background-color es la propiedad y #000 es el valor. Un Selector se
refiere al elemento del archivo HTML al que queremos aplicarle la regla del estilo, en este ejemplo
nos estamos refiriendo al elemento <body> de nuestro archivo HTML. La Propiedad es la
característica que queremos modificar, en este ejemplo queremos modificar el color de fondo. Y por
último, el Valor que le queremos otorgar a la propiedad que elegimos, más adelante veremos más
detalles de las hojas de estilo. Por el momento con esto es suficiente.
Aplicando estilos a mi página HTML Ahora vamos crear algunos estilos que van a ayudar a que se vea más atractiva la página de
internet que estamos creando. Para incorporar una hoja de estilos a nuestra página de internet
primero hay que crear un archivo del tipo .css en donde escribiremos todas las declaraciones que
usaremos. Esto lo hacemos dentro del mismo Dreamweaver® en File > New > CSS File
FIGURA 7: NUEVA HOJA DE ESTILOS CSS
FIGURA 8: NUEVA HOJA DE ESTILOS CSS
P á g i n a | 23
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
A continuación guardamos el archivo como estilo.css justo en la misma carpeta donde se encuentra
nuestro archivo index.htm. Una vez realizado esto enlazamos el archivo estilos.css en el archivo
index.htm por medio de un enlace dentro de la etiqueta head de nuestro archivo index.htm.
FIGURA 9: ADJUNTAR LA HOJA DE ESTILOS ESTILOS.CSS DENTRO DEL ARCHIVO INDEX.HTML
P á g i n a | 24
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
4. Diseña y personaliza Páginas web como un profesional
Navegabilidad y usabilidad
La navegabilidad se refiera a la forma en que el usuario va a navegar por el contenido de nuestra
página de internet, debe responder a necesidades de acción que queremos en el usuario y esto a
su vez está íntimamente relacionado a la usabilidad que tenga cada elemento que coloquemos en
la interfaz gráfica.
Diagramación del contenido de la página
El diagrama del contenido de la página de internet será la guía para realizar el diseño en
Photoshop®, hay que considerar algunos aspectos importantes al momento de realizar una
diagramación de interfaz gráfica:
Dimensiones
Módulos de la interfaz gráfica
o Cabezal
Logo
Menú horizontal
Banner horizontal
o Contenido
Banner principal
Textos
Botones
Menús verticales
o Pié
Menú textual horizontal
Legales
Prioridades
Disponibilidad de información
Implementación de estilos CSS
Para implementar los estilos sólo es necesario contemplar dos cosas:
Que tu hoja de estilos esté correctamente ligada a tu documento HTML
Que los selectores correspondan a los elementos del archivo HTML
Integración de una imagen en el archivo HTML
Para insertar una imagen necesitamos saber primero en dónde y en qué tamaño vamos a
trabajarla. Para eso ya la debimos de haber preparado en Photoshop® el diseño final del sitio web
separado por layers cada elemento importante de la interfaz gráfica. Este diseño deberá estar
P á g i n a | 25
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
basado en la FIGURA 2: DIAGRAMA DE LA INTERFAZ GRÁFICA. El diseño lo puedes hacer de la
forma que lo desees pero siempre y cuando guardes las mismas dimensiones que el esquema
marca, esto para que utilices al pié de la letras las siguientes indicaciones que te voy a dar más
adelante con respecto a los estilos y el diseño que se le aplicara al ejemplo que aquí utilizaré.
Enseguida deberás guardar cada gráfico dentro de una carpeta llamada “images” que deberá estar
colocada en la misma carpeta que contiene el archivo index.htm y estilos.css
La carpeta del proyecto ahora lucirá de la siguiente forma:
FIGURA 10: ESTRUCTURA DE ARCHIVOS PARA LA PÁGINA DE INTERNET
Para seguir con el ejemplo vamos a realizar la siguiente imagen que tendrá el logotipo con
dimensiones aproximadas de: 300px X 140px y exportado como jpg desde Photoshop®.
Ahora para llamar una imagen necesitamos la etiqueta <img src=”images/redbai-logo.jpg” /> y así
de sencillo lo podemos integrar en nuestra página, Observa que la imagen se coloca dentro del div
“header”.
FIGURA 11: INTEGRANDO EL LOGOTIPO EN EL ARCHIVO INDEX.HTML
P á g i n a | 26
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
Diseño de textos
Alinear texto en HTML
Para alinear texto debemos contemplar el área que va a abarcar nuestro texto HTML, para iniciar
podemos definir un párrafo <p></p> dentro del div con ID “contenido”. En seguida vamos a integrar
el texto dentro de la etiqueta.
FIGURA 12: INTEGRANDO TEXTO A NUESTO ARCHIVO HTML
Para alinearlo sólo necesitamos hacer la siguiente declaración en la hoja de estilos:
p {text-align:justify;}
Y con esto todo el texto se alineará de forma justificada.
FIGURA 13: DECLARACIÓN EN ESTILOS.CSS PARA ALINEAR EL TEXTO DE FORMA JUSTIFICADA
P á g i n a | 27
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
Integrando un link a la imagen del logotipo
Otra cosa que también ayuda mucho a darle dinamismo a la página es colocarle links a las
imágenes, podemos hacer esto de la siguiente manera:
<a href=”index.htm”> <img src=”imgs/redbai-logo.jpg”> </a>
Para eliminar el terrible borde se debe de colocar la siguiente propiedad dentro de la imagen <img
src=”imgs/banner2.jpg” border=”0”>
FIGURA 14: INTEGRANDO LINK A LA IMAGEN DEL LOGOTIPO
Creación del cabezal de la página web
Insertamos un logotipo que es actualmente un elemento gráfico fundamental en una página de
internet, ya que comunica de manera directa la identidad de la empresa a la que representa. Se
recomienda colocarlo siempre al iniciar la página de internet, del lado superior izquierdo, para
ajustar esto vamos primero a hacer especificar el estilo que debe tener nuestro div “header”. Para
ello creamos las siguientes declaraciones en la hoja de estilos:
P á g i n a | 28
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
FIGURA 15: INTEGRANDO LOS ESTILOS AL HEADER Y LOGOTIPO
Creación del menú principal
Un menú principal es importante porque es la forma más óptima de mantener dentro de la
navegación a nuestros usuarios, tenemos varias maneras de hacer un menú pero por experiencia y
por facilidad yo siempre recomiendo como menú principal un Menú Horizontal justo debajo del DIV
“header”.
Ya crear un nuevo DIV con ID menuPrincipal, dentro de él vamos a escribir los nombres de las
secciones que queremos integrar a nuestra página de la siguiente manera:
FIGURA 16: INTEGRANDO LOS NOMBRES DE LAS SECCIONES AL MENU PRINCIPAL
Después a cada una le ponemos un link y listo el menú está hecho, ahora sólo restará poner unos
estilos adicionales para lograr el diseño deseado.
P á g i n a | 29
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
FIGURA 17: INTEGRANDO LOS LINKS DE LAS SECCIONES AL MENU PRINCIPAL
FIGURA 18: INTEGRANDO LOS ESTILOS AL MENU PRINCIPAL
P á g i n a | 30
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
Creación de la parte de contenido
El contenido es el espacio más importante de nuestra página de internet, es por él básicamente por
el que en este momento estamos creando Páginas web, porque queremos que ese contenido sea
visto en internet. Así que no cabe duda que el contenido es la parte medular de la página de
internet, por tal motivo se presenta en un lugar privilegiado de la página.
Ya en la diagramación nos dimos cuenta en dónde va a estar colocado nuestro contenido, ahora
vamos a integrar a nuestro código HTML más líneas de contenido, para eso nos ubicamos dentro
del DIV con ID contenido, justo debajo del DIV con ID menuSecundario justo ahí vamos a escribir el
siguiente código:
FIGURA 19: INTEGRAMOS MÁS LÍNEAS DE CONTENIDO A NUESTRO ARCHIVO HTML
También vamos a crear tres paneles para colocar accesos directos a contenido específico de la
página. Para darle formato a la parte de contenido vamos a abrir la hoja de estilos estilos.css y
vamos a escribir algunas líneas de código que en la FIGURA 21 se representan.
Creación del pié de la página
El pié de página generalmente contiene los siguientes tipos de contenido: Menú textual horizontal,
Legales, Accesos directos a secciones importantes y ligas a otros sitios relacionados. En ejemplo
quedará así:
P á g i n a | 31
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
FIGURA 20: INTEGRAMOS 3 DIVS ADICIONALES CON SUS RESPECTIVOS ID´S Y EL CONTENIDO QUE TENDRÁ CADA UNO
FIGURA 21: INTEGRAMOS LOS ESTILO AL CONTENIDO Y PANELES
P á g i n a | 32
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
FIGURA 21: INTEGRAMOS EL CONTENIDO EN EL DIV CON ID FOOTER
FIGURA 22: INTEGRAMOS LOS ESTILOS PARA EL DIV CON ID FOOTER
P á g i n a | 33
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
FIGURA 23: INTEGRAMOS EL CONTENIDO PARA EL MENU SECUNDARIO
FIGURA 24: INTEGRAMOS LOS ESTILOS PARA EL MENU SECUNDARIO
P á g i n a | 34
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
Diseño y creación de páginas internas
Para crear toda la serie de página internas sólo es necesario duplicar el archivo index.htm y ponerle
el nombre del interior que queramos crear, después lo abrimos y modificamos el contenido
correspondiente.
FIGURA 25: DUPLICAMOR NUESTRO ARCHIVO INDEX.PHP Y LO GUARDAMOS COMO PRODUCTOS.HTM
P á g i n a | 35
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
5. Sube y modifica los archivos de la página vía FTP
Explicación del proceso de publicación web
1. Espacio en un servidor de internet o Un servidor web es una computadora prendida y conectada a internet de
manera permanente, para lograr desempeños óptimos las empresas que se dedican a rentar hospedaje en internet, adquieren varios servidores y los ponen a trabajar al mismo tiempo y de manera coordinada uno con otro, así aseguran la permanencia de todas las Páginas web que sirven a cada usuario.
o Cada computadora puede hospedar cientos de Páginas web de mediano tamaño, al contratar un espacio en un servidor de internet, hosting o webhost.
2. Dominio propio, subdominio o URI o El nombre de dominio es otro aspecto fundamental para tener una correcta
presencia en internet, el nombre de Dominio debe distinguirte y ser algo que utilices frecuentemente en tus demás esfuerzos de marketing.
3. Navegadores web o Para visualizar la página de internet se requiere de un programa llamado
navegador web, el más usado y el que caso todos con una PC tienen es el Internet Explorer, pero hay otras opciones más sofisticadas como FireFox,
Safari, Ópera o Chrome.
Información requerida para configurar clientes FTP
Vamos a utilizar el cliente FTP que nos proporciona Dreamweaver® para conectarnos con nuestro
servidor web. Para tal motivo ya debimos haber contratado un servicio de hosting y dominio.
La información que se necesita tener para conectarse vía FTP al servidor web donde va a estar
alojada la página de internet es la siguiente:
Servidor web
Directorio del servidor
Usuario
Contraseña
Configuración de una cuenta FTP
Para configurar la cuenta FTP hay que entrar a Dreamweaver® y crear un nuevo sitio:
Sitio > Nuevo sitio > Seleccionar la pestaña avanzada > Datos remotos > FTP
En Servidor FTP: colocamos la URL de nuestro sitio o bien la dirección IP del servidor
P á g i n a | 36
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
En directorio del servidor: consulta con tu proveedor de hosting en que carpeta debes colocar todos
los archivos web que el servidor va a proveer, por lo general es la carpeta http_docs.
En Usuario y Contraseña colocamos las respectivas claves y en seguida damos clic en prueba. Si
no hay ningún error haga click en Aceptar.
FIGURA 26: CREAMOS UN NUEVO SITIO EN DREAMWEAVER®: SITIO > NUEVO SITIO
P á g i n a | 37
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
FIGURA 27: CONFIGURAMOS EL NUEVO SITIO EN DREAMWEAVER®
Listo el sitio remoto está creado a hora puede subir y bajar archivos de su página de internet y
visualizar estos cambios en vivo por medio del acceso de la URL en el navegador web.
Subir y bajar archivos vía FTP
Subir y bajar archivos de internet es muy sencillo, sólo tienes que tener presente que tus archivos
se moverán únicamente de dos fuentes:
Local (las carpeta Webroot que creaste para guardas tus archivos)
Remote (el espacio en el servidor donde se encuentran la copia que el usuario en internet ve
de tu carpeta, esta es la más importante, asegúrate de no modificarla a menos que ya
tengas una prueba local funcionando.)
FIGURA 28: UBICAR LOS ARCHIVOS LOCALES Y LOS ARCHIVOS REMOTOS
Ubica los botones CONECTAR y ACTUALIZAR
P á g i n a | 38
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
Ubica los botones SUBIR y BAJAR
Visualizar la página en internet
Abre el browser de tu preferencia Internet Explorar, FireFox, Chrome, etc. Y escribe en la barra de
dirección la URI donde están ubicados los archivos. Si colocaste los archivos directamente en la
carpeta raíz es decir dentro de http_docs la página se podrá visualizar directamente en el dominio
correspondiente.
También se puede dar el caso que los archivos de la página se pongan dentro de una carpeta y
entonces la página tendrá una ubicación similar a: http://www.tudominio.com/nombredelacarpeta/
P á g i n a | 39
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
6. Crea formularios de contacto
Funcionalidad del formulario
La funcionalidad del formulario es recabar la información que el usuario haya llenado en los campos
dispuestos para tal fin, y enviarlos mediante un método en internet que nos permite recibir dicha
información en un correo electrónico que nosotros hayamos especificado para tal motivo.
Los elementos más importantes al momento de realizar un formulario es: Formulario con los
campos necesarios, Archivo PHP que hace el envío (envio.php), formato de entrega de la
información y bandeja de correo para ver las pruebas. Bueno manos a la obra, lo primero que hay
que hacer es el Formulario con los campos, para esto hacemos una copia de index.htm y le
ponemos el nombre de contacto.htm.
FIGURA 29: GUARDAR LA COPIA DE INDEX.HTM COMO CONTACTO.HTM
P á g i n a | 40
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
FIGURA 30: SELECCIONAMOS EL CONTENIDO QUE NO NECESITAMOS
FIGURA 31: BORRAMOS EL CONTENIDO PARA DEJARLO DE LA SIGUIENTE MANERA
P á g i n a | 41
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
FIGURA 32: UBICAMOS LA OPCIÓN DE CREAR FORMULARIO Y HACEMOS CLICK EN EL BOTÓN FORMULARIO
FIGURA 33: CONFIGURAMOS DE ESTA MANERA EL FORMULARIO Y DAMOS CLICK EN ACEPTAR
P á g i n a | 42
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
FIGURA 34: RESULTADO EN CÓDIGO HTML
FIGURA 35: AHORA UBICAMOS LA OPCIÓN CAMPO DE TEXTO Y DAMOS CLICK EN ELLA
P á g i n a | 43
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
FIGURA 36: COFIGURAMOS DE LA SIGUIENTE MANERA EL PRIMER CAMPO DE NUESTO FORMULARIO
FIGURA 37: COFIGURAMOS DE LA SIGUIENTE MANERA EL SEGUNDO CAMPO DE NUESTO FORMULARIO
P á g i n a | 44
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
FIGURA 38: COFIGURAMOS DE LA SIGUIENTE MANERA EL AREA DE TEXTO MENSAJE CON AYUDA DEL ACCESO: Área
de Texto
FIGURA 39: AHORA CREAMOS EL BOTÓN ENVIAR CON AYUDA DEL ACCESO: Botón
P á g i n a | 45
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
FIGURA 40: AHORA CREAMOS EL BOTÓN CANCELAR CON AYUDA DEL ACCESO: Botón
FIGURA 41: LISTO AHORA PODEMOS VER COMPLETO EL CÓDIGO CON ALGUNOS ELEMENTOS ADICIONALES QUE ESCRIBÍ
DIRECTAMENTE EN EL CÓDIGO ASEGÚRATE DE QUE TU VERSIÓN ESTÉ EXÁCTAMENTE IGUAL AL QUE AQUÍ TE MUESTRO
P á g i n a | 46
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
Código PHP
El archivo envio.php es un modelo probado para realizar envíos mediante servidores que soportan
PHP. Empezamos creando un nuevo documento en Dreamweaver® del tipo PHP:
FIGURA 42: CREA UN NUEVO DOCUMENTO PHP EN DREAMWEAVER®
Creación del código del documento envio.php
Vamos a empezar a crear el documento envio.php, lo primero que necesitamos hacer es escribir el
código que recopilará los datos que se llenaron en el formulario, el código correspondiente es el
siguiente:
FIGURA 43: PRIMERA PARTE DEL ARCHIVO ENVIO.PHP RECOPILACIÓN DE INFORMACIÓN CAPTURADA EN EL
FORMULARIO.
$to = La dirección en donde queramos recibir los mensajes.
$subject = El subject del mensaje
P á g i n a | 47
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
$nombre, $email y $mensaje = Datos recibidos de lo que el usuario escribió en los campos del
formulario
FIGURA 44: SEGUNDA PARTE DEL ARCHIVO ENVIO.PHP CODIFICACIÓN DEL MENSAJE QUE SERÁ ENVIADO POR CORREO
ELECTRÓNICO
P á g i n a | 48
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
FIGURA 45: TERCERA Y ÚLTIMA PARTE DEL ARCHIVO ENVIO.PHP CODIFICACIÓN DEL MENSAJE QUE SERÁ DESPLEGADO
EN LA PÁGINA UNA VEZ QUE SE COMPLETE EL PROCESO DE ENVÍO DEL MENSAJE. REPRESENTARÁ LA MISMA INTERFAZ
GRÁFICA DE LAS DEMÁS PANTALLAS DE NUESTRA PÁGINA SOLAMENTE QUE CON UN MENSAJE DE CONFIRMACIÓN DEL
ENVÍO EN EL DIV CON ID CONTENIDO. ESTO SE REALIZARÁ ASÍ PARA MANTENER LA UNIFORMIDAD EN LA NAVEGACIÓN
DEL USUARIO.
La carpeta del proyecto ahora lucirá de la siguiente forma:
P á g i n a | 49
Crea y Publica Páginas Web Paso a Paso. ©2011 Pablo Sámano Quiroz. http://www.redbai.com
FIGURA 45: ESTRUCTURA DE ARCHIVOS PARA LA PÁGINA DE INTERNET
Publicación y pruebas
Para publicar sólo tienes que subir los archivos contacto.htm y envio.php vía FTP al espacio del
servidor web. Abre la página por medio del browser y la dirección correspondiente llenar el
formulario, hacer el envío y revisar tu bandeja de correo de la cuenta que escribiste en el código del
archivo envio.php
Visualizando la página de internet en el browser
El resultado de todo nuestro trabajo será haber aprendido el proceso para la creación y publicación
de Páginas web. Recorrimos todo el proceso y debiste haber desarrollado una página como esta:
Llegamos al final de este libro, repásalo una y otra vez, porque representa el proceso de creación y
publicación y la guía que te ayudará a seguir un procedimiento comprobado por años de
experiencia y muchos proyectos culminados de forma exitosa. Sinteticé el proceso de creación y
publicación de Páginas web, en tus manos está ponerlos en práctica una y otra vez para llegar a
entender y concatenar de manera correcta con toda la demás información que hagas llegar a ti.
Se persistente y se firme en tu decisión de aprender a crear y publicar Páginas web, porque créeme
que internet realmente te puede dar la calidad de vida que te permitirá disponer de tu tiempo y
sobre todo de trabajar y ganar lo que te propongas con más y mejores oportunidades.
Vale la pena experimentar esta calidad de vida y compartirla para que cada vez más personas
dispongan de las habilidades para aprovechar las nuevas tecnologías.
Muchas gracias por haberme leído, te deseo lo mejor y sobre todo mucho éxito.
Tu amigo Pablo Sámano Quiroz.