Como crear una tienda online con prestashop - instalación completa en 5 pasos, tutorial.

Miopiblog

MARTES, 6 DE AGOSTO DE 2013

Como crear una tienda online con prestashop - instalación completa en 5 pasos, tutorial.

Mediante este estupendo tutorial, te voy a enseñar a crear una tienda online o página web, con prestashop de una manera sencilla y en tan solo 5 pasos. Si sigues este tutorial de instalación para prestashop, no te debe suponer apenas esfuerzo crear tu propia tienda online por primera vez. El cliente ftp que vamos a utilizar para realizar la instalación de nuestra tienda prestashop en un servidor, es filezilla, por lo que si no lo tienes descargado e instalado en tu pc, te recomiendo que lo hagas. También  puedes utilizar otro cliente ftp, si así lo prefieres para crear una tienda online con prestashop. Hay más métodos que no veremos aquí.

Por cierto, antes de que se me olvide, aquí te dejo el enlace de descarga al cliente ftp filezilla: https://filezilla-project.org/.

1 - Lo primero que vamos a hacer para comenzar con nuestro proceso deinstalación rápida de prestashop, es descargar prestashop de su sitio web oficial. Una vez que se haya descargado, descomprime el archivo zip en una carpeta. Arranca filezilla, conecta al servidor y sube al directorio principal de éste, el contenido del interior de la carpeta "prestashop" que ha surgido al descomprimir el zip, recuerda: el contenido de la carpeta, no la carpeta. Cuando haya terminado de subir, sube también el archivo "install" que se ha descomprimido junto a la carpeta prestashop. Este último paso es muy importante.

2 - Una vez que se ha finalizado de subir todos los archivos y carpetas al servidor, abre tu navegador preferido, (el mío es chrome) y accede a tu nombre de dominio, ya sabes, al dominio del servidor al cual has subido los archivos. Se abrirá la página de instalación de de tiendas online prestashop. Comencemos a instalar nuestra tienda online: elige el idioma en el que quieres que se comience a instalar tu nueva tienda online, y presiona sobre "siguiente".

3 - Ahora ha llegado el momento de crear la base de datos y vincularla. Para ello, sin cerrar el asistente de instalación de la tienda online prestashop, abre otra pestaña en el navegador y accede al panel de control del hosting de tu dominio. Una vez que estés dentro, crea una base de datos y guarda los datos: nombre de la base, servidor, usuario y contraseña. Regresa al asistente de instalación, rellena los datos que te piden (los de la base de datos que acabas de crear). Asegúrate de que la casilla de motor de la base de datos, está seleccionando "MyISAM" si has creado una base de datos Mysql. 

Comprueba que tu base de datos funcione correctamente utilizando el botón de "comprobar la conexión" y si es así, haz click sobre "siguiente" para continuar con el procedimiento de instalación de nuestra primera tienda online. Si la base de datos no conecta, asegúrate de introducir todos los datos correctamente. El prefijo de las tablas, no es necesario cambiarlo. 

4 - A continuación, solo hay que rellenar el formulario de la nueva página que se abre con los datos solicitados. Una vez esté, haz click sobre "siguiente" y espera unos segundos. Si haces click sobre la pestaña "Visita tu tienda" accederás al proyecto ya instalado :-) ¿a que está chula?

5 - Seguidamente, accede a tu cliente ftp de nuevo y conectado al servidor, elimina la carpeta install que hemos subido al comienzo del tutorial. Fíjate en lo que pone en el título de la carpeta "admin", la cual hemos subido también anteriormente. por ejemplo, "admin456" pues será el prefijo que tienes que utilizar para entrar a tu panel de administración. Ejemplo, si mi sitio web es: www.testprestashoptiendaonline01.com, la dirección de admin es: www.testprestashoptiendaonline01.com/admin456. La palabra admin, la puedes editar para personalizar tu dirección de "login". 

Cuando ya lo tengas, accede a tu panel de control como te acabo de indicar, introduce en el navegador la dirección que corresponda al "login" de tu tienda online. Se abrirá un nuevo panel de acceso, en el que tienes que introducir la dirección de correo electrónico y contraseña que has indicado en este último formulario, del principio de este paso y... ya puedes acceder también al panel de control de tu prestashop.

Aquí dejo también un enlace a un ejemplo de una tienda online creada con prestashop. Advierto, es un dominio de pruebas, con terminación p.ht por lo que es muy probable que el navegador os avise de ello.

Así de fácil, en 5 simples pasos, tu tienda prestashop ya está creada, espero que te haya resultado fácil. No te olvides de seguirme en las redes sociales ;-).

Por cierto, crear una web mediante html5, tampoco es muy complicado, y ya que estás, te podrías animar a probar. Bajo mi punto de vista, si has sido capaz de crear la tienda online mediante este tutorial, creo que también podrías crear tu propia web mediante html5, ¿te animas? 

Miopiblog

SEO, CSS, Html, marketing digital, Google... Blog de Antonio Menchón.

• Página principal
• Acerca de mí
• Mapa del sitio
• Legal

LUNES, 14 DE ENERO DE 2013

Como crear una página web mediante html5 y CSS3 - Tutorial desde cero

Espero que te guste este fabuloso tutorial en el que te explico que es lo que tienes que hacer para crear una página web mediante html5 y CSS3, desde cero. Vamos a crear un sitio web visible en todos los navegadores modernos que soportan html5. El estilo de esta página web, lo vamos a aplicar mediante unahoja de estilo en cascada o CSS3, vinculada mediante un link insertado dentro de las etiquetas <head> de nuestro archivo index.

Lo primero que tienes que hacer para poder crear un sitio web mediante html5 y CSS3 es conseguir un programa o editor que soporte html5 (si no lo tienes ya). Yo en este caso voy a utilizar Webmatrix2, pero cualquier otro en el que se pueda crear y editar html5 nos sirve.

Una vez que tengas el software instalado abre un nuevo sitio web y crea dentro de el un documento html en blanco, ponle de nombre: "index.html". Para comenzar, vamos a crear una estructura html5 básica o simple, que podría ser esta:

<!DOCTYPE html>
 
<html lang="es">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        
    </body>
</html>

A continuación, vamos a añadir algunas etiquetas meta al documento html5, como por ejemplo la descripción, el título, las palabras clave... etc.

<html lang="es">
    <head>
        <meta charset="utf-8" />
        <title>Ejemplo de web html5</title>
        <meta name="robots" content="all"/>
        <meta content="Antonio Menchón García" name="author" />
        <meta name="generator" content=" webmatrix2 y bloc de notas de windows"/>
        <meta content="Ejemplo de pagina web creada con html5 y CSS" name="description" />
<meta content="web html5, pagina web html5, html5, html5 css web," name="keywords" />
<!-------hoja de estilos css ---------->
        <link rel="stylesheet" href="estilo.css" type="text/css" />
        <!-------webfonts de google ---------->
        <link href='http://fonts.googleapis.com/css?family=Freckle+Face' rel='stylesheet' type='text/css'>
      <link href='http://fonts.googleapis.com/css?family=Risque' rel='stylesheet' type='text/css'>
</head>
    <body>
        
    </body>
</html>

Ahora, vamos a añadir varias secciones <section>, una cabecera <header>, un pie de página <footer> y varios artículos <article>

<!DOCTYPE html>
 
<html lang="es">
    <head>
        <meta charset="utf-8" />
        <title>Ejemplo de web html5</title>
        <meta name="robots" content="all"/>
        <meta content="Antonio Menchón García" name="author" />
        <meta name="generator" content=" webmatrix2 y bloc de notas de windows"/>
        <meta content="Ejemplo de pagina web creada con html5 y CSS" name="description" />
<meta content="web html5, pagina web html5, html5, html5 css web," name="keywords" />
<!-------hoja de estilos css ---------->
        <link rel="stylesheet" href="estilo.css" type="text/css" />
        <!-------webfonts de google ---------->
        <link href='http://fonts.googleapis.com/css?family=Freckle+Face' rel='stylesheet' type='text/css'>
      <link href='http://fonts.googleapis.com/css?family=Risque' rel='stylesheet' type='text/css'>
<!------- plugin para que se vea en IE ---------->
<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
    <body>
      <section class="sitio">
      <header>
      </header>
          <section class="conenidoprincipal">
          <article class="arriba"></article>
          <div class="separador"></div>
              <article class="izquierda"></article>
              <article class="derecha"></article>
              </section>
           <div class="separador"></div>
          <footer></footer>
      </section>
          </body>
</html>

Le he asignado las clases (class) para poder maquetar la web fácilmente mediante CSS3. Vamos a introducir algo de contenido en el sitio web. Introduce el texto entre las etiquetas como lo hago yo:

<!DOCTYPE html>
 
<html lang="es">
    <head>
        <meta charset="utf-8" />
        <title>Ejemplo de web html5</title>
        <meta name="robots" content="all"/>
        <meta content="Antonio Menchón García" name="author" />
        <meta name="generator" content=" webmatrix2 y bloc de notas de windows"/>
        <meta content="Ejemplo de pagina web creada con html5 y CSS" name="description" />
<meta content="web html5, pagina web html5, html5, html5 css web," name="keywords" />
        <!-------hoja de estilos css ---------->
        <link rel="stylesheet" href="estilo.css" type="text/css" />

        <!-------webfonts de google ---------->

        <link href='http://fonts.googleapis.com/css?family=Freckle+Face' rel='stylesheet' type='text/css'>
      <link href='http://fonts.googleapis.com/css?family=Risque' rel='stylesheet' type='text/css'>
<!------- plugin para que se vea en IE ---------->
<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--></head>
    <body>
      <section class="sitio">
      <header><p>Esta es la cabecera, aquí puedes introducir tu logo, por ejemplo</p>
      </header>
          <section class="contenidoprincipal">
          <article class="arriba"><h1>Titulo 1</h1><p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber
               hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans
               eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu,
               eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit
               veritus placerat per. Ius id vidit volumus mandamus, vide veritus democritum te nec,</p></article>
          <div class="separador"></div>
              <article class="izquierda"><h2>Titulo 2</h2><p> ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei. Blandit incorrupte quaerendum in quo, nibh impedit id vis, vel no nullam semper audiam. Ei populo graeci consulatu mei, has ea stet modus phaedrum. Inani oblique ne has, duo et pri in errem putant feugiat. Sed iusto nihil populo an, ex pro novum homero cotidieque. Te utamur civibus eleifend qui, nam ei brute doming concludaturque, modo aliquam facilisi nec no. Vidisse maiestatis constituam eu his, esse pertinacia intellegam ius cu. Eos ei odio veniam, eu sumo altera adipisci eam, mea audiam prodesset persequeris ea. Ad vitae dictas vituperata sed, eum posse labore postulant id. Te eligendi principes dignissim sit, te vel dicant officiis repudiandae. Id vel sensibus honestatis omittantur, vel cu nobis commune patrioque. In accusata definiebas qui, id tale malorum dolorem sed, solum clita phaedrum ne his. Eos mutat ullum forensibus ex, wisi perfecto urbanitas cu eam, no vis dicunt impetus. Assum novum in pri, vix an suavitate moderatius, id has reformidans referrentur. Elit inciderint omittantur duo ut, dicit democritum signiferumque eu est, ad suscipit delectus mandamus duo. An harum equidem maiestatis nec. At has veri feugait placerat, in semper offendit praesent his. Omnium impetus facilis sed at, ex viris tincidunt ius. Unum eirmod dignissim id</p></article>              <article class="derecha"><h3>Título 3</h3><p>offendit persequeris ei vim. Eos dicat oratio partem ut, id cum ignota senserit intellegat. Sit inani ubique graecis ad, quando graecis liberavisse et cum, dicit option eruditi at duo. Homero salutatus suscipiantur eum id, tamquam voluptaria expetendis ad sed, nobis feugiat similique usu ex. Eum hinc argumentum te, no sit percipit adversarium, ne qui feugiat persecuti. Odio omnes scripserit ad est, ut vidi loem uupp non epsis maiestatis his, putent mandamus gloriatur ne pro. Oratio iriure rationibus ne his, ad est corrumpit pri in errem putant feugiat. Sed iusto nihil populo an, ex pro novum homero cotidieque. Te utamur civibus eleifend qui, nam ei menchoni brute doming concludaturque, modo aliquam facilisi nec no. Vidisse maiestatis constituam eu his, esse pertinacia intellegam ius cu. Eos ei odio veniam, eu sumo altera adipisci eam, mea audiam prodesset persequeris ea. Ad vitae dictas vituperata sed, eum posse labore postulant id. Te eligendi principes dignissim sit, te vel dicant officiis repudiandae. Id vel sensibus honestatis omittantur, vel cu nobis commune patrioque. In accusata definiebas qui, id tale malorum dolorem sed, solum clita phaedrum ne his. Eos mutat ullum forensibus ex, wisi perfecto urbanitas cu eam, no vis dicunt impetus. Assum novum in pri, vix an suavitate moderatius, id has reformidans referrentur. Elit inciderint omittantur duo ut, dicit democritum signiferumque eu est, ad suscipit delectus mandamus duo. An harum equidem maiestatis nec. At has veri feugait placerat, in semper offendit praesent his. Omnium impetus facilis sed at, ex viris tincidunt ius. Unum eirmod dignissim id quo. Sit te atomorum quaerendum neglegentur, his primis tamquam et. Eu quo quot veri alienum, ea eos nullam luptatum accusamus. Ea mel causae phaedrum reprimique, at vidisse dolores ocurreret nam splendide.</p></article>
              </section>
           <div class=" separador"></div>
          <footer><p>Este es el pie de página, en su interior puedes escribir algo, como por ejemplo enlaces a los derechos de autor,
          aviso legal...</p></footer>
      </section>
          </body>
</html>

Éste último código, es el que debes introducir dentro de tu archivo index una vez esté personalizado. Si lo subes al servidor y lo publicas, se puede ver esto:

Ahora vamos a aplicarle estilos, crea una nueva hoja de estilos css o aplicalos mediante las etiquetas <style> y </style> entre <head> y </head>. Pon de nombre a esta hoja de estilos: "estilo.css" que es el nombre que habíamos puesto para vincular este documento mediante un link: <link rel="stylesheet"href="estilo.css" type="text/css" />.

Introduce este contenido dentro de la hoja de estilos "estilo.css":

*{text-indent: 15px;}
h1 { font-family: 'Freckle Face', cursive; font-size:20px;font-weight: 400;color:white;padding-top:7px; }
h2 { font-family: 'Freckle Face', cursive; font-size:30px;font-weight: 400;color:yellow;padding-top:15px; }
a:link {text-decoration:none; color: #99CC00;} /* Link no visitado*/
a:visited {text-decoration:none; color:#99CC66} /*Link visitado*/
a:active {text-decoration:none; color:#99FF00;} /*Link activo*/
a:hover {text-decoration:underline; color:#99FF00;} /*Mouse sobre el link*/
body {
     width: 100%;
    background: #0000FF;
    background: -webkit-linear-gradient(#0000FF, #00008B);
background: -moz-linear-gradient(#0000FF, #00008B);
background: -o-linear-gradient(#0000FF, #00008B);
background: linear-gradient(#0000FF, #00008B);
 background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center top;
  height: 100%;
}
 
.sitio {
    overflow: hidden;
    margin: 0 auto;
    width: 955px;
    height: auto;
     font-family: 'Risque', cursive;
  color:white;
  font-size:14px;
     }
header {
    margin: 5px 5px 5px 0px;
    overflow: hidden;
    width: 918px;
    height: 100px;
    padding:15px;
    color: white;
    font-size: 17px;
    text-align: center;
  -moz-border-radius: 7px;
   -webkit-border-radius: 7px;
border-radius:7px;
   box-shadow: 5px 4px 3px #000;
   -webkit-box-shadow: 5px 4px 3px #000;
   -moz-box-shadow: 5px 4px 3px #000;
   background: #808000;
background: -webkit-linear-gradient(#808000, #2F4F4F);
background: -moz-linear-gradient(#808000, #2F4F4F);
background: -o-linear-gradient(#808000, #2F4F4F);
background: linear-gradient(#808000, #2F4F4F);
  background-repeat: no-repeat;
  background-position: center top;
}
 
.contenidoprincipal {
    text-align:justify;
  overflow:hidden;
  width: 942px;
  padding: 7px 3px 0px 3px;
    margin-top:10px;
    background: #4B0082;
    background: -webkit-linear-gradient(#4B0082,#800080);
background: -moz-linear-gradient(#4B0082,#800080);
background: -o-linear-gradient(#4B0082,#800080);
background: linear-gradient(#4B0082,#800080);
 background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center top;
  -moz-border-radius: 7px;
   -webkit-border-radius: 7px;
border-radius:7px;
   box-shadow: 5px 4px 3px #000;
   -webkit-box-shadow: 5px 4px 3px #000;
   -moz-box-shadow: 5px 4px 3px #000;
   }
.arriba {
    width:913px;
  padding: 0 5px 5px 5px;
    height:auto;
  position:relative;
  margin: -15px 1% 1% 1%;
 background: #800080; 
  -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
border-radius:15px;
  background: -webkit-linear-gradient(#008000,#800080);
background: -moz-linear-gradient(#008000,#800080);
background: -o-linear-gradient(#008000,#800080);
background: linear-gradient(#008000,#800080);
}
.izquierda {
    float: left;
  display:block;
  padding: 0 5px 5px 5px;
  margin-left:1%;
  overflow:hidden;
    width: 445px;
    height: auto;
    background: #800080;
    margin-top: 5px;
    margin-bottom: 5px;
  -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
border-radius:15px;
  background: -webkit-linear-gradient(#800080,#008000);
background: -moz-linear-gradient(#800080,#008000);
background: -o-linear-gradient(#800080,#008000);
background: linear-gradient(#800080,#008000);
}
.derecha {
    float: right;
  display:block;
  padding: 0 5px 5px 5px;
  margin-right:1%;
  overflow:hidden;
    width: 445px;
    height: auto;
    background: #800080;
    margin-top: 5px;
    margin-bottom: 5px;
  font-family: 'Risque', cursive;
  color:white;
  font-size:14px;
  -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
border-radius:15px;
  background: -webkit-linear-gradient(#800080,#008000);
background: -moz-linear-gradient(#800080,#008000);
background: -o-linear-gradient(#800080,#008000);
background: linear-gradient(#800080,#008000);
}
 
footer {
    margin-top: 7px;
  margin-bottom:0px;
  padding-bottom: 7px;
  padding-top: 15px;
  text-align: center;
    width: 949px;
 height: auto;
    position: static;
    border-radius: 10px 10px 0px 0px;
    -moz-border-radius: 10px 10px 0px 0px;
   -webkit-border-radius: 10px 10px 0px 0px;
   box-shadow: 5px 4px 3px #000;
   -webkit-box-shadow: 5px 4px 3px #000;
   -moz-box-shadow: 5px 4px 3px #000;
   background: #800080;
  background: -webkit-linear-gradient(#008000,#800080);
background: -moz-linear-gradient(#008000,#800080);
background: -o-linear-gradient(#008000,#800080);
background: linear-gradient(#008000,#800080);
}

Si lo has hecho todo correctamente, una vez subido al servidor se debería ver algo como esto en los navegadores modernos:

Ya tienes tu página web creada mediante html5 y CSS3!!! ¿te gusta? ahora te toca aprender y practicar con tu nueva web. Mira que bien queda en esteejemplo que he creado de página web mediante html5 y CSS3, similar al de este post. En este link, puedes descargar los códigos para crear la web mediante html5 y CSS3.

Ahora te toca a ti personalizarla, y añadirle muchas más cosas, por ejemplo un menú, un formulario de contacto, videos, imágenes, plugins de javascript, frameworks, funciones php... Por cierto, si te interesa, puedes aprender comocrear un formulario con html5 y CSS3, para añadirlo a tu nueva página web o también puedes descubrir como insertar vídeos mediante html5. Quizá te interese echar un vistazo esta plantilla html5 responsive web design, diseñada con CSS3.

Si no tienes conocimientos sobre html ni CSS, lo mejor es que te decidas por crear un sitio web con alguna de estas herramientas o sistemas para crear webs, gratis. Que no se te olvide seguirme en las redes sociales, así recibirás información instantáneamente sobre nuevas publicaciones y eventos en Miopiblog.