Crea tu tienda online con HTML5, PHP y MySQL


Aprende con este video tutorial GRATIS de 1h 40 min
lo necesario para crear TU TIENDA online con
PHP MySQL HTML5 y Dreamweaver CC

¿Quieres descargar este vídeo tutorial GRATIS YA ... ?
Suscríbete para descargalo ... Directo a tu correo .... 244 Mb

+ 9 Horas por solo 20 euros
Aprende a crear una tienda Online con carrito de compra
utilizando HTML5 y Dreamweaver CC
vídeo tutoriales en español

Vocabulario básico necesario para el curso de la tienda Online

En los siguientes video tutoriales aprendes el vocabulario que utilizo a lo largo de este curso. Es importante ternerlo claro, ya que muchas veces en algún momento, las palabras técnicas de un tutorial pueden hacer que te pierdas y no tendria que ser así.

Son video tutoriales genéricos que todo webmaster tiene que conocer, por ejemplo lo que es una página dinámica, o como funcionan los parámetros de una url, la instalación de un servidor en local.

Mirá estos video tutoriales gratuitos que te ayudarán a entender como funcionan las páginas que acceden a bases de datos.

 

video 
tutorial tienda online con HTML5 y Dreamweaver CC
05:15 min.
Presentación del curso. Vemos el resultado final de como nos tiene que quedar la tienda una vez realizado el curso. on esto ta haces a la idea de lo que aprenderás.
video 
tutorial tienda online con HTML5 y Dreamweaver CC
06:14 min. Video tutorial conceptual
Necesidades de crear páginas web dinámicas para una tienda Online en lugar de crear páginas web estáticas. Analizar con este tutorial cuando es necesario utilizar esta tecnología.
video 
tutorial tienda online con HTML5 y Dreamweaver CC
12:52 min. Video tutorial conceptual
Diferentes formas de pasar parámetros entre páginas en Internet. Los parámetros son necesarios para indicar que producto deseamos mostrar o que categoría deseamos mostrar. Los parámetros pueden ser visible o no para el visitante..
video 
tutorial tienda online con HTML5 y Dreamweaver CC
04:15 min.
Nuevas etiquetas de HTML5. Etiquetas estructurales y etiquetas de formularios. Dreamweaver incorpora una serie de nuevas etiquetas en HTML5 que si las utilizas, tu página estará mejor posicionada en Google
video 
tutorial tienda online con HTML5 y Dreamweaver CC
06:54 min. Video tutorial de configuración
Instalamos un servidor local y preparamos nuestro ordenador para poder utilizarlo para crear páginas dinámicas utilizando PHP y MySQL.
video 
tutorial tienda online con HTML5 y Dreamweaver CC
05:10 min. Video tutorial de configuración
Instalamos en Dreamweaver la extensión que nos permite conectarnos con la base de datos sin escribir código en PHP. Extensión que ha sido eliminadas en las versiones actuales de Dreamweaver pero puedes descargar e instalar
Crear la estructura de nuestra tienda online

En esta serie de video tutoriales de nuestra tienda online, empiezas a construir en Dreamweaver la estructura de tus páginas web. Aprendes como configurar Dreamweaver, defines un sitio donde guardar todas las páginas web, creas la conexión con tu base de datos, y empiezas el diseño básico de tu tienda

 

video 
tutorial tienda online con HTML5 y Dreamweaver CC
04:45 min. Video tutorial bases de datos
Acceder al servidor de bases de datos y crear una base de datos para la tienda. Empezamos a trabajar con MySQL en nuestro servidor local.
video 
tutorial tienda online con HTML5 y Dreamweaver CC
05:05 min. Video tutorial Dreamweaver
Definir un sitio nuevo en Dreamweaver para indicar donde guardaremos los ficheros de nuestra tienda. Definir el uso de PHP y MySQL.
video 
tutorial tienda online con HTML5 y Dreamweaver CC
02:26 min. Video tutorial bases de datos
.Crear una conexión con la base de datos desde Dreamweaver CC e introducir los datos de usuario de MySQL
video 
tutorial tienda online con HTML5 y Dreamweaver CC
11:57 min. Video tutorial dreamweaver
Definir la estructura básica de lo que será nuestra tienda, el encabezado, el cuerpo y el píe. Crear el fichero CSS para controlar el aspecto final de la tienda.
video 
tutorial tienda online con HTML5 y Dreamweaver CC
17:20 min. Video tutorial estructura tienda online
Diseñar el encabezado de la tienda con lo que ya empiezas a crear tu primera página en PHP.
video 
tutorial tienda online con HTML5 y Dreamweaver CC
10:57 min. Video tutorial estructura tienda online
Diseñar el menú principal de la página web que se repetirá en todas las otra páginas del sitio. Son enlaces a páginas genéricas como inicio, contacto, ....
video 
tutorial tienda online con HTML5 y Dreamweaver CC
11:29 min. Video tutorial estructura tienda online
Definir el cuerpo de la página web que es donde pondremos el contenido de la tienda, es la parte central de la tienda en la que creas las áreas necesarias.
Las categorías de tu tienda online

