mÁster internacional 1 en comunicaciÓn digital · herramientas gratuitas y open source sin...
TRANSCRIPT
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/