Diseño de Páginas Web para Comercio Electrónico

Que vas a aprender en este curso?

• Aprenderemos a diseñar toda una página Web con la herramienta Corel Website Creator • Diseñaremos nuestra base de datos con MySQL • Integraremos los módulos de PHP para conectar nuestra base de datos con nuestro diseño • Configuraremos el sistema de compras y pagos electrónicos con PayPal • Publicaremos y posicionaremos nuestra página en internet

Modulos

Plan de estudios

Modulo Diseño de Páginas WEB

• Introducción al Corel WebSite Creator • Introducción a las páginas WEB • Interfaz del Corel WebSite Creator • Ventanas, paneles y estructuras de carpetas • Ventana de propiedades

• Creación de Sitios • Creación de un sitio nuevo • Utilización de asistente para sitios • Plantillas para sitios • Creación y vinculación de archivos HTML

• Estilos de sitios • Aplicación de estilos de sitios • Combinación de estilos de sitios • Edición de estilos de sitios

• Galería de imágenes • Creación de una galería de imágenes • Como editar imágenes • Inserción y edición de títulos para imágenes • Edición de una galería

• Interactividad • Adición de botones • Crear y editar imágenes de intercambio • Insertar un buscador de Google • Vinculación de elementos de una página WEB

• Asistente para páginas WEB • Creación de una página desde el asistente • Tipos de páginas según su aplicación • Como agregar o eliminar vínculos y páginas • Manejo de texto e imágenes mejoradas para páginas WEB • Integración de video en una páginas WEB

Modulo Diseño de Bases de Datos

• Diseño de Bases de Datos • Importancia de un buen diseño de bases de datos • Fundamentos para el diseño de bases de datos • Diseñando una bases de datos

• Instalación Base de Datos MySQL en forma local • Descarga de la bases de datos de Internet • Instalación y configuración de MySQL • Instalación del programa phpMyAdmin • Descargar el sistema de internet • Instalación y configuración • Conociendo la interfaz del programa • Creación de una Base de Datos • Operaciones con tablas • Crear • Modificar • Seleccionar • Eliminar • Relaciones con tablas • Crear • Modificar • Eliminar • Llaves primarias, secundarias • Manipulación de registros • Añadir registros • Listar registros • Modificación y eliminación de registros • Utilerías de respaldos • Administración 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

Módulo Programación en PHP

• Instalando y configurando apache y PHP • Descarga, instalación y configuración de apache y php • Instalando y configurando editor de PHP (Eclipse) • Descarga, instalación y configuración de eclipse • Fundamentos de programación en PHP • Definición de variables y constantes • Estructuras de control • Sentencias condicionales • Manejo de arreglos • Manejo de formularios • Accesando MYSQL desde PHP • Cómo conectar una base de datos • Cómo seleccionar una tabla • Actualizando información en la base de datos • Consulta de información y despliegue de información

• Generando reportes en php

• Desarrollo de aplicaciones para la administración de productos • Registro y actualización de productos • Consulta del estado de pedidos • Reporte de niveles de inventario

• Desarrollo de aplicaciones en PHP enfocadas a comercio electrónico • Registro de usuario con clave de acceso • Actualización de datos del usuario y cambio de clave de acceso • Rutina con criterio de selección para consulta de información • Programación un carrito de compras • Envio por mail de confirmación de compra

Modulo Pagos con PAYPAL • Crear una cuenta PAYPAL • Creación de botones para compra • Configuración 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 crédito

Modulo Implementación de proyecto en la WEB Dominios y Hosting

• Que es un dominio • Que es un hosting • Hosting gratuito vs Hosting de paga

• Implementación del proyecto • Transferir el proyecto al servidor vía FTP • Actualizar las paginas • Integración al buscador Google • Configuración de la página para los buscadores • Configurar los motores de búsqueda

Proyecto integrador

• Consiste en la realización de un proyecto completo y real de la Librería La Moderna, la cual vende sus libros por internet en formato electrónico y en estado físico, el cliente tendrá siempre en la página la información completa de todos los libros y las existencias actualizadas.

• Una base de datos estará vinculada a la página y las compras, altas, bajas que se realicen, generará

que la base de datos se actualice en automático. • Para que el cliente pueda realizar una compra deberá estar registrado previamente en la librería y

todas las compras y pagos que realicen los clientes se harán de forma electrónica.

• Los pagos que se realicen estarán asistidos en cada momento por el sistema en donde se verificará que los datos proporcionados sean correctos.

• La tarjeta de crédito 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 conocerás el procedimiento para contratar un dominio

y hospedaje web, al mismo tiempo conocerás como se publica la página con una aplicación FTP. • Por último nos enfocaremos a hacer que la página sea posicionada en uno de los buscadores más

populares como el google por medio de su aplicación ADWORDS, la cual nos proporciona herramientas de estadísticas.

introducción

La "Web", apócope de "World Wide Web" (que se abrevia con las siglas www), es uno de los métodos que Internet ofrece para explorar documentos conectados a través de hipervínculos. El principio de la Web se basa en el uso de hipervínculos para navegar entre documentos (que se llaman "páginas Web") mediante un programa llamado navegador. Una página Web es un archivo de texto simple escrito en un lenguaje de marcado llamado HTML que permite, a través de etiquetas, describir el diseño del documento, sus elementos gráficos o los vínculos a otros documentos.

