Download marketing digital: creación de webs

Marketing digital: Creación de webs MARKETING DIGITAL: CREACIÓN DE WEBS Ejemplo práctico con WordPress Alfons González Curso de especialización en Marketing Digital de PMASTERS PMASTERS ‐ Bloque E, local 1, Vila Universitaria, Campus de la Universitat Autònoma de Barcelona, 08193 Bellaterra (Cerdanyola del Vallés)
Curso de especialización en Marketing Digital Alfons González 1 Marketing digital: Creación de webs Introducción y objetivos................................................................................................................ 6
Primera parte: Páginas HTML y lenguajes de script...................................................................... 7
La página HTML básica .............................................................................................................. 7
Por qué hay que formatear el contenido? ............................................................................ 7
Qué aspectos técnicos se tienen que definir? ...................................................................... 7
Versionado ............................................................................................................................ 8
Internacionalización .............................................................................................................. 8
Qué es l'HTML? ..................................................................................................................... 9
Qué necesitamos para escribir páginas HTML? .................................................................. 10
Programación incrustada en HTML..................................................................................... 10
Programación del lado cliente y programación del lado del servidor ................................ 10
Criterio de privacidad y copyright del lado servidor ........................................................... 11
Lenguajes de programación para lado cliente y lado servidor ........................................... 11
Ejemplo: crear una página web que muestre la fecha desde el lado cliente con Javascript
............................................................................................................................................. 12
Un programa del lado cliente puede verse y copiar ........................................................... 13
Ejemplo: crear una página web que muestre la fecha desde el lado servidor con PHP ..... 14
Google Analytics: un script del lado cliente ............................................................................ 17
Qué necesitamos para utilizar Google Analytics? ............................................................... 18
Como darnos de alta en Google Analytics?......................................................................... 18
Moure páginas ninguna a y desde un servidor web ............................................................... 25
El protocolo FTP .................................................................................................................. 25
Qué es un número de puerto? ............................................................................................ 26
Donde encontrar programas gratuitos de FTP.................................................................... 26
Descargar e instalar Filezilla ................................................................................................ 26
Donde encontrar alojamiento web (servidor) gratuito....................................................... 37
Donde es el negocio de los servidores gratuitos?............................................................... 38
Curso de especialización en Marketing Digital Alfons González 2 Marketing digital: Creación de webs Como trabajar con Zymic ........................................................................................................ 39
Crear una cuenta de usuario en Zymic................................................................................ 39
Subiendo y bajando páginas a nuestro nuevo lugar web ....................................................... 48
Index.html o index.php ....................................................................................................... 49
Práctica 1 ............................................................................................................................. 49
Práctica 2 ............................................................................................................................. 50
Títulos H1 que puntúan en marketing digital en Google .................................................... 51
Saltos a nuevas páginas (“links” o “enlaces”) ..................................................................... 52
Cargando plantillas.................................................................................................................. 52
Buscando un descompresor ZIP .......................................................................................... 53
Ver las opciones de plantillas y cargar una en nuestro lugar web...................................... 61
Ya podemos plantearnos la compra de una herramienta de diseño web .............................. 66
Escoger un servidor web y un entorno de desarrollo de aplicaciones ................................... 67
Qué necesitamos para publicar páginas en Internet? Opciones baratas ........................... 67
Opciones más caras para estar presentes en Internet ....................................................... 68
Un pequeño consejo, si lo aceptáis..................................................................................... 68
La Opción de la subcontratación global .............................................................................. 69
Pros y contras de la subcontratación .................................................................................. 69
Segunda parte: WordPress.......................................................................................................... 71
Instalación de WordPress........................................................................................................ 71
Crear un nuevo espacio de alojamiento web.......................................................................... 71
Como descargar WordPress .................................................................................................... 72
Donde podemos encontrar WordPress en castellano? ...................................................... 72
Donde podemos encontrar WordPress en catalán? ........................................................... 72
Como descomprimir WordPress ............................................................................................. 73
Eliminar el archivo ZIP inicial............................................................................................... 78
Como enviar WordPress a nuestro lugar web ........................................................................ 78
Curso de especialización en Marketing Digital Alfons González 3 Marketing digital: Creación de webs Evite transferencias multitasca con Zymic .......................................................................... 78
Comenzando la transferencia ............................................................................................. 79
Crear la base de datos MySQL para WordPress...................................................................... 81
Fase 1: Generar la base de datos ........................................................................................ 85
Fase 2: Crear el usuario ....................................................................................................... 85
Fase 3: Dar derechos al usuario .......................................................................................... 86
Como instalar WordPress........................................................................................................ 86
Eliminar index.html ............................................................................................................. 86
Abrir la web para configurar ............................................................................................... 87
Una parada en el camino para ver ya nuestro bloque activo ............................................. 91
Como publicar nuestros primeros artículos............................................................................ 92
Uso de las categorías........................................................................................................... 94
Como asignar una categoría a un artículo .......................................................................... 96
Como cambiar la apariencia de WordPress ............................................................................ 96
Modificar los elementos gráficos de una plantilla .............................................................. 96
Cambiar de plantilla (tema)................................................................................................. 98
Como podemos cambiar de plantilla? ................................................................................ 98
Donde podemos encontrar plantillas de WordPress? ........................................................ 99
Inserción de plugins. El Plugin de Google Analytics. ............................................................... 99
Inserción de plugins. El Plugin de Facebook. ........................................................................ 101
Activación y configuración del plugin de Facebook .......................................................... 103
Editar la posición de los widgets de Facebook dentro del blog ........................................ 105
Plugins de comercio electrónico (tienda virtual) .................................................................. 106
Tercera parte: Qué hacer cuando alguna cosa sale mal? ......................................................... 107
Faltan archivos después de la carga...................................................................................... 107
Archivos wp‐config que no se generan ................................................................................. 109
La utilidad WPConfig ......................................................................................................... 110
Curso de especialización en Marketing Digital Alfons González 4 Marketing digital: Creación de webs Modificación manual de wp‐config.php ........................................................................... 113
Curso de especialización en Marketing Digital Alfons González 5 Marketing digital: Creación de webs Introducción y objetivos
El contenido de estas dos sesiones está pensado bajo el punto de vista del emprendedor que comprende la realidad de un mundo en continuo cambio y que quiere ponerse al día en temas de marketing digital vía Internet. Se asume que los assistentes y lectores de este curso no tienen conocimientos técnicos más allá de la ofimática a nivel de usuario. Por lo tanto, el planteamiento del curso es el de una guía paso a paso, con mucha información visual de las pantallas que iremos viendo y qué hacer en cada caso para conseguir los siguientes objetivos de forma rápida y económica: 1. Saber de que hablamos cuando queremos crear un lugar web para hacer marketing digital. 2. Saber por nosotros mismos el grado de facilidad (que no paso de dificultad) que representa crear un lugar web. 3. No tener que invertir dinero hasta que realmente sepamos si nos queremos involucrar dentro del proyecto técnicamente a partir de los conocimientos conseguidos al curso. 4. Experimentar en primera persona con los elementos básicos necesarios para montar un lugar web, aprendiendo en utilizar las herramientas más comunes. 5. Alcanzar los conocimientos necesarios para poder hacer lugares web o para negociar con un proveedor de servicios web con el conocimiento de causa y de terminología adecuandos, valorando horas y materiales en su justa medida. Finalmente, el alumno podrá valorar con su satisfacción personal el grado de conocimiento práctico que ha alcanzado. Bajo el punto de vista del profesor, me doy por más que satisfecho si el estudiante acaba amando el mundo del marketing digital y creando sus propios lugares web con éxito por su negocio. Alfons González Ingeniero de software y máster en Euroasian International Business por la UAB. Curso de especialización en Marketing Digital Alfons González 6 Marketing digital: Creación de webs Primera parte: Páginas HTML y lenguajes de script
La página HTML básica
Como comentábamos al hablar de servidores web, el material básico que intercambiemos con ellos es la página web. Los programadores “cargan” o “suben” las páginas web, y los clientes las “descargan” o “bajan”. Cuando se descarga una página web, no se elimina del servidor. Simplemente se le envía una copia al cliente. El cliente voz el contenido a través de uno navegador (Microsoft Internet Explorer, Mozilla Firefox, Apple Safari, Google Chrome…). La función del navegador es formatear este contenido que le llega del servidor porque sea visualmente consumible por el cliente. Por qué hay que formatear el contenido?
O lo que es el mismo no se puede mostrar directamente lo que llega del servidor? Realmente, dentro de una página web tenemos un contenido que resulta interesante para el cliente y también tenemos unos datos técnicos y de formato (los filósofos como Spinoza dirían sustancia y accidentes). O sea: hay uno QUÉ y uno COMO. Dentro del QUÉ tenemos el contenido. Dentro del COMO tenemos los aspectos estéticos y los aspectos técnicos (aspectos informáticos que veremos acto seguido). O sea: Página web: •
Contenido •
Forma o
Aspectos estéticos o
Aspectos técnicos (informáticos) Qué aspectos técnicos se tienen que definir?
Bastantes aspectos. Vamos a resumirlos mucho por no hacernos un lío con temas que aún no tocaremos directamente. Curso de especialización en Marketing Digital Alfons González 7 Marketing digital: Creación de webs Versionado
La forma de construir páginas web ha ido cambiante con el tiempo. A medida que los programadores y los diseñadores iban creando páginas, iban añadiendo nuevas prestaciones a los navegadores porque las páginas fuesen más atractivas para los clientes. Eso hizo necesario escribir convenios para ponerse de acuerdo con lo que iba a ser normativo y lo que no, ya que algunas de estas especificaciones implicaban un esfuerzo suplementario por parte del servidor web o por parte del navegador. Por lo tanto, uno de los aspectos técnicos que se definen es la versión de HTML utilizada. Internacionalización
Otro de los aspectos técnicos es el conjunto de caracteres usados para representar el contenido. Con la incorporación de los países asiáticos (China, Japón, Corea, Vietnam), la India y los países del oriente medio a la globalización, ha hecho falta concebir nuevas formas de “pintar” los caracteres que se utilizan en sus escrituras por no limitar todo al alfabeto occidental. Por esta razón se define también el conjunto de caracteres que se quiere utilizar, porque el navegador pueda interpretar y visualizar correctamente la página web. Veamos una página web “en crudo” a la que denominaremos Pagina00.html. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
</head>
<body>
Este es un ejemplo de p&aacute;gina b&aacute;sica.
</body>
</html> Esta página web se muestra al cliente mediante uno navegador para aparecer así: Curso de especialización en Marketing Digital Alfons González 8 Marketing digital: Creación de webs En este caso, el navegador es Safari, pero podría ser Internet Explorer o Firefox. Todos los navegadores formatean aproximadamente igual las páginas web, aunque la manera de mostrarlas no es exactamente igual. Unos están especializados en unos temas y otros hacen mejor otras cosas. De momento, la página básica que mostramos se vería igual a todos ellos. El texto “en crudo” que hemos visto antes está escrito siguiendo las normas de HTML. Por ello la vemos de manera diferente. Qué es el HTML?
El HTML es un convenio de palabras llave útiles para definir el contenido, el estilo y los datos técnicos de una página web. Ya que un conjunto de palabras se puede considerar un lenguaje, podemos definir HTML como el lenguaje utilizado para construir páginas web. El HTML es un lenguaje derivado del XML. Comenzó siendo un dialecto poco ortodoxo de XML (como el castellano lo fue del latín) y ahora ha ganado estatus propio de lenguaje. HTML a su vez ha evolucionado en diversas versiones, como el XHTML o el WML. Curso de especialización en Marketing Digital Alfons González 9 Marketing digital: Creación de webs El XHTML es el llamado HTML bien formato: uno HTML ortodoxo que requiere marcas de inicio y de final para todas las secciones. Hacia aquí evoluciona el HTML usado en la mayor parte de los servidores web del mundo. Por lo tanto, va creciente en adeptos. El WML, en cambio, va en recesión. Es una reducción del HTML por usarse en los primeros modelos de teléfonos móviles con acceso en Internet (leéis Nokia 7111 o Nokia 8210) alrededor del año 2000. Estos móviles disponían de una cantidad de memoria limitada y WML establecía normas estrictos para reducir el volumen de información circulante en forma de fichas o cartas de un tamaño reducido. Con la aparición de teléfonos móviles con mayor capacidad de memoria, su software se ha adaptado para trabajar con HTML directamente. Qué necesitamos para escribir páginas HTML?
Un editor. Ahora bien: los hay de diferentes precios y funcionalidades, por lo que podemos decir que elegir uno depende de qué productividad queramos alcanzar por nuestra cuota de producción. Podemos ser muy avaros y poco productivos. En este caso, no necesitamos más que lo que viene de serie con un ordenador portátil: un editor de texto plano. También podemos ser muy gastadores y muy productivos. En este caso tendremos diferentes suites de herramientas que sirven para diseñar páginas web y combinar el diseño con la programación de los servidores web: Dreamweaver, Visual Studio, etc. y sus ediciones por a otras plataformas como Linux, Macintosh, dispositivos móviles… Dentro de este rango tenemos lenguajes de programación que se pueden incrustar en las páginas web. Programación incrustada en HTML
Las páginas web permiten abrir secciones a su interior en las que se albergan programas. Para qué queremos insertar programas dentro de páginas HTML? Porque una página web ofrezca información actualizada que depende de factores exteriores. El ejemplo más sencillo es poner la fecha a la cabecera de la página. Otro ejemplo es construir la información de la página a partir de los datos de cotizaciones bursátiles. Éste es un ejemplo muy interesante, ya que las cotizaciones se actualizan constantemente y no podemos tener a un programador que cada minuto sea capaz de escribir una página con 4000 valores cambiantes por colocarla en un servidor De Internet. Programación del lado cliente y programación del lado del servidor
Imaginemos que tenemos una página en la cual tenemos que mostrar la fecha del día. La fecha es un dato que depende de factores exteriores. Curso de especialización en Marketing Digital Alfons González 10 Marketing digital: Creación de webs Dependemos del momento en que vemos la página y también del punto del planeta que nos encontramos. Recordamos que no en todos los lugares del planeta vivimos el mismo día. Mientras a China sale el sol comenzando un nuevo día, a los Estados Unidos es de noche. El día comienza al Este. Por lo tanto, un cliente que esté navegante por un servidor web que esté en la otra punta del planeta se encontrará en un mismo instante, pero en fechas diferentes. Por lo tanto qué fecha mostramos? la del cliente o la del servidor? La respuesta depende del tipo de aplicación que tengamos. Por ejemplo: si un inversor norteamericano de bolsa quiere comprar o vender acciones a un servidor de Hong Kong, comprará en el horario del mercado de Hong Kong. Por lo tanto, la hora que tendrá que mostrar es la del lado del servidor. En la mayor parte de las aplicaciones de bases de datos, se contempla la fecha y hora del servidor como hora en la cual se anotan las operaciones, sin perjuicio de que se muestre también la hora local del cliente a título informativo. Un programa del lado del cliente exige trabajar al navegador web que use el cliente. Un programa del lado del servidor exige trabajar al servidor web que suministra las páginas. Criterio de privacidad y copyright del lado servidor
Los programas que funcionan del lado servidor no envían las secciones de programa que contienen las páginas web. O sea, las páginas web que contienen programación del lado servidor no envían los programas, sino los datos obtenidos por los programas. Eso quiere decir que el cliente no puede ver como hemos hecho el programa (protegemos nuestra propiedad intelectual) ni como acceder a nuestros datos fuera de la web (hackers). Lenguajes de programación para lado cliente y lado servidor
Podemos mezclar dentro de una página web la programación del lado cliente y la del lado servidor. La programación del lado cliente se envía a través de Internet. La programación del lado servidor se ejecuta en el servidor y sólo se envía su contenido, nunca el programa que lo genera. Los lenguajes de programación más comunes para el lado cliente son Javascript y Visual Basic Script. Se suelen llamar lenguajes de script. Los lenguajes de programación más comunes para el lado servidor son PHP, Java, ASPE, ASP.NET, C# y VB.NET. Curso de especialización en Marketing Digital Alfons González 11 Marketing digital: Creación de webs Ejemplo: crear una página web que muestre la fecha desde el lado
cliente con Javascript
Veamos ahora un ejemplo de página web con una sección incrustada de programación que se encarga de mostrar la fecha del lado cliente. Para ello vamos en utilizar el lenguaje Javascript, que es un derivado de Java diseñado para trabajar desde el lado cliente. <!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1‐transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http‐equiv="Content‐Type" content="text/html; charset=iso‐8859‐1" /> <title>Documento sin t&iacute;tulo</title> </head> <body> La fecha de hoy del lado cliente es: <script> var f = new Date(); document.write(f.getDate() + "/" + (f.getMonth() +1) + "/" + f.getFullYear()); </script> </body> </html> Fijémonos que existe una marca de inicio <script> y una de final </script> Entre estas dos marcas se encuentra el programa en cuestión, y este programa con su texto viaja desde el servidor al cliente porque se pueda ejecutar en el lado cliente por el navegador web. Es por lo tanto un código fuente visible desde el cliente; un código fuente que nos pueden copiar. Su resultado es el siguiente: Curso de especialización en Marketing Digital Alfons González 12 Marketing digital: Creación de webs Un programa del lado cliente puede verse y copiarse
Los programas creados para correr desde el lado cliente se pueden ver y copiar. Como? Yo sólo veo el resultado. Donde es el programa? Podemos pedirle al navegador que nos muestre el código fuente que ha recibido en formato “crudo HTML”. Eso se puede conseguir con el navegador Safari yendo al menú Visualización y seleccionando la opción Ver código fuente. En Internet Explorer, tenemos una opción equivalente. Si no apareciese el menú en Explorer, podemos forzar que se muestre pulsando la tecla de función F10. Una vez que el menú está visible, podemos ir al menú Ver y seleccionar Código fuente. Se abrirá una ventana como ésta: Curso de especialización en Marketing Digital Alfons González 13 Marketing digital: Creación de webs Ésta es la constatación práctica que todo cuanto viaja por la red es pirateable y que debemos tener cuidado de qué programas dejemos a la vista de los clientes. Ejemplo: crear una página web que muestre la fecha desde el lado
servidor con PHP
Veamos ahora la parte equivalente del ejemplo anterior desde el lado servidor. La primera cosa que debemos hacer es cambiar la extensión (las tres o cuatro últimas letras que van después del punto) al nombre del archivo. Si el nombre del archivo hasta ahora acababa en “.htm” o en “.html”, ahora tiene que acabar en “.php”. Eso indica al servidor web que tiene que trabajar con el archivo de la forma típica de PHP, escondiendo los códigos fuente y enviando sólo los resultados de salida. Por lo tanto, si íbamos en crear un archivo llamado “Pagina02.html”, lo que haremos es gravarlo con el nombre “Pagina02.php”. Su contenido será el siguiente: <!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1‐transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http‐equiv="Content‐Type" content="text/html; charset=iso‐8859‐1" /> <title>Documento sin t&iacute;tulo</title> Curso de especialización en Marketing Digital Alfons González 14 Marketing digital: Creación de webs </head> <body> La fecha de hoy del lado servidor en PHP es: <? $fecha = time (); echo date ( "j/m/Y" , $fecha ); ?> </body> </html> Esta página hay que subir a un servidor web para ver como funciona. Más adelante veremos como mover páginas ninguna a y desde un servidor web con el protocolo FTP. De momento vamos a asumir que ya lo sabemos y aprovecharemos para ver tres detalles: 1. La apariencia de la página en el navegador de Internet. 2. El código fuente que hemos utilizado (que realmente ya hemos visto en el listado anterior). 3. El código fuente enviado al cliente desde el servidor web. La apariencia de la página web es: Curso de especialización en Marketing Digital Alfons González 15 Marketing digital: Creación de webs El código fuente php que hemos utilizado es: <!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1‐transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http‐equiv="Content‐Type" content="text/html; charset=iso‐8859‐1" /> <title>Documento sin t&iacute;tulo</title> </head> <body> La fecha de hoy del lado servidor en PHP es: <? $fecha = time (); echo date ( "j/m/Y" , $fecha ); ?> </body> </html> Curso de especialización en Marketing Digital Alfons González 16 Marketing digital: Creación de webs Y ahora, el código que recibe el cliente es lo que ya sabemos como revelar (seleccionando en el navegador el menú Ver, opción código fuente): Como podemos ver, no existe ningún rastro del código fuente. Es como si un diseñador hubiese escrito una página estática directamente en el navegador. Eso tiene el suyo pros y los suyos contras: •
Pro: el cliente no puede ver nuestro código fuente. •
Pro: el navegador del cliente no realiza ningún esfuerzo de ejecución de programa; no gasta sus recursos. •
Contra: el servidor realiza esta tarea, gastando sus recursos de tiempo de procesador. •
Contra: cuanto más complejo es el código fuente que debe procesar del lado servidor, más potente tendrá que ser la CPU por no colapsarse con las peticiones de un número creciente de usuarios. Google Analytics: un script del lado cliente
La gente corriente piensa que el marketing es una actividad puramente creativa en la que no intervienen las ciencias matemáticas. El buen marketing es lo que genera ideas y después las justifica con cifras reales y resultados estadísticos. Google Analytics es una herramienta de Google que se encarga de obtener estadísticas de éxito o de fracaso de un lugar web y de sus distintas campañas de marketing digital. Datos como ahora: cuanta gente me visita? cuantos están interesados en mi producto X y/o en mi producto Z? Los clientes que llegan a mi lugar a través de donde llegan? Los que se van Curso de especialización en Marketing Digital Alfons González 17 Marketing digital: Creación de webs hacia donde se van? Cuantos son? Qué porcentaje de crecimiento o decrecimiento tengo en el tiempo? Qué porcentaje de respuestas tengo sobre una campaña determinada? Qué necesitamos para utilizar Google Analytics?
Google Analytics es un servicio gratuito. Sólo es preciso darnos de alta y saber como insertar unos scripts de cliente para comenzar en obtener resultados. Como darnos de alta en Google Analytics?
Por darnos de alta en Google Analytics necesitamos una cuenta de correo electrónico y llenar los datos de un formulario que podemos encontrar en www.google.es A la esquina superior derecha de la página tenemos una opción que pone “Acceder” en castellano o “entra” en catalán. Pulsaremos esta opción con el ratón. Nos aparecerá la siguiente página: Mediante el círculo rojo queremos señalar mejor a donde tenemos que hacer clic si queremos crear un nuevo cuenta de Google. Hacemos clic a “crear una gratis”. Curso de especialización en Marketing Digital Alfons González 18 Marketing digital: Creación de webs Sólo nos queda llenar los datos y el contenido del Captcha (las letras retorcidas de color rojo) como medida de seguridad. Después de eso, pulsaremos el botón “Acepto. Crear mi cuenta”. Google nos enviará un mensaje de correo electrónico a nuestra cuenta para verificar nuestra identidad. Curso de especialización en Marketing Digital Alfons González 19 Marketing digital: Creación de webs Haremos clic en el primer enlace del mensaje para activar nuestra cuenta. Ahora que ya tenemos cuenta a Google, vamos a registrar‐noes con un proceso específico de registro para Google Analytics. La dirección es: www.google.com/analytics Haremos clic a “Regístrese ahora mismo”. Curso de especialización en Marketing Digital Alfons González 20 Marketing digital: Creación de webs Entraremos nuestros datos de la cuenta de Google que hemos creado en el paso anterior, y pulsaremos el botón “Acceder”. Pulsaremos el botón “Registro”. Curso de especialización en Marketing Digital Alfons González 21 Marketing digital: Creación de webs Llenaremos los datos (en este caso son de ejemplo, cada cual n' habrá de poner las suyas) y pulsaremos el botón “Continuar”. Después de llenar los datos volveremos a apretar “Continuar”. Curso de especialización en Marketing Digital Alfons González 22 Marketing digital: Creación de webs Esta pantalla contiene las condiciones legales del servicio. Después de revisarlas, marcaremos la caja de comprobación que acepta los términos de contrato y pulsaremos el botón “Crear una cuenta nuevo”. A continuación, Google nos proporciona el fragmento de script y las instrucciones necesarias porque cada vez que un cliente vea una de nuestras páginas, se registre este hecho en el sistema de estadísticas de Google Analytics: Como podemos apreciar, las instrucciones dicen que tenemos que insertar esta secuencia de script antes de finalizar el bloque de cabecera de HTML. Curso de especialización en Marketing Digital Alfons González 23 Marketing digital: Creación de webs Por lo tanto, una página preparada para reflejar sus estadísticas en Google puede ser ésta: <!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1‐transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http‐equiv="Content‐Type" content="text/html; charset=iso‐8859‐1" /> <title>Documento sin t&iacute;tulo</title> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA‐20664689‐1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google‐ analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </head> <body> La fecha de hoy del lado cliente es: <script> Curso de especialización en Marketing Digital Alfons González 24 Marketing digital: Creación de webs var f = new Date(); document.write(f.getDate() + "/" + (f.getMonth() +1) + "/" + f.getFullYear()); </script> </body> </html> El código que se ve marcado en negrita es mi código de cuenta de Google Analytics y sólo sirve para mi web. Varía en cada lugar web para cada usuario de Google Analytics. Nuestra página ya está lista para ser subida al servidor web. Cada vez que un usuario l'abra, eso se reflejará en las estadísticas de Google. Más adelante veremos como podemos obtener las estadísticas. Mover páginas hacia y desde un servidor web
De momento, hemos tenido que hacer un auto de fe y creer lo que nos dice el profesor, o sea, que la página web que tenemos que subir al servidor funciona correctamente. Hemos tenido que asumirlo porque no sabemos aún como subir contenidos a un servidor web. Éste es el tema que vamos en tratar en esta sección. El protocolo FTP
Cuando se creó Internet, se crearon protocolos de comunicaciones entre clientes y servidores. Los humanos tenemos protocolos por comunicarnos entre iguales y con superiores jerárquicos. Tenemos que saber en qué orden tenemos que intervenir, qué podemos pedir y qué no, y las palabras adecuadas por pedirlo. El protocolo FTP es justamente eso: un conjunto de normas sociales entre ordenadores que sirve para colocar un archivo en un lugar concreto de un servidor. O sea: lo transferimos desde el cliente hacia el servidor. Archivo en inglés se traduce por “File”. Por ello el FTP significa “File Transfer Protocolo” o protocolo de transferencia de archivos. Funciona en los dos sentidos: puede enviar archivos desde el cliente al servidor y también puede bajarlos desde servidor hacia cliente. Bien, pero no teníamos ya una forma de bajarlos mediante el navegador? Ciertamente, pero los bajábamos censurados, como acabamos de ver: los códigos fuente no los baja mediante el navegador (protocolo HTTP). En cambio, sí que los baja cuando los solicitemos mediante FTP. Curso de especialización en Marketing Digital Alfons González 25 Marketing digital: Creación de webs Entonces tampoco están seguros nuestros códigos fuente? Nuestros códigos fuente están muy seguros porque sólo tendrán respuesta por FTP aquellos usuarios que hayan sido previamente autorizados mediante un código de usuario y una contraseña o password. Eso quiere decir que tenemos que aprender un nuevo lenguaje para pedir archivos? No hace falta. Existen programas que trabajan con el protocolo FTP y que se encargan de subir y bajar archivos. Sólo necesitan saber el nombre del servidor FTP, el código de usuario autorizado y la contraseña. Algunos servidores necesitan además que se los especifique un número de puerto. Qué es un número de puerto?
De con toda seguridad que hemos visto alguna vez el muelle de carga de camiones de una empresa de transportes. Tiene una serie de puertas numeradas (puerta 1, puerta 2, y así sucesivamente). Nuestro ordenador también tiene puertas para trabajar con Internet. La puerta más usual para el protocolo FTP es la 21. Algunos servidores disponen de más de un puerto para FTP o bien, por cuestiones de seguridad, operan con un otro número de puerto que mantienen en el anonimato para evitar intentos de hackers. Si no nos dicen lo contrario, nuestro servidor utilizará el puerto 21. El código de usuario, la contraseña, el nombre del servidor, el archivo a transferir, el directorio de destino y el número de puerto de FTP constituyen lo que denominemos parámetros de servidor de FTP. Donde encontrar programas gratuitos de FTP
Filezilla es un programa gratuito de FTP que tiene en cuenta todos estos parámetros de servidor de FTP. Trovarlo es fácil. Podemos utilizar Google preguntando por “Filezilla download” o bien podemos ir directamente a uno de los múltiples lugares web de utilidades en los cuales está disponible. Por ejemplo: http://www.utilidades‐utiles.com/download‐filezilla‐windows‐xp.php Si queremos ir al lugar original de Filezilla: http://filezilla‐project.org/ Este lugar web proporciona una versión para Windows XP. Existen versiones para una gran variedad de sistemas operativos (Windows de de diferentes versiones, Macintosh, Linux…). Descargar e instalar Filezilla
Suponemos que hemos ido al lugar original de Filezilla y que nos aparece su página típica: Curso de especialización en Marketing Digital Alfons González 26 Marketing digital: Creación de webs Haremos clic en el botón gris etiquetado como “Download Filezilla Cliente”. Ahora nos pide que seleccionamos el sistema operativo que tenemos: Curso de especialización en Marketing Digital Alfons González 27 Marketing digital: Creación de webs Si es Windows, seleccionaremos la primera opción: “Filezilla_3.3.5.1_win32‐setup.exe (recommended)”. Esta opción ejecuta directamente el instalador de Filezilla y es la recomendada porque es la más rápida. La siguiente opción que descarga un archivo ZIP es útil si estamos pensando en utilizar un solo paquete descomprimible por instalarlo en diversas estaciones de trabajo. De momento, para este curso, seleccionaremos la primera opción. Es posible que el navegador nos advierta que vamos en descargar un archivo y nos pida confirmación. Se la daremos en este caso. Después de eso nos aparecerá este cuadro de diálogo: Curso de especialización en Marketing Digital Alfons González 28 Marketing digital: Creación de webs Pulsaremos el botón Run o Ejecutar (dependiendo del idioma que nos aparezca) y comenzará la descarga: Una vez finalizada, nos preguntará: Curso de especialización en Marketing Digital Alfons González 29 Marketing digital: Creación de webs Haremos clic en ejecutar. Parece que se está bajando la versión en inglés es eso correcto? Tranquilos. Los diálogos son en inglés, pero el lugar web de Filezilla detecta el idioma del navegador que usemos y descarga la versión que encaja con el idioma del navegador. Nos aparece la pantalla de licencia de usuario. Si estamos de acuerdo, pulsaremos el botón “I agree”. Nos está preguntando si la instalación será válida sólo para el usuario actual de la sesión o si en cambio queremos que lo utilice cualquier usuario. Si no nos importa, dejaremos seleccionada la opción por defecto (Anyone) y pulsaremos el botón Next. Curso de especialización en Marketing Digital Alfons González 30 Marketing digital: Creación de webs Si lo queremos así, podemos marcar también la opción Desktop Icon , que nos colocará el icono de Filezilla en la superficie del escritorio. Sol ser más cómodo, siempre y cuando tengamos espacio en pantalla por más iconos. Nos pregunta ahora la ubicación del programa en nuestro disco llevar. Por defecto ya es correcta. Pulsaremos el botón Next. Curso de especialización en Marketing Digital Alfons González 31 Marketing digital: Creación de webs Ahora nos pregunta si estamos de acuerdo que el nombre del menú de acceso sea “FileZilla FTP Cliente”. En principio ya está correcto. Pulsamos el botón “Install”. Nos aparece una barra de progreso según va instalando la aplicación. Finalmente nos indica que el programa está instalado y listo para utilizarse. Curso de especialización en Marketing Digital Alfons González 32 Marketing digital: Creación de webs Podemos ejecutar el programa ya, directamente. Como veremos de primero será el cuadro de diálogo que nos ofrece información sobre Filezilla. El programa se entrega junto con un manual de usuario, así que si tenemos dudas, cada vez que deseemos usarlo, podremos consultarlo. También ofrece documentación adicional. Pulsaremos el botón Aceptar para cerrar este cuadro de diálogo. Nos aparecerá la pantalla principal de Filezilla: Curso de especialización en Marketing Digital Alfons González 33 Marketing digital: Creación de webs Fijémonos que los parámetros de FTP son los que nos aparecen en la parte frontal superior de la ventana, en las cajas de texto que aparecen etiquetadas como •
Servidor •
Nombre de usuario •
Contraseña •
Puerto Una vez que sepamos los parámetros que es preciso especificar, los llenaremos y podremos pulsar el botón de “conexión rápida”por conectarnos con el servidor. Dentro de los servicios que proporciona el protocolo FTP tenemos el de copiar las estructuras de carpetas del servidor. Por esta razón tenemos en la mitad de la izquierda la estructura de carpetas de nuestro ordenador local. Es la parte del cliente. La parte de la derecha estará vacía hasta que conectamos con el servidor. A la parte izquierda, dedicada al cliente, nos aparecen nuestros discos duros. En uno de estos discos duros, dentro de una de sus carpetas, guardaremos los contenidos que deseemos colocar en el servidor. Curso de especialización en Marketing Digital Alfons González 34 Marketing digital: Creación de webs En el mío PC, la carpeta que utilizo para salvaguardar los contenidos de mi lugar web se encuentra en Mis documentos/Alfons/Lugar sin nombre 1 Eso quiere decir que, en sentido opuesto (de servidor a cliente) será la carpeta en la cual guardamos la copia de seguridad de nuestro lugar web. Tal vez no sea el nombre más adecuado (necesitaríamos un nombre más explícito como por ejemplo MiWeb), pero de momento tenemos bastante. Ésta es la carpeta que he seleccionado para la copia local de la web en el lado cliente. Yo ahora voy en conectar con mi servidor utilizando mis parámetros para ver qué aparece a la parte derecha, dedicada al servidor. Para ello introduzco los parámetros de FTP del servidor y aprieto el botón “Conexión rápida”. Curso de especialización en Marketing Digital Alfons González 35 Marketing digital: Creación de webs El contenido del servidor aparece a la mitad derecha que hasta ahora teníamos vacía. Normalmente la web se encuentra en uno de los directorios que se presentan en primera instancia. Concretamente en el directorio “web”. Si hago doble clic sobre él, veré, directamente, el contenido de la web: Curso de especialización en Marketing Digital Alfons González 36 Marketing digital: Creación de webs A partir de este momento, subir y bajar archivos será tan fácil como arrastrar y soltar desde la parte izquierda a la derecha o viceversa. Donde encontrar alojamiento web (servidor) gratuito
Cuando comenzamos en estudiar una nueva materia, como en nuestro caso los aspectos técnicos de la creación de lugares web, es normal que nos sentimos inseguros y burdos. Por ello necesitamos hacer los experimentos con gaseosa y saber que, si nos equivoquemos, no pasa nada y no nos tocará rascarnos el bolsillo por no nada. Aquéllos que nos hemos dedicado en hacer maquetas de aeromodelismo, si nos recordamos de los primeros tiempos, hace 20 años, cuando sólo se construían modelos utilizando madera de balsa, cada golpe y cada caída de nuestros aviones de prueba nos costaba mucho dinero y mucho tiempo por repararlos. Ahora estamos en la era de Internet, y de igual manera que nos acabamos de descargar un programa de FTP gratuitamente y hemos comenzado a utilizarlo en cinco minutos, también podemos encontrar lugares de alojamiento gratuito. Se trata de lugares limitados en prestaciones, que no son óptimos para hacer SEO o SEM, pero que nos van a servir para probar nuestros lugares web hasta estar seguros que funcionarán suficiente bien en torno a destino. Curso de especialización en Marketing Digital Alfons González 37 Marketing digital: Creación de webs Uno de estos proveedores de alojamiento gratuito es Zymic (www.zymic.com). Para utilizar el alojamiento gratuito de Zymic tenemos que crear una cuenta de usuario de manera muy sencilla y con pocos requisitos. No hace falta reservar nombres de dominio. Por defecto Zymic suministra un nombre de subdominio (por ejemplo miempresa.zxq.net) donde zxq.net es el dominio y miempresa es el subdominio. Zymic proporciona un servicio de soporte técnico muy competente que puede ayudarte cuando tengas dudas sobre como administrar tu lugar web. También dispone de foros donde los diferentes clientes se comunican entre ellos, escribiendo preguntas y respuestas sobre cuestiones técnicas. Donde es el negocio de los servidores gratuitos?
O sea, que hay personas en Internet dispuestas a ayudarte, a darte programas gratuitamente y a proporcionarte consejo y soporte técnico. Tal vez Internet es una ONG? Pardillos sin fronteras? No. Lo que existe, en realidad, es una concepción de negocio innovadora y muy diferente a la que pueda tener un país de cultura latina como el nuestro. Podemos cotejarlo en cierta manera con una tienda de ropa, donde podemos ir en ver ropa, probar qué tal nos queda y comprar sólo la que nos haya gustado. Zymic proporciona también, como opción, alojamiento profesional de pago, con prestaciones elevadas y diferentes opciones de capacidad. Este alojamiento es óptimo para marketing digital sólo si nuestra web tiene que alojarse forzosamente a EEUU. Si no, (en caso de tener un lugar español o de cualquier otro nacionalidad) las puntuaciones de Google no nos favorecerán en absoluto. Zymic también proporciona complementos de programación vendibles. Por ejemplo plantillas de lugar web realizadas con PHP con diseños personalizados. Nosotros podemos utilizarlas como base para nuestros diseños estéticos, pero no podemos tomar'ls la nota del copyright hasta que paguemos 35 dólares a su autor. Zymic, al proporcionar alojamiento gratuito, se beneficia del tránsito destinado a estos lugares, que pasa en engrandecer sus estadísticas, otorgándole un ranking notorio a Alexa. Una buena estadística a Alexa se traduce por un buen posicionamiento y por lo tanto una valoración económica (de cara a una posible compra/venta) mayor. Es, en gran parte, una forma objetiva de valorar uno intangible. Estamos diciendo que Zymic es el proveedor de alojamiento ideal? No. Simplemente es una muy buena opción para comenzar en desenvolver el lugar web de una pequeña y mediana empresa, en vistas a trasladarlo después a un dominio propio con todos los requisitos de SEO i SEM. Curso de especialización en Marketing Digital Alfons González 38 Marketing digital: Creación de webs Como trabajar con Zymic
Zymic se encuentra en la siguiente URL: www.zymic.com Zymic baza su servicio, tal y como decíamos en la sección anterior, en cuentas de usuario. Cada cuenta de usuario tiene un identificador de usuario y una contraseña. Cada cuenta puede tener diversos lugares alojados. Como decíamos antes, no hace falta reservar nombres de dominio. Por defecto Zymic suministra un nombre de subdominio (por ejemplo miempresa.zxq.net) donde zxq.net es el dominio y miempresa es el subdominio. Existen diversos dominios generales disponibles. Crear una cuenta de usuario en Zymic
Vista la pantalla anterior, vemos que dispone en la parte frontal de un menú con la opción Sign Up/login (darse de alta / entrar). Hacemos clic en esta opción. Curso de especialización en Marketing Digital Alfons González 39 Marketing digital: Creación de webs Vemos en la cabecera “Why register?” o “Por qué registrarse?”. Traduciremos el texto para mayor comodidad: “Hágase miembro de Zymic y será capaz de crear un número ilimitado de cuentas de alojamiento, opinar en foros sobre Internet, comentar y puntuar manuales de uso y plantillas y mucho más! Registrarse es fácil y sólo le tomará unos minutos de su tiempo.” Por registrarnos sólo tendremos que llenar estos campos: Curso de especialización en Marketing Digital Alfons González 40 Marketing digital: Creación de webs Recordamos que es preciso apuntar con meticulosidad lse datos que vamos en dar, con la finalidad que podamos consultarlas si alguna vez se nos olvidan. En username va el nombre de usuario, normalmente una sola palabra, como por ejemplo cursomarketing o jperez. A continuación viene la cuenta de correo electrónico. Podemos dar nuestra cuenta de correo existente, o crear uno previamente a tal fin en gmail. Después viene la contraseña o password, que tendremos que teclear dos veces por asegurarnos que es la correcta. Debajo tenemos un recuadro donde aparecen unas letras raras. Se trata de un truco llamado Captcha. La intención es comprobar que lo que solicita la cuenta es un operador humano. Un método mucho común para fastidiar a la competencia consiste en sobrecargar sus servidores con cuentas solicitados por un programa robot que se da de alta miles a veces en el sistema. Para comprobar que es un operador humano, imprime en pantalla dos palabras distorsionadas de tal forma que uno OCR no pueda leerlas. Si las lee una persona, podrá seguir adelante con su gestión de cuenta. Si se trata de un robot, el sistema lo discriminará. Curso de especialización en Marketing Digital Alfons González 41 Marketing digital: Creación de webs Una vez tecleadas las dos palabras que aparecen, podemos pulsar el botón amarillo que pone “Confirm registration”. El servidor nos redirigirá a la página del panel de control. La página que se muestra a continuación es mi página de cuenta personal, por lo que el lector podrá ver los lugares de pruebas que tengamos dados de alta. Para crear un nuevo lugar de alojamiento, pulsaremos el botón gris grande que pone “Create New Web Host Account”. Curso de especialización en Marketing Digital Alfons González 42 Marketing digital: Creación de webs En este caso vamos en crear un lugar web al cual llamaremos profemktg. Éste será el nombre del nuestro subdominio. El nombre del dominio real lo podremos escoger dentro de los disponibles a la caja de lista combinada. Podemos dejar lo que nos aparece por defecto: zxq.net Después de especificar estos dos valores, proseguiremos pulsando el botón azul “Continue”. Ahora nos pide una contraseña, que tendremos que repetir dos veces. Ésta contraseña no tiene por qué coincidir con la misma que hemos dado en la cuenta. Por lo tanto, la pensemos, la tecleamos dos veces y l'apuntemos en un papel. Pulsamos el botón Continue. Zymic nos avisa que no podemos usar el alojamiento gratuito con finalidades fraudulentas o ilegales. Para continuar tendremos que dar nuestro consentimiento y marcar los tres checkboxes (cuadrados para marcar) que se encuentran al final de la página: Curso de especialización en Marketing Digital Alfons González 43 Marketing digital: Creación de webs Marcaremos estas tres checkboxes, llenaremos un Captcha que se encuentra debajo, y pulsaremos el botón grande que pone “Create web site account”. Después de unos momentos, el lugar web se creará y Zymic nos informará de los parámetros de FTP y de otros detalles técnicos: El más recomendable ahora es imprimir la página en nuestra impresora. Si no tenemos ninguna impresora disponible, apuntemos esmeradamente los detalles técnicos del protocolo FTP. Curso de especialización en Marketing Digital Alfons González 44 Marketing digital: Creación de webs Desde este momento, nuestro lugar web está disponible y es visible en el mundo entero Gratis! Podemos verlo ya abriendo un segundo navegador de Internet y tecleando la dirección URL: Ésta es la apariencia de un alojamiento acabado de crear. Cerraremos de momento éste navegador con el lugar básico creado por defecto y volveremos al navegador en lo que hemos realizado todo el proceso de alta. Encima de los detalles de FTP, tenemos un botón que nos envía al panel de control. Lo pulsamos. Curso de especialización en Marketing Digital Alfons González 45 Marketing digital: Creación de webs En esta página vemos todos los lugares web que gestionamos. El último de ellos es lo que acabamos de crear. Pulsamos su botón amarillo. Teclearemos la contraseña y entraremos en el panel de control concreto de este nuevo alojamiento web: Curso de especialización en Marketing Digital Alfons González 46 Marketing digital: Creación de webs Los tres luces en verde de la parte izquierda nos indican que están activos los servicios de servidor (http), los da base de datos (MySQL) y los de transferencia de archivos (FTP). En la parte central de la página tenemos las opciones del panel de control: File Manager sirve para transferir archivos sin usar el FileZilla. Nosotros no utilizaremos el File Manager por esta tarea. •
Database Manager: sirve para crear nuevas bases de datos con opciones técnicas (por ejemplo escoger el motor de indexación y el juego de caracteres internacionales). •
Database Administrator nos permite crear estructuras de información en la base de datos (como por ejemplo mesas de clientes o de productos). •
La Opción Add Custom Domain permite asignar un nombre de dominio externo (por ejemplo www.profe.com) a este dominio que de momento dícese www.profemktg.zxq.net . Representa una forma de redireccionarlo. Es un paso más, pero recordamos que no nos resultará óptimo bajo el punto de vista del marketing digital hasta que no resida en una IP del país en el cual tengamos nuestro mercado objetivo de clientes. Si no está en una IP del país, las estadísticas no se reflejarán correctamente. •
Support forum es un foro de preguntas y respuestas en inglés sobre el funcionamiento y las habilidades necesarias para crear lugares web. Curso de especialización en Marketing Digital Alfons González 47 Marketing digital: Creación de webs •
Live support chat es un chat de diálogo inmediato con la finalidad anterior. •
Password change nos permitiría cambiar en cualquier momento la contraseña del alojamiento web. Dejaremos todo tal como está en este punto. Más adelante entraremos en los apartados que acabamos de enumerar brevemente. Cerraremos nuestra sesión de administración (log out) y cerraremos el navegador. Para salir de la sesión, iremos a la parte superior de la página, a mano derecha y veremos una etiqueta que pone “log out!”. La pulsaremos con el ratón. A continuación podremos cerrar el navegador. A la siguiente sección veremos como podemos gestionar contenidos en nuestro nuevo lugar web. Subiendo y bajando páginas a nuestro nuevo lugar web
Ya hemos visto como es de fácil crear un nuevo lugar web y además es gratis! Ahora volveremos a recordar lo que ya sabemos de FileZilla y lo utilizaremos para recuperar el contenido del servidor web y para colocar (subir) nuevo contenido porque sea visible desde todo el mundo. Ponemos en marcha FileZilla haciendo doble clic sobre su icono o seleccionando desde el menú Inicio ‐> Programas ‐> FileZilla FTP Cliente. Nos aparecerá la pantalla principal de FileZilla. En la parte frontal superior introduciremos los parámetros técnicos de FTP que debemos tener apuntados desde que creamos nuestro nuevo lugar web. Curso de especialización en Marketing Digital Alfons González 48 Marketing digital: Creación de webs Pulsaremos el botón “Conexión rápida”. Index.html o index.php
Veremos que en la parte derecha nos aparecen una carpeta y dos archivos. Centremos nuestra atención al archivo Index.html. Este archivo es la página de inicio de nuestro lugar web; el lugar por donde comienza la web cuando alguien teclea su dirección URL en Internet: la página principal. Existen servidores que utilizan otros nombres por convenio para la página de inicio, pero uno de los más utilizados es Index.html. Una página index.php puede sustituir a una página index.html como página de inicio del lugar web. Normalmente una página index.html tiene prioridad sobre una página index.php, de manera que cuando ambas estén presentes, mandará la index.html. Práctica 1
Con FileZilla: Crear una nueva carpeta en un lugar de nuestro disco llevar y copiar en ella el contenido actual de la web (backup). Curso de especialización en Marketing Digital Alfons González 49 Marketing digital: Creación de webs Comentario 1: para crear una carpeta sobre una ya existente, haga clic en la carpeta padre con el botón derecho del ratón. Verá aparecer un menú emergente des del que podrá escoger la opción “Crear nueva carpeta”. Comentario 2: el archivo ftpquota no se deja copiar, por lo que sólo podremos trasladar el archivo index.html. Práctica 2
Abrir el archivo index.html con un editor de texto, cambiar su contenido por alguna cosa similar a “Estamos trabajando para construir este lugar…” y volver a enviarlo hacia el servidor. Comentario 1: atención con las palabras que llevan acento. Donde ponemos una “á” tendremos que sustituirla por una “&aacute;” (con punto y coma) y donde tengamos una “à” tendremos que substituïr por una “&agrave;” también acabada en punto y coma). Por ejemplo: Lloverá tiene que sustituirse por Llover&aacute; Una vez enviado el mencionado archivo, abrir el lugar web con uno navegador como Internet Explorer, Safari o Mozilla. Comentario 2: dejaremos abierto FileZilla y abriremos el archivo index.html con el bloque de notas de Windows. Una vez modificado el archivo index.html, volveremos a FileZilla para arrastrarlo desde el cliente hasta el servidor. Éste es un resultado posible: Curso de especialización en Marketing Digital Alfons González 50 Marketing digital: Creación de webs Títulos H1 que puntúan en marketing digital en Google
En la página que hemos modificado hemos encontrado estilos de texto como la H1. H1 es la abreviatura de Header 1 y tiene el valor de ser un estilo para titulares. Cuando Google lo encuentra, indexa el contenido del titular. Los titulares H1 se codifican en HTML con una marca de inicio, un texto de contenido y una marca de final, de la siguiente manera: <H1> Texto del titular </H1> A nuestra página tenemos este titular: <h1>Prueba de lugar web con Zymic</h1> Por esta razón, cuando pasen las arañas de Google por nuestro nuevo lugar web, lo indexarán según este titular, que nos hará servicio desde este momento como criterio de investigación. De aquí la importancia de estudiar con cuidado el contenido de estos estilos. Curso de especialización en Marketing Digital Alfons González 51 Marketing digital: Creación de webs Saltos a nuevas páginas (“links” o “enlaces”)
En esta misma página que hemos modificado hemos encontrado elementos que sirven para redirigir‐noes a de otras páginas (saltar hacia a una referencia o hiperenlace). Veamos una porción de la página en la cual utilizamos este tipo de saltos: Si desea visitar mí blog personal: <a href="http://www.alfonsgonzalez.com/" title="Web de Alfons">Alfons Gonz&aacute;lez</a> Realmente se trata de un estilo de texto “a”. Eso quiere decir que en HTML que comienza con <a> y acaba con </a>. Este estilo tiene un atributo que dícese href. La palabra llave href es una abreviatura de hiper‐
referencia. Su valor figura detrás del igual y es, en realidad, la dirección URL ninguna a la que tiene que saltar. Tiene un segundo atributo llamado title, que es una etiqueta que aparece sobre la página web cuando sobrevolem el enlace con el ratón. O sea, que la marca de inicio incluye los atributos, después viene el texto en sí y finalmente la marca de cierre: <a Atribut href (direcció URL de destí) amb el seu valor entre cometes Atribut title amb el seu valor entre cometes > Text que volem que aparegui ressaltat </a> El lenguaje HTML es muy amplio y existen muchos libros y guías gratuitas en Internet que hablan de sus sucesivas versiones. La discusión detallada sobre el propio lenguaje HTML excede el propósito de dicho temario. Cargando plantillas
Zymic nos proporciona una gran cantidad de plantillas con una gran riqueza de estilos que nos pueden servir como base de nuestros diseños web. Estas plantillas se proporcionan como archivos descomprimibles en formato ZIP con páginas prediseñadas. Por utilizarlas se tienen que descomprimir. ¿Con qué programa podemos decomprimirlas? ¿Existe algún programa gratuito? Curso de especialización en Marketing Digital Alfons González 52 Marketing digital: Creación de webs Buscando un descompresor ZIP
Existen decenas de descompresores gratuitos en Internet. Uno de ellos es IZArc. Busquémoslo en Google con la cadena de investigación “Izarc download” y obtendremos esta dirección: www.izarc.org/download.html Atención!! NO hay que apretar el botón para descargar el Free Compresor!! Pulsaremos en el botón verde “Download now”, que puede verse en la parte inferior de la pantalla y que se refiera al IZarc. La pantalla correcta que nos tendrá que aparecer es: Curso de especialización en Marketing Digital Alfons González 53 Marketing digital: Creación de webs Pulsaremos el botón verde señalado como “Download Now”. Pulsaremos el botón Run (ejecutar). Curso de especialización en Marketing Digital Alfons González 54 Marketing digital: Creación de webs Pulsaremos el botón “Next”. Aceptamos la licencia haciendo clic a la opción “I accept the agreement” y pulsamos el botón “Next”. Curso de especialización en Marketing Digital Alfons González 55 Marketing digital: Creación de webs Aceptamos por defecto el lugar donde vamos en instalar la carpeta de Izarc. Pulsamos el botón “Next”. Dos posibilidades a escoger: 1. Si queremos un menú de acceso rápido: Aceptamos el valor del título del menú de acceso rápido Curso de especialización en Marketing Digital Alfons González 56 Marketing digital: Creación de webs 2. Si no queremos un menú de acceso rápido, marcamos la caja de comprobación “Don ' t create a Start Menu folder”. Pulsamos el botón “Next”. Más opciones para acceder al icono de IZarc. Yo personalmente escojo: Pusamos el botón “Next”. Curso de especialización en Marketing Digital Alfons González 57 Marketing digital: Creación de webs Ésta es una estrategia de publicidad bastante creativa. Aplicación gratuita con la opción de instalar un buscador de ofertas vía Internet. Cada lector decidirá lo que prefiera. Pulsamos el botón “Install”. Curso de especialización en Marketing Digital Alfons González 58 Marketing digital: Creación de webs Ahora nos pide seleccionar un idioma para la interfaz de programa. Yo suelo pedir la versión inglesa, que sol ser la que tiene menos errores de traducción. Curso de especialización en Marketing Digital Alfons González 59 Marketing digital: Creación de webs Dejaremos la selección por defecto y pulsaremos OK. Curso de especialización en Marketing Digital Alfons González 60 Marketing digital: Creación de webs Ya está instalado. No hace falta que veamos las novedades. Podemos desmarcar esta opción y apretar el botón “Finish”. Esta instalación nos facilita el trabajo con archivos ZIP como los que, acto seguido, nos vayamos en descargar de Zymic. Ver las opciones de plantillas y cargar una en nuestro lugar web
Vámonos al explorador y abramos el lugar web de Zymic de nueve (www.zymic.com) Seleccionamos la opción Free Web Templates (ver imagen): Nos aparecerá un catálogo gráfico de las plantillas (templates) disponibles. Curso de especialización en Marketing Digital Alfons González 61 Marketing digital: Creación de webs Existen unas 90 plantillas. Podemos seleccionar la que más nos guste, ver‐la en vivo con la opción “Live preview” y descargarla con “Download”. Ponemos que yo decido seleccionar la primera plantilla (la que tiene un francotirador dibujado) y voy a descargarla. Aprieto el botón “Download”. Al hacer clic, ya se ha activado el programa IZArc que hemos descargado en la sección anterior. Nos dice que el archivo que vamos en abrir dícese 141.zip. A su interior contiene los archivos necesarios para colocar la plantilla como base de nuestro lugar web. Ahora pulsaremos el botón Open. Curso de especialización en Marketing Digital Alfons González 62 Marketing digital: Creación de webs Vamos en extraer su contenido en la carpeta de nuestro disco llevar local, en la que coloquemos el archivo index.html. Éste quedará sobre‐escrito por el nuevo que vamos en colocar. Pulsaremos el botón Extract que está en la barra de herramientas de IZarc. Curso de especialización en Marketing Digital Alfons González 63 Marketing digital: Creación de webs Nos pregunta donde queremos que descomprima los archivos. La ruta que nos da por defecto no es la que queremos, así que pulsaremos el icono de la carpeta amarilla que se encuentra en la esquina superior derecha del cuadro de diálogo y seleccionaremos la carpeta que nos interese. La idea consiste en descomprimir los archivos y después “subirlos” al servidor mediante FileZilla. En mi caso, la carpeta se encuentra a C:\Documents and Settings\agonzalez\My Documents\Alfons\web_profemktg Pulsamos el botón “Extract”. Un golpe extraídos los archivos, podemos cerrar l'IZarc. Nos vayamos a FileZilla, aplicación que teníamos minimizada en segundo plano. Curso de especialización en Marketing Digital Alfons González 64 Marketing digital: Creación de webs Fijémonos en la zona remarcada dentro del círculo rojo. Aquí es donde tenemos la plantilla de nuestra futura web. La operación es así de fácil: arrastremos elemento por elemento desde la mitad izquierda hasta la mitad derecha para ir subiendo los archivos al servidor web. Comenzaremos por la carpeta “images”, continuaremos con la carpeta “PSD”, después la carpeta “Read Me…”, y los archivos index.html, remove copyright y style.css. Al final los dos lados, cliente y servidor tienen que tener el mismo contenido (a excepción, claro está, del archivo ftpquota, que sólo se encuentra en el servidor). Ya podemos abrir nuestro lugar web y ver qué pasa: Curso de especialización en Marketing Digital Alfons González 65 Marketing digital: Creación de webs ¡Éxito total! Tenemos nuestro lugar web diseñado profesionalmente. Ya podemos comenzar a modificarlo a nuestro gusto. Ya podemos plantearnos la compra de una herramienta de
diseño web
A partir de este momento, si estamos satisfechos de lo que hemos conseguido y vemos posibilidades de ir seriamente por el camino del futuro, ya podemos plantearnos adquirir una herramienta de diseño web. Digamos que, a partir de ahora, podemos seguir utilizando el bloque de notas para editar páginas web, pero el tiempo que eso nos consumirá en ensayo/error nos puede penalizar mucho si buscamos tener una cierta productividad. También podemos buscar alguna herramienta de manipulación de gráficos que nos ayude en transformar fotografías, imágenes de producto, etc., del estilo de Photoshop, Fireworks o Picture Publisher, para citar tres posibles. Con media hora de trabajo y estas herramientas, nuestra web de prueba tiene ya esta apariencia: Curso de especialización en Marketing Digital Alfons González 66 Marketing digital: Creación de webs Escoger un servidor web y un entorno de desarrollo de
aplicaciones
Qué necesitamos para publicar páginas en Internet? Opciones
baratas
Necesitamos un servidor de alojamiento que ya esté dentro de Internet o colocar un nuestro dentro de Internet. Al igual que hablábamos de opciones más baratas y más caras para diseñar páginas web en el lado cliente, en el lado servidor también tenemos un amplio abanico para escoger. Si somos pequeños empresarios y nuestro objetivo es crear una web con un catálogo de productos de tamaño reducido, bastará con reservar un nombre de dominio y contratar un alojamiento por un año con las prestaciones mínimas en un servidor Apache sobre Linux. Eso nos puede costar aproximadamente 25 € al año. Si queremos tener una web sencilla, de tipos bloque, optimizada para SEO i SEM, donde deseemos colocar periódicamente artículos, cambiar su apariencia fácilmente mediante plantillas, recibir opiniones y realizar conversiones de lectores a leads, tendremos suficiente con que el alojamiento proporcione un espacio de 40 MB, que permita programación PHP y que disponga de un servidor de base de datos MySQL. Nuestro software de servidor puede ser perfectamente WordPress. Eso nos puede costar entre 40 y 60 € al año. Si queremos elaborar lugares que incluyan venta directa por Internet también nos basta con el precio anterior, pero utilizar el software de Magento. Si queremos las dos cosas con una mayor flexibilidad, complementos más potentes pero mayor complejidad técnica, podemos optar por el mismo precio y el software de Joomla. Curso de especialización en Marketing Digital Alfons González 67 Marketing digital: Creación de webs Hasta aquí el nivel de empresas pequeñas o medias (PYMES). Existen opciones más caras, que trataremos posteriormente, cuando tengamos una visión global de los contenidos del curso. Opciones más caras para estar presentes en Internet
Hablamos ahora de empresas de tamaño grande con una herencia de sistemas de información que condicionan el alojamiento web. Se trata de empresas que han comprado sistemas gestores de bases de datos de gran capacidad, que necesitan una red Intranet para proporcionar sus sistemas de información a diversas subsidiarias y oficinas distribuidas arreo del mundo. Requieren un desarrollo constante de nuevas aplicaciones internas debidas a nuevos planteamientos de negocio (reingeniería de procesos, gestión de la calidad, impacto medioambiental, transparencia interna, internacionalización y expansión) y con el boom de Internet necesitan enlazar íntimamente sus sistemas de información interna con su cara externa de cara al cliente. Entre ellas se cuentan las Fortune 500, las empresas financieras, sector seguros, navieras y multinacionales de gran tamaño. Un pequeño consejo, si lo aceptáis
Aquí tenemos la primera recomendación: no se deje adular por ningún consultor del sector de nuevas tecnologías si no tiene usted una empresa de este tamaño: no le habrá que paso este tipos de soluciones de consultoría en un 90% de los casos. Las empresas de gran tamaño que entran en el juego de multinacionales del sector de las T.Y., tienen unos ciclos de amortización de sistemas de información más largos que los ciclos de vida de las aplicaciones de software y tecnologías de la información que utilizan. El planteamiento de estar en Internet es para ellos un resultado de su planteamiento de marketing estratégico, por lo que a la ninguna y al fino no valoran la amortización con criterios cuantitativos sino cualitativos. Si se encuentra usted dentro del margen de duda, necesitará conocer casos de estudio de éxito y de fracaso en empresas de similar tamaño entre su competencia. La tecnología Microsoft es más cara y tiene mayores requisitos de equipamiento (de hardware) para el servidor. Implica también mayores costes de mano de obra especializada. Nos movemos ya en el terreno de los miles de Euros hasta los centenares de miles de Euros anuales y el software es bastante más delicado. El proveedor de alojamiento de Microsoft sol proporcionar SQL Server como base de datos, pero hay opciones más caras, como Sharepoint Portal Server y su complejidad de desarrollo es notoria. Los proveedores con esta tecnología suelen ofrecer como opción balanceos de carga entre clusters de servidores y conexiones punto apunto por fibra óptica, lo cual no siempre está disponible en cualquier ubicación geográfica. Curso de especialización en Marketing Digital Alfons González 68 Marketing digital: Creación de webs Otro paso en L'escala es ubicar un servidor propio nuestro dentro de una granja de servidores externa del proveedor de alojamiento. Eso nos permitiría colocar aplicaciones de alto grado de privacidad que utilizasen protocolos propios sobre TCP/IP o UDP mediante sockets o conexión por telefonía SMS. Por ejemplo reservas en alquiler vía web y control de flotas de vehículos o control de dispositivos remotos. La Opción de la subcontratación global
Llegados a este nivel tenemos la opción de la Subcontratación. Una empresa (típicamente hindú) ofrece externalizar todos los servicios de informática y telecomunicaciones con web incluida. Eso quiere decir que: •
Le mantiene en funcionamiento las aplicaciones de negocio (ERPs como por ejemplo SAP, Intentia, Vanenburg, etc…). •
Implementa todos los requisitos de software. •
Renueva el hardware de los servidores periódicamente. •
Se Ocupa de las copias de seguridad. •
Le garantiza soporte 24x365. •
Puntualmente le desarrolla aplicaciones a medida. •
Le proporciona la conectividad con sus subsidiarias por banda ancha. •
Le canaliza las llamadas de voz externas a nivel mundial e internas a través de centralitas digitales (VoIP). •
Y realiza pertinentemente las actualizaciones de software requeridas. Las empresas de Subcontratación cobran un alquiler por el conjunto de los servicios aportados. El negocio de los proveedores de subcontratación es rentabilizar su inversión, alquilando sus servicios al máximo posible de compañías de gran tamaño. Pros y contras de la subcontratación
Si usted se decanta por la Subcontratación gozará de los siguientes ventajas: •
Simplicidad. •
Podrá concentrarse en su negocio y en lo que realmente sabe hacer. •
Ahorro en mano de obra especializada. •
No quedará atado a un fabricante de T.Y. concreto. •
Podrá contemplar contablemente el gasto tecnológico sin arrastrar partidas de amortización. Curso de especialización en Marketing Digital Alfons González 69 Marketing digital: Creación de webs También sufrirá las siguientes desventajas: •
El principal obstáculo es que no se gestiona el conocimiento de las personas ni del propio negocio. •
En la Subcontratación tampoco queda suficiente claro si un tercero puede utilizar resultados parciales de datos para beneficio estadístico propio o de terceros. Efectivamente, la privacidad de los datos queda regulada por contrato con el proveedor de Subcontratación, pero no quedan protegidos: o
Los resultados obtenidos a partir de estos datos mediante minería de datos. o
Las estadísticas ni las tendencias o patrones de comportamiento de nuestros clientes. o
Los modelos funcionales de negocio. Estos tres objetos, por llamarlos de alguna manera, son suficientemente abstractos como para ser descritos de manera efectiva y bien delimitada mediante terminología legal internacional, más cuando se actúa con leyes aplicables bajo diversas jurisdicciones y pese a estar estas incluidas en países de la OMC (WTO). Finalmente, otra posibilidad es convertirnos nosotros en proveedores de alojamiento y ubicar una granja de servidores en nuestra propia empresa, con todos los requisitos anteriormente comentados. En la práctica este modelo, enfocado a la gran empresa, requiere asumir costes basándose en estrategias, y sol darse en empresas de nuevas tecnologías con gran impacto de éstas en el modelo de negocio. Curso de especialización en Marketing Digital Alfons González 70 Marketing digital: Creación de webs Segunda parte: WordPress
Instalación de WordPress
En el módulo dedicado a HTML y servidores web hemos visto como podemos descargar aplicaciones, descomprimirlas y enviarlas a través de FTP a un alojamiento web. Ahora vamos en ver como podemos descargarnos WordPress, descomprimirlo, enviarlo a nuestro lugar web, configurarlo y publicar nuestros primeros artículos. Crear un nuevo espacio de alojamiento web
También en el módulo anterior hemos visto como crear espacios de alojamiento web. Podemos dar de alta uno en Zymic.com, a CDMon o a Sync.es o al proveedor con el cual nos sentimos más cómodos. Tenemos que tener en cuenta que Zymic y otros proveedores de alojamiento web, que tienen el suyo IP ubicada en USA, no son adecuados para obtener buenas estadísticas de tránsito, y que si deseemos que nuestras estadísticas cuenten a nuestro país, tendremos que contratar el alojamiento a nuestro país en un dominio propio y no en un subdominio de alguien que sí se beneficiaría de nuestro tránsito. Como ya sabemos dar de alta un espacio de alojamiento web, lo daremos de alta sin más siguiendo las instrucciones expuestas en el módulo anterior. En el ejemplo concreto empleado para este curso, he creado el lugar web www.profemktgwp.zxq.net en Zymic. Éste es su panel de control: Curso de especialización en Marketing Digital Alfons González 71 Marketing digital: Creación de webs Como descargar WordPress
WordPress es una aplicación gratuita que nos podemos descarregar desde Internet. Tiene versiones en muchos idiomas. En nuestro caso vamos a descargarla en castellano o en catalán. Donde podemos encontrar WordPress en castellano?
Podemos encontrar WordPress en castellano a: http://es.wordpress.org/ Donde podemos encontrar WordPress en catalán?
Podemos encontrar WordPress en catalán a: http://ca.wordpress.org/ Tendremos que pulsar en el rectángulo de color naranja “Descarga el WordPress 3.0.3 ‐.zip ‐
3.2 MB” Como que ya tenemos instalado IZArc (el descompresor que obtuvimos en el capítulo anterior), Windows reconoce automáticamente el paquete ZIP y lo relaciona con la aplicación que vamos en utilizar para descomprimirlo. De todas maneras, esta vez vamos a guardarlo comprimido y lo descomprimiremos después. Curso de especialización en Marketing Digital Alfons González 72 Marketing digital: Creación de webs Pulsaremos el botón “Save” (guardar). Lo guardaremos en un directorio o carpeta aparte que no coincida con el cual hemos usado antes en la web de prueba con HTML y PHP. O sea, utilizaremos una carpeta nueva que tendremos prevista para subir contenidos a una nueva web. Al pulsar el botón “Save” nos aparece un cuadro de diálogo de selección de carpeta. En mi caso he creado una carpeta llamada web_profemktg_wp. Como descomprimir WordPress
Abramos con el explorador de Windows la carpeta que cada uno tiene prevista y en la cual hemos descargado el paquete de WordPress. Encontraremos en ella el paquete .zip correspondiente. Curso de especialización en Marketing Digital Alfons González 73 Marketing digital: Creación de webs Como ya tenemos instalado el descompresor, veremos que el archivo aparece con el icono del descompresor. Por lo tanto, ya podemos hacer doble clic sobre él. Nos aparecerá la aplicación de descompresión, con el contenido del paquete. Curso de especialización en Marketing Digital Alfons González 74 Marketing digital: Creación de webs Pulsaremos el botón “Extract” (Extraer). IZArc nos propone una carpeta que poco tiene que ver con la que nosotros tenemos preparada. Pulsando el icono amarillo de la esquina superior derecha, podremos seleccionar la carpeta que queremos utilizar. Curso de especialización en Marketing Digital Alfons González 75 Marketing digital: Creación de webs WordPress descomprimirá los archivos, que podremos ver mediante el explorador de Windows: Puesto que al descomprimir nos ha creado una sub carpeta llamada WordPress, vamos a sacar los archivos de esta carpeta y vamos a colocarlos a la carpeta padre. Hacemos clic en la mitad derecha de la pantalla y después de eso nos vayamos al menú Edición ‐> Seleccionar todo (Ctrl‐E). Curso de especialización en Marketing Digital Alfons González 76 Marketing digital: Creación de webs Ahora arrastremos todo hacia la carpeta padre (en mi caso web_profemktg_wp). Ahora ya podemos eliminar la sub carpeta WordPress. Para ello seleccionamos dicha subcarpeta y pulsamos la tecla <Supr>. Confirmemos con la tecla <S> que borre ésta sub carpeta que ahora está vacía. Curso de especialización en Marketing Digital Alfons González 77 Marketing digital: Creación de webs Eliminar el archivo ZIP inicial
No hace falta transferir el ZIP inicial, que ocupa más de 3 MB. Podemos ahorrar el tiempo necesario para ello eliminando este archivo antes de transferir. Lo seleccionaremos con el ratón y pulsaremos la tecla <Supr>. Ya tenemos lista la carpeta para usar FileZilla y transferir su contenido a nuestro nuevo web. Como enviar WordPress a nuestro lugar web
Una vez descomprimidos los archivos y colocados en su directorio apropiado, abramos FileZilla y, si estamos trabajando con servidores de Zymic, observaremos una medida de precaución. Evite transferencias multitarea con Zymic
Si está utilizando Zymic como proveedor, tendrá que tener en cuenta que los servidores de Zymic siempre van mucho colapsados para ser de acceso gratuito y para tener muchos usuarios conectados simultáneamente. FileZilla puede transferir más de un archivo a la vez. Puede abrir diversas tareas al mismo tiempo, como si abriese diferentes canales para transferir por cada uno un archivo diferente. Los servidores FTP pueden trabajar normalmente con cinco transferencias simultáneas, pero debido a la carga de trabajo de Zymic, es mejor autolimitarse a envíos unitarios. Podemos configurar FileZilla porque trabaje enviando archivos uno a uno. Para configurar esta prestación, iremos al menú Editar ‐> Opciones. Curso de especialización en Marketing Digital Alfons González 78 Marketing digital: Creación de webs Nos aparecerá un cuadro de diálogo con un diagrama de árbol en la parte izquierda. Dentro de este árbol seleccionaremos la rama “Transferencias”. En la parte derecha del cuadro de diálogo nos aparecerán las opciones que controlan la transferencia. La primera de ellas opciones pone “Máximo número de transferencias simultáneas”. Su valor debe ser 1. Después de poner este valor a 1, pulsaremos el botón “Aceptar”. Comenzando la transferencia
Coloquemos los parámetros técnicos de FTP a la parte frontal superior de FileZilla y Pulsamos el botón “Conexión rápida”: Curso de especialización en Marketing Digital Alfons González 79 Marketing digital: Creación de webs A la parte izquierda vemos una carpeta local pero… Atención! No es la carpeta que nosotros queremos usar esta vez. FileZilla recuerda siempre la última carpeta local con la que ha trabajado. Tenemos que cambiar de carpeta para ir a la de nuestro nuevo web. En mi caso, la mencionada carpeta se encuentra debajo de la seleccionada a la parte superior izquierda. Por lo tanto, con un simple clic la seleccionaré. Si el nombre o la ubicación es diferente, tendrá que encontrar la carpeta antes de continuar. Una vez encuentro, seleccionaremos todos sus elementos a la vez. Como? Haciendo clic mientras tenemos pulsada la tecla <Ctrl>. Eso nos permite realizar una selección múltiple de elementos. Para mayor comodidad aún, podemos seleccionar el primer elemento que queremos transferir (en nuestro caso la carpeta wp‐admin), desplazarnos hasta el último elemento de la lista, mantener pulsada la tecla de mayúsculas (<shift>) y hacer clic en el último elemento (el archivo xmlrpc.php). Veremos como aparecen todos los elementos seleccionados. Precaución: No seleccionaremos la carpeta de los dos puntos (..) que es la primero que aparece, porque esta carpeta quiere decir saltar a la carpeta padre y copiarla también en el servidor. Curso de especialización en Marketing Digital Alfons González 80 Marketing digital: Creación de webs Una vez seleccionados estos elementos, los arrastraremos todos a la mitad derecha que representa el alojamiento del servidor web. Nota: La transferencia consta de unos 700 archivos, por lo que podemos asumir que tardará desde diversos minutos hasta algo más de media hora, dependiendo de la velocidad efectiva que tengamos en nuestra conexión de lado ancha. Intentar transferir uno WordPress a través de una línea convencional de 56 K es un ejercicio de paciencia prácticamente irrealizable. Eso nos lleva a la consideración que deberemos siempre trabajar con una línea que de un caudal de lado ancha: como mínimo uno ADSL de 1 Mb. Crear la base de datos MySQL para WordPress
WordPress almacena en una base de datos los artículos y la disposición en pantalla (el diseño) del bloque. Para este fin necesita que el servidor de Internet tenga también integrado un servidor de bases de datos de MySQL. MySQL es un servidor de base de datos gratuito que pertenece desde hace poco a la compañía Oracle. Se sol instalar en servidores con sistemas operativos Linux y Windows que equipan el servidor de Internet Apache, todo eso basado en tecnología de desarrollo PHP. Para crear una base de datos concreta en un servidor MySQL del proveedor Zymic, iremos al panel de control de Zymic. Curso de especialización en Marketing Digital Alfons González 81 Marketing digital: Creación de webs Vemos una serie de botones amarillos que corresponden cada uno con un lugar web que hemos creado en nuestra cuenta. Pulsaremos el botón amarillo “login” que corresponde a nuestro lugar web (en mi caso es el último: profemktgwp.zxq.net). Teclearemos la nuestra contraseña de lugar web y entraremos al panel de control. Curso de especialización en Marketing Digital Alfons González 82 Marketing digital: Creación de webs Ahora haremos clic en “Database Management” que tenemos señalado en rojo en la imagen anterior. Nos aparecerá la siguiente pantalla: Curso de especialización en Marketing Digital Alfons González 83 Marketing digital: Creación de webs Tenemos un botón para crear una base de datos, otro botón para crear un usuario y un botón para asignar derechos (privilegios en la jerga de base de datos) al usuario encargado de administrarla y acceder a ella. Vamos en actuar en tres fases: 1. Generar la base de datos. 2. Crear el usuario. 3. Asignar‐le privilegios. Curso de especialización en Marketing Digital Alfons González 84 Marketing digital: Creación de webs Fase 1: Generar la base de datos
Generar la base de datos es un proceso interno en lo que tomamos prestado un espacio del servidor para almacenar nuestros datos. Para gestionar este espacio se tienen que crear estructuras que MySQL generará automáticamente. Puesto que existen muchos lugares web diferentes, Zymic toma precauciones y evita que haya bases de datos que tengan el mismo nombre. Para ello nos obliga que el principio del nombre de la base de datos sea fijo. De esta manera, si a alguien se le ocurre poner el nombre clientes, existirán dos bases de datos diferentes: clientes precedida del nombre del lugar web 1 y clientes precedida del nombre del lugar web 2. Nosotros indicaremos como nombre “WordPress” y lo anotaremos en un papel. En el papel escribiremos: Nombre de la base de datos: profemktg_zxq_WordPress Pulsaremos el botón “Create Database” para continuar. Fase 2: Crear el usuario
Tenemos que crear un usuario con derechos sobre la base de datos: derechos para leer, escribir, crear estructuras, administrar… Antes de darle derechos tenemos que crear el usuario. Al igual que en el caso anterior, Zymic se asegura de que no haya nombres de usuarios que coincidan. Por ello nos obliga a que el nombre del usuario comience por un número que él sabe que es único para nosotros. Éste será el prefijo. El sufijo será WordPress. Después de indicar el nombre de usuario, especificaremos una contraseña. Por asegurarse que no la tecleamos por error, tenemos que repetirla en las dos cajas de texto y que coincida. Curso de especialización en Marketing Digital Alfons González 85 Marketing digital: Creación de webs Anotaremos en el papel la contraseña escogida al lado del nombre del usuario y pulsaremos el botón “Create User”. Fase 3: Dar derechos al usuario
Ahora daremos derechos al usuario que acabamos de crear porque pueda trabajar con la base de datos. Por defecto ya nos sale seleccionado el usuario que hemos creado y aparecen seleccionados todos los derechos posibles. Pulsaremos el botón “Assign privileges”. La parte final de la página serviría para modificar o eliminar lo que hemos creado, así que de momento no nos interesa tocarla. Salgamos del panel de control clicando sobre “Log out!” en la esquina superior derecha de la página: Y, finalmente, guardamos el papel en el cual hemos apuntado todos los datos, porque los necesitaremos para instalar WordPress. Como instalar WordPress
Eliminar index.html
Si recordamos el contenido inicial del servidor web, recordaremos que siempre existe una página de inicio llamada index.html, la cual tiene prioridad sobre cualquier otra. Wordpress no contiene ninguna página index.html, sino una página index.php. Puesto que la prioridad está del lado de la página index.html, no se mostrará nada de WordPress hasta que no eliminemos esta primera página y dejemos que arranque a través de index.php. Curso de especialización en Marketing Digital Alfons González 86 Marketing digital: Creación de webs Por lo tanto, antes de que arranque WordPress en manera instalación, tenemos que eliminar, desde FileZilla, el archivo index.html. Seleccionaremos index.html en la parte derecha de FileZilla (lado servidor) y pulsaremos la tecla <Supr>. Confirmaremos la eliminación. Ya podemos abrir el lugar web con nuestro navegador de Internet. Abrir la web para configurar
Al momento de abrir el lugar, nos estará esperando la página de configuración para la instalación. Si no aparece, eso quiere decir que no hemos eliminado el archivo index.html. Eliminemos‐lo con FileZilla desde el lado del servidor. Es habitual que al inicio de la instalación no exista un archivo de configuración. Por esta razón tendremos que pulsar el botón por crearlo. Una vez creado, aparece la pantalla de instalación propiamente dicha. Curso de especialización en Marketing Digital Alfons González 87 Marketing digital: Creación de webs Vamos en seguir sus instrucciones para poder ver, finalmente, la página principal de nuestro blog en marcha. Como podemos comprobar, nos pedirá todos los datos que tenemos apuntados en el papel, así que prosigamos con la instalación pulsando el botón “Vamos a ello!”. En mi papel tengo escritos los siguientes datos. Tú puedes tener unos diferentes, pero en general podrás hacerte una idea de lo que tienes que poner: Pulsamos el botón “Enviar”. Curso de especialización en Marketing Digital Alfons González 88 Marketing digital: Creación de webs Ya hemos acabado la configuración. Ahora podemos realizar la instalación propiamente dicha. Pulsamos el botón “Iniciar la instalación”. Ahora nos pide el título que vamos a darle a nuestro bloque, el nombre del usuario que va a administrarlo y una contraseña por asegurarse que es el propietario del bloque. Curso de especialización en Marketing Digital Alfons González 89 Marketing digital: Creación de webs También pide la dirección de correo electrónico para notificar la participación de usuarios. Apuntemos estos datos en nuestro papel, diferenciándolos de los de la base de datos. Ahora se trata del nombre de usuario administrador del bloque y de la contraseña del bloque. Finalmente, fijémonos que existe uno checkbox o caja de comprobación marcada indicando que queremos que indexe contenidos en Google y otros motores de búsqueda. Ésta es la habilitación para SEO. Entramos los datos necesarios y pulsamos el botón “Instalar Wordpress”. A Zymic nos aparecerá esta pantalla, porque paguemos si queremos que el lugar web nos envíe directamente mensajes a nuestra cuenta de correo electrónico y mensajes a las cuentas de correo electrónico de los usuarios que se registren en nuestro bloque. Eso es opcional y se puede hacer en otro momento. Yendo una pizca más abajo, hacia la parte inferior de la página, encontraremos un botón que pone “Acceder”. Lo pulsamos. Ahora nos aparecerá la pantalla de entrada al panel de control para el administrador de nuestro bloque. Curso de especialización en Marketing Digital Alfons González 90 Marketing digital: Creación de webs Si quisiésemos entrar a la administración, bastaría con teclear el nombre de administrador del bloque y su contraseña. Después de eso, podríamos pulsar el botón “Acceder”, pero en nuestro caso dejaremos eso por más adelante y cerraremos el explorador de Internet. Una parada en el camino para ver ya nuestro blog activo
En este momento, entremos o no dentro del panel de control de nuestro blog, éste ya está activo y visible en el mundo entero. Si abramos uno navegador de Internet y escribimos su dirección , podremos ver ya su apariencia: Curso de especialización en Marketing Digital Alfons González 91 Marketing digital: Creación de webs Como publicar nuestros primeros artículos
Para entrar en el panel de control de WordPress utilizaremos la siguiente dirección URL: nuestroweb/wp‐admin donde nuestro web es la dirección de la web. En el caso de que nos ocupa, mi web dícese www.profemktgwp.zxq.net, por lo tanto, la dirección web será: www.profemktgwp.zxq.net/wp‐admin Después de entrar usuario y contraseña, nos aparecerá el panel de control de WordPress: Un artículo es lo que WordPress denomina una entrada, así que si lo que queremos es escribir nuestro primer artículo, podemos pulsar el botón blanco de la parte superior derecha de la pantalla que pone “Nueva entrada”. Curso de especialización en Marketing Digital Alfons González 92 Marketing digital: Creación de webs El uso de los controles y la barra de botones es muy intuitivo, y funciona como en la mayor parte de los procesadores de texto. Tenemos tres valores importantes para introducir un artículo: 1. Título: En primera instancia tenemos el título, que aparecerá en letras con un tamaño (caja) superior. 2. Texto del artículo: El contenido del artículo en sí, con negritas, cursivas y tipos de letra a nuestro gusto. 3. Extracto o reseña: Un resumen del mismo que sirve por presentarlo. Tenemos que recordar que es preciso llenar los tres porque sea realmente efectivo de cara a SEO. Observemos que existe una pestaña que trabaja en HTML. Esta pestaña nos sirve para introducir secuencias de instrucciones en HTML, con lo cual podemos incrustar objetos remotos, secuencias de códigos para Google Analytics, etc. Una vez que tengamos el artículo listo para enviar al bloque, pulsaremos el botón azul “Enviar” porque quede publicado: Curso de especialización en Marketing Digital Alfons González 93 Marketing digital: Creación de webs Uso de las categorías
Podemos escribir artículos de diversos tipos. Cada uno de estos tipos es lo que llamamos categorías. Las categorías se utilizan para clasificar los artículos de manera temática, de manera que un lector puede escoger ver un listado de todos los artículos de economía o de ciencias naturales. Un artículo puede pertenecer además de una categoría y WordPress es capaz de gestionar las categorías y asignarlas a los artículos si se lo indicamos correctamente. Las categorías no deben confundirse con las etiquetas. Veamos a continuación como podemos gestionar estas categorías y después veremos como podemos asignarlas a los artículos. Dentro de la pantalla del panel de control tenemos una columna vertical a la izquierda. En esta columna tenemos un recuadro arriba titulado “Entradas”. En él encontraremos tanto la gestión de las entradas (artículos) como la gestión de las categorías. Curso de especialización en Marketing Digital Alfons González 94 Marketing digital: Creación de webs Apretando el enlace iremos a la gestión de categorías: En esta pantalla estamos dando de alta una categoría llamada “marketing” (en catalán correcto sería “marketing”). El suyo “slug” o abreviatura es “mktg” y en la descripción podemos colocar cualquier texto descriptivo. Bajo la descripción existe un botón que pone “Añadir nueva categoría”. Pulsamos el botón por crearla. Curso de especialización en Marketing Digital Alfons González 95 Marketing digital: Creación de webs Como asignar una categoría a un artículo
Asignar una categoría a un artículo es una forma de clasificarlo. Para asignar una categoría a un artículo desde el panel de control, nos vayamos a Entradas, seleccionamos el artículo que queremos modificar (para añadir una categoría) y pulsamos “Editar”. Nos aparecerá esta pantalla: Fijémonos que en el lado derecho, un poco más debajo de la mitad de la pantalla aparecen las categorías. Quitamos la marca del checkbox “Sin categoría” y marcamos en su lugar “marketing”. Pulsamos a continuación el botón “Actualizar”. Si volvemos ahora a la ventana principal del bloque, veremos la categoría “Marketing”. Si hacemos clic sobre ella, sólo nos aparecerán los artículos de esta categoría. Como cambiar la apariencia de WordPress
Tenemos diversas formas de cambiar la apariencia de WordPress: •
•
•
•
Modificando los elementos gráficos que aparecen por defecto en la plantilla o sustituyéndolos por otros. Reordenando las secciones. Insertando widgets. Cambiante de plantilla. Modificar els elementos gráficos de una plantilla
En el módulo educativo anterior dedicado a HTML teníamos un gráfico de cabecera más atractivo que lo que viene por defecto con la plantilla de WordPress. Vamos en ver como podemos sustituir éste por el del módulo anterior. Curso de especialización en Marketing Digital Alfons González 96 Marketing digital: Creación de webs Desde el panel de control del bloque, seleccionaremos Apariencia en la columna izquierda. Una vez desplegado el recuadro de opciones de Apariencia, seleccionaremos “Cabecera”. Nos aparecerá la siguiente pantalla: En esta pantalla nos advierten que si cambiamos el gráfico, tendremos que colocar‐ne uno de tamaño 940 píxeles de ancho por 198 píxeles de alto. Si no tiene estas proporciones, puede aparecer distorsionado. En este punto del curso no podemos perder mucho tiempo en retocar una imagen. Debemos pensar, sin embargo, que los aspectos gráficos son los que más tiempo llevan para pulir y encajar en las dimensiones que queremos sin que pierdan naturalidad. Por esta razón, y por no perder tiempo, suministraremos la imagen ya modificada: Buscaremos la imagen con el botón “Browse”. Después de encontrarla pulsaremos el botón “Subir”. Éste es el resultado: Curso de especialización en Marketing Digital Alfons González 97 Marketing digital: Creación de webs Los lugares basados en servidores de Zymic tienen que corregir un tema de derechos para permitir la subida de archivos. Si experimentas problemas, consulta con el profesor. Cambiar de plantilla (tema)
WordPress permite cambiar de diseño global del bloque. El diseño global se encuentra en unos objetos llamados “plantillas” (templates o themes en inglés). Se pueden instalar y seleccionar diferentes plantillas de WordPress. Unas son gratuitas y otros de pago. Existen negocios en Internet dedicados únicamente a la venta de plantillas de WordPress. Podemos tener cargadas 1,2 o N plantillas, pero una sola será la plantilla activa. Como podemos cambiar de plantilla?
Tenemos dos formes de cambiarla: 1. Desde el panel de control. Con esta opción estamos limitados a los temas oficiales de WordPress y no a la inmensa cantidad de temas o plantillas existentes en Internet. Sólo vamos en ver aquellos temas que WordPress conoce oficialmente. Nos vayamos al panel de control, seleccionamos “Apariencia” y dentro de ésta “Temas”. Nos aparecerá una pantalla con dos pestañas. Seleccionamos la segunda pestaña y buscaremos el tema que nos apetezca para cargarlo posteriormente. 2. Desde un lugar independiente en Internet: bajándonos un tema en uno ZIP, descomprimint‐lo y subiendo‐lo mediante FileZilla a una subcarpeta propia dentro de la carpeta del servidor wp‐contento/themes. Curso de especialización en Marketing Digital Alfons González 98 Marketing digital: Creación de webs Donde podemos encontrar plantillas de WordPress?
Hay todo una serie de webs dedicadas a la producción y/o comercialización de plantillas de WordPress. Entre estas webs podemos citar algunas: www.ithemes.com www.themeforest.net http://graphpaperpress.com/ http://www.megumithemes.com/ http://www.wpthemes360.com/ http://www.nattywp.com/ http://wordpress.org/extend/themes/ … Inserción de plugins. El Plugin de Google Analytics.
Los plugins son complementos de programa modulares que se insertan sobre WordPress. Estos complementos sirven para alterar el contenido de las páginas, insertando objetos dentro del código HTML. Una de sus aplicaciones más conocidas consiste en registrar las acciones de los usuarios sobre nuestras páginas para afectar las estadísticas de Google Analytics. Los plugins se administran desde el panel de control de Wordpress ( www.nuestrositioweb.com/wp‐admin ). Después de identificarnos como administradores, iremos al recuadro de Plugins. Curso de especialización en Marketing Digital Alfons González 99 Marketing digital: Creación de webs El hecho más es que probable no tengamos instalado el plugin. Por ello vamos en pulsar el botón “Añadir nueve”, que se encuentra al lado del título de cabecera “Plugins”. Debajo el epígrafe “Buscar” teclearemos las palabras “Google Analytics” y pulsaremos “Buscar Plugins”. Nos aparecerá el siguiente listado: Curso de especialización en Marketing Digital Alfons González 100 Marketing digital: Creación de webs Tenemos diversas opciones, pero escogeremos para comenzar “Google Analytics for WordPress” (la cuarta opción del listado). Después de instalar éste plugin, lo activaremos. Después de configurarlo, tendremos que entrar nuestros datos de cuenta de Google Analytics, yendo a la opción del plugin titulada “Ajustes”. Allí colocaremos el código de cuenta de Google Analytics. Inserción de plugins. El Plugin de Facebook.
Existe más de un plugin que permite ver las comparticiones o en inglés sharings de artículos de bloque que se han realizado desde Facebook. También permite duplicar automáticamente las publicaciones del nuestro blog hecho con WordPress para que aparezcan automáticamente como novedad de nuestro perfil de Facebook y añadir un botón “Me gusta” al nuestro blog, contabilizando el número de lectores que los hay gustado tanto a FB como al nuestro blog. La comunicación se hace mediante una aplicación de Facebook que hay que configurar para que sincronice nuestro blog con nuestro perfil concreto de Facebook. Para buscar éste plugin, iremos al menú Plugins del panel de control del nuestro WordPress y seleccionaremos la opción “Añadir nuevo”. Nos saldrá la siguiente pantalla: Curso de especialización en Marketing Digital Alfons González 101 Marketing digital: Creación de webs A la caja de texto que nos pregunta por qué término tenemos que buscar, tecleamos “SFC” (Simple Facebook Connect) y pulsamos el botón “Buscar plugins”. Nos aparecerá una lista con plugins que coinciden. Seleccionaremos donde pone “Simple Facebook Connect” con cuatro estrellas amarillas, que en esta pantalla se encuentra en segundo lugar del listado. Como que yo ya el tengo instalado, me propone actualizarlo, pero por los usuarios que no lo tienen previamente instalado, aparecerá “Instalar ahora”. Seleccionamos esta última opción. Pondrá en marcha un proceso de instalación. Curso de especialización en Marketing Digital Alfons González 102 Marketing digital: Creación de webs Éste plugin de Facebook es en realidad un conjunto de pequeños widgets que nos aparecerán en una lista, listos para ser activados. Activación y configuración del plugin de Facebook
Uno de ellos, llamado Plugin Base (SFC – Simple Facebook Connect) es necesario para poder activar los otros. Por lo tanto, de la lista que nos aparecerá, activaremos éste Plugin Base en primer lugar. Cuando lo activamos, nos pedirá que generemos una aplicación de Facebook para sincronizar las dos entidades. Hay un enlace que nos aparecerá para crear esta aplicación automáticamente. Después de haberla creado, el generador de aplicaciones nos dará tres datos esenciales para conectar la aplicación con el blog: •
API Key (Llave API) •
Application ID (ID de la aplicación) •
Secret Key (Secreto de la aplicación) Se tienen que introducir en el panel de control del nuestro WordPress. Si no está bien configurado, nos aparecerá un aviso al frontal del panel de control con un enlace hacia una plana que nos ayudará a configurarlo correctamente. Un golpe que la configuración está correcta, podremos colocar cualquiera de los servicios de plugin y también podremos ver la configuración de la nuestra aplicación desde Facebook (he tapado los elementos llave de números privados con un rectángulo rojo): Curso de especialización en Marketing Digital Alfons González 103 Marketing digital: Creación de webs La plana de Facebook que contiene todas las aplicaciones que dependen de nuestro perfil se puede encontrar entrando, en primer lugar, dentro de Facebook y, un golpe a dentro, teclear la siguiente dirección URL: •
http://www.facebook.com/developers/apps.php#!/developers/ La plana que nos aparecerá será muy parecido a ésta: Los servicios widget del plugin que podemos activar para conectar con Facebook pueden ser éstos: •
Simple Facebook Connect – Base: es el widget base que acabamos de comentar y lo que tiene que estar bien configurado para que todo el resto de los widgets que dependen de él esté en condiciones de funcionamiento. •
SFC – Activity Feed Widget. Crea un registro de actividad por los usuarios de Facebook que han visitado nuestro blog. •
SFC – Bookmark Widget. Muestra un botón de ”Añadir marca” que permite a los lectores añadir el blog a su barra de herramientas de Facebook. •
SFC – Comments: permite a los usuarios dejar comentarios al blog usando las credenciales de entrada a Fadcebook. Hace que el proceso de dejar comentarios sea mucho más fácil por los usuarios de FB. •
SFC – Find us in Facebook Widget: Muestra un botón para saltar a la plana de Facebook del propietario del blog, vinculando así de forma muy estrecha el blog con el perfil de Facebook. Curso de especialización en Marketing Digital Alfons González 104 Marketing digital: Creación de webs •
SFC – Like button: muestra un icono de botón “Me gusta” junto a cada artículo publicado en el blog, actualizando automáticamente al perfil de Facebook el número de personas a las que las gusta. •
SFC – Login: permite identificarse y entrar a los usuarios de Facebook en nuestro blog compartiendo los detalles del perfil. •
SFC – Publish: Permite compartir automáticamente los artículos que escribimos anunciándolos a nuestro perfil de Facebook. Editar la posición de los widgets de Facebook dentro del blog
La posición en la que aparecen los widgets que hemos activado dentro de la plana principal del nuestro blog se puede configurar con el panel de control del blog, dentro del menú “Apariencia”, con la opción “Widgets”. Eso hará que nos aparezca la siguiente pantalla: Arrastrando con el ratón desde la zona central de widgets hacia la barra lateral, haremos que aparezcan los widgets que nosotros queramos. El resultado a la plana principal del nuestro blog será éste: Curso de especialización en Marketing Digital Alfons González 105 Marketing digital: Creación de webs Plugins de comercio electrónico (tienda virtual)
WordPress se puede transformar en una plataforma web por la venta de productos mediante Internet. Podemos buscar plugins de WordPress que nos permitan vender productos virtuales (archivos digitales que se pueden descargar) o artículos reales que se tienen que enviar por compañías de transporte o de correo. Éstos plugins montan uno “carrito de la compra” donde se acumulan los productos que va seleccionando el usuario, el cual puede pagar por diferentes medios que, normalmente, son tarja de crédito o cuenta de PayPal. Sólo tenemos que buscarlos con el criterio “e‐commerce” o “virtual shop” dentro del menú Plugins del panel de control de WordPress. Uno de los mejor integrados con WordPress y Facebook es “WP E‐Commerce” de GetShopped.org. Permite crear tiendas virtuales enteras con diferentes apariències, formas de pago y posibilidad de lanzar campañas de marketing vía Facebook. Su lugar web de información de producto es www.getshopped.org. Curso de especialización en Marketing Digital Alfons González 106 Marketing digital: Creación de webs Tercera parte: Qué hacer cuando alguna cosa sale mal?
En las numerosas instalaciones de WordPress en diferentes servidores de alojamiento y con muchos de los alumnos de diferentes centros hemos podido observar dos incidencias frecuentes: 1. Faltan archivos después de la carga (Cargas masivas de archivos vía FTP concurrente que fallan) 2. Archivos wp‐config.php que no se generan. Faltan archivos después de la carga
La consecuencia de las cargas masivas de archivos concurrentes es que se pueden perder archivos de forma inadvertida si no prestemos atención. A menudo, los servidores, al lado del hosting, atienden muchas peticiones simultáneamente y llegan a sobrecargarse. Eso causa que tengan lugar reintentos para colocar un mismo archivo. Cuando la colocación de un archivo se reintenta tres golpes y no se consigue, FileZilla coloca el archivo en una lista que aparece haciendo clic a una pestaña llamada “Transferencias fallidas” (o “Failed” a la versión inglesa), a la parte inferior de la pantalla (ver imagen). Curso de especialización en Marketing Digital Alfons González 107 Marketing digital: Creación de webs Cuando acaba una transferencia de archivos, los archivos en cola son cero, pero podemos tener archivos que no se han podido transmitir por culpa de sobrecargas de servidor o de problemas de red genéricos. Entonces tenemos que prestar atención a los archivos que no se han transmitido. Si hemos tenido problemas con algún archivo, nos saldrá reflejado el nombre del archivo en la lista de transferencias fallidas. Si hacemos clic con el botón derecho del ratón sobre uno de estos archivos, nos aparecerá un menú emergente. Dentro de este menú nos aparecerá la opción “Reset and requeue all”, que traducido dice aproximadamente “Reiniciar y volver en posar en cola todos”. Una vez seleccionada esta opción, debemos volver a poner en marcha la transmisión, yendo al menú “Transferencia” Æ “Procesar cola”. Veremos como FileZilla vuelve a enviar los archivos que faltan. NOTA: Este problema es el típico que sucede nos puede despistar con instalaciones que, pese a haber generado un wp‐config.php correcto, continúan sin funcionar. Es preciso repasar que no falten archivos comparando el número de archivos en origen y en destino en cada una de las carpetas para descartar que no nos hayamos despistado de reprocesar la transmisión De alguno de ellos que haya fallado. Curso de especialización en Marketing Digital Alfons González 108 Marketing digital: Creación de webs Archivos wp-config que no se generan
Es frecuente que en algunos servidores de alojamiento web no se pueda crear automáticamente un fichero necesario por la instalación. En este caso es cuando aparece la siguiente pantalla o una de muy similar. Teóricamente, apretando el botón para crear el fichero, el instalador tendría que poder crearlo, pero a menudo vuelve a generar un error como el de esta segunda pantalla: Curso de especialización en Marketing Digital Alfons González 109 Marketing digital: Creación de webs Tenemos dos maneras de subsanarlo: 1. Con la utilidad WPConfig que proporcionemos en este curso. 2. Manualmente, modificando un archivo PHP. La utilidad WPConfig
Una vez descomprimido el paquete wp‐config vemos el programa ejecutable wp‐config.exe. Al ejecutarlo por primera vez nos aparece la siguiente pantalla: Pulsamos el botón etiquetado como Buscar… y seleccionamos la carpeta donde tenemos nuestros archivos descomprimidos del paquete de WordPress. Curso de especialización en Marketing Digital Alfons González 110 Marketing digital: Creación de webs En el momento de seleccionar la carpeta, si es la correcta, el programa encontrará el fichero y nos mostrará el valor de los cuatro parámetros que contiene para que nosotros lo podamos modificar desde la aplicación de una forma limpia y segura: Ahora, las cuadras de edición de texto de las cuatro variables se pueden editar para modificar sus valores. Curso de especialización en Marketing Digital Alfons González 111 Marketing digital: Creación de webs Como podéis apreciar, la contraseña de usuario no se esconde para evitar errores de tecleo. Un golpe modificados los cuatro valores, podemos pulsar el botón “Generar wp‐config.php”. La segunda vez que entremos, el programa recordará donde era la versión descomprimida de WordPress. Curso de especialización en Marketing Digital Alfons González 112 Marketing digital: Creación de webs Modificación manual de wp-config.php
Esta opción es más delicada porque, a fin de cuentas, tenemos que modificar un programa hecho en PHP y es relativamente fácil estropear las cosas. Entonces vamos al nuestro PC cliente y encontramos un archivo que se llama wp‐config‐
sample.php tal y como veis al explorador de Windows: Su contenido es (ponéis atención a las líneas de color amarillo): <?php
/**
* Las configuraciones básicas del WordPress.
*
* Este fichero tiene las siguientes configuraciones: configuración de MySQL, prefijo de
tablas,
* claves secretas, idioma del WordPress y ABSPATH. Encontrarás más información
* en el Codex (en inglés): {@link http://codex.wordpress.org/Editing_wp-config.php
Editando
* el wp-config.php}. Los datos para configurar MySQL los puedes obtener de
* tu proveedor de alojamiento web.
*
* Este fichero es usado por el script de creación de wp-config.php durante la
* instalación. No es preciso que uses la web, puedes simplemente copiar este fichero
* bajo el nombre "wp-config.php" y rellenarlo con tus valores.
*
* @package WordPress
*/
// ** Configuración de MySQL - Puedes obtener estas informaciones de tu proveedor de web
** //
/** El nombre de la base de datos para el WordPress */
define('DB_NAME', 'elnomdelabasededades');
/** Tu nombre de usuario a MySQL */
define('DB_USER', 'elnomdusuari');
/** Tu contraseña a MySQL */
define('DB_PASSWORD', 'latevacontrasenya');
/** Nombre del host de MySQL */
define('DB_HOST', 'localhost');
Curso de especialización en Marketing Digital Alfons González 113 Marketing digital: Creación de webs /** Juego de caracteres usado al crear tablas en la base de datos. */
define('DB_CHARSET', 'utf8');
/** Tipos de ordenación en la base de datos. No lo canvïis si tenso ninguna duda. */
define('DB_COLLATE', '');
/**#@+
* Claves únicas de autenticación.
*
* Cámbialas por frases únicas diferentes!
* Les puedes generar usando el {@link http://apio.wordpress.org/secret-key/1.1/
servicio de llaves secretas de WordPress.org}
*
* @since 2.6.0
*/
define('AUTH_KEY', 'escribe una frase única tuya aquí');
define('SECURE_AUTH_KEY', 'escribe una frase única tuya aquí');
define('LOGGED_IN_KEY', 'escribe una frase única tuya aquí');
define('NONCE_KEY', 'escribe una frase única tuya aquí');
/**#@-*/
/**
* Prefijo de mesas por en la base de datos del WordPress.
*
* Puedes tener múltiples instalaciones en una única base de datos usando prefijos
* diferentes. Sólo cifras, letras y subrayados!
*/
$table_prefix = 'wp_';
/**
* Idioma de localización del WordPress.
*
* Modifica eso para cambiar el idioma del WordPress, si no el quieres tener en catalán.
* Un fichero MO correspondiente al idioma escogido tiene que estar presente al
subdirectorio wp-contento/languages.
* Por ejemplo, copia el fichero de_DE.mo a wp-content/languages y escribe define
('WPLANG', 'de_DE');
* para obtener la traducción alemana. O escribe define ('WPLANG', 'ca'); para
* ver la versión original americana.
*/
define ('WPLANG', 'ca');
// Eso es todo, bastante de editar – que bloguees a gusto!
/** Ruta absoluta del directorio del Wordpress. */
if ( !defined('ABSPATH') )
define('ABSPATH', dirname(__FILE__) . '/');
/** Asigna las variables del WordPress vars y ficheros incluidos. */
require_once(ABSPATH . 'wp-settings.php');
?>
Las líneas que están marcadas con fondo amarillo se tienen que sustituir por el valor real en cada caso. Por ejemplo: // ** Configuración de MySQL - Puedes obtener estas informaciones de tu proveedor de web
** //
/** El nombre de la base de datos para el WordPress */
define('DB_NAME', 'equipo01_zxq_WordPress');
/** Tu nombre de usuario a MySQL */
define('DB_USER', '436360_micambra');
/** Tu contraseña a MySQL */
define('DB_PASSWORD', 'micambra');
/** Nombre del host de MySQL */
define('DB_HOST', 'localhost');
Curso de especialización en Marketing Digital Alfons González 114 Marketing digital: Creación de webs Hay bastante probabilidad que el ordenador que actúe como servidor de planas web (servidor http) sea lo mismo que lo que se encargue de servir los datos de la base de datos. En este caso, el nombre del host será 'localhost'. Si con 'localhost' no funcionase, tenéis que llamar a la empresa que os hace el alojamiento web y preguntarle el nombre de la máquina que hace de servidor de base de datos y colocar el mencionado nombre a: /** Nombre del host de MySQL */
define('DB_HOST', 'localhost');
Ahora guardáis el fichero en local con el nombre wp‐config.php. Cogéis este fichero con FileZilla y transferidlo al directorio principal de la web del servidor. Reinicieu la instalación y veréis la pantalla correcta del instalador de Wordpress: Ahora ya sale la plana de instalación correcta y podemos continuar. Curso de especialización en Marketing Digital Alfons González 115 Marketing digital: Creación de webs Parte 4: Resumen y ejercicios finales
Qué hemos aprendido
ƒ
Hemos aprendido qué es un cliente y un servidor. ƒ
Hemos aprendido qué es una plana web. ƒ
Hemos aprendido qué es un script de cliente y uno script de servidor. ƒ
Hemos aprendido en descargar un programa gratuito. ƒ
Hemos aprendido en dar de alta y utilizar un alojamiento web con el suyo panel de control. ƒ
Hemos aprendido qué es Google Analytics y como nos ayuda su sistema de estadísticas. ƒ
Hemos aprendido qué es una base de datos y como funciona básicamente MySQL. ƒ
WordPress es una herramienta muy importante en la elaboración y publicación de contenidos por un correcto posicionamiento de producto a Google. ƒ
WordPress es una pieza dentro del rompecabezas del comercio electrónico. ƒ
Instalar WordPress es fácil y gratuito, sólo es preciso saber como usar una serie de aplicaciones: o
Como descargar un archivo desde Internet. Utilizamos uno navegador de Internet. o
Como descomprimir un archivo zip para extraer su contenido. Utilizamos IZArc. o
Como enviar contenidos a un servidor Web. Utilizamos FileZilla. ƒ
Hemos aprendido a cambiar la apariencia de WordPress y a cargar plantillas y plugins. ƒ
Hemos aprendido qué debemos hacer para solucionar los problemas típicos que se presentan a l'instalar WordPress. Ejercicios propuestos
o
Tenso una empresa de venta de servicios de jardinería. Crea una web gratuita a Zymic donde expliques las ventajas del adobo ecológico con un blog de WordPress. o
Cambia la apariencia del tuyo blog buscando plantillas de WordPress con las palabras “garden” o “nature”. o
Carga el plugin de traductor de Google para facilitar la lectura de tu blog en diversos idiomas. Curso de especialización en Marketing Digital Alfons González 116 Marketing digital: Creación de webs o
Carga y configura el plugin de Facebook para preparar una futura gestión de Community Management con Web 2.0. Test de conocimientos
1. ¿Qué es un alojamiento. Explícalo brevemente. 2. ¿El alojamiento se hace en el lado cliente o en el servidor? 3. ¿Dónde se ejecuta un script de cliente? 4. ¿Los scripts de servidor como por ejemplo PHP se pueden ver desde el lado del cliente? Por qué? 5. Los scripts de Google Analytics ¿son de cliente o de servidor? 6. ¿Qué servicios proporciona Google Analytics? 7. ¿Qué opciones del panel de control de WordPress tienes que seleccionar para poder publicar un nuevo artículo? 8. ¿Qué opciones del panel de control de WordPress tienes que seleccionar para poder cambiar la apariencia con una plantilla? 9. ¿Se pueden buscar nuevas plantillas de WordPress con Google? ¿Como? 10. Explica las opciones que tienes que seguir en el panel de control de WordPress para recolocar los widgets en la pantalla. Curso de especialización en Marketing Digital Alfons González 117