on estos video tutoriales ya empiezas a crear páginas web dinámicas creando todo el apartado de categorías. Lo primero es crear la tabla de las categorías y el formulario con el que insertarás nuevas categorías en tu tienda. Diseñarás un listado que muestra todas las categorías que tiene la tienda y para finalizar esta seri de video tutoriales, creas las páginas para administrar estas categorías.

 

video 
tutorial tienda online con HTML5 y Dreamweaver CC crear estructura de la tienda online
10:59 min. Video tutorial Dreamweaver
Convertir la página en plantilla para poder utilizarla con todas las páginas de la tienda ya que el encabezado y el pie es común a el resto de páginas. Crear tabla categorías
video 
tutorial tienda online con HTML5 y Dreamweaver CC crear estructura de la tienda online
12:59 min. Video tutorial Dreamweaver y PHP
Formulario de nueva categoría con el que podrás insertar nuevas categorías desde la propia página web. Lo pondrás en un apartado de administración
video 
tutorial tienda online con HTML5 y Dreamweaver CC crear estructura de la tienda online
05:56 min. Video tutorial Dreamweaver y PHP
Listado de categorías que aparece en la parte izquierda de la página. Lo harás dinámico ya que te interesa que si añades una categorí, se añada directamente en este listado
video 
tutorial tienda online con HTML5 y Dreamweaver CC crear estructura de la tienda online
15:15 min. Video tutorial Dreamweaver y PHP
Formulario para editar o modificar categorías . Una vez tienes nuevas categorías aprendes como poder modificarlas en el apartado de administración
video 
tutorial tienda online con HTML5 y Dreamweaver CC crear estructura de la tienda online
10:37 min. Video tutorial Dreamweaver y PHP
Y para finalizar este apartado, añades la opción de eliminar una categoría del apartado de administración
Los productos de la tienda online

Y con estos video tutoriales, haces lo mismo que has hecho con las categorías pero con los productos que quieres vender en tu tienda. Creas la tabla de los productos, el formulario para insertar nuevos productos, creas la página del detalle del producto y las páginas para poder administrar los productos.

 

video 
tutorial tienda online con HTML5 y Dreamweaver CC crear estructura de la tienda online
22:19 min. Video tutorial producto de la tienda
Crear la página que mostrará el detalle del producto, con lo que sabremos que campos necesitamos en la tabla de productos. Lo haces primero con datos no reales, y analizas que datos son necesarios en la tabla de los productos
video 
tutorial tienda online con HTML5 y Dreamweaver CC crear estructura de la tienda online
04:16 min. Video tutorial producto de la tienda
Creas la tabla de los productos de la tienda con los campos que has decidido viendo la página estática. Definir los campos de la tabla de productos que contendrá los datos del detalle de cada producto.
video 
tutorial tienda online con HTML5 y Dreamweaver CC crear estructura de la tienda online
14:23 min. Video tutorial producto de la tienda
Crear el formulario para insertar nuevos productos en la base de datos para poder añadir nuevos productos desde la web, sin necesidad de acceder al panel de la base de datos.
video 
tutorial tienda online con HTML5 y Dreamweaver CC crear estructura de la tienda online
06:49 min. Video tutorial producto de la tienda
Ver como podemos dar formato al texto del detalle del producto añadiendo un fichero en Javascript que nos permite tener una campo de texto extendido con botones de negrita, listas desordenadas.
video 
tutorial tienda online con HTML5 y Dreamweaver CC crear estructura de la tienda online
06:27 min. Video tutorial producto de la tienda
Modificarla página de detalle para que muestre los datos de producto de forma dinámica. Ahora si que podemos mostrar los datos del producto que tenemos en la base de datos
video 
tutorial tienda online con HTML5 y Dreamweaver CC crear estructura de la tienda online
07:57 min. Video tutorial producto de la tienda
Modificar el juego de registros para que nos muestre el nombre de la categoría ya que por omisión nos mostratá el id de la categoría. Relacionamos las tablas de la base de datos
video 
tutorial tienda online con HTML5 y Dreamweaver CC crear estructura de la tienda online
08:45 min. Video tutorial producto de la tienda
Crear el formulario para editar un producto y poder administrar los productos desde la propia web es un formulario con campos de texto con los datos actuales del producto y la opción de editarlos.
video 
tutorial tienda online con HTML5 y Dreamweaver CC crear estructura de la tienda online
08:45 min. Video tutorial producto de la tienda
Para administrar todos los productos, lo mejor es crearse un listado de productos para poder seleccionar el que deseas editar o borrar. Página con lo que administrar todos los productos.
video 
tutorial tienda online con HTML5 y Dreamweaver CC crear estructura de la tienda online
09:19 min. Video tutorial producto de la tienda
Creas la opción con la que podemos eliminar un producto de la base de datos.
Los listados de la tienda