¿Qué es un sitio Web?

Un sitio Web (también conocido como sitio de Internet o página 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 página central, la "página de bienvenida", que ofrece vínculos a un conjunto de páginas alojadas en el mismo servidor y, a veces, a vínculos "externos" que llevan a páginas alojadas en otro servidor. Una dirección URL tiene la siguiente forma: http://www.commentcamarche.com/www/www-intro.php3 Examinemos esta dirección:

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 dirección del servidor que aloja las páginas Web. Es una convención que los nombres de los servidores Web empiecen con www para representar el hecho de que son servidores Web y para memorizar más fácilmente la dirección. Esta segunda parte de la dirección 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, etcétera.

/www/www-intro.php3: indica dónde 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 diseño web y desarrollo web

Los roles de trabajo de un diseñador de páginas 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 específico de habilidades. Muchos diseñadores gráficos tienen un buen conocimiento de HTML y algunos desarrolladores web pueden utilizar varios programas de diseño gráfico, 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 confusión entre estos dos roles de trabajo específicos. El trabajo de un desarrollador web tiene por objeto construir, literalmente, su sitio web desde cero mediante el uso de un lenguaje de programación específicos, tales como HTML, ASP, PHP,. NET los

desarrolladores Web, etc También pueden crear funciones y características únicas para su sitio web, lo que hará que sea más atractivo para los visitantes del sitio web . Un diseñador de páginas web, por otro lado, crea la "piel" de la página web. Que diseñar el aspecto y la sensación enteras - desde el banner en flash en la parte superior de la página para que los botones de navegación mirar. Los diseñadores experimentados web son capaces de llegar a ideas sorprendentes para representar a su negocio en línea.

Herramientas de Diseño Web

Los diseñadores Web utilizan el software como Photoshop, Flash, Fireworks y Corel Website Creator. También tendrán un buen conocimiento de la tipografía, teoría del color y la accesibilidad web.

Herramientas de desarrollo Web

Los desarrolladores web se utilizan una serie de herramientas de programación como ASP, Javascript, PFP, XML y SQL. Estas son sólo algunas de las herramientas más conocidas. Hay muchas otras herramientas y se están desarrollando nuevas todo el tiempo. Por ejemplo, las aplicaciones móviles han creado una enorme demanda de los desarrolladores con los conocimientos pertinentes.

INTERFAZ DE COREL WEBSITE CREATOR

La solución completa de diseño gráfico, diseño de sitios web, edición de fotos e ilustración vectorial profesionales y mucho más. Crea fácilmente sitios web y diseña páginas web con Corel® Website Creator™ X6. Su funcionalidad de arrastrar y colocar y la integración perfecta con XHTML, CSS, JavaScript y XML se combinan para facilitar al máximo la creación de sitios web. Basta con arrastrar y colocar texto, gráficos y elementos multimedia en tus páginas web, sin necesidad de tener conocimientos sobre codificación. Utiliza el editor de línea de tiempo para crear y administrar sensacionales efectos visuales. Pronto crearás páginas web y sensacionales sitios web como un profesional.

Funciones Principales

Site Safe La tecnología Site Safe de Website Creator X6 protege tus recursos de diseño creando automáticamente 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 Obtén nuevos SiteStyles entregados directamente a la vista en línea con Cloud Burst, el sistema de entrega en línea. A continuación, instala estas plantillas de sitio web, fotos, imágenes 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 tecnologías de desarrollo web, incluido RSS, CSS, XHTML, PHP, ASP.NET, ColdFusion® y JSP. Saca partido a un entorno de diseño interactivo que ofrece sencillos asistentes junto con inspectores de objetos HTML y CSS avanzados. Diseño web con arrastrar y colocar Coloca imágenes, texto u otros elementos de página exactamente donde desees mediante la capacidad de diseño con arrastrar y colocar. Plantillas de diseño web y SiteStyles Elige entre varias plantillas de diseño web y SiteStyles para crear rápidamente atractivos sitios web.

Editor de gráficos Recorta, corrige el color y cambia el tamaño de las imágenes con facilidad. Seguridad incorporada y mejoras Obtén protección por contraseña, lenguajes PHP y ASP, formularios interactivos, libros de visitas, RSS y mucho más, sin necesidad de secuencia de comandos o programación personalizada. El gestor de componentes te ayuda a localizar rápidamente 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, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica

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 comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, mejorando la interactividad, velocidad y usabilidad en las aplicaciones. Ajax es una tecnología asíncrona, en el sentido de que los datos adicionales se solicitan al servidor y se cargan en segundo plano sin interferir con la visualización ni el comportamiento de la página.

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 simultáneamente

Controladores ODBC de 32 bits para la conexión a bases de datos externas

Conformidad con TCP/IP para conexión a Internet

Se recomienda conexión 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 ubicación especifica para comenzar a generar nuestro sitio.

Al iniciar la aplicación 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 también los sitios creados recientemente, asi como un conjunto de platillas, estilos y fotografías gratis para instalar.

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

En la cinta de opciones encontramos la vista “Página” en la que podemos visualizar

elegimos diseño 2

Diseño 4

Diseño 2

Diseño 1

Diseño 1

Diseño 4

Diseño 2

Marcar Guardar en perfil y finalizar

Con doble clic, la vista diseño

Elegimos la herramienta de Texto para agregar el nombre de la librería

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