MÁSTER INTERNACIONAL EN COMUNICACIÓN

DIGITAL Formación a distancia

1

Materia: DESARROLLO WEB

Profesor responsable: ANGEL COBO ORTEGA

Profesora: Dra. Rocío Rocha Blanco

2

GESTORES DE CONTENIDO Y HERRAMIENTAS PARA LA IMPLEMENTACIÓN DE MODELOS APOYADOS EN LA WEB.

Objetivos de la sesión

1. Conocer opciones sencillas para la implementación de soluciones Web en ámbitos profesionales, empresariales o personales.

Herramientas gratuitas y open source Sin necesidad de grandes conocimientos técnicos

2. Mostrar un ejemplo de puesta en marcha de un sitio Web con un Gestor de Contenido (CMS)

3. Implementar una solución de e-commerce

¿Sitio Web o blog empresarial?

Frecuencia de la publicación: W: Contenido permanente B: Contenido tipo noticia, varía con el tiempo

Actualización constante, al menos 1 vez al mes, sitio activo

Tono de la información: W: Información corporativa B: Información y opinión personal

Autores: W: La empresa, se suele omitir el nombre de la persona que elabora el material B: El autor tiene que estar claramente identificado (nombre, apellido, foto,…)

¿Sitio Web o blog empresarial?

Navegación: W: A través de menús o enlaces internos de la Web

B: Información cronológica, a través de botones (siguiente, anterior)

Objetivos: W: Promover tus productos o servicios de la empresa

B: Dar una visión personal, resolver problemas de los visitantes

Ambas herramientas tienen beneficios y objetivos específicos

Sitio Web y blog integrados

Para ofrecer un servicio de calidad

¿Cómo creo mi sitio Web empresarial? Programa NEW (Ninguna Empresa sin Web)

http://www.red.es/redes/actuaciones/economia-digital/new Iniciativa del Ministerio de Industria, Turismo y Comercio a través de Red.es Objetivo: todas las empresas españolas estén presentes en Internet Iniciativa que se lanza periódicamente, no siempre activo