Hasta ahora estas viendo los datos de un producto en concreto, en esta serie de videotutoriales aprendes como se crean listados de productos y páginarlos. Al clicar en uno de los productos del listado, accedemos a la página de detalle que has hecho anteriormente. Tendrás 3 listados, uno para lapágina principal, otro para listar los productos de una categoría concreta y uno más para mostrar los productos del el resultado de un buscador.

 

video 
tutorial tienda online con HTML5 y Dreamweaver CC crear los listados de la tienda
14:43 min. Video tutorial listado de la tienda
Crear el página de index o principal. Preparar el diseño de un producto estándar. Como has hecho anteriormente, primero creamos una página con datos ficticios para hacer a la idea de como tiene que quedar este primer listado de productos.
video 
tutorial tienda online con HTML5 y Dreamweaver CC crear los listados de la tienda
06:46 min. Video tutorial listado de la tienda
Crear el listado de productos de forma dinámica, a partir de la página creada en el ejempl anterior. Insertamos en código de PHP para acceder a los datos del producto.
video 
tutorial tienda online con HTML5 y Dreamweaver CC crear los listados de la tienda
14:58 min. Video tutorial listado de la tienda
Crear el paginado del listado de productos para poder movernos entre productos ya que mostraremos una cantidad concreta de productos por página y nos interesa dar la opción de ver más productos del listado..
video 
tutorial tienda online con HTML5 y Dreamweaver CC crear los listados de la tienda
08:37 min. Video tutorial listado de la tienda
Listado de productos por categoría seleccionada. Al pulsar en una categoría de la izquierda de la web, queremos que nos muestre productos de solo la categprí seleccionada, entonces necesitamos crear un listado que recoja el id de la categoría.
video 
tutorial tienda online con HTML5 y Dreamweaver CC crear los listados de la tienda
06:16 min. Video tutorial listado de la tienda
Mostrar u ocultar texto si encuentra o no encuentra productos de una categoría. Si al seleccionar una categpría, resulta que no tenemos productos de esa categoría, nostrarás al usuario un mensaje informativo de que no ha encontrado productos.
video 
tutorial tienda online con HTML5 y Dreamweaver CC crear los listados de la tienda
08:57 min. Video tutorial listado de la tienda
Mostrar el nombre de la categoría Pasar el nombre de la categoría por URL. Con lo que muestras al usuario en que categoría se encuentra y que productos tienes de esa categoría.
video 
tutorial tienda online con HTML5 y Dreamweaver CC crear los listados de la tienda
09:47 min. Video tutorial listado de la tienda
Crear un buscador simple y su listado. Buscar el texto en el campo del detalle y mostrar el resultado.
El carrito de compra de tu tienda

Llega el momento de escribir en PHP puesto que Dreamweaver no tiene un comportamiento de Carrito de compra. Pero no te preocupes que el lenguaje PHP no es complicado si lo haces poco a poco.

En esta serie de video tutoriales aprendes como almacenar en memoria los productos que el visitante a seleccionado para comprar y los muestras en una página que será el carrito de compra. Que al final mostraremos en todas las páginas.

 

video 
tutorial tienda online con HTML5 y Dreamweaver CC crear el carrito de compra de la tienda
20:54 min. Video tutorial carrito de compra de tu tienda
Recogemos los datos pasados por el botón de comprar. Repaso de como se pasan los parámetros. Y empiezas a escribir PHP que hasta ahora poco has escrito de programación
video 
tutorial tienda online con HTML5 y Dreamweaver CC crear el carrito de compra de la tienda
29:43 min. Video tutorial carrito de compra de tu tienda
Definir el carrito que contendrá todos los productos que queremos comprar. Empiezas con variables de sesión en PHP para almacenar los datos del carrito.
video 
tutorial tienda online con HTML5 y Dreamweaver CC crear el carrito de compra de la tienda
19:22 min. Video tutorial carrito de compra de tu tienda
Control de los posible errores que podemos tener al entrar en la página del carrito. Por medio de PHP vas a controlar si entran en la página del carrito sin haber seleccionado un producto.
video 
tutorial tienda online con HTML5 y Dreamweaver CC crear el carrito de compra de la tienda
08:35 min. Video tutorial carrito de compra de tu tienda
Con el lenguaje de PHP se pueden hacer cálculos matemáticos como en tu caso que aprenderás a crear los totales del carrito de compra
video 
tutorial tienda online con HTML5 y Dreamweaver CC crear el carrito de compra de la tienda
10:44 min. Video tutorial carrito de compra de tu tienda
Probablemente necesites que tu cliente pueda comprar más de un producto. Pues con PHP aprenderás como actualizar la cantidad de productos que tenemos en el carrito.
video 
tutorial tienda online con HTML5 y Dreamweaver CC crear el carrito de compra de la tienda
14:37 min. Video tutorial carrito de compra de tu tienda
Una vez tienes todo calculado con PHP modificas la plantilla para mostrar el total del carrito en cada página.
video 
tutorial tienda online con HTML5 y Dreamweaver CC crear el carrito de compra de la tienda
04:12 min. Video tutorial carrito de compra de tu tienda
Y para que puedan comprar desde cualquier página de las que ya tenemos hechas, actualizas todos los botones de comprar de todo el sitio añadiendo en código del PHP para acceder a la página de carrito indicando el producto seleccionado..
El pedido del carrito de tu tienda
video 
tutorial tienda online con HTML5 y Dreamweaver CC crear el pedido del carrito de compra de la tienda
26:56 min. Video tutorial carrito de compra de tu tienda
Diseñar el formulario de los datos del cliente. Diferentes tipos de campos de formulario en HTML5.
video 
tutorial tienda online con HTML5 y Dreamweaver CC crear el pedido del carrito de compra de la tienda
22:19 min. Video tutorial carrito de compra de tu tienda
Recogemos los datos del formulario. Preparamos el email que enviaremos el cliente
video 
tutorial tienda online con HTML5 y Dreamweaver CC crear el pedido del carrito de compra de la tienda
17:58 min. Video tutorial carrito de compra de tu tienda
Preparar el envío del email dependiendo del sistema de pago seleccionado.
video 
tutorial tienda online con HTML5 y Dreamweaver CC crear el pedido del carrito de compra de la tienda
08:00 min. Video tutorial carrito de compra de tu tienda
Enviar datos del pedido a PayPal.
Subir todo al servidor remoto
video 
tutorial tienda online con HTML5 y Dreamweaver CC subir todos los documentos al servidor remoto
08:49 min. Video tutorial subir tu tienda online
Exportar los datos de la base de datos local a la base de datos del servidor remoto.
video 
tutorial tienda online con HTML5 y Dreamweaver CC subir todos los documentos al servidor remoto
11:07 min. Video tutorial subir tu tienda online
Configurar un usuario de FTP en el servidor remoto y configurar $reamweaver para que se conecte con el usuario de FTP. Subir todos los ficheros de la tienda.
video 
tutorial tienda online con HTML5 y Dreamweaver CC subir todos los documentos al servidor remoto
06:45 min. Video tutorial subir tu tienda online
Hacer modificaciones y colocar solo el fichero modificado.
video 
tutorial tienda online con HTML5 y Dreamweaver CC subir todos los documentos al servidor remoto
08:15 min. Video tutorial subir tu tienda online
Crear el apartado de administración de la tienda. Restringir el acceso por usuarios de administración
video 
tutorial tienda online con HTML5 y Dreamweaver CC subir todos los documentos al servidor remoto
04:45 min. Video tutorial subir tu tienda online
Despedida del curso.
videotutoriales.es ®2005-2016 Telf: 692272294 Islas Baleares - ciutadella de Menorca