Diseo de Pginas Web para Comercio Electrnico

Que vas a aprender en este curso?

Aprenderemos a disear toda una pgina Web con la herramienta Corel Website Creator Disearemos nuestra base de datos con MySQL Integraremos los mdulos de PHP para conectar nuestra base de datos con nuestro diseo Configuraremos el sistema de compras y pagos electrnicos con PayPal Publicaremos y posicionaremos nuestra pgina en internet

Modulos

Plan de estudios
Modulo Diseo de Pginas WEB
Introduccin al Corel WebSite Creator Introduccin a las pginas WEB Interfaz del Corel WebSite Creator Ventanas, paneles y estructuras de carpetas Ventana de propiedades Creacin de Sitios Creacin de un sitio nuevo Utilizacin de asistente para sitios Plantillas para sitios Creacin y vinculacin de archivos HTML Estilos de sitios Aplicacin de estilos de sitios Combinacin de estilos de sitios Edicin de estilos de sitios Galera de imgenes Creacin de una galera de imgenes Como editar imgenes Insercin y edicin de ttulos para imgenes Edicin de una galera Interactividad Adicin de botones Crear y editar imgenes de intercambio Insertar un buscador de Google Vinculacin de elementos de una pgina WEB Asistente para pginas WEB Creacin de una pgina desde el asistente Tipos de pginas segn su aplicacin Como agregar o eliminar vnculos y pginas Manejo de texto e imgenes mejoradas para pginas WEB Integracin de video en una pginas WEB

Modulo Diseo de Bases de Datos

Diseo de Bases de Datos Importancia de un buen diseo de bases de datos Fundamentos para el diseo de bases de datos Diseando una bases de datos Instalacin Base de Datos MySQL en forma local Descarga de la bases de datos de Internet Instalacin y configuracin de MySQL Instalacin del programa phpMyAdmin Descargar el sistema de internet Instalacin y configuracin Conociendo la interfaz del programa Creacin de una Base de Datos Operaciones con tablas Crear Modificar Seleccionar Eliminar Relaciones con tablas Crear Modificar Eliminar Llaves primarias, secundarias Manipulacin de registros Aadir registros Listar registros Modificacin y eliminacin de registros Utileras de respaldos Administracin de usuarios Copiado de la base de datos local al hosting Copiar estructura de la base de datos local Desde mysql del hosting cargar la estructura de la base de datos local Desde el hosting verificando la consistencia de la base de datos

Mdulo Programacin en PHP

Instalando y configurando apache y PHP Descarga, instalacin y configuracin de apache y php Instalando y configurando editor de PHP (Eclipse) Descarga, instalacin y configuracin de eclipse Fundamentos de programacin en PHP Definicin de variables y constantes Estructuras de control Sentencias condicionales Manejo de arreglos Manejo de formularios Accesando MYSQL desde PHP Cmo conectar una base de datos Cmo seleccionar una tabla Actualizando informacin en la base de datos Consulta de informacin y despliegue de informacin

Generando reportes en php Desarrollo de aplicaciones para la administracin de productos Registro y actualizacin de productos Consulta del estado de pedidos Reporte de niveles de inventario Desarrollo de aplicaciones en PHP enfocadas a comercio electrnico Registro de usuario con clave de acceso Actualizacin de datos del usuario y cambio de clave de acceso Rutina con criterio de seleccin para consulta de informacin Programacin un carrito de compras Envio por mail de confirmacin de compra

Modulo Pagos con PAYPAL

Crear una cuenta PAYPAL Creacin de botones para compra Configuracin de PAYPAL para integrar nuestro proyecto Pruebas de compras por PAYPAL Consulta de saldos en PAYPAL Traspaso de fondos de PAYPAL a cuentas del administrador del negocio Integrando la rutina del carrito de compras con PAYPAL para validar el pago con tarjeta de crdito

Modulo Implementacin de proyecto en la WEB Dominios y Hosting

Que es un dominio Que es un hosting Hosting gratuito vs Hosting de paga Implementacin del proyecto Transferir el proyecto al servidor va FTP Actualizar las paginas Integracin al buscador Google Configuracin de la pgina para los buscadores Configurar los motores de bsqueda

Proyecto integrador
Consiste en la realizacin de un proyecto completo y real de la Librera La Moderna, la cual vende sus libros por internet en formato electrnico y en estado fsico, el cliente tendr siempre en la pgina la informacin completa de todos los libros y las existencias actualizadas. Una base de datos estar vinculada a la pgina y las compras, altas, bajas que se realicen, generar que la base de datos se actualice en automtico. Para que el cliente pueda realizar una compra deber estar registrado previamente en la librera y todas las compras y pagos que realicen los clientes se harn de forma electrnica. Los pagos que se realicen estarn asistidos en cada momento por el sistema en donde se verificar que los datos proporcionados sean correctos.

La tarjeta de crdito ser validada en su banco para que cuente con fondos necesarios para la compra, en cliente podr verificar en cualquier momento el estatus de su pedido. El sitio ser publicado en internet en donde conocers el procedimiento para contratar un dominio y hospedaje web, al mismo tiempo conocers como se publica la pgina con una aplicacin FTP. Por ltimo nos enfocaremos a hacer que la pgina sea posicionada en uno de los buscadores ms populares como el google por medio de su aplicacin ADWORDS, la cual nos proporciona herramientas de estadsticas.

introduccin
La "Web", apcope de "World Wide Web" (que se abrevia con las siglas www), es uno de los mtodos que Internet ofrece para explorar documentos conectados a travs de hipervnculos. El principio de la Web se basa en el uso de hipervnculos para navegar entre documentos (que se llaman "pginas Web") mediante un programa llamado navegador. Una pgina Web es un archivo de texto simple escrito en un lenguaje de marcado llamado HTML que permite, a travs de etiquetas, describir el diseo del documento, sus elementos grficos o los vnculos a otros documentos.

Qu es un sitio Web?
Un sitio Web (tambin conocido como sitio de Internet o pgina de inicio si es un sitio personal) es un grupo de archivos HTML almacenados en un equipo que est siempre conectado a Internet (un servidor Web). Por lo general, un sitio Web se construye alrededor de una pgina central, la "pgina de bienvenida", que ofrece vnculos a un conjunto de pginas alojadas en el mismo servidor y, a veces, a vnculos "externos" que llevan a pginas alojadas en otro servidor. Una direccin URL tiene la siguiente forma: http://www.commentcamarche.com/www/www-intro.php3 Examinemos esta direccin: http://: indica que vamos a explorar la Web usando el protocolo HTTP, el protocolo predeterminado para navegar por la Web Para otros usos de Internet, existen otros protocolos. www.commentcamarche.com: corresponde a la direccin del servidor que aloja las pginas Web. Es una convencin que los nombres de los servidores Web empiecen con www para representar el hecho de que son servidores Web y para memorizar ms fcilmente la direccin. Esta segunda parte de la direccin se llama nombre de dominio. Un sitio Web puede alojarse en varios servidores, cada uno de los cuales puede pertenecer al mismo nombre de dominio: www.commentcamarche.com, www2.commentcamarche.com, intranet.commentcamarche.com, etctera. /www/www-intro.php3: indica dnde se ubica el documento en el equipo. En este caso, es el archivo www-intro.php3 ubicado en el directorio www.

La diferencia entre el diseo web y desarrollo web

Los roles de trabajo de un diseador de pginas web y desarrolladores son muy diferentes, pero a menudo sucede que las empresas esperan que el uno o el otro para realizar trabajos que realmente no caer en su conjunto especfico de habilidades. Muchos diseadores grficos tienen un buen conocimiento de HTML y algunos desarrolladores web pueden utilizar varios programas de diseo grfico, pero esto no significa que se puede (o debe esperar que) cambiar entre estos dominios con facilidad. Los problemas pueden empezar a surgir cuando hay demasiada confusin entre estos dos roles de trabajo especficos. El trabajo de un desarrollador web tiene por objeto construir, literalmente, su sitio web desde cero mediante el uso de un lenguaje de programacin especficos, tales como HTML, ASP, PHP,. NET los

desarrolladores Web, etc Tambin pueden crear funciones y caractersticas nicas para su sitio web, lo que har que sea ms atractivo para los visitantes del sitio web . Un diseador de pginas web, por otro lado, crea la "piel" de la pgina web. Que disear el aspecto y la sensacin enteras - desde el banner en flash en la parte superior de la pgina para que los botones de navegacin mirar. Los diseadores experimentados web son capaces de llegar a ideas sorprendentes para representar a su negocio en lnea.

Herramientas de Diseo Web

Los diseadores Web utilizan el software como Photoshop, Flash, Fireworks y Corel Website Creator. Tambin tendrn un buen conocimiento de la tipografa, teora del color y la accesibilidad web.

Herramientas de desarrollo Web

Los desarrolladores web se utilizan una serie de herramientas de programacin como ASP, Javascript, PFP, XML y SQL. Estas son slo algunas de las herramientas ms conocidas. Hay muchas otras herramientas y se estn desarrollando nuevas todo el tiempo. Por ejemplo, las aplicaciones mviles han creado una enorme demanda de los desarrolladores con los conocimientos pertinentes.

INTERFAZ DE COREL WEBSITE CREATOR

La solucin completa de diseo grfico, diseo de sitios web, edicin de fotos e ilustracin vectorial profesionales y mucho ms. Crea fcilmente sitios web y disea pginas web con Corel Website Creator X6. Su funcionalidad de arrastrar y colocar y la integracin perfecta con XHTML, CSS, JavaScript y XML se combinan para facilitar al mximo la creacin de sitios web. Basta con arrastrar y colocar texto, grficos y elementos multimedia en tus pginas web, sin necesidad de tener conocimientos sobre codificacin. Utiliza el editor de lnea de tiempo para crear y administrar sensacionales efectos visuales. Pronto crears pginas web y sensacionales sitios web como un profesional.

Funciones Principales
Site Safe La tecnologa Site Safe de Website Creator X6 protege tus recursos de diseo creando automticamente una plantilla de copia de seguridad de los archivos de tu sitio web. Las plantillas de copia de seguridad se pueden almacenar en una unidad externa, una unidad de red, o bien se pueden publicar en un directorio en el host del sitio web. Cloud Burst Obtn nuevos SiteStyles entregados directamente a la vista en lnea con Cloud Burst, el sistema de entrega en lnea. A continuacin, instala estas plantillas de sitio web, fotos, imgenes y tutoriales para utilizarlos inmediatamente con un solo clic. Desarrollo web integrado Crea un sitio web de aspecto profesional gracias a la compatibilidad con una amplia gama de tecnologas de desarrollo web, incluido RSS, CSS, XHTML, PHP, ASP.NET, ColdFusion y JSP. Saca partido a un entorno de diseo interactivo que ofrece sencillos asistentes junto con inspectores de objetos HTML y CSS avanzados. Diseo web con arrastrar y colocar Coloca imgenes, texto u otros elementos de pgina exactamente donde desees mediante la capacidad de diseo con arrastrar y colocar. Plantillas de diseo web y SiteStyles Elige entre varias plantillas de diseo web y SiteStyles para crear rpidamente atractivos sitios web.

Editor de grficos Recorta, corrige el color y cambia el tamao de las imgenes con facilidad. Seguridad incorporada y mejoras Obtn proteccin por contrasea, lenguajes PHP y ASP, formularios interactivos, libros de visitas, RSS y mucho ms, sin necesidad de secuencia de comandos o programacin personalizada. El gestor de componentes te ayuda a localizar rpidamente todos los elementos necesarios para crear sitios web interactivos. Compatibilidad con AJAX Crea sitios web basados en AJAX con fichas, paneles de alternancia y asistentes para disfrutar de un sitio web altamente interactivo.

AJAX, acrnimo de Asynchronous JavaScript And XML (JavaScript asncrono y XML), es una tcnica
de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicacin asncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las pginas sin necesidad de recargarlas, mejorando la interactividad, velocidad y usabilidad en las aplicaciones. Ajax es una tecnologa asncrona, en el sentido de que los datos adicionales se solicitan al servidor y se cargan en segundo plano sin interferir con la visualizacin ni el comportamiento de la pgina.

Requisitos del Sistema

Procesador Intel Pentium III de 660 MHz o AMD equivalente Microsoft Windows XP con SP3 / Windows Vista / Windows 7 250 MB de espacio disponible en el disco duro 512 MB de RAM Se recomienda 1 GB si se ejecutan varias aplicaciones simultneamente Controladores ODBC de 32 bits para la conexin a bases de datos externas Conformidad con TCP/IP para conexin a Internet Se recomienda conexin a Internet de banda ancha Se recomienda una pantalla SVGA con capacidad de 1024 x 768, 32 bits Windows Internet Explorer 7 o posterior (instalado con Website Creator X6) Adobe Flash Player 9 o posterior (instalado con Website Creator X6. Para procesamiento activo de componentes Flash) Fuente Verdana TrueType (disponible con Internet Explorer 7)

Uso de Website Creator Se recomienda crear inicialmente una carpeta ya sea en Documentos o en alguna ubicacin especifica para comenzar a generar nuestro sitio.

Al iniciar la aplicacin Website Creator, nos aparece la ventana de bienvenida, la cual contiene las opciones para comenzar a crear un nuevo sitio vacio, con ayuda de un asistente o a traves de una plantilla; contiene tambin los sitios creados recientemente, asi como un conjunto de platillas, estilos y fotografas gratis para instalar.

Cuando se elige la opcin de comenzar a crear un sitio vacio nos aparece una pantalla como la siguiente, en la que se visualiza unicamente la pgina de inicio (home). A la cual se le conoce como vista de pgina; en ella se puede cambiar el nombre de la pgina (o las paginas) dando doble clic sobre el nombre en el rectangulo amarillo.

En la cinta de opciones encontramos la vista Pgina en la que podemos visualizar

elegimos diseo 2

Diseo 4

Diseo 2

Diseo 1

Diseo 1

Diseo 4

Diseo 2

Marcar Guardar en perfil y finalizar

Con doble clic, la vista diseo

Elegimos la herramienta de Texto para agregar el nombre de la librera

Nos vamos a los estilos

Si eligen alguno es con doble clic

Se puede combinar entre los diferentes estilos

Se pueden enditar los botones

Vista previa del sitio

Publicar sitio

Crear formulario para registro