Páginas amarillas (http://www.paginasamarillas.es) Presta servicios de diseño web empresarial

Programa “Conecta tu negocio al mundo” (http://www.conectatunegocio.es) Iniciativa de Google Dirigido a PYMES y emprendedores españoles

Programa Formativo “Un negocio una Web” (http://www.unnegociounaweb.es) Blogs o gestores de contenidos (CMS)

Soluciones comerciales que facilitan a las empresas la creación y mantenimiento de su Web:

www.1and1.es es.wix.com

Estructura de un sitio Web Presencia en Internet

Se basa en una Web donde se pueda encontrar la información de forma sencilla

Objetivo 1. Mejorar el posicionamiento en buscadores 2. Mejorar la accesibilidad y usabilidad del sitio

Pautas Estructura plana y con no más de tres niveles de

profundidad.

Establecer una estructura adecuada de links internos en la web

Incorporar links de texto entre las diferentes secciones de la web

Fuente: Social Consulting Media http://www.socialconsultingmedia.com

Sitio Web empresarial

Home/index

Contacto Enlaces de interés

¿Quiénes somos?

Productos y Servicios

Productos Servicios

CMS (Content Management System)

Realizar un sitio o portal Web puede ser un trabajo complicado y muy laborioso si no se dispone de las herramientas adecuadas. Un CMS es una aplicación Web usada para gestionar sitios Web y

contenidos Web.

Un CMS es un sistema de software para ordenador que permite organizar y facilitar la creación de documentos y otros contenidos de un modo cooperativo, permitiendo la publicación distribuida por parte

de personas situadas en lugares distintos geográficamente.

CMS en las organizaciones

La Gestión de Contenidos está en continua evolución. La Web ya no es sólo un elemento para publicar

contenidos. La Web es un canal donde las personas interactúan, colaboran y

ponen en marcha actividades de negocio. Foros

Soluciones de e-commerce

Crecimiento explosivo de la información

Proceso de diseño de un portal web con un CMS

CMS en las organizaciones

• Gestionar toda su información haciéndola accesible de forma ágil a la persona adecuada en cada momento.

• Integración dentro una amplia gama de aplicaciones comerciales de clientes.

• Centralizar la gestión de todos los contenidos de una empresa en un solo repositorio (Almacenamiento inteligente)

• Separar el contenido de la presentación agilizando los tiempos de publicación.

• Compartir y reutilizar contenidos tanto propios como de los partners así como la presentación de información personalizada a los clientes.

• Entregar sincronizadamente la información a través de canales diversos (Web, dispositivos inalámbricos o móviles: PDAs, Teléfonos móviles).

A nivel empresarial, las organizaciones tienen la necesidad

primordial de entregar información

actualizada a sus clientes y partners a través de sus sitios

Web y aplicaciones, por lo que un CMS

permitirá:

CMS: Características generales I

Un CMS aporta herramientas para que los creadores sin conocimientos técnicos en páginas Web puedan concentrarse en el contenido.

Las herramientas integradas permiten definir la estructura del sitio Web, el formato de las páginas, el aspecto visual, uso de patrones, y un sistema modular que permite incluir funciones no previstas originalmente.

• Editor de texto WYSIWYG pero con un rango de formatos de texto limitado sin modificar mucho el estilo general del sitio Web. • Edición de documentos en XML • Utilización de aplicaciones ofimáticas integradas en el CMS • Importación de documentos existentes. • Editores que permiten añadir marcas HTML para indicar el formato y estructura de un documento.

CMS: Características generales II

Los documentos creados se depositan en una base de datos central • Resto de datos de la Web • Datos relativos a los documentos (versiones hechas, autor, fecha de publicación y caducidad, etc.) • Datos y preferencias de los usuarios • Datos de la estructura de la Web, etc.

La estructura de la Web se puede configurar, y permite: • Tener una visión jerárquica del sitio • Modificaciones. • Asignación de un grupo a cada área, con responsables, editores, autores y usuarios con diferentes

permisos. • Comunicación entre los miembros del grupo y hace un seguimiento del estado de cada paso del

ciclo de trabajo.

CMS: Características generales III

Una página aprobada por el administrador del sitio Web • Se publica automáticamente cuando llega la fecha de publicación • Cuando caduca se archiva para futuras referencias.

Gestión automática de la accesibilidad del sitio Web

• Soporte de normas internacionales de accesibilidad como WAI • Adaptarse a las preferencias o necesidades de cada usuario.

Tipos de CMS

• Según el lenguaje de programación empleado: Active Server Pages, Java, PHP, ASP.NET, Ruby On Rails, Python

• Según la propiedad del código • Open Source (código abierto) • Código propietario

• Según el tipo de uso o funcionalidades: • Blogs; pensados para páginas personales • Foros; pensados para compartir opiniones • Wikis; pensados para el desarrollo colaborativo • e-learning; plataforma para contenidos de enseñanza on-line • e-commerce; plataforma de gestión de usuarios, catálogo, compras y pagos • Difusión de contenido multimedia

Los CMS se pueden

clasificar según

diferentes criterios:

http://en.wikipedia.org/wiki/List_of_content_management_systems

Ranking Open Source CMS

Los 3 más grandes 1. WordPress

2. Joomla!

3. Drupal

En .net ◦ DotNetNuke

En java ◦ Liferay

◦ Alfresco Fuente: http://www.opensourcecms.com/general/cms-marketshare.php

Ranking Open Source CMS

19

Son software libre y gratuito Se programan en PHP Se ejecutan en un servidor

Apache o IIS (Internet Information Service)

Wix vs WordPress Buenos constructores de sitios Web Diferencias

Flexibilidad: WordPress:

Gran cantidad de plugins implementados por diferentes desarrolladores. El uso de un plugin mal construido puede ralentizar el rendimiento del sitio

Web Wix:

No es una plataforma open source, su código fuente no está disponible para adaptarlo o modificarlo.

Las herramientas de Wix están plenamente integrados en su constructor web

Facilidad de Uso: WordPress: curva de aprendizaje mas alta, pero fiable y robusta. Wix: permite crear sitios web de forma rápida, arrastrar y soltar contenido

donde se quiera. WordPress es potente y flexible!!

WordPress

Potente y versátil Sistema Gestor de Contenidos de código abierto.

Es libre y al mismo tiempo, gratuito.

Usable y de fácil implementación.

Fácil de adaptar a los proyectos web más repetitivos como blogs o portafolios.

Multitud de plantillas gratuitas y de pago.

Administrador muy amigable para el usuario.

Gran comunidad de Soporte.

https://es.wordpress.org

¿Quién utiliza WordPress? Ebay – Tienda de subastas y compra-venta. Ford – Novedades del fabricante de coches. Playstation – Novedades de la conocida videoconsola. Toledo Museum – Museo de Arte de Toledo, Ohio (EEUU). BBC America – Cadena de noticias. CBS Nueva York – Cadena de noticias. Adobe – Novedades de la conocida marca de diseño gráfico. General Electronic Colegio Lafayette (Estados Unidos) Universidad de Maine (Estados Unidos) Mozilla Firefox – Web del Navegador. CNN – Blogs de personajes conocidos Flickr – Blog de la red social de fotografía Forbes – Novedades de la revista Forbes Harvard Gazette. Noticias desde la Universidad de Harvard. Bata – Tienda internacional de zapatos Metro de Londres

Extensiones de WordPress Gestores de Documentos Galerías de Imágenes Multimedia Motores de Comercio y Venta Electrónica Software de Foros y Chats Calendarios Software para Blogs Servicios de Directorio Boletines de Noticias Herramientas de Registro de Datos Sistemas de Publicación de Anuncios Servicios de Suscripción

https://wordpress.org/plugins/

Uso de WordPress

Instalación en un servidor propio (Self-Hosted) wordpress.org Descarga e instalación del CMS Control completo

WP brinda ayuda y soporte para dar el salto Herramienta de pago Guided Transfer

SaaS (software as a service) - Fully Hosted www.wordpress.com Tras un registro te ofrece el alojamiento completo de la

plataforma Gratuito Pago por servicios adicionales (planes Premium, registro dominios,…)

Requisitos del Sistema

Antes de descargar el software WordPress, debe asegurarse que su servidor Web, o su servicio de hosting, cumple los requisitos mínimos para utilizar WordPress.

Requisitos para versión 3.2+:

PHP 5.2.4 http://www.php.net MySQL 5.0.15 http://www.mysql.com Apache 2.x http://www.apache.org

EasyPHP (WAMP) instala todo el entorno necesario

Instalación de WordPress sobre un servidor local

• Descomprimir el fichero que se ha descargado del sitio oficial en la carpeta www

• Crear una BD en MySQL para almacenar todos los datos.

• Ir a http://localhost/nombreCarpeta/ • Seguir los pasos de instalación.

Pasos de instalación (I)

Front-end y Back-end

• Sitio Web que ven los visitantes o usuarios registrados y que contiene toda la información agregada desde el Administrador. • http://nombre-del-dominio/

Front-end o portada:

• Panel de control de administración desde donde el Mánager, Administrador o Súper-Administrador gestiona y administra el sitio y su contenido. • http://nombre-del-dominio/wp-admin

Back-end o

trastienda:

Ej: http://localhost/nombreCarpeta/wp-admin

Apariencia front-end y back-end

Configuración global del sitio Web

• Configuración del sitio: modificar el título del sitio, descripción, url, correo electrónico, ajustes de fecha y hora,…

AjustesGenerales

• Ajustes de escritura: categorías y formatos por defecto de las nuevas entradas, posibilidad de enviar publicaciones directamente por correo electrónico

AjustesEscritura

• Ajustes de lectura: modificar el aspecto visual de la página inicial: mostrar las últimas entradas o una página estática.

AjustesLectura

Configuración global del sitio Web

Ajustes de comentarios: Permitir avisar a los sitios enlazados

desde el artículo Permitir notificaciones de enlace desde

otros sitios (pingback y trackbacks) Permitir que se publiquen comentarios en

los artículos nuevos. Personalizar la visualización de avatares

(imágenes que aparecen junto al nombre del usuario).

Establecer políticas de moderación en los comentarios

Definir “listas negras” de términos, palabras, URLs,…

Sugerencia: marcar la opción de “el comentario debe aprobarse manualmente” para validar todos los comentarios y no sean publicados hasta su aceptación. • Evitar comentarios spam con

publicidad y urls.

Configuración global del sitio Web

32

Ajustes “Medios”: Establecer el tamaño

predeterminado de las imágenes de las entradas.

Decidir si las imágenes subidas se organizarán en carpetas basadas en mes y año.

Ajustes “Enlaces permanentes”: Las URLs que genera

Wordpress son en base a interrogantes y números (nada amigables).

Modificar para mejorar la estética, posicionamiento, usabilidad y compatibilidad futura de tus enlaces

Sugerencia: “nombre de entrada” URL más amigable

Modificar perfil de usuario

33

Colores del panel de administrador

Información del usuario Modificar contraseña de

acceso Generar una nueva

contraseña Crear personalmente

Usuarios Tu perfil

Gestión usuarios de WordPress Suscriptor: usuarios que pueden acceder a contenidos privados o solo para suscriptores. Es un perfil ideal para webs donde se permita solo el acceso a los contenidos a usuarios registrados, capacidad

que se habilita también en el panel de administración.

Colaborador: cualquier usuario que pueda escribir nuevos artículos y noticias, y modificarlos. • Los contenidos requieren aprobación de un administrador. • Ideal para webs con muchos colaboradores y que requieran de un nivel mínimo de calidad en las nuevas entradas.

Autor: tiene perfil de colaborador pero puede publicar directamente sus escritos.

Editor: casi un administrador que, salvo las funciones propias del administrador (instalaciones, modificación de plantillas, plugins, etc.) puede gestionar artículos y noticias de cualquier otro usuario.

Administrador: Acceso a todo en el sitio y es quien recibe en su correo las notificaciones de los eventos que se sucedan (nuevos comentarios, contacto, actualizaciones, etc.). • Encargado de las actualizaciones, instalación de plugins, cambio de plantillas y configuración.

Plantillas (templates)

WordPress por defecto tiene instaladas 3 plantillas Sencillo y adaptable a cualquier tipo de

dispositivo (móvil, tablets, portátil, ordenador,..)

Revista digital Especial blog

Existen plantillas comerciales y gratuitas. Plantillas gratuitas: clasificación por

temas, colores, columnas,… http://www.themesparawordpress.com

Una plantilla proporciona el aspecto visual y el manejo del sitio web.

Permite cambiar el diseño del sitio pero sin alterar su contenido.

Menú Apariencia -> Temas

Personalizar Plantillas

Para asignar otra plantilla al sitio, seleccionarla en la lista de plantillas instaladas.

Para localizar las plantillas del sitio en el servidor, ir a la carpeta ‘themes’ en la carpeta ‘wp-content’ de instalación del WordPress.

Instalar una nueva plantilla al sitio Para instalar una nueva plantilla:

Previamente, la plantilla ha sido almacenada en formato ZIP

Apariencia→ Añadir temas (+) subir tema instalar Activar

Nota: Existen otras plantillas en el sitio oficial de WP que podrían instalarse vía Internet

Ejemplo de instalación de plantilla

38

Plantilla OpenBiz

Edición de cada slide Configuración de la plantilla Apariencia ThemeBiz OpenBiz Options

Añadir Widgets

39

Los widgets son secciones independientes de contenido que pueden ser colocadas en las áreas de widgets que tenga tu tema (también conocidas por barras laterales)

Configurar o mostrar elementos o eliminar del área

lateral

Añadir Widget: Banner

40

Incluir un logo del Banner de125x125 pixels

Configurar el código HTML para el banner

<a href="http://www.dell.es/"><img src="http://127.0.0.1:70/fruteria/wp-content/themes/OpenBiz/images/dell-logo.jpg" alt="logo dell" title="logo Dell" /></a>

Implementación de una tienda virtual con OSCommerce

Soluciones e-Commerce

• OsCommerce es una solución de comercio electrónico

• Herramienta sencilla de mantener y gestionar

• Administración vía web

• Estadísticas de productos más vendidos

• Módulos de pago, envíos, gestión de pedidos,…

• Requisitos del Servidor para v2.3.4 – PHP v4+ (v5+)

– MySQL v3+ (v5+)

Guía de instalación • Descomprimir fichero de

instalación zip en carpeta www http://localhost/oscommerce/catalog

Paso 1

Guía de instalación II Paso 2 Paso 3

Paso 4

Pasos post-instalación: Eliminar la carpeta install C:/Program Files (x86)/EasyPHP/www/oscommerce/catalog/install

Frontend y Backend

45

Sugerencia: Quitar los privilegios de escritura al fichero de configuracion configure.php Backend: http://127.0.0.1:70/oscommerce/catalog/admin/login.php

Cambio de idioma a español

Descomprimir el fichero full-spanish.zip en www/tienda (en una carpeta)

Dentro hay una carpeta llamada catalog que contiene 2carpetas admin includes

En cada carpeta identificar 1 carpeta y fichero que hay que copiar (carpeta espanol + espanol.php) Copiar a carpeta admin/includes/languages Copiar a carpeta includes/languages

En el administrador del sitio, acceder al menú localización y añadir un nuevo lenguaje (nombre: espanol, codigo: es, directorio: espanol, orden:2, activar idioma por defecto)

WOO COMMERCE Solución eCommerce

47

Creación de sitios Web de confianza para los compradores

Utilización de Google para hacer un seguimiento del tráfico del sitio Web

Convertir visitas en ventas Inclusión de redes sociales para

potenciar las ventas.

http://www.woothemes.com/woocommerce/