WEB DESIGNER

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


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.

http://www.redbai.com/cursos/

P á g i n a | 3


Í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


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


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


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


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


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


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

http://www.nombre/

P á g i n a | 10


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


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


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


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


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


Á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


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


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


<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


FIGURA 4: GUARDAR EL ARCHIVO HTML

FIGURA 5: PREVISUALIZACIÓN DEL ARCHIVO HTML EN EL NAVEGADOR WEB FIREFOX

P á g i n a | 20


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


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


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


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


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


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


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


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


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


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


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


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


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


FIGURA 23: INTEGRAMOS EL CONTENIDO PARA EL MENU SECUNDARIO

FIGURA 24: INTEGRAMOS LOS ESTILOS PARA EL MENU SECUNDARIO

P á g i n a | 34


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


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


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


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


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/

http://www.tudominio.com/nombredelacarpeta/

P á g i n a | 39


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


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


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


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


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


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


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


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


$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


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


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.

WEB DESIGNER

Documents

Transcript of WEB DESIGNER