MBCCreando la web

MBC - CMS Š 2009 Juan MenÊndez Crespo

Note: To change the product logo for your own print manual or PDF, click "Tools > Manual Designer" and modify the print manual template.

Title page 1 Use this page to introduce the product

by Juan MenĂŠndez Crespo

This is "Title Page 1" - you may use this page to introduce your product, show title, author, copyright, company logos, etc.

This page intentionally starts on an odd page, so that it is on the right half of an open book from the readers point of view.

This is the reason why the previous page was blank (the previous page is the back side of the cover)

MBC - CMS Š 2009 Juan MenÊndez Crespo All rights reserved. No parts of this work may be reproduced in any form or by any means - graphic, electronic, or mechanical, including photocopying, recording, taping, or information storage and retrieval systems - without the written permission of the publisher.

Products that are referred to in this document may be either trademarks and/or registered trademarks of the respective owners. The publisher and the author make no claim to these trademarks.

While every precaution has been taken in the preparation of this document, the publisher and the author assume no responsibility for errors or omissions, or for damages resulting from the use of information contained in this document or from the use of programs and source code that may accompany it. In no event shall the publisher and the author be liable for any loss of profit or any other commercial damage caused or alleged to have been caused directly or indirectly by this document.

Printed: mayo 2009 in (whereever you are located)

Publisher ...enter name...

Managing Editor ...enter name...

Technical Editors ...enter name... ...enter name...

Cover Designer ...enter name...

Team

Coordinator

...enter name...

Production ...enter name...

Special thanks to: All the people who contributed to this document, to mum and dad and grandpa, to my sisters and brothers and mothers in law, to our secretary Kathrin, to the graphic artist who created this great product logo on the cover page (sorry, don't remember your name at the moment but you did a great work), to the pizza service down the street (your daily Capricciosas saved our lives), to the copy shop where this document will be duplicated, and and and...

Last not least, we want to thank EC Software who wrote this great help tool called HELP & MANUAL which printed this document.

4

MBC - CMS

Table of Contents Foreword

8

10

Part I Introducción 1 FAQ ...................................................................................................................................

10

Configuración.......................................................................................................................................................... 12 Metasentencias ......................................................................................................................................................... 12 Clases del......................................................................................................................................................... usuario 12 Google Analytics ......................................................................................................................................................... 14 Configuración ......................................................................................................................................................... por defecto 14 Links recomendados .......................................................................................................................................................... 16

2 Historia ................................................................................................................................... de las versiones

16

20

Part II Utilidades 1 CSS en ...................................................................................................................................

MBC

20

Ejemplos de CSS .......................................................................................................................................................... para personalización 22 Estilos de MBC .......................................................................................................................................................... 24

2 RTE Editor ................................................................................................................................... texto

29

Insertar Imágenes .......................................................................................................................................................... 31 Insertar Links.......................................................................................................................................................... 34 Link de ancla ......................................................................................................................................................... 38 Link de email ......................................................................................................................................................... 39 Insertar Tabla.......................................................................................................................................................... 39 Celdas ......................................................................................................................................................... 40 Filas y Columnas ......................................................................................................................................................... 40 Navegar por el .......................................................................................................................................................... servidor 41 Insertar Flash.......................................................................................................................................................... 41

3 FRAMEWORKS ...................................................................................................................................

44

ShadowBox .......................................................................................................................................................... 44 High Slide .......................................................................................................................................................... 49 Nifty Corners .......................................................................................................................................................... 50 jQuery .......................................................................................................................................................... 52 MooTools .......................................................................................................................................................... 52 Adobe AC-Flash .......................................................................................................................................................... 52 MBC Corners.......................................................................................................................................................... 52

4 Aplicaciones ................................................................................................................................... externas

53

5 Page ...................................................................................................................................

Ear

53

6 Shadowbox ...................................................................................................................................

54

7 ASP-Jpeg ...................................................................................................................................

55

60

Part III Datos web 1 Imagenes ...................................................................................................................................

60

Tipo Imagen .......................................................................................................................................................... 61

2 Banners ...................................................................................................................................

62

3 Links ...................................................................................................................................

63

© 2009 Juan Menéndez Crespo

Contents

5

Detalle links .......................................................................................................................................................... 64 Grupo links .......................................................................................................................................................... 64

4 Datos...................................................................................................................................

65

Detalle noticias .......................................................................................................................................................... 67 Tramos noticias .......................................................................................................................................................... 67 Temas noticias .......................................................................................................................................................... 68

5 Uniforme ...................................................................................................................................

Detalle

.......................................................................................................................................................... 70

6 Web Varios ...................................................................................................................................

Detalle

69 71

.......................................................................................................................................................... 72

7 Encuestas/Poll ...................................................................................................................................

73

Detalles encuestas .......................................................................................................................................................... 74 Opciones .......................................................................................................................................................... 74 Votos IP .......................................................................................................................................................... 75

8 Newsletter ...................................................................................................................................

75

Enviar Newsletter .......................................................................................................................................................... 76

9 Configuración ...................................................................................................................................

77

10 Contenedor ...................................................................................................................................

79

Areas Div Patrones Zonas

.......................................................................................................................................................... 79 .......................................................................................................................................................... 80 .......................................................................................................................................................... 81

11 Idioma ...................................................................................................................................

Traductor

81

12 Menu...................................................................................................................................

82

13 Frameworks ...................................................................................................................................

83

jQuery .......................................................................................................................................................... 84 jQuery UI .......................................................................................................................................................... 84 MooTools 1.2 .......................................................................................................................................................... 85 MooTools 1.11.......................................................................................................................................................... 85 Mootools Gzip.......................................................................................................................................................... 86 ProtoType .......................................................................................................................................................... 86 Script.aculo.us .......................................................................................................................................................... 87 Yahoo YUI .......................................................................................................................................................... 87 Google WT .......................................................................................................................................................... 88 extJS .......................................................................................................................................................... 88 Dojo .......................................................................................................................................................... 89 ShadowBox .......................................................................................................................................................... 89 LightBox .......................................................................................................................................................... 90 High Slide .......................................................................................................................................................... 91 Page Ear (PagePeel) .......................................................................................................................................................... 92 DHTML Menu .......................................................................................................................................................... 92 Java Web Scroller .......................................................................................................................................................... 93 Tree Menu .......................................................................................................................................................... 93 DynamicDrive .......................................................................................................................................................... collapse 94 Adobe Flash AC .......................................................................................................................................................... 94 MBC Corners.......................................................................................................................................................... 95 Nifty Corner .......................................................................................................................................................... 95 MooTabs .......................................................................................................................................................... 96 SPRY MENU .......................................................................................................................................................... 96 Menu Image .......................................................................................................................................................... 98 Menu Mac .......................................................................................................................................................... 98 © 2009 Juan Menéndez Crespo

5

6

MBC - CMS 14 Tablas ................................................................................................................................... globales Datos Web Evento Idiomas

15 Usuarios ...................................................................................................................................

Niveles

99

.......................................................................................................................................................... 99 .......................................................................................................................................................... 99 .......................................................................................................................................................... 100 .......................................................................................................................................................... 100

100

.......................................................................................................................................................... 101

16 Comunes ...................................................................................................................................

102

105

Part IV Campos Comunes 1 IDX ...................................................................................................................................

105

2 ALTA ...................................................................................................................................

105

3 CADUCA ...................................................................................................................................

105

4 ACTUALIZA ...................................................................................................................................

105

5 ACTIVO ...................................................................................................................................

105

6 PRINCIPAL ...................................................................................................................................

106

7 IDIOMA ...................................................................................................................................

106

8 DATOS ...................................................................................................................................

106

9 WEB...................................................................................................................................

106

10 EVENTO ...................................................................................................................................

106

11 ORDEN ...................................................................................................................................

106

12 PRIVADO ...................................................................................................................................

107

13 TRAMO ...................................................................................................................................

107

14 VISITAS ...................................................................................................................................

107

15 RSS...................................................................................................................................

107

16 USUARIO ...................................................................................................................................

107

17 RATES ...................................................................................................................................

107

18 No.RATES ...................................................................................................................................

108

19 RATES ...................................................................................................................................

Val.

108

20 BLOG ...................................................................................................................................

108

21 ESTILO ...................................................................................................................................

108

22 TITULO ...................................................................................................................................

108

23 DESCRIPCION ...................................................................................................................................

108

24 DETALLE ...................................................................................................................................

108

25 RSS...................................................................................................................................

ROTULO

109

26 RSS...................................................................................................................................

TITULO

109

27 RSS...................................................................................................................................

DESCRIPCION

109

111

Part V Patrones 1 Noticias ...................................................................................................................................

111

2 Uniforme ...................................................................................................................................

112

© 2009 Juan Menéndez Crespo

Contents

7

3 Web...................................................................................................................................

Contenidos Varios

112

4 Encuestas ...................................................................................................................................

112

5 Bd-Forms ...................................................................................................................................

112

6 Menu ...................................................................................................................................

Horizontal

113

7 MenuCSS ...................................................................................................................................

114

8 MenuImage ...................................................................................................................................

116

9 Menu ...................................................................................................................................

Macintosh

118

10 Datos ...................................................................................................................................

119

Ejemplos parámetros .......................................................................................................................................................... 123 Ejemplo Simple .......................................................................................................................................................... 123 Ejemplo Extendido .......................................................................................................................................................... 123 Ejemplo Skin.......................................................................................................................................................... 123 Ejemplos Lista .......................................................................................................................................................... 126 Ejemplos Tabs .......................................................................................................................................................... 126

11 Lector ...................................................................................................................................

RSS

126

12 Agenda ...................................................................................................................................

127

13 Galeria ...................................................................................................................................

128

Part VI Ejemplos

132

Part VII Integración

134

Part VIII Video Tutoriales

137

Index

138

© 2009 Juan Menéndez Crespo

7

8

Foreword

Foreword

This is just another title page placed between table of contents and topics

Š 2009 Juan MenÊndez Crespo

Top Level Intro This page is printed before a new top-level chapter starts

Part

I

10

1

MBC - CMS

Introducción Bienvenidos a MBC la herramienta de creación rápida de páginas web en internet basado en ASP/ JavaScript/CSS/AJAX con datos MDB (Microsoft Access) o SQL-Server (Microsoft).

MBC permite la creación de cualquier tipo de web 2.0, ya sea a nivel corporativo, presentación de productos, portal, web social, etc... En el mundo de la informática MBC dispone de dos clasificaciones: - CMS (Content Managemente System) o sistema de gestión de contenidos, permitiendo que se el usuario quién mantenga y modifique los contenidos de la web.

- RAD (Rapid Application Development) o desarrollo rápido de aplicaciones gracias a su sistema de cajas y contenedores podrá realizar una web de la misma forma que un periódico crea sus diferentes páginas.

Requerimientos: Se recomienda utilizar equipos con resolución de video 1280x1024 para el mantenimiento. En el resto de los posibles usos la web ha sido pensada para utilizar en cualquier navegador y cualquier resolución de video.

Notas técnicas del Versión MBC-Forms Versión Web Revisión Última Actualización Autor Diseño gráfico Copyright Correcciones

manual: 9.04.rc1 SQL y MDB Access 2000/2002/2003 9.04.rc1 28/05/2009 Juan Menéndez Crespo Iryna Ukhanova Mastercafe SL - Oviedo'2009 Enrique Menéndez Crespo

Descargas para uso Off-Line de documentación Versión HLP Pulse aquí Versión CHM Pulse aquí Versión PDF Pulse aquí Versión EXE (e-Book) Pulse aquí

1.1

FAQ Que es MBC? MBC es un acrónimo de Model of Boxes and Containers o Modelo de Cajas y Contenedores.

Que es CMS? CMS es el acrónimo de Content Management System o Sistema de Gestión de Contenidos Porque el nombre MBC Forms?

Dado que la herramienta es solo utilizable desde MBC SQL como un módulo más de inclusión su denominación pasaba por incluir el término MBC Que puede incorporarse a MBC Forms?

Cualquier tipo de campo de texto, texto Dinámico, campos de verificación, campos de opción, desplegables, etc.. y todo ello permitiendo acciones en cada uno de los campos, verificación de contenidos, llamadas Ajax a otros programas para recuperar datos, etc... © 2009 Juan Menéndez Crespo

Introducción

11

Herramientas de terceras partes MBC utiliza algunas herramientas de terceras partes como son: FCKEditor para facilitar la manipulación de contenidos y la adaptación a la norma UTF8 de aquellos caracteres especiales que se deseen cargar; CAPTCHA para asegurar la gestión de seguridad y habilitar un método que impida el acceso por fuerza bruta a los datos, AdobeSpry para la gestión del menú principal de mantenimiento, ShadowBox como plugin extra para facilitar la gestión de medios adicionales en la web y la creación de galerias con un aspecto web 2.0, LightBox para la gestión de imágenes con aspecto web 2.0, YUI (Yahoo) en el bloque de mantenimiento para ganar en versatilidad de gestión de contenidos.

Parametrización de la aplicación La utilidad se suministra con los formularios más habitualmente utilizados y remitiendo sus datos por correo electrónico a la dirección que se configure en cada uno de ellos.

Tecnologías y lenguajes que se usan Básicamente MBC3c utiliza ASP, Javascript y CSS. No obstante se han habilitado espacios donde el usuario podrá agregar módulos y bloques nuevos que pueden cambiar la actual estructura o bien implementar nuevas funcionalidades. El sistema está preparado para admitir librerias de Prototype, JQuery, Dojo, YUI, etc... hasta ahora no se han detectado problemas de compatibilidad con alguna de ellas.

Compatibilidad con navegadores Se han realizado pruebas en los siguientes exploradores: Internet Explorer 6.xx, 7.xx y 8.beta, Netscape Navigator 9, Opera 9.xx, FireFox 3.xx, Safari, K-Meleon, Flock, Maxthon, Google Chrome (beta). Actualmente está asegurada la compatibilidad con todos ellos y que el aspecto sea siempre el mismo. Solo se ve afectada la web cuando el cliente establece reglas propias de navegación como cambios de tipografía, colores, etc.. estableciendo su propia CSS de navegación. Tenga en cuenta que determinados campos y etiquetas como LABEL, BUTTON no están disponibles en exploradores como IE6, así como ciertas características de las CSS que son interpretadas de forma diferente entre Internet Explorer, FireFox, Opera y Google Chrome/Safari.

Cuanto cuesta MBC-Forms MBC-Forms es una herramienta que se integra solo en las páginas web alojadas en el servidor de ISPActivo. Su coste es gratuito y solo debe abonar 5 euros/mensuales en concepto de actualización y soporte. Su instalación y configuración se realiza desde el propio servidor, ofreciendo al cliente la máxima facilidad posible en el uso e integración con su página web.

Que incorpora MBC-Forms Según va evolucionando y se van realizando formularios de prueba, estos se entregan directamente como ejemplos de plantilla para los clientes siendo 100% operativos para integrar en sus correspondientes páginas web.

Tengo problemas en la generación de un formulario da muchos errores El generador ha querido ser lo más abierto y flexible posible, dejando al usuario poder mezclar eventos, propiedades, etc... a su criterio por todo el formulario. Eso implica que existan muchas posibilidades de generar errores (especialmente en Javascript) en la creación del formulario. Si no ve documentado algún © 2009 Juan Menéndez Crespo

12

MBC - CMS

campo o evento que precisa en su formulario le rogamos lo solicite para anexarlo a la documentación actual. El objetivo de este manual es ofrecer todas las opciones y ejemplos posibles para facilitar la tarea de construcción de un formulario.

1.1.1

Configuración Se recomienda siga los pasos uno a uno con el fin de organizar la base del diseño web, el total de parámetros de configuración disponibles en MBC supera los 2000 registros, si bien los básicos son los que vamos a detallar en esta sección.

Para acceder a la configuración de la web entre en el mantenimiento de datos y seleccione en el menú lateral Config MBC / Configuración

1.1.1.1

Metasentencias Para realizar de una forma rápida los cambios utilice la casilla Buscar (*) y escriba meta VARIABLE

1.1.1.2

VALOR DEFAULT

DESCRIPCIÓN

title

Título de la página

description

Descripción amplia de la web

keywords

Palabras clave que serán indexadas por los spiders

verify-v1

Inclusión de los elementos Google Verify, MS Validate y Yahoo Key

contentTyp e

Indicador de tipo de contenido en la web (se recomienda no variar este valor si no conoce exactamente lo que precisa)

category

Categoría de la página web

footertxt

Texto en el pie de la web (por defecto indica los link a Mastercafe, ISPActivo, Nota legal y Nota Técnica)

metarevisit

Periodo de visita para los spiders

Clases del usuario Establecer la hoja de estilos personalizada por el usuario para la web.

Busque el valor headclass Este es un ejemplo de personalización que varia los predefinidos por MBC Ejemplo de CSS body { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 0.7em; background-color:#000000; color:#FFFFFF; } #web {border: 1px solid #393939;} #contenedor{margin:0px;}

© 2009 Juan Menéndez Crespo

Introducción

h1{font-size: 2em; font-weight: normal; } h2{font-size: 1.5em; font-weight: normal; } h3{font-size: 1em; font-weight: normal; } .rotulocn{font-size: 1.3em; font-weight: normal; color:#ff6600; } .rotulocn a{ color:#ff6600; } .rotulocn a:visited{ color:#ff6600; } a{color:#ffffff;} a:link{color:cccccc;} a:visited{color:#ffffff;} #botonera{height:25px; background-color:#000000; color:#ffffff; float:right; } #bot{ margin: 0px 0 0 0px; padding:0; float:left; border:1px 1px 0px 0px solid #000000; } #bot li{ float: left; list-style: none; } #bot li a{ color: #ffffff; background-image:url(images/fb_gr.jpg); background-repeat:repeat-x; background-position:top left; margin-left: 1px; padding-top:7px; display:block; height:25px; width:110px; text-align:center; text-decoration:none; } #bot li a:hover{ background-image:url(images/fb_az.jpg); background-repeat:repeat-x; background-position:top left; color: #ffffff; } © 2009 Juan Menéndez Crespo

13

14

MBC - CMS

#bot li #este{ background-image:url(images/fb_az.jpg); background-repeat:repeat-x; background-position:top left; color: #000000; font-weight:bold; } h3.toggler { cursor: pointer; border: 0px solid #f5f5f5; border-right-color: #ddd; border-bottom-color: #ddd; font-family: arial, verdana, sans-serif, times; font-size: 16px; background: #07223d; color: #ffffff; margin: 0 0 0 0; padding: 3px 5px 1px; } .rotulointerior { style=text-align:right;width=100%; }

1.1.1.3

Google Analytics Como definir el URCHIN Code de Google Analytics Busque la variable

urchintrack

Google Urchin Track

<script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/jav </script> <script type="text/javascript"> var pageTracker = _gat._getTracker("UA-7127000-2"); pageTracker._trackPageview(); </script>

Recuerde que el código fuente para el Google Analytics lo proporciona Google desde su página y solo debe copiar y pegar el texto.

Si conoce su número de track puede simplemente copiar este código y cambiar el número UA1.1.1.4

Configuración por defecto Los valores Default asignan propiedades especiales a diferentes elementos de la web, estos son los principales.

Busque la palabra MBC-Config VARIABLE

VALOR DEFAULT

DESCRIPCIÓN

bodyconfig

Define un estilo específico al BODY para la web

bodyjava

Establece javascript adicional del usuario en el tramo BODY

© 2009 Juan Menéndez Crespo

Introducción

VARIABLE

VALOR DEFAULT

contenedor Config

15

DESCRIPCIÓN Define un estilo específico al CONTENEDOR principal

debug

0

activar el modo DEBUG permanentemente

debugpath

bbdd/

Ruta por defecto de los datos del debug

defaulteve

zz

Evento por defecto

defaultidm

es

Idioma por defecto

defaultMasI masinfo_off. Imagen por defecto para el botón de mas info cuando no está activo nfoOff png defaultMasI masinfo_on. Imagen por defecto para el botón de mas info cuando está activo nfoOn png defaultrepag 5

Registros por página valor por defecto en caso de no indicar nada en el patrón

defaultrssw po eb

Web por defecto para las RSS

defaultrsszo noticias na

Zona por defecto para las RSS

defaultweb

Web por defecto en la versión de multiportales

po

defaultweba center lign

Alineación de la web por defecto (no variar en el caso de cajas elásticas)

defaultzona home

Zona por defecto al entrar en la web

footer

Activa el pie de la página para mostrar el texto y link adicionales

1

footerconfig

Estilos adicionales para el pie de la página

heightSHB OXbbdd

Alto por defecto para la caja de sombras en formato debug

javalib mailfrom

Librerías adicionales de javascript agregadas en el tramo HEAD usuario@do Enviador de correo electrónico minio.com

mailfromna Su nombre me mailhost

Nombre por defecto para el envío del correo

192.168.0.8 IP del host que realiza el envío (no lo cambie si utiliza el propio alojamiento para realizar el envío)

PieLista

Estilos adicionales para el pie de lista de los patrones

rssdescrip

Descripción por defecto para las RSS

rsshttpprefi x

Prefijo http para las RSS

rsslink

http://www. Link por defecto para el principal de las RSS dominio. com

rsstitle rutaestilos

Título por defecto para las RSS http://www. Ruta por defecto para el uso de la hoja de estilos en aplicaciones externas dominio. al index.asp (como shbox.asp o imprime.asp) com/mbc/ css/ classes.css

© 2009 Juan Menéndez Crespo

16

MBC - CMS

VARIABLE

VALOR DEFAULT

DESCRIPCIÓN

rutaweb

http://www. Ruta por defecto de la web, recomendable asignación en los casos de dominio. utilizar varias al tiempo com/mbc/

separador

&nbsp;| &nbsp;

Elemento de separador de listas en el pie de paginación

shboxcss

Estilos adicionales asociados al shbox

usercss

Estilos adicionales del usuario para personalización de la web

web

Código de color básico a utilizar en los elementos de la web

webconfig

Estilos personalizados para la caja WEB que contiene toda la página

webname

www.miweb. Nombre genérico asociado a la web com

webnamerot ulo webuser

Rótulo genérico asociado a la web nombre

Código de usuario para el uso de debug, el formato será user=nombre

1.1.2

Links recomendados

1.2

Historia de las versiones 2009 Nace MBC como modelo con opción de datos MDB o SQL. · Se aumentan los patrones para Menu con MenuMac, MenuCss, MenuImage. · Simplificado el número de patrones basando toda la información en tres tipos de tablas Noticias (Datos), Uniforme (antes productos) y Web Varios, pero se amplían los campos y posibilidades de los patrones permitiendo así que el usuario disponga de un número ilimitado de tablas y contenidos personalizables. · Mejorado el sistema de indexación para buscadores · Mejorado el gestor de contenidos y configuración de la web · Se incorporan los frameworks de jQuery, Mootools, Yahoo UI, etc... como elementos para una web 2.0 · Se incorporan las librerías de más de 30 aplicaciones javascript con utilidades basadas en librerías o stand-alone © 2009 Juan Menéndez Crespo

Introducción

· · · · · · · · ·

17

Se incluye script especiales para crear transparencia en las cajas Se eliminan los patrones externos al contenedor y se crean alternativos personalizables Las zonas permiten se personalizadas con librerías Bd-Forms es el nuevo patrón para incrustar formularios generados por MBC-Forms dentro de cualquier zona en MBC Nuevas opciones de cajas elásticas personalizables Se incorpora método de compatibilidad para IE8 La lista de navegadores compatibles con MBC se amplia a 23 versiones verificadas entre Windows/ Linux/Macintosh, se descarta Netscape como navegador para validar y se incorpora Google Chrome.

Se mejora el patrón de noticias y web varios como únicos patrones de las versiones anteriores que se mantiene en el nuevo modelo Nueva versión de mantenimiento de datos basado en la versión 7.1 de ASP-Maker con menú lateral tipo javascript, se agregan mejoras de mantenimiento y exportación de datos

2008 Se amplian todos los módulos y patrones. · Ajax pasa a ser una de las principales armas de MBC, se incorporan nuevos método de navegación y se insertan nuevos parámetros en los módulos. · Más de 180 patrones para las 19 tablas principales de datos · Se agregan librerías tipo ShadowBox para mejorar funciones web 2.0 · Nuevo modelo de galería personalizable · Se incorporan funciones nuevas de mashup y se validan algunas de las nuevas como los marcadores sociales · Se incorporan formularios ajax y se optimizan las opciones de formularios del usuario · Nace MBC-Forms en versiones beta · MBC amplia el anidado de cajas hasta el 5 elemento · Se simplifica el sistema de cajas de los 60 modelos anteriores a 5 basados en estilos del usuario, con ello se elimina el límite de aspecto de las cajas · Nuevo sistema de compatibilidad de cajas para versiones de exploradores, se crean normas base para solucionar los problemas IE6 e IE7 · Se incorporan sistemas de acceso para usuarios y blog para los diferentes patrones · Nuevo patrón para encuestas de opinión (Poll) · Nueva versión de mantenimiento de datos basado en la versión 6 de ASP-Maker con menú lateral tipo Javascript 2007 Ampliación de código para usar con todo tipo de juegos de caracteres, inicia sus primeros pasos en Ukrania · Más de 110 patrones para las 14 tablas principales de datos · Se incorpora un equipo en Alemania y se comienza un desarrollo paralelo para la versión 2008 · Se agregan más de 40 parámetros para facilitar la personalización de la web · Se incorpora un generador de RSS tipo Atom 2.0 · Nueva aplicación para iframe basada en ASP.Net para generar galerías de imágenes desde la carpeta images · Se incorporan elementos de inclusión de utilidades externas (MashUp) para usar Google Maps, Google Calendar, etc... · Nueva aplicación para gestionar formularios Flash incrustados en la web · Se varia la configuración base de los datos para mantener la navegación en el cambio de idioma · Se amplían los formatos de cajas a 60 modelos · Se crea una base de compatibilidad con navegadores, Maxthon, K-Meleon y Avant se incorporan a la lista de exploradores verificados · Nueva utilidad basada en Ajax de valoración de información mostrada · Nueva versión de mantenimiento de datos basado en la versión 5 de ASP-Maker 2006 Se modifican la mayor parte de los patrones flexibilizando su uso. © 2009 Juan Menéndez Crespo

18

MBC - CMS

· El modelo contenedor se amplia con funciones CSS · Se cambia el modelo de uso de idiomas permitiendo múltiples traducciones sobre una tabla · Se modifica la estructura principal de la web basada en las aportaciones y mejoras del equipo de Ukrania · MBC3c dispone de 2 niveles de aspecto y MBC-SQL 3 niveles de datos · Estilos de cajas ampliados a más de 30 formatos prefijados · Se confirma la compatibilidad con Safari, Flock, Netscape 2005 Se modifica la estructura y se crean las versiones 3c y SQL según sea el motor de datos y usos de la misma web · Nace MBC3c como plantilla basada en dos patrones de elementos fijos de ancho y alto · Se mejora la compatibilidad con FireFox y Opera · Nacen las URI como alternativa a las URL tradicionales usando un solo archivo configurable con parámetros 2004 Primera versión distribuible de MBC basado en los trabajos realizados de páginas web. El concepto es crear una base de desarrollo que permita la actualización de páginas sin necesidad de reescribir código.

© 2009 Juan Menéndez Crespo

Top Level Intro This page is printed before a new top-level chapter starts

Part

II

20

2

MBC - CMS

Utilidades En MBC se han incorporado algunas utilidades y aplicaciones externas que hemos considerado muy recomendables para simplificar y mejorar la experiencia del usuario con la web.

Cada una de estas utilidades dispone de su propia documentación aportada por el desarrollador de la aplicación y recomendamos sea leída en caso de precisar más detalles sobre la que nosotros consideramos imprescindible.

2.1

CSS en MBC Estas son algunas de las cláusulas CSS más habitualmente utilizadas en la definición de campos y formularios.

Adicionalmente puede forzar a cargar una hoja CSS dentro del código del módulo utilizando una llamada desde la configuración.

Nota importante: recuerde poner al final de cada propiedad de estilo un punto y coma (;) que indica el final de la propiedad.

Recomendamos a los usuarios de nivel bajo/medio que se documenten con cualquier libro que describa de forma general las CSS o bien que consulte la web de W3C Modelo de cajas en CSS

Margen=Margin Borde=border Relleno=padding Ancho=width Alto=height Contenido=espacio al que afectan los anteriores

CSS

EJEMPLO

DESCRIPCIÓN

font-family font-family: Verdana, tipografía que deseamos utilizar Arial, Helvetica, sansserif, "Times New Roman", Times; font-style

font-style:italic;

estilo asignado a la tipografía (italica por ejemplo = italic), puede usar normal, oblique, inherit, italic

font-weight font-weight:bold;

Densidad del texto (negrita por ejemplo = bold)

font-size

font-size:14px;

Tamaño del texto en pixel o em

font

font:large italic bold

Permite el uso simultáneo de los valores anteriores

© 2009 Juan Menéndez Crespo

Utilidades

CSS

EJEMPLO

21

DESCRIPCIÓN

Arial, Helvetica, sansserif; text-indent text-indent:inherit;

Indentación del texto

text-align

text-align:justify;

Alineado del texto

texttransform

text-transform: capitalize;

Conversión del texto (mayúsculas, minúsculas, capitalizar, heredar, nada) lowercase, uppercase, capitalize, inherit, none

wordspacing

word-spacing:normal; Espaciado entre palabras

letterspacing

letter-spacing:normal; Espaciado entre letras

color

color:#FF00FF;

backgroun background-color: d-color #CC3366;

Color del texto, use el formato de RRGGBB precedido del signo # Color del fondo, use el formato de RRGGBB precedido del signo #

backgroun background-image:url Imagen de fondo, es necesario indicar la ruta y nombre del archivo, d-image (ruta/archivo.ext); así como la extensión de este backgroun background-repeat: d-repeat repeat-x;

Repetir imagen, puede utilizarse horizontal (x) o vertical (y)

backgroun background-position: Posición de la imagen, utilice top/bottom left/right para indicar que d-position top right; posición asume, puede utilizar dos al tiempo (top left o botom right) backgroun background:top left Permite el uso simultáneo de los valores anteriores d #096 repeat-x url(ruta/ archivo.ext); paddingleft

padding-left:0px;

Espaciado interno por la izquierda

paddingright

padding-right:20px;

Espaciado interno por la derecha

paddingtop

padding-top:10px;

Espaciado interno superior

paddingbottom

padding-bottom:30px Espaciado interno inferior

padding

padding:10px 20px 30px 0px;

Permite el uso simultáneo de los valores anteriores, los valores separados por espacio, indique los px y en orden top/right/bottom/ left

margin-left margin-left: 0px;

Espaciado externo vacío por la izquierda

marginright

Espaciado externo vacío por la derecha

margin-right:20px;

margin-top margin-top:10px;

Espaciado externo vacío por arriba

marginbottom

margin-bottom:30px; Espaciado externo vacío por abajo

margin

margin:10px 20px 30px 0px;

Permite el uso simultáneo de los valores anteriores, los valores separados por espacio, indique los px y en orden top/right/bottom/ left

bordercolor

border-color: #FA1864;

Color del borde

border-

border-style:solid;

Estilo del borde

© 2009 Juan Menéndez Crespo

22

MBC - CMS

CSS

EJEMPLO

DESCRIPCIÓN

style borderwidth

border-width:2px;

Grosor del borde

border-left border-left:1px;

Borde izquierdo

borderright

Borde derecho

border-right:3px;

border-top border-top:2px;

Borde superior

borderbottom

border-bottom:4px;

Borde inferior

border

border:2px solid #CCC;

Permite el uso simultáneo de los valores anteriores

#RRGGBB #18F2A7

Notación RGB de 6 valores hexadecimales (habitualmente la notación utilizada)

#RGB

Notación simplificada de RRGGBB siempre que los números de cada sean iguales CCFFAA=CFA

#F26

rgb(R,G,B) rgb(16,26,158)

Notación de tres colores de valores 0 a 255

rgb (R%,G rgb(30%,18%,80%) %,B%)

Notación de tres colores de valores porcentuales

cursor

Especifica el curso sobre el elemento [ [http://.../cursor. ico,]* [ auto | crosshair | default | pointer | move | eresize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ]

cursor:move;

Los colores en formato RGB pueden ser escritos como #FF00FF es decir en pares de valores hexadecimales o bien si son repetidos con una sola letra #F0F como sería el caso para este ejemplo.

En los valores de top/right/bottom/left podemos utilizar también normas como todos iguales con un solo valor así en lugar de 2px 2px 2px 2px podemos poner 2px, de la misma forma podemos hacer pares top/ bottom right/left y poner 2px 3px que equivale a 2px 3px 2px 3px.

2.1.1

Ejemplos de CSS para personalización A continuación estos son los ejemplos y preguntas más habituales de personalización tanto en rótulos como en campos.

Hemos puesto el ejemplo gráfico usando un formulario de color blanco de fondo y como color a personalizar el Rojo 100% (#FF0000;) con el fin de facilitar la visualización de los cambios.

Cambiar el fondo de una sección Seleccione el contenedor/caja que desea personalizar y en estilo Escriba: background-color:#FF0000; donde "#FF0000;" equivale al color que desea poner Cambiar el tamaño del texto Seleccione el campo que desea modificar, pulse Editar y vaya al campo Campo Cell Style Escriba: text-size=14px; donde "14px" equivale al tamaño en pixel de la fuente a cambiar Alinear el rótulo a la izquierda Seleccione el campo que desea modificar, pulse Editar y vaya al campo Rótulo Cell Style Escriba: text-align:left; donde "left" equivale a la posición del texto, puede utilizar left-centerright entre otras opciones © 2009 Juan Menéndez Crespo

Utilidades

23

Alinear arriba un rótulo Seleccione el campo que desea modificar, pulse Editar y vaya al campo Rótulo Cell Style Escriba: vertical-align:top; donde "top" equivale ala posición del elemento en el area, puede utilizar top-middle-bottom entre otras opciones Alinear arriba y a la derecha un rótulo Seleccione el campo que desea modificar, pulse Editar y vaya al campo Campo Cell Style Escriba: text-align:right;vertical-align:top; donde "right y top" asignan la posición del elemento Centrar completamente un rótulo Seleccione el campo que desea modificar, pulse Editar y vaya al campo Campo Cell Style Escriba: text-align:center;vertical-align:middle; donde "center y middle" asignan la posición del elemento horizontal y vertical repectivamente Cambiar fondo por una imagen que se repite en horizontal y que vamos a colocar a la izquierda y arriba En la caja que desee asignar este estilo escriba: background-image:url(ruta/archivo.jpg);background-repeat:repeat-x;background-position:left top; donde ruta/archivo.jpg corresponde a la imagen que se usará de fondo en la ruta del servidor donde esté Recuerde que las normas CSS le permiten agrupar elementos como por ejemplo:

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acrony margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; }

También hay varios selectores los propios del HTML (body, div, html, h1, etc...), los de identidad (#micaja #midiv) y los de clase (.estilo .cajacoloreada ), además también puede crear subclases como en el caso de los links: a { text-decoration:none; color:#000000; } a:hover{ color:#0F0F00; } a:link{ color:#FF0000; } a:visited{ color:#00FF00; }

© 2009 Juan Menéndez Crespo

24

2.1.2

MBC - CMS

Estilos de MBC Adjuntamos la hoja de estilos de CSS por defecto que se incorpora:

/* CSS principal para MBC usos de class= y otros elementos Application: MBC Model of Boxes and Containers v.9 Author: Juan Menéndez Crespo Info: http://www.mastercafe.com Copyright: Juan Menéndez Crespo - Mastercafe SL ©2003-2009. All rights reserved */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acrony margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; } body { font-family: Verdana, Arial, Helvetica, sans-serif, "Times New Roman", Times; font-size:0.7em; } input { font-size:10px; } select { font-size:10px; } a { text-decoration:none; color:#000000; } img a{ padding:0px; margin:0px; border:0px; } td.contentarea { padding: 0px; } #web{ width: 80%; /* esto creará un contenedor con el 80% del ancho del navegador */ margin: 0 auto; /* los márgenes automáticos (conjuntamente con un ancho) centran la página text-align: left; /* esto anula text-align: center en el elemento body. */ } #contenedor{ height:auto; display:block; } /* limpia y agrupa las cajas contenidas */ .clearfloat { clear:both; line-height:0px; height:0; font-size:1px; }

© 2009 Juan Menéndez Crespo

Utilidades

/* caja generica que se ajusta desde contenedorbd */ .cajagen{ width:100%; height:auto; float:left; } /* caja generica que se ajusta desde contenedorbd flota Right */ .cajagenrt{ width:100%; height:auto; float:right; display:block; position:relative; } /* interior de los patrones/modulos */ .areacn{ width:100%; height:auto; float:left; position:relative; } .rotulo { width:100%; height:auto; float:left; padding-top:3px; padding-bottom:3px; padding-left:0px; padding-right:0px; margin-left:0px; margin-right:0px; position:relative; } .rotulointerior { padding-left:4px; position:relative; } /* clases para los contenidos de la web de los bloques principales */ .areac{ width:100%; height:auto; float:left; margin-bottom:0px; position:relative; } .imgdiv{ width:auto; height:auto; padding-right:10px; float:left; display:block; } .rotulocn{ height:auto; float:left; font-size:1.5em; font-weight:bold; padding-top:7px; padding-bottom:2px; position:relative; Š 2009 Juan MenÊndez Crespo

25

26

MBC - CMS

} .rotulogenerico{ background-color:#FFFFFF; font-size:20px; padding-top:7px; padding-bottom:2px; } .deta{ width:100%; height:auto; float:left; overflow:hidden; padding-top:0px; padding-bottom:15px; padding-left:0px; padding-right:0px; position:relative; } .pielista{ width:auto; height:auto; text-align:right; padding-right:10px; padding-top:4px; float:right; position:relative; left:0px; margin-right:0px; font:Century Gothic, Arial, Helvetica, sans-serif 16px lighter } .pielista a{ text-decoration:none; } .areacrotulorss { width:16px; height:16px; float:right; bottom:1px; right:1px; position:relative; } .masinfo { width:9px; height:9px; float:right; bottom:3px; right:5px; position:absolute; } .separador { width:auto; height:5px; float:left; background-color:#FFFFFF; } .txtscroll a { color:#FFFFFF; } /* bloque footer o pie de la web */ #footer { width:inherit; Š 2009 Juan MenÊndez Crespo

Utilidades

height:auto; background-color:#2a2623; color:#999999; padding-left:4px; } #footer a { color:#999999; text-decoration:none; } /* lectores RSS mostrar sus contenidos */ .titulo_rss a{ font: bold 13px "Trebuchet MS", Verdana, Arial; color: #676D46; text-decoration:none; display:block; margin-top:5px; } .titulo_rss a:hover{ color: #666; } .descripcion_rss { font: 11px Verdana, Arial, Helvetica, sans-serif; color: #888; display:block; margin-top:5px; margin-bottom:5px; } .fecha_rss { font: 10px "Lucida Sans Unicode", Verdana, Arial, Georgia; color: #CC6633; } /* bloque de thumbnails para galeria */ .thumbnail{ padding: 3px 3px 5px 3px; background-color: #222222; border: 1px solid #2a2a2a; float: left; margin-right: 10px; margin-bottom: 10px; } .srating{ list-style:none; margin: 0px; padding:0px; width: 100px; height: 20px; position: relative; background: url(/mbc/imgctrl/strating.gif) } .srating li{ padding:0px; margin:0px; /*\*/ float: left; /* */ } .srating li a{ display:block; width:20px; Š 2009 Juan MenÊndez Crespo

top

left

repeat-x;

27

28

MBC - CMS

height: 20px; text-decoration: none; text-indent: -9000px; z-index: 20; position: absolute; padding: 0px; background-image:none; } .srating li a:hover{ background: url(/mbc/imgctrl/strating.gif) z-index: 1; left: 0px; } .srating a.onestar{ left: 0px; } .srating a.onestar:hover{ width:20px; } .srating a.twostars{ left:20px; } .srating a.twostars:hover{ width: 40px; } .srating a.threestars:hover{ width: 60px; } .srating a.threestars{ left: 40px; } .srating a.fourstars{ left: 60px; } .srating a.fourstars:hover{ width: 80px; } .srating a.fivestars{ left: 80px; } .srating a.fivestars:hover{ width: 100px;

0px

-20px

repeat-x;

Esta hoja de estilos principal se verá afectada por las sucesivas opciones de personalización de MBC con estos valores de la Configuración: CSS: classes.css / classesie6.css / classesie7.css (hoja principal y versiones adicionales como parches para exploradores) Configuración: headclass (asignación directa de estilos como hoja del usuario) Configuración: bodyconfig (asignación del estilos para el <BODY>) Configuración: webconfig (asignación del estilos para el <div=web>) Configuración: contenedorconfig (asignación del estilos para el <div=contenedor>) El resto de personalización pertenece a la propia caja que se defina en el Contenedor.

© 2009 Juan Menéndez Crespo

Utilidades

2.2

29

RTE Editor texto Guía de referencia rápida de los botones disponibles en la barra de herramientas del Editor de Texto Enriquecido.

Funciones comunes de la barra de herramientas Elemento (botón)

Función Ver o editar el documento en codigo fuente HTML (para usuarios avanzados.

Quitar todos los contenidos creando así una página en blanco.

Guarda la página que se está editando.

Previsualizar como quedaría el HTML visto por los usuarios.

Seleccionar una plantilla creada.

Cortar el texto seleccionado al clipboard.

Copiar el texto seleccionado al clipboard.

Pegar los datos copiados al clipboard (con o sin formato).

Pegar contenido copiado desde Microsoft Word o aplicaciones similares.

Imprimir el actual documento.

Chequear con el corrector ortográfico el documento (usa correctores externos).

Deshacer o rehacer la ultima acción realizada.

Buscar una palabra o frase dentro de un documento.

Buscar y reemplazar una palabra o frase en un documento.

Seleccionar todo el texto en el documento.

Quitar el formato en el texto seleccionado.

Aplicar remarcado, itálica, subrayado o tachado al texto seleccionado.

Subíndice y supraíndice para el texto seleccionado.

Crear numeración o marcas de lista.

Incrementa o decrementa la indentación.

Formatea un bloque de texto para identicar entre comillas (textos provenientes de otras fuentes).

© 2009 Juan Menéndez Crespo

30

MBC - CMS

Establece el alineado del texto (izquierda, centrado, derecha o justificado).

Crear/editar o eliminar del texto los hipervínculos. También puede ser usado para manejar las subidas de archivos y los vínculos con el servidor). (ver documentación ampliada) Inserta o modifica un link tipo ancla.

Insertar imágenes en el documento. (ver documentación ampliada) Insertar elementos de Adobe Flash en la página.

Crear una tabla con un número definido de columnas y filas (ver documentación ampliada) Insertar una línea divisora horizontal.

Insertar emoticones como imagen (smiley faces, email icon, lightbulb, etc.).

Insertar símbolos y caracteres especiales (acentuados, marca, monedas, etc.).

Insertar un cambio de página para impresoras (solamente en las versiones de impacto).

Estilos y formatos que determinan la apariencia y el valor semántico del documento. Usted deberá desplegar el campo y seleccionar un elemento para aplicar estilos, fuentes, configuración de la fuente, tamaños, etc. Para quitar estilos y/o formatos seleccione el mismo estilo de nuevo.

Cambia el color del texto en la zona seleccionada.

Cambia el color del fondo en la zona seleccionada.

Maximiza el tamaño del editor dentro del navegador.

Muestra los límites de los elementos de bloques en el texto.

Acerca de FCKeditor (acceso a la web en inglés).

Funciones de formularios Barra de Elementos

Función Crear un nuevo bloque de formulario en la página.

Insertar un checkbox (marca de verificación) en la página.

Insertar un botón radio en la página.

Insertar un campo de texto en la página.

© 2009 Juan Menéndez Crespo

Utilidades

31

Inserta una caja de texto multilineas en la página.

Insertar un campo de selección en la página.

Insertar un botón de formulario en la página.

Insertar como una imagen como botón para enviar los datos del formulario. No use este elemento para insertar imágenes en el documento.

Insertar un campo oculto en la página.

Recopilado de "http://docs.fckeditor.net/FCKeditor_2.x/Users_Guide/Quick_Reference"

2.2.1

Insertar Imágenes Al insertar una nueva imagen obtenemos este formulario emergente para establecer los datos básicos necesarios

En la solapa de Image Info (Información de la imagen) disponemos de los siguientes valores Campo URL Browse / Buscar Alternative text Width / Ancho Height / Alto Border / Borde © 2009 Juan Menéndez Crespo

Descripción Dirección donde se encuentra la imagen respecto del documento raiz Botón de acceso al navegador/buscador de imágenes texto alternativo que se muestra al estar el ratón sobre la imagen Ancho en pixel (puede asignarse automáticamente) Alto en pixel (puede asignarse automáticamente) Border de la imagen en pixel

32

MBC - CMS

Campo Descripción HSpace / Espacio Hor. Espaciado horizontal respecto de otros elementos en pixel Vspace / Espacio Vert. Espaciado vertical respecto de otros elementos en pixel Align / Alinear Alineación de la imagen respecto del resto de contenido externo Una segunda solapa nos ayuda a definir posibles links (vínculos) con otros elementos de la web o externos

El campo URL establece el destino referido al link (src en términos HTML) El campo Target (destino) define que acción debe realizar el navegador al usar el link (_self , _blank, _parent) estas acciones van descritas en el propio desplegable.

La tercera solapa nos ayuda a subir directamente imágenes al servidor, si bien estas no quedarán registradas en la tabla Imágenes (que se usa como referencia de la libreria), su utilidad reside en facilitar el mantenimiento y carga ocasional de algunos elementos gráficos.

Pulse sobre el botón de Seleccionar para buscar el archivo a buscar y posteriormente subir al servidor.

Una vez seleccionado pulse sobre el botón Enviar al servidor (send it...) para subirlo a su espacio web.

Tenga en cuenta que el tiempo de subida siempre dependerá del tamaño del archivo que se sube y de la disponibilidad de caudal de red que tenga su equipo.

© 2009 Juan Menéndez Crespo

Utilidades

La cuarta solapa es la avanzada su uso suele estar orientado a usuarios con ciertos niveles de programación ya que permite usar lenguaje CSS.

© 2009 Juan Menéndez Crespo

33

34

MBC - CMS

Los campos de imagen avanzada son: Id para establecer un identificador único en el DOM Dirección de lenguaje Código de lenguaje Descripción larga de la URL Clase definida para el objeto, es necesario que ya esté creada en las CSS genéricas de la web o bien en la personalización de CSS de la configuración web.

Titulo de aviso Estilos personalizados, internamente agrega un style="estilos usuario"

2.2.2

Insertar Links Existen tres tipos de Links o vínculos: URL, Ancla y e-Mail A continuación describimos el genérico URL y en los apartados anexos tratamos el resto de modalidades.

© 2009 Juan Menéndez Crespo

Utilidades

35

Tipo de Link Establece la definición que deseamos realizar al vínculo que insertamos, disponemos de tres modos URL (link tradicional), Ancla (Anchor o link contenido en texto) y por último eMail (mailto: ) Protocolo es el prefijo que utilizará dicho link, habitualmente usaremos http:// para links absolutos (direcciones web completas) y Otros para links relativos al sitio web en el que estamos. Disponemos de otros protocolos como ftp://, https:// etc... pero estos siempre serán para links absolutos.

URL define la ruta de destino del link, verifique este link si es posible antes de escribirlo o copie y pegue el texto desde la página web de destino.

© 2009 Juan Menéndez Crespo

36

MBC - CMS

Destino Target o destino del link establece donde debe el navegador abrir el vínculo, puede ser en la página actual (_self), página nueva (_blank), etc... seleccione la opción deseada.

En el caso de utilizar frames en la web debemos establecer el nombre del frame donde se destine el vínculo.

En los casos de selección de POPUP o ventana emergente disponemos de nuevos parámetros para configurar dicho elemento (ventana).

La mayoría de las opciones se basan en un disponible o no disponible para el usuario que vea esta ventana.

Campo Resizable Location Bar Menu Bar Scroll Bars Status Bar Tool Bar Full Screen (IE) Dependent (nets) Width / Alto Height / Ancho Left Pos./ Izquierda Right Pos / Derecha

Descripción Ajuste de la ventana por el usuario Barra de dirección URL visible Barra de menú visible Barra de desplazamiento (horizontal o vertical) visible Barra de estado de ventana visible Barra de herramientas visible Ver en pantalla completa (solo Internet Explorer) Ventana dependiente (solo Netscape) Ancho de la ventana en pixels Alto de la ventana en pixels Posición absoluta en pantalla desde la izquierda (horizontal) Posición absoluta en pantalla desde la derecha (vertical)

© 2009 Juan Menéndez Crespo

Utilidades

37

Subida directa de archivos al servidor (utilidad anexa para facilitar trabajos intermedios de descarga necesaria en la web para el usuario, como PDF).

Su funcionamiento es idéntico a la operativa que se describe en la inserción de imágenes.

Para los usuarios avanzados se ha dispuesto esta ventana que le permite re-asignar ciertos parámetros especiales. Es necesario algunos conocimientos de HTML y CSS para poder manejar correctamente estos campos.

Campo

© 2009 Juan Menéndez Crespo

Descripción

38

MBC - CMS

Id Identificador para el DOM id="" Language Orientación (dcha a izda o de izda. a dcha.) dir="" Direction Access Key Tecla de acceso rápido al link accesskey="" Name Nombre del vínculo name="" Languaje Code Codigo de idioma lang="" Tab Index Número de tabulado dentro del total que se muestra en el navegador tabindex="" Advisory Title Titulo del link title="" Advisory Content Tipo de contenido del link type="" Stylesheet Class Nombre de la definición class en la hoja de estilos personalizada class="" Linked resource Codigo de caracteres vinculado charset="" Style Use directamente lenguaje CSS para establecer los valores style="suestilo" 2.2.2.1

Link de ancla Inserción de un link tipo ancla (anchor) dentro del texto contenido. Recuerde que para poder utilizar este tipo de link necesitará previamente haber definido las diferentes anclas por el texto (ver uso)

Seleccione el nombre del ancla al que hace referencia, el desplegable le limitará los vínculos disponibles. O bien si ha creado Id dispondrá en el desplegable de ellas.

© 2009 Juan Menéndez Crespo

Utilidades

39

En la inserción de anclas es necesario fijar un literal, que se recomienda no contenga espacios pero que se significativa al sitio de referencia para simplificar su uso.

2.2.2.2

Link de email

Equivale a automatizar el proceso de envío directo de un correo a través de la aplicación del cliente (Outlook, Express, Eudora, etc...) equivale a realizar en HTML un mailto:cuenta@decorreo.com Indique la dirección de email del destinatario, si necesita poner varias utilice punto y coma (;) para separar los elementos Indique el objeto del envío de correo (equivale a Subject como parámetros) Indique el texto genérico que se incrustará en el correo electrónico (este texto es por defecto y el usuario podrá modificarlo, como el subject).

2.2.3

Insertar Tabla Al hacer click sobre el botón de insertar tabla veremos emerger esta pantalla:

© 2009 Juan Menéndez Crespo

40

MBC - CMS

Las propiedades que podemos utilizar en la creación de tablas son: Campo Descripción Filas Número entero que establece las filas de la tabla Columnas Número entero que establece las columnas de la tabla Anchura Número entero que establece el ancho total en pixel o porcentaje Altura Número entero que establece el alto total en pixel o porcentaje Medida Establece la medida de ancho y alto Tamaño Borde Número entero que establece el número de pixels de borde Alineación Ajuste del contenido de la celda (derecha, izquierda, centrado) Esp. e/celdas Número entero que establece en pixel el espacio entre celdas Esp. interior Número entero que establece en pixel el margen interior de las celdas Título Nombre que fijamos a la tabla (area DOM para usos en Javascript) Síntesis Descripción opcional de la tabla Es importante reseñar que la tabla siempre está supeditada a la caja donde se vaya a mostrar, por lo que no debe poner tamaños superiores a la caja destino de la misma. Se recomienda el uso de valores porcentuales para simplificar la operación.

2.2.3.1

Celdas Editar y cambiar propiedades de las celdas Unir celdas (combinar) Insertar/Eliminar/Combinar/Dividir celdas

2.2.3.2

Filas y Columnas Insertar / Eliminar filas y/o columnas

© 2009 Juan Menéndez Crespo

Utilidades

2.2.4

41

Navegar por el servidor

Esta es la ventana que se muestra cuando deseamos navegar por el servidor para buscar una de las imágenes subidas con anterioridad o bien queremos subir nuevos elementos.

En la parte izquierda superior disponemos del tipo de recurso que estamos buscando o manipulando. A su derecha nos mostrará la ruta en la que nos encontramos.

Bajo el tipo de recurso veremos en formato de árbol la carpeta en uso, así como la opción de seleccionar otra carpeta contenida en esta en el servidor, movernos a la carpeta anterior, etc.

En la zona central (bajo la ruta en la que estamos) disponemos de un listado de elementos encontrados que coinciden con el tipo de recurso, simplemente marque el archivo que desea usar en la ventana anterior al navegador.

En la parte inferior se han dispuesto dos utilidades para el mantenimiento: creación de nuevas carpetas (con el fin de poder organizar los archivos subidos) y subida al servidor de nuevos elementos (imágenes, pdf, etc...). El uso de la subida es simple: seleccione con el botón examinar el archivo de su equipo, a continuación pulse UPLOAD para subirlo a la carpeta en la que se encuentra.

2.2.5

Insertar Flash La función de inserción de elementos flash pretende simplificar la codificación de estos ya que son objetos embebidos en la web.

© 2009 Juan Menéndez Crespo

42

MBC - CMS

La URL establece el origen del archivo y podemos utilizar el botón de Ver servidor para simplificar la selección del mismo Configure el ancho y alto del elemento flash para forzar su visualización correcta, si omite estos campos la tendencia es crear un zoom a la caja contenida (siempre que este se habilitara en los comandos de flash).

Dispone en la parte inferior de una vista previa de como quedaría este elemento en la web.

© 2009 Juan Menéndez Crespo

Utilidades

43

Se ha incluido la utilidad de subir automáticamente archivos al servidor, para ello pulse el botón Examinar y seleccione el archivo de su equipo, a continuación pulse el botón de Enviar al Servidor para subirlo.

© 2009 Juan Menéndez Crespo

44

MBC - CMS

Para los usuarios avanzados y simplificar la tarea de insertar comandos o parámetros al objeto flash, se han dispuesto estos campos.

Es necesario disponer de conocimientos básicos de HTML y CSS para manipular los campos inferiores.

2.3

FRAMEWORKS Desde 2001 cada vez más las páginas web disponen de frameworks, core o librerías (como queramos denominarlas) que se adjuntan al código original de la página con el fin de aportar nuevas posibilidades, mejorar la experiencia del usuario y aportar utilidades.

Haciendo historia Los primeros y sin dudas más conocidos fueron Prototype y su complemento Script.aculo.us , tras ellos hemos visto crecer y evolucionar frameworks como jQuery, Mootools, Ext js, Dojo, Yahoo UI, Google WT, etc... adicionalmente han salido diversas librerías que en ocasiones se apoyan en estos frameworks como ShadowBox (que dispone de varias versiones), LightBox, MooForms,etc. o librerias sueltas como CurvyCorners, NiftyCube, HighSlide, etc.

En sí las librerías y los frameworks tienen una forma similar de instalarse y hacerlas funcionar en la web, necesitaremos los archivos de inclusión (salvo Yahoo que recomienda linkar directamente con su sitio) y en ocasiones también código javascript adicional para realizar las funciones o habilitar la acción.

En MBC hemos querido probar todas las que hemos visto útiles, comunes y sobre todo populares, es por ello que incluimos algunos ejemplos y documentación simple sobre las más solicitadas.

Es muy importante que sea consciente de que librería desea utilizar y las necesidades de la misma a fin de no sobrecargar la página con librerías innecesarias en zonas que no de utilidad, solo conseguirá que sea más lenta la descarga y visualización de la página. Cada librería puede ser cargada de forma individual en la zona deseada o bien en la zona común "zz" (habitualmente se colocan en "zz" las correspondientes de los menús que se utilizan en la web).

2.3.1

ShadowBox Libreria de cajas de sombras de mjijackson URL con documentación y ejemplos: http://mjijackson.com/shadowbox/ Documentación recopilada de la web shadowbox. Se mantienen los textos originales en inglés para evitar confusiones en la interpretación.

Markup Secondly, you need to tell Shadowbox which links you want it to open. The simplest way to do this is through your HTML markup. If you're going to take this route, at the very least you must add a rel="shadowbox" attribute to each link. For example, say you have this link to an image on your page: <a

href="myimage.jpg">My

Image</a>

In order to set up this link for use with Shadowbox, simply change it to this: <a

href="myimage.jpg"

rel="shadowbox">My

Image</a>

That's it! Clicking on this link should now open up the image in Shadowbox.

© 2009 Juan Menéndez Crespo

Utilidades

45

Note: The word lightbox will also work here. This feature was added for compatibility with the original Lightbox script. Also note that because HTML area tags do not support the rel attribute, you cannot use this method to set them up for use with Shadowbox. Instead, use Shadowbox. setup as described below.

If you would like to display a title for your image, simply add a title attribute to the link. <a

href="myimage.jpg"

rel="shadowbox"

title="My

Image">My

Image</a>

You must explicitly tell Shadowbox the dimensions to use to display content other than images. This is done by adding a few parameters to the end of the rel attribute, separated by semi-colons. To specify a movie's height and width (in pixels), use the height and width parameters. <a

href="mymovie.swf"

rel="shadowbox;height=140;width=120">My

Movie</a>

Additionally, you may set Shadowbox options on a per-link basis. To do this, you must include a JSON-formatted parameter called options. <a

href="myimage.jpg"

rel="shadowbox;options={animate:

false}">My

Image</a>

In addition to displaying single images and movies, Shadowbox is also capable of displaying galleries of content. In order to designate a link as part of a gallery, you must add the gallery name to the rel attribute between square brackets immediately following the word "shadowbox". The following markup creates a gallery called "Vacation" with two pictures. <a <a

href="beach.jpg" rel="shadowbox[Vacation]">The Beach</a> href="pier.jpg" rel="shadowbox[Vacation]">The Pier</a>

Galleries may be composed of content of many different types. The following markup is a compressed version of the last demo. It demonstrates how various media can be combined into a single gallery. <a <a <a <a

rel="shadowbox[Mixed];options={counterType:'skip',continuous:true}" href="vanquish.jpg">jpg</a> rel="shadowbox[Mixed];width=520;height=390" href="caveman.swf">swf</a> rel="shadowbox[Mixed];width=292;height=218" href="kayak.mp4">movie</a> rel="shadowbox[Mixed]" href="index.html">iframe</a>

Advanced If you don't want to add to your markup, you don't have to. Shadowbox may be manipulated with pure JavaScript. This use is slightly more complex, but it has several benefits including the fact that your HTML markup will be cleaner and you can more easily integrate Shadowbox into an existing project.

If you were paying attention in the section about markup, you'll notice that there are several parameters that commonly accompany Shadowbox gallery elements. These parameters are listed in the table below.

Parameter

Description

player

The player that should be used for the content. May be "img", "swf", "flv", "qt" (QuickTime), "wmp" (Windows Media Player), "iframe", or "html".

title

The title to use for the gallery element.

Š 2009 Juan MenÊndez Crespo

46

MBC - CMS

height

The content's height (in pixels, not necessary for images).

width

The content's width (in pixels, not necessary for images).

gallery

The gallery name to use for the content (optional).

content

The actual content to display (e.g. URL, HTML code, etc.).

When using the markup method, each of these options may be present in one form or another. A link's gallery name, height, and width may all be configured within the link's rel attribute. Similarly, its title is contained in the title attribute and the content value defaults to the link's href. The content type is then derived from the extension on the linked file.

So, now that you know what's really going on behind the scenes, you can just pass objects that contain these pieces of information to Shadowbox.open as in the following example. <script type="text/javascript"> window.onload

= function(){

Shadowbox.init({ // let's skip the automatic setup because we don't have any // properly configured link elements on the page skipSetup: true }); // open a welcome message Shadowbox.open({ player: 'html', title: 'Welcome', content: '<div id="welcome-msg">Welcome to my website!</div>', height: 350, width: 350 }); }; </script>

Note: Shadowbox.open may also accept a second argument that contains some options to apply.

You can also use Shadowbox.setup to manually set up link elements for use with Shadowbox.

This can be useful, for example, if you have a dynamic page with links being created and destroyed dynamically.

The following example uses Prototype 1.6 syntax. <script type="text/javascript"> document.observe('dom:loaded', function(){ Shadowbox.init({ skipSetup: true // skip the automatic setup });

Š 2009 Juan MenÊndez Crespo

Utilidades

47

// set up all anchor elements with a 'movie' class to work with Shadowbox Shadowbox.setup($$('a.movie'), { gallery: 'My Movies', autoplayMovies: true }); }); </script>

When using this method to set up links with Shadowbox, you may mix in the link parameters with the options argument as the second parameter. However, the same parameters will apply to all links set up in the same call, so you may want to make separate calls to Shadowbox.setup for each link.

Note: Any options found in a link's HTML markup automatically trump those passed in via setup() .

Options

The following table contains a list of options that may be used to configure Shadowbox.

Option Description adapter† The adapter to use with Shadowbox. If not given, Shadowbox will automatically determine which adapter to use based on which libraries are already loaded on the page. If no other libraries are loaded, will default to using the "base" adapter. animate Set this false to disable all fancy animations (except fades). This can improve the overall effect on computers with poor performance. Defaults to true. animateFade Set this false to disable all fading animations. Defaults to true. animSequence The animation sequence to use when resizing Shadowbox. May be either "wh" (width first, then height), "hw" (height first, then width), or "sync" (both simultaneously). Defaults to "sync". autoplayMovies Set this false to disable automatically playing movies when they are loaded.

Defaults to true. autoDimensions Set this true to automatically set the initialHeight and initialWidth automatically from the configured object's height and width. Defaults to false. continuous Set this true to enable "continuous" galleries. By default, the galleries will not let a user go before the first image or after the last. Enabling this feature will let the user go directly to the first image in a gallery from the last one by selecting "Next". Defaults to false. counterLimit Limits the number of counter links that will be displayed in a "skip" style counter. If the actual number of gallery elements is greater than this value, the counter will be restrained to the elements immediately preceding and following the current element. Defaults to 10. counterType The mode to use for the gallery counter. May be either "default" or "skip". The default counter is a simple "1 of 5" message. The skip counter displays a separate link to each piece in the gallery, enabling quick navigation in large galleries. Defaults to "default". displayCounter Set this false to hide the gallery counter. Counters are never displayed on elements that are not part of a gallery. Defaults to true. displayNav Set this false to hide the gallery navigation controls. Defaults to true. ease An easing function to use for all Shadowbox animations. This function accepts one parameter that represents the state of the animation (% complete) and should return a value on [0, 1] (or close to it) that represents the multiple that should be applied to the pixel value. Defaults to a cubic polynomial. enableKeys Set this false to disable keyboard navigation of galleries. Defaults to true. errors An object containing the names and URL's of plugins and their respective download pages. ext† A map of players to their supported extensions. See the source for further details. © 2009 Juan Menéndez Crespo

48

MBC - CMS

fadeDuration The duration (in seconds) of the fade animations. Defaults to 0.35. flashParams A list of parameters (in a JavaScript object) that will be passed to a flash <object>. For a partial list of available parameters, see this page. Only one parameter is specified by default: bgcolor.

Defaults to {bgcolor:"#000000"}. flashVars A list of variables (in a JavaScript object) that will be passed to a flash movie as FlashVars. Defaults to {}. flashVersion The minimum Flash version required to play a flash movie (as a string). Defaults to "9.0.0". handleOversize The mode to use for handling content that is too large for the viewport. May be one of "none", "resize", or "drag" (for images). The "none" setting will not alter the image dimensions, though clipping may occur. Setting this to "resize" enables on-the-fly resizing of large content. In this mode, the height and width of large, resizable content will be adjusted so that it may still be viewed in its entirety while maintaining its original aspect ratio. The "drag" mode will display an oversized image at its original resolution, but will allow the user to drag it within the view to see portions that may be clipped.

See the demo for a demonstration of all three modes of operation. Defaults to "resize". handleUnsupported The mode to use for handling unsupported media. May be either "link" or "remove". Media are unsupported when the browser plugin required to display the media properly is not installed. The link option will display a user-friendly error message with a link to a page where the needed plugin can be downloaded. The remove option will simply remove any unsupported gallery elements from the gallery before displaying it. With this option, if the element is not part of a gallery, the link will simply be followed. Defaults to "link". initialHeight The height of Shadowbox (in pixels) when it first appears on the screen. Defaults to 160. initialWidth The width of Shadowbox (in pixels) when it first appears on the screen. Defaults to 320. language† The two-letter language code (according to ISO 639-1) that specifies the language that Shadowbox will use to display messages to the user. All language files are contained in the languages directory and are prefixed with "shadowbox-" followed by the language code. Defaults to "en". modal Set this false to disable listening for mouse clicks on the overlay that will close Shadowbox. Defaults to true. onChange A hook function that will be fired when Shadowbox changes from one gallery element to another. The single argument of this function will be the gallery element that is about to be displayed. onClose A hook function that will be fired when Shadowbox closes. The single argument of this function will be the gallery element that was last displayed. onFinish A hook function that will fire when Shadowbox finishes loading the current gallery piece (after all animations are complete). The single argument of this function will be the current gallery element. onOpen A hook function that will be fired when Shadowbox opens. The single argument of this function will be the current gallery element. overlayColor The color to use for the modal overlay (in hex). Defaults to "#000". overlayOpacityThe opacity to use for the modal overlay. Defaults to 0.8. players† Shadowbox supports a wide range of media formats. This option specifies an array of player(s) to load for your content. The following table describes which players are available: Player Description img Used to display various image formats including gif, jpeg, and png. Supports dragging of oversized images via the handleOversize configuration option. swf Used to display SWF's (Flash). flv Used to play Flash video via the JW FLV Player. See the FAQ for instructions on how to install and use this player. qt Uses the QuickTime browser plugin to play content. wmp Uses the Windows Media Player browser plugin to play content. iframe Displays content in an HTML Iframe. Useful for playing videos from YouTube and Google video, as well as displaying exterior web sites. © 2009 Juan Menéndez Crespo

Utilidades

49

html Injects some pure HTML code into the Shadowbox display. Useful for displaying inline tables and forms.

Defaults to ["img"]. resizeDuration The duration (in seconds) of the resizing animations. Defaults to 0.35. showOverlay Determines whether the overlay will be shown at all. Defaults to true. showMovieControls Set this false to disable displaying QuickTime and Windows Media player movie control bars. Defaults to true. skipSetup† Set this true to skip automatically calling Shadowbox.setup when Shadowbox initializes. Defaults to true. slideshowDelay A delay (in seconds) to use for slideshows. If set to anything other than 0, this value determines an interval at which Shadowbox will automatically proceed to the next piece in the gallery.

Defaults to 0. useSizzle† Set this false to disable loading the Sizzle.js CSS selector library. Note that if you choose not to use Sizzle you may not use CSS selectors to set up your links. Defaults to true. viewportPadding The amount of padding (in pixels) to maintain around the edge of the browser window.

Defaults to 20.

2.3.2

High Slide Libreria de cajas de sombras de Torstein Honsi URL con documentación y ejemplos: http://highslide.com/ Dadas las posibilidades y potencia de la librería recomendamos la visita a la web y estudiar los ejemplos que se aportan. Recuerde que esta librería no es gratuita en sitios comerciales, léase las condiciones de uso.

Es importante conocer que funcionalidades va a utilizar en la web ya que dispone de un generador de js que le permitirá reducir sensiblemente el tamaño del archivo final a cargar, así como la hoja de estilos necesaria para su uso.

Documentación recopilada de la web

Installation Note: some basic HTML knowledge is required to install Highslide.

Download and extract the zip-archive from the download page.

Run the file index.html, navigate to your favourite setup and view the source.

Change the file to suit your needs, or copy and paste parts of it into your HTML file. If you mess it up, go back to the original file and change it bit by bit. Study the documentation and the API reference for advanced features.

If you move the Highslide JS files, remember to change the graphicsDir setting in the Javascript.

For any problems in your installation, first read the FAQ, then ask in the support forum.

Example In this example the zip archive is unzipped to the root of your website. In addition, the CSS code from your favourite example is copied and pasted into a file called highslide.css and placed in the /highslide directory.

1) For this example, your directory structure should look like this: 2) Put this code in the head tag of your HTML page. © 2009 Juan Menéndez Crespo

50

MBC - CMS

<script type="text/javascript" src="/highslide/highslide.js"></script> <link rel="stylesheet" type="text/css" href="/highslide/highslide.css" /> <script type="text/javascript"> // override Highslide settings here // instead of editing the highslide.js file hs.graphicsDir = '/highslide/graphics/'; </script> 3) This is how you mark up the thumbnail <a href="images/full-image.jpg" class="highslide" onclick="return hs.expand(this)"> <img src="images/thumbnail.jpg" alt="Highslide JS" title="Click to enlarge" height="120" width="107" /></a> Compatibility - tested with: IE 8 beta 1 Works partly, waiting for more stable beta.

IE 5.0 - 7.0 Works IE 4.0 Falls back nicely Firefox 1.5 - 3.0 Works Opera 8.5 - 9.5 Works Netscape 7.2 Works Netscape 4.79 Falls back nicely Safari 2.0 - 3.0 on Mac, 3.0 on Windows Works Google Chrome Works Konqueror 3.5 Works

2.3.3

Nifty Corners Libreria para la realización a través de javascript de bordes redondeados en todo tipo de elementos.

Autor: Alessandro Fulciniti Página con documentación y ejemplos: http://www.html.it/articoli/niftycube/index.html Documentación recopilada de la web

The parameters The first parameter is for the CSS selector to targets the elements on which apply Nifty Corners.

The CSS selectors accepted are: tag selector, id selector, descendant selector (with id or class) and grouping. The following table show some example: Selector tag selector

Example "p" "h2"

id selector

"div#header" "h2#about"

class selector

"div.news" "span.date" "p.comment" © 2009 Juan Menéndez Crespo

Utilidades

descendant selector (with id) descendant selector (with class)

51

"div#content h2" "div#menu a" "ul.news li" "div.entry h4"

"h2,h3" grouping (any number and combination of the previous "div#header,div#content,div#footer" selectors) "ul#menu li,div.entry li" Talking about options: they're identified by keywords and they can be specified in any order and number. Let's see them: keyword

meaning

tl

top left corner

tr

top right corner

bl

bottom left corner

br

bottom right corner

top

upper corners

bottom

lower corners

left

left corners

right

right corners

all (default)

all the four corners

none

no corners will be rounded (to use for nifty columns)

small

small corners (2px)

normal (default) normal size corners (5px) big

big size corners (10px)

transparent

inner transparent, alias corners will be obtained. This option activates automatically if the element to round does not have a background-color specified.

fixed-height

to be applied when a fixed height is set via CSS

same-height

Parameter for nifty columns: all elements identified by the CSS selector of the first parameter will have the same height. If the effect is needed without rounded corners, simply use this parameter in conjuction with the keyword none.

Š 2009 Juan MenÊndez Crespo

52

2.3.4

MBC - CMS

jQuery Personalmente creo que una de las mejores librerías junto con Mootools, de uso similar y muy flexible y simple en la manipulación y requerimientos del código.

Esta librería es usada en algunos patrones que se incluyen en MBC como el MenuMac. Recomendamos la visita a su web http://jquery.com/ a fin de ver en detalle los ejemplos y métodos de uso.

2.3.5

MooTools Una de las librerías más evolucionadas, antiguamente se la conocía como MooFx y dispone de muchos seguidores y desarrolladores.

En MBC hemos incorporado algunas funciones de navegación tipo Acordeón, Tabs, Ajax, etc... en patrones como DATOS. Recomendamos la visita a su web http://mootools.net/ a fin de ver en detalle los ejemplos http://demos. mootools.net/ y métodos de uso.

2.3.6

Adobe AC-Flash Librería realizada por Adobe para eliminar los problemas de compatibilidad y bloqueo del elemento Flash en Internet Explorer 6 y 7, es recomendable su uso en los casos de incorporar elementos Flash en la web.

Inserción de la librería en <HEAD> <script

src="jvs/AC_RunActiveContent.js"

type="text/javascript"></script>

Uso de la librería en <BODY>

<script type="text/javascript"> AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ve </script> <noscript> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.co <param name="movie" value="flash/miarchivo.swf"> <param name="quality" value="high"> <param name="SCALE" value="noborder"> <embed src="flash/miarchivo.swf" width="757" height="263" quality="high" pluginspage="http://www </object> </noscript>

Método alternativo que hemos creado en MBC <script

2.3.7

type="text/javascript">runSWF("images/miarchivo.swf?parametro=valor",

860,

165,"8,0,0,0",

MBC Corners Utilidad que realizará cajas de bordes redondeados a base de transparencia en la caja en curso. Su funcionamiento es similar a NiftyCorners si bien se ha mejorado la velocidad de la librería y el tamaño del archivo a cargar. © 2009 Juan Menéndez Crespo

Utilidades

2.4

53

Aplicaciones externas MBC dentro de su concepto abierto permite la integración de todo tipo de utilidades en su composición de datos, estas son algunas utilidades que han sido probadas: Sothink DHTML Menu : generador de menús tipo Dynamic HTML basados en javascript y un contenido adicional para spiders. Dispone de una amplia cantidad de modelos y posibilidades. La librería que usa está disponible en la integración de frameworks como DHTML Menu Sothink Tree Menu : generador de menús en formato árbol, tiene el mismo formato y composición, si bien la librería es distinta al disponer de otras funciones pensadas en menús verticales.

Sothink Java Web Scroller : scroll lateral de elementos tipo imagen o mixto, muy funcional y vistoso es una utilidad recomendable para generar galerías rápidas.

Si conoce alguna herramienta que sea útil para la creación de espacios y no dispone de información para integrarla en MBC informa de ello a través del foro de discusión.

2.5

Page Ear Parámetros de configuración que debe disponer el <HEAD> de la página Es necesario que se indique la ruta de las imágenes y archivos swf para que funcione. Por defecto se situan en la carpeta images/ Archivos de pageear e imágenes a cargar var pagearSmallImg = 'images/pageear_s.jpg'; var pagearSmallSwf = 'images/pageear_s.swf'; var pagearBigImg = 'images/pageear_b.jpg'; var pagearBigSwf = 'images/pageear_b.swf';

// Movement speed of small pageear 1-4 (2=Standard) var speedSmall = 1; // Mirror image ( true | false ) var mirror = 'true'; // Color of pagecorner if mirror is false var pageearColor = 'ffffff'; // URL to open on pageear click var jumpTo = 'http://www.webpicasso.de/blog/' // Browser target (new) or self (self) var openLink = 'new'; // Opens pageear automaticly (false:deactivated | 0.1 - X seconds to open) var openOnLoad = 3; // Second until pageear close after openOnLoad var closeOnLoad = 3; // Set direction of pageear in left or right top browser corner (lt: left | rt: right ) var setDirection = 'rt'; // Fade in pageear if image completly loaded (0-5: 0=off, 1=slow, 5=fast ) var softFadeIn = 1; // Plays background music once abspielen (false:deactivated | URL:Mp3 File e.g. www.domain.de/myso var playSound = 'false' // Play sound on opening peel (false:deactivated | URL:Mp3 File e.g. www.domain.de/mysound.mp3) var playOpenSound = 'false'; // Play sound on closing peel (false:deactivated | URL:Mp3 File e.g. www.domain.de/mysound.mp3) var playCloseSound = 'false'; // Peel close first if button close will be clicked © 2009 Juan Menéndez Crespo

54

MBC - CMS

var closeOnClick = 'false'; // Close text var closeOnClickText = 'Close';

El aspecto que conseguiremos será en la versión de reposo (al ser rt será Righ Top = Derecha Superior)

En la versión abierta (mouse over)

2.6

Shadowbox Existe una utilidad que si bien no está configurada como patrón si se utiliza como anexa a todos los patrones, su nombre Shadowbox procede de la librería que utliza en su uso.

Como llamarlo: shbox.asp?parametros Métodos de uso: cont establece el número del contenedor que será mostrado (solo un contenedor por caja shbox), ejemplo shbox.asp?cont=999

© 2009 Juan Menéndez Crespo

Utilidades

55

idformutiliza directamente BdForms con la caja de sombras, es necesario indicar el número del formulario que necesitamos, ejemplo shbox.asp?idform=3 mixto de datos origen pudiendo ser bdnoticias o bdweb, en este caso es necesario indicar varios parámetros adicionales -bbdd establece la base de datos -web filtro de datos en la base de datos -eve filtro de datos en la base de datos -zona filtro de datos en la base de datos -idm filtro de datos en la base de datos para texto en idiomas -id filtro de datos en la base de datos identificando un registro unicamente ejemplo: shbox.asp?bbdd=bdweb&id=2&idm=es Recuerde que el aspecto y la hoja de estilos de la caja de sombras está definida en la configuración como shboxcss, le ponemos un ejemplo de personalización: body{ background-color:#000000; color:#cccccc; font-size:xx-small; font-family: Verdana, Arial, Helvetica, sans-serif, "Times New Roman", Times; }

En el caso de utilizar cont parte del estilo se puede redefinir desde el propio valor que establecen los estilos de la caja.

2.7

ASP-Jpeg Librería de gestión de imágenes que nos permitirá realizar cambios importantes en las imágenes subidas a la web sin necesidad de conocer o modificar la imagen subida.

En la web existen varias formas de insertar una imagen, ya sea a través de la subida del archivo por imágenes y posteriormente su asignación a los campos de Foto/Foto1 o Imagen/Imagen1, o bien desde los propios editores de texto enriquecido utilizando el botón de insertar imagen. Aquí vamos a mostrar un método alternativo de uso tanto para un método como para otro, o bien para utilizar directamente en cualquier contenido web.

Inserción habitual: en el campo imagen o foto escribimos: archivo.jpg Método opcional en el campo imagen o foto escribimos: aspjpeg.asp?path=archivo.jpg Básicamente varía que vamos a poner antes del nombre y/o ruta de nuestra imagen el literal aspjpeg. asp?path= Opciones adicionales de aspjpeg.asp Podemos agregar parámetros a esta función de la siguiente forma: Parámetro Valores Descripción y resultado width

número

Establece el número de pixel al que deseamos ajustar la imagen en horizontal. Al ajuste será proporcional. Ejemplo width=300

height

número

Establece el número de pixel al que deseamos ajustar la imagen en vertical.

Al ajuste será proporcional. Ejemplo: height=400

© 2009 Juan Menéndez Crespo

56

MBC - CMS

Parámetro Valores

Descripción y resultado

gray

1o0

Convertir la imagen a escala de grises. Ejemplo gray=1 para activar, por defecto se asume 0

sharp

1o0

Afilar o ajustar perfiles de la imagen para mejorar su aspecto. Ejemplo sharp=1 para activar, por defecto se asume 0

hflip

1o0

Realizar un espejo horizontal a la imagen, o dar la vuelta. Ejemplo hflip=1 para activar, por defecto se asume 0

vflip

1o0

Realizar un espejo vertical a la imagen, o dar la vuelta verticalmente. Ejemplo vflip=1 para activar, por defecto se asume 0

q

desde 1 a Compresión del archivo jpg, 100=sin compresión 1=máxima compresión, el 100 ajuste de compresión por defecto es 80. Es importante identificar que la compresión bajará el peso de la imagen, en consecuencia irá más rápida la descarga, pero la definición y aspecto del resultado bajará sensiblemente.

i

0o1o2

Activar la interpolación de la imagen. Hay tres tipos: 0= pixel proximo, 1=bilinear, 2 bicúbico. Ejemplo i=1 , por defecto se asume 0.

crop

1o0

Realizar un corte parcial a la imagen, es necesario asignar las posiciones x e y en caso de activar. Ejemplo crop=1

x1

número

Posición X desde la esquina izquierda superior. Ejemplo x1=30

y1

número

Posición Y desde la esquina izquierda superior. Ejemplo y1=40

x2

número

Posición X desde la esquina derecha inferior. Ejemplo x2=300

y2

número

Posición Y desde la esquina derecha inferior. Ejemplo y2=215

sepia

1o0

Convertir la imagen a color sepia. Ejemplo sepia=1 para activar. Por defecto se sume 0

Nota importante los parámetros deben estar precedidos del signo & para separar unos de otros.

Ejemplos con un parámetro adicional: aspjpeg.asp?path=archivo.jpg&width=300 Muestra la imagen archivo.jpg en un ancho de 300 pixel (ajuste de escala) aspjpeg.asp?path=archivo.jpg&width=300&gray=1 Muestra la imagen archivo.jpg en blanco y negro (escala de grises) en un ancho de 300 pixel (ajuste de escala) aspjpeg.asp?path=archivo.jpg&width=300&sepia=1 Muestra la imagen archivo.jpg en tonos sepia y en un ancho de 300 pixel (ajuste de escala) aspjpeg.asp?path=archivo.jpg&width=300&sharp=1 Muestra la imagen archivo.jpg ajustado el perfilado final y en un ancho de 300 pixel (ajuste de escala) aspjpeg.asp?path=archivo.jpg&width=300&vflip=1 Muestra la imagen archivo.jpg puesta al revés en vertical en un ancho de 300 pixel (ajuste de escala) aspjpeg.asp?path=archivo.jpg&width=300&hflip=1 Muestra la imagen archivo.jpg puesta al revés en horizontal en un ancho de 300 pixel (ajuste de escala) aspjpeg.asp?path=archivo.jpg&width=300&i=2 Muestra la imagen archivo.jpg con una interpolación bicúbica y en un ancho de 300 pixel (ajuste de escala) aspjpeg.asp?path=archivo.jpg&width=300&q=70 Muestra la imagen archivo.jpg con una compresión del 30% (reducción de peso del archivo final) y en un ancho de 300 pixel (ajuste de escala) aspjpeg.asp?path=archivo.jpg&width=300&crop=1&x1=10&y1=20&x2=200&y2=180 Muestra la imagen archivo.jpg de un ancho de 300 pixel (ajuste de escala) y recorta la proporción desde 10,20 hasta 200,180 © 2009 Juan Menéndez Crespo

Utilidades

57

Ejemplos con parámetros mixtos: aspjpeg.asp?path=archivo.jpg&width=300&vflip=1&hflip=1&gray=1&sharp=1&i=1 Muestra la imagen archivo.jpg puesta al revés en vertical y espejo horizontal, en grises, con ajuste de perfiles, interpolada por bilinear y en un ancho de 300 pixel (ajuste de escala) Las posibilidades son muchas, y las ventajas mayores.

Procesar las imágenes a través de este método simplificará la subida de varias versiones de la misma imágen, evitará el tener que realizar ajustes en su equipo como convertir a grises o sepia, podrá recortar partes de forma simple, etc... y lo más importante el archivo resultante será siempre ajustado al máximo al tamaño del archivo necesario para su web, por lo que optimizará la velocidad y tráfico en la web.

Ejemplo visual con una imagen de 320x200 px que denominamos people.jpg y que ha sido subida a la carpeta css/images/ aspjpeg.asp?path=css/images/people.jpg (tamaño 10kb)

aspjpeg.asp?path=css/images/people.jpg&gray=1 (tamaño 9kb)

aspjpeg.asp?path=css/images/people.jpg&sepia=1 (tamaño 10.8kb)

© 2009 Juan Menéndez Crespo

58

MBC - CMS

aspjpeg.asp?path=css/images/people.jpg&width=100 (tamaño 2.3kb)

aspjpeg.asp?path=css/images/people.jpg&height=100 (tamaño 4.2kb)

aspjpeg.asp?path=css/images/people.jpg&q=20 (tamaño 4.1kb)

aspjpeg.asp?path=css/images/people.jpg&crop=1&x1=20&y1=40&x2=120&y2=80 (tamaño 1.1kb)

Hemos omitido los ejemplos de interpolación ya que no son visibles claramente en el manual Vea el video tutorial en You tube http://www.youtube.com/watch?v=6zUrzrHDuio

© 2009 Juan Menéndez Crespo

Top Level Intro This page is printed before a new top-level chapter starts

Part

III

60

3

MBC - CMS

Datos web El menú lateral de mantenimiento de datos nos muestra los diferentes accesos a las principales tablas de datos.

En general cada archivo de datos dispone de tablas relacionadas como Detalles, Blog y Rating (excepto Banners, Imágenes y Encuestas). Estas tablas adicionales tienen como principal objetivo simplificar el uso de idiomas en la web (Detalles), permitir blog en cada uno de los elementos que se muestran (Blog) y controlar las votaciones/valoraciones de los usuarios (Rating).

Adicionalmente a las tablas comunes veremos que algunas disponen de tablas de ayuda o índices de búsqueda como es el caso de Noticias que permite su agrupación por temas y/o tramos.

Es necesario que se definan los permisos correctos para los usuarios que accedan a las diferentes tablas con el fin de asegurar un correcto mantenimiento de las mismas.

3.1

Imagenes

La utilidad básica es la subida de elementos tipo jpg, gif, swf, pdf, etc... y su clasificación para crear galerías de imágenes en la web.

© 2009 Juan Menéndez Crespo

Datos web

3.1.1

Tipo Imagen

© 2009 Juan Menéndez Crespo

61

62

3.2

MBC - CMS

Banners

© 2009 Juan Menéndez Crespo

Datos web

3.3

Links

© 2009 Juan Menéndez Crespo

63

64

MBC - CMS

3.3.1

Detalle links

3.3.2

Grupo links

© 2009 Juan Menéndez Crespo

Datos web

3.4

Datos Antes denominado Noticias se han ampliado sus funciones permitiendo todo tipo de contenidos y formatos.

Š 2009 Juan MenÊndez Crespo

65

66

MBC - CMS

© 2009 Juan Menéndez Crespo

Datos web

3.4.1

Detalle noticias

3.4.2

Tramos noticias

Š 2009 Juan MenÊndez Crespo

67

68

3.4.3

MBC - CMS

Temas noticias

© 2009 Juan Menéndez Crespo

Datos web

3.5

Uniforme

© 2009 Juan Menéndez Crespo

69

70

3.5.1

MBC - CMS

Detalle

© 2009 Juan Menéndez Crespo

Datos web

3.6

Web Varios

© 2009 Juan Menéndez Crespo

71

72

3.6.1

MBC - CMS

Detalle

© 2009 Juan Menéndez Crespo

Datos web

3.7

Encuestas/Poll

© 2009 Juan Menéndez Crespo

73

74

MBC - CMS

3.7.1

Detalles encuestas

3.7.2

Opciones

© 2009 Juan Menéndez Crespo

Datos web

3.7.3

Votos IP

3.8

Newsletter

© 2009 Juan Menéndez Crespo

75

76

3.8.1

MBC - CMS

Enviar Newsletter

Seleccione con el desplegable la Newsletter a enviar, verifique su contenido haciendo click en el link de previsualizar Seleccione el idioma de filtro, cada usuario debe tener asignado un idioma o 'ZZ' para cualquiera. Un usuario con zz puede recibir todas las newsletter que se envian en los diferentes idiomas, se recomienda que revise los idiomas actuales antes de proceder con el envío Si desea una prueba del envío asigne uno en el correo de pruebas, debe existir este correo en la base de datos de usuarios Asigne el bucle de envío; cada envío se procesa automáticamente cada 5 segundos.Se recomienda no utilizar bucles superiores a 1000 que equivale a respuestas del servidor superiores a 30 segundos, el valor ideal de envío es 100 que corresponden a 3 segundos (o menos) de servidor frente a los 5

© 2009 Juan Menéndez Crespo

Datos web

77

segundos de ciclo. Desde y Hasta limita el tramo de usuarios y es un filtro adicional a los anteriores, revise los números en la base de datos de usuarios antes de lanzar. Clave debe contener aquellas palabras que se utilicen como filtro adicional en las fichas de clientes, las claves serán por cuenta y definicion del usuario y no deben contener caracteres especiales. Utilice siempre letras de la 'a' a la 'z' y números del 0 al 9. Evite el uso de mayúsculas.

Las palabras clave on filtros del tipo OR, es decir si ponemos estos valores en clave: restaurantes madrid cocinero. Se genera el filtro seleccionando los usuarios que tienen en las claves las palabras restaurante O madrid O cocinero. Ya sea una de ellas o cualquier otra combinación.

Al pulsar la tecla de ENVIAR se activan los ciclos correspondientes para realizar todo el envio.

No cierre ni manipule su navegador hasta que visualice el mensaje PROCESO DE ENVIO COMPLETADO Verá como su explorer va regenerando pantalla informando del estado del envío, así como de los errores encontrados.

Si observa muchos errores le recomendamos que reduzca el bucle para poder anotar los usuarios con problemas y corregirlos.

Actualmente esta utilidad está siendo mejorada con y solo está disponible para la versión MBC-SQL: -Seguimiento de correos -Cancelación de correos que no son válidos -Formato HTML o Texto Plano -Permiso de inclusión de adjuntos -Inclusión de link de cancelación de suscripción automático Recuerde que la legislación vigente es bastante severa sobre el envío de correos no solicitados, le recomendamos revise la LSSI y la LOPD antes de utilizar esta herramienta.

3.9

Configuración

© 2009 Juan Menéndez Crespo

78

MBC - CMS

MBC ofrece al usuario la posibilidad de configurar toda la web sin conocimientos de programación.

Adicionalmente podremos crear nuestras propias variables web que luego se utilizarán en diferentes cajas.

Básicamente hay dos bloques de configuración principales: Config MBC y Metasentencias. El resto de parámetros disponibles pertenecen a los patrones o bien a las funcionalidades adicionales a cada zona y elementos insertados.

Principales componentes de Metasentencias : Titulo Descripción Keywords Verify-V1 Principales componentes de MBC-Config: defaultweb defaulteve defaultzona defaultidm defaultrepag Personalización web:

A lo largo del manual se irán explicando algunos otros parámetros que son útiles en una web MBC. Configurar metasentencias (YouTube) http://www.youtube.com/watch?v=_-7OUBVIgWM

© 2009 Juan Menéndez Crespo

Datos web

3.10

Contenedor

3.10.1 Areas Div

© 2009 Juan Menéndez Crespo

79

80

MBC - CMS

3.10.2 Patrones

© 2009 Juan Menéndez Crespo

Datos web

3.10.3 Zonas

3.11

Idioma Traductor

© 2009 Juan Menéndez Crespo

81

82

3.12

MBC - CMS

Menu

Video tutoriales de MBC Menú: Ejemplos de Menús Menú horizontal Menú Mac Menú Image Menú CSS

© 2009 Juan Menéndez Crespo

Datos web

3.13

83

Frameworks

Un framework es un motor de datos o entorno de trabajo que nos va a ayudar a realizar ciertas tareas en la web con código auxiliar, normalmente este código será javascript y en ocasiones puede ir acompañado de archivos de estilos (CSS) e imágenes de trabajo. Esta utilidad ha sido pensada con el fin de poder manejar todo tipo de frameworks y de paso poder insertar otras librerías, utilidades y widgets a la web.

MBC dispone de varios frameworks ya incorporados, los que hemos considerado más habituales o bien con ciertas propiedades muy útiles para el desarrollo de una web.

Si desea incorporar uno nuevo dispone del formulario arriba indicado, veamos un ejemplo de como se debe rellenar CAMPO

DESCRIPCIÓN

INDICE

Código único interno, este valor se pone de forma automática y realiza funciones de índice

CODIGO

Literal de 5 caracteres que serán los que identifiquen internamente la librería a utilizar, es un valor único y no puede haber dos iguales en la lista

TIPO

Asigne uno de los valores indicados para agrupar los diferentes registros que sean cargados. Valores fwk=framework lib=libreria wid=widget uti=utiles

NOMBRE

Literal que será mostrado en la lista de frameworks a seleccionar en la zona

LINK

Acceso directo al origen de la librería, sus creadores o sitio de su descarga. No es imprescindible asignar uno, si bien es muy recomendable como listado de accesos a los orígenes de cada una.

DESCRIPCI Literal para describir la librería y su utilidad, no es imprescindible pero si recomendable © 2009 Juan Menéndez Crespo

84

MBC - CMS

CAMPO

DESCRIPCIÓN

ON

con de fin de informar de su utilidad

HEAD

Código que será insertado en la zona <HEAD>... </HEAD>

HTML

Código que será insertado previo al patrón que lo use, estará contenido en <BODY>... ... </BODY>

BODY

Código que será insertado al inicio del <BODY> ...</BODY>

/BODY

Código que será insertado al final del <BODY>... </BODY>

ACTIVO

Indica si este framework estará disponible para seleccionar en las zonas.

Recomendamos activar solo aquellos que se estima sean necesarios en toda la web con el fin de facilitar su selección y uso en las diferentes zonas

A continuación escribimos los valores preasignados por defecto para las librerías que se encuentran ya instaladas en MBC Es importante reseñar que algunos frameworks solo aportan un potente motor que nos ayudará en el código java de usuario, por otro lado algunas utilidades pueden usar directamente los datos de MBC e incluso solo necesitar imágenes de personalización (como es el caso de Page Ear).

3.13.1 jQuery CODIGO jquer TIPO fwk NOMBRE jQuery LINK http://jquery.com/ DESCRIPCION jQuery excelente opción y muy simple de usar <HEAD> <script type="text/javascript" src="fwk/jquery/jquery-1.3.2.js"></script> </HEAD> <BODY> ......HTML HTML..... </BODY>

3.13.2 jQuery UI CODIGO jqeui TIPO uti NOMBRE jQuery UI LINK http://jqueryui.com

© 2009 Juan Menéndez Crespo

Datos web

DESCRIPCION Librerías adicionales de efectos, widgets y otras utilidades para jQuery <HEAD> </HEAD> <BODY> ......HTML HTML..... </BODY>

3.13.3 MooTools 1.2 CODIGO mooto TIPO fwk NOMBRE MooTools LINK http://mootools.net/ DESCRIPCION Mootools 1.2.1 generico, simple, potente y fácil de usar <HEAD> <script type="text/javascript" src="fwk/mootools/mootools-1.2.1-core-nc.js"></script> <script type="text/javascript" src="fwk/mootools/mootools-1.2-more.js"></script> </HEAD> <BODY> ......HTML HTML..... </BODY>

3.13.4 MooTools 1.11 CODIGO moo11 TIPO fwk NOMBRE MooTools 1.11 LINK http://mootools.net/ DESCRIPCION Mootools 1.11 generico, simple, potente y fácil de usar

© 2009 Juan Menéndez Crespo

85

86

MBC - CMS

<HEAD> <script type="text/javascript" src="fwk/mootools/mootools.js"></script> </HEAD> <BODY> ......HTML HTML..... </BODY>

3.13.5 Mootools Gzip CODIGO mooyu TIPO fwk NOMBRE Mootools Gzip YUI LINK http://mootools.net/ DESCRIPCION Mootools 1.2.1 comprimido con YUI, menor tamaño misma potencia <HEAD> <script type="text/javascript" src="fwk/mootools/mootools-1.2.1-core.js"></script> <script type="text/javascript" src="fwk/mootools/mootools-1.2-morec.js"></script> </HEAD> <BODY> ......HTML HTML..... </BODY>

3.13.6 ProtoType CODIGO proto TIPO fwk NOMBRE Prototype LINK http://www.prototypejs.org/ DESCRIPCION Prototype la más utilizada en general <HEAD> <script type="text/javascript" src="fwk/prototype/prototype-1.6.0.3.js"></script> </HEAD> © 2009 Juan Menéndez Crespo

Datos web

87

<BODY> ......HTML HTML..... </BODY>

3.13.7 Script.aculo.us CODIGO scpta TIPO fwk NOMBRE Script.aculo.us LINK http://script.aculo.us/ DESCRIPCION Una de las primeras, se apoya en Prototype <HEAD> <script type="text/javascript" src="jvs/scriptaculous.js?load=effects,builder"></script> </HEAD> <BODY> ......HTML HTML..... </BODY>

3.13.8 Yahoo YUI CODIGO yayui TIPO fwk NOMBRE Yahoo YUI LINK http://developer.yahoo.com/yui/ DESCRIPCION YUI la libreria más extensa y potente <HEAD> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/button/assets/skins/ sam/button.css"> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/container/assets/skins/ sam/container.css"> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/autocomplete/assets/ skins/sam/autocomplete.css"> © 2009 Juan Menéndez Crespo

88

MBC - CMS

</HEAD> <BODY> <script type="text/javascript" <script type="text/javascript" <script type="text/javascript" script> <script type="text/javascript" js"></script> <script type="text/javascript" js"></script> ......HTML

src="http://yui.yahooapis.com/2.6.0/build/utilities/utilities.js"></script> src="http://yui.yahooapis.com/2.6.0/build/button/button-min.js"></script> src="http://yui.yahooapis.com/2.6.0/build/container/container-min.js"></ src="http://yui.yahooapis.com/2.6.0/build/datasource/datasource-min. src="http://yui.yahooapis.com/2.6.0/build/autocomplete/autocomplete-min.

HTML..... </BODY>

3.13.9 Google WT CODIGO goowt TIPO fwk NOMBRE Google WT LINK http://code.google.com/webtoolkit/ DESCRIPCION Excelente pero compleja <HEAD> </HEAD> <BODY> ......HTML HTML..... </BODY>

3.13.10 extJS CODIGO extjs TIPO fwk NOMBRE ext JS LINK http://extjs.com/ DESCRIPCION Excelente pero complicada de uso y gran tamaño © 2009 Juan Menéndez Crespo

Datos web

<HEAD> <script type="text/javascript" src="fwk/extjs/ext-core.js"></script> </HEAD> <BODY> ......HTML HTML..... </BODY>

3.13.11 Dojo CODIGO dojoj TIPO fwk NOMBRE Dojo LINK http://www.dojotoolkit.org/ DESCRIPCION Fácil de usar y con ciertas funciones curiosas <HEAD> </HEAD> <BODY> ......HTML HTML..... </BODY>

3.13.12 ShadowBox CODIGO shbox TIPO box NOMBRE ShadowBox 2.0 LINK http://mjijackson.com/shadowbox/ DESCRIPCION Libreria de cajas de sombras Javascript (la más potente) <HEAD> <script type="text/javascript" src="jvs/shadowbox-base.js"></script> <script type="text/javascript" src="jvs/shadowbox.js"></script> © 2009 Juan Menéndez Crespo

89

90

MBC - CMS

<script type="text/javascript"> Shadowbox.loadSkin('classic', 'jvs/skin'); // use the "classic" skin debe ser el nombre de la carpeta Shadowbox.loadLanguage('es', 'jvs/lang'); // use el lenguaje predefinido por la web Shadowbox.loadPlayer(['html', 'iframe', 'img', 'qt', 'flv', 'swf', 'wmp'], 'jvs/player'); // use players que correspondan window.onload = function(){ Shadowbox.init(); }; </script> </HEAD> <BODY> ......HTML HTML..... </BODY>

3.13.13 LightBox Es la librería original de la cual se han realizado múltiples modificaciones y variaciones en el código.

No siendo la más potente, hay que reconocer su estabilidad y lo simple y reducido de su código, si bien sus posibilidades se reducen al manejo de imágenes.

CODIGO lgbox TIPO box NOMBRE LightBox 1.2 LINK http://www.huddletogether.com/projects/lightbox/ DESCRIPCION Libreria de cajas de sombras Javascript (la original) Necesita Scriptaculous y Prototype.

(Lokesh Dhakar) <HEAD> <link rel="stylesheet" href="css/lightbox.css" type="text/css" /> <script type="text/javascript" src="jvs/prototype.js"></script> <script type="text/javascript" src="jvs/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="jvs/lightbox.js"></script> </HEAD> <BODY> ......HTML HTML..... </BODY>

© 2009 Juan Menéndez Crespo

Datos web

91

Algunas de las librerías que descienden de esta y que hemos agregado en la lista de frameworks tanto el Título como su link son: · LightView - Muy potente y versátil, similar en posibilidades a HighSlide. Es necesaria licencia de uso · LightWindow - Versátil y muy configurable, licencia por donación es una excelente opción a ShadowBox, LightView y HighSlide, si bien es necesario ciertos conocimientos para personalizar y manejar. Necesita prototype y scriptaculous. · Lytebox · MilkBox · ThickBox 3.1 · iBox · FaceBox · VideoBox · FancyBox · Sexybox · Pirobox · Leightbox · Floatbox · Litebox · Slimbox

3.13.14 High Slide CODIGO hslid TIPO box NOMBRE HighSlide 4.1.0 LINK http://highslide.com DESCRIPCION Libreria de cajas de sombras Javascript (la más configurable) <HEAD> <script type="text/javascript" src="jvs/highslide/highslide.js"></script> <link rel="stylesheet" type="text/css" href="/highslide/highslide.css" /> <script type="text/javascript"> // override Highslide settings here // instead of editing the highslide.js file hs.graphicsDir = '/highslide/graphics/'; </script> </HEAD> <BODY> ......HTML HTML..... </BODY>

© 2009 Juan Menéndez Crespo

92

MBC - CMS

3.13.15 Page Ear (PagePeel) CODIGO pager TIPO UTI NOMBRE Page Ear LINK http://www.webpicasso.de DESCRIPCION Efecto de pagina desplegada <HEAD> <script type="text/javascript" charset="utf-8"> var pagearSmallImg = 'images/pageear_s.jpg'; var pagearSmallSwf = 'images/pageear_s.swf'; var pagearBigImg = 'images/pageear_b.jpg'; var pagearBigSwf = 'images/pageear_b.swf'; var speedSmall = 1; var mirror = 'true'; var pageearColor = 'ffffff'; var jumpTo = 'http://www.mastercafe.com/sql/' var openLink = 'new'; var openOnLoad = 3; var closeOnLoad = 3; var setDirection = 'rt'; var softFadeIn = 1; var playSound = 'false' var playOpenSound = 'false'; var playCloseSound = 'false'; var closeOnClick = 'false'; var closeOnClickText = 'Close'; </script> <script src="fwk/pageear/AC_OETags.js" language="javascript"></script> <script src="fwk/pageear/pageear.js" type="text/javascript"></script> </HEAD> <BODY> ......HTML HTML..... <script type="text/javascript"> writeObjects(); </script> </BODY>

3.13.16 DHTML Menu CODIGO dhtml TIPO men

© 2009 Juan Menéndez Crespo

Datos web

NOMBRE Dynamic HTML Menu LINK http://www.sothink.com/ DESCRIPCION Shothink Dynamic HTML Menú <HEAD> <script type="text/javascript" src="jvs/stmenu.js"></script> </HEAD> <BODY> ......HTML HTML..... </BODY>

3.13.17 Java Web Scroller CODIGO jwscr TIPO men NOMBRE Java Web Scroll LINK http://www.sothink.com/ DESCRIPCION Sothink Java Web Scroller <HEAD> <script type="text/javascript" src="jvs/stscode.js"></script> </HEAD> <BODY> ......HTML HTML..... </BODY>

3.13.18 Tree Menu CODIGO treem TIPO men NOMBRE Tree Menu LINK http://www.sothink.com/

© 2009 Juan Menéndez Crespo

93

94

MBC - CMS

DESCRIPCION Sothink Tree Menu <HEAD> <script type="text/javascript" src="jvs/stlib.js"></script> </HEAD> <BODY> ......HTML HTML..... </BODY>

3.13.19 DynamicDrive collapse CODIGO animc TIPO lib NOMBRE Animate Collapse LINK http://www.dynamicdrive.com/ DESCRIPCION Libreria para animación Colapse de un area. Recopilada de DynamicDrive <HEAD> <script type="text/javascript" src="jvs/animatedcollapse.js"></script> </HEAD> <BODY> ......HTML HTML..... </BODY>

3.13.20 Adobe Flash AC CODIGO acc TIPO LIB NOMBRE Adobe Flash AC LINK http://www.adobe.com DESCRIPCION Usos compatibles de Flash para navegadores <HEAD> <script src="jvs/AC_RunActiveContent.js" type="text/javascript"></script> © 2009 Juan Menéndez Crespo

Datos web

</HEAD> <BODY> ......HTML HTML..... </BODY>

3.13.21 MBC Corners CODIGO corne TIPO LIB NOMBRE MBC-Corners LINK DESCRIPCION Redondea las cajas/areas/elementos que se deseen en la web <HEAD> <script type="text/javascript" src="fwk/mbcc/mbcc.js"></script> </HEAD> <BODY> ......HTML HTML..... </BODY>

3.13.22 Nifty Corner CODIGO nifty TIPO LIB NOMBRE Nifty Corner LINK http://www.html.it/articoli/niftycube/index.html DESCRIPCION Redondea las cajas/areas/elementos que se deseen en la web <HEAD> <script type="text/javascript" src="niftycube.js"></script> < script type="text/javascript"> window.onload=function(){ Nifty("div#box","big"); } © 2009 Juan Menéndez Crespo

95

96

MBC - CMS

</script> </HEAD> <BODY> ......HTML HTML..... </BODY>

3.13.23 MooTabs CODIGO motab TIPO fwk NOMBRE MooTabs LINK http://www.silverscripting.com/mootabs DESCRIPCION Creación de TABS con MooTools <HEAD> <script src="fwk/mootools/mootabs1.2.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="fwk/mootools/mootabs1.2.css" type="text/css" media="screen" title="no title" charset="utf-8" /> </HEAD> <BODY> ......HTML HTML..... </BODY>

3.13.24 SPRY MENU CODIGO sprym TIPO lib NOMBRE SPRY Menu LINK http://www.adobe.com DESCRIPCION Libreria escrita y agregada a Dreamweaver CS y posteriores <HEAD> <link rel="stylesheet" type="text/css" href="SpryMenuBarVertical.css" > <style> © 2009 Juan Menéndez Crespo

Datos web

97

/* Spry Menu Bar */ /* Outermost menu container has no borders on all sides */ ul.MenuBarVertical { width: 180px; border: 0px; } ul.MenuBarVertical li { width: 180px; } ul.MenuBarVertical ul { width: 180px; } ul.MenuBarVertical ul li { width: 180px; } /* Menu items are a block with padding and no text decoration */ ul.MenuBarVertical a { display: block; cursor: pointer; background-color: #D3D3D3; padding: 0.25em 0.50em; color: #000; text-decoration: none; } /* Menu items that have mouse over or focus have the following background and text color */ ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus { background-color: #33C; color: #FFF; } /* Menu items that are open with submenus are set to MenuBarItemHover with the following background and text color */ ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.

MenuBarVertical a.MenuBarSubmenuVisible { background-color: #33C; color: #FFF; } ul.MenuBarVertical a.MenuBarItemSubmenu { background-image: url(images/SpryMenuBarRight.gif); } /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarVertical a.MenuBarItemSubmenuHover { background-image: url(images/SpryMenuBarRightHover.gif); } </style> </HEAD> <BODY> <script type="text/javascript" src="js/SpryMenuBar.js"></script> ......HTML HTML..... Š 2009 Juan MenÊndez Crespo

98

MBC - CMS

</BODY>

3.13.25 Menu Image CODIGO mnimg TIPO LIB NOMBRE MenuImage LINK http://www.phatfusion.net/imagemenu/ DESCRIPCION Menu horizontal basado en imagenes con deslizantes <HEAD> <script type="text/javascript" src="fwk/mootools/imageMenu.js"></script> </HEAD> <BODY> ......HTML HTML..... </BODY>

3.13.26 Menu Mac CODIGO macmn TIPO men NOMBRE Mac Menu LINK http://www.ndesign-studio.com/demo/css-dock-menu/css-dock.html DESCRIPCION Menu realizado con jQuery y un interfaz adicional <HEAD> <script type="text/javascript" src="fwk/jquery/jquery-1.3.2.js"></script> <script type="text/javascript" src="fwk/jquery/interface.js"></script> <link href="css/macmenu.css" rel="stylesheet" type="text/css" /> </HEAD> <BODY> ......HTML HTML..... <script type="text/javascript"> $(document).ready( © 2009 Juan Menéndez Crespo

Datos web

function() { $('#dock2').Fisheye( { maxWidth: 60, items: 'a', itemsText: 'span', container: '.dock-container2', itemWidth: 40, proximity: 80, valign: 'top', alignment : 'left', halign : 'center' } ) } ); </script> </BODY>

3.14

Tablas globales

3.14.1 Datos

3.14.2 Web

Š 2009 Juan MenÊndez Crespo

99

100

MBC - CMS

3.14.3 Evento

3.14.4 Idiomas

3.15

Usuarios

© 2009 Juan Menéndez Crespo

Datos web

3.15.1 Niveles

© 2009 Juan Menéndez Crespo

101

102

MBC - CMS

3.16

Comunes En prácticamente todas las tablas de datos se han incorporado dos tablas de apoyo: Blog y Rating

© 2009 Juan Menéndez Crespo

Datos web

© 2009 Juan Menéndez Crespo

103

Top Level Intro This page is printed before a new top-level chapter starts

Part

IV

Campos Comunes

4

105

Campos Comunes En la mayor parte de la bases de datos nos vamos a encontrar una serie de campos que tienen comportamientos y usos idénticos, a continuación detallamos cada uno de ellos y su uso habitual.

4.1

IDX

Número de índice principal. También puede ser visualizado como INDICE. Corresponde normalmente al identificador único de tablas relacionadas con otras consideradas como principales.

En caso de visualizar IDX e INDICE en la misma ficha será el primero el principal y único, siendo el segundo el relacionado con la cabecera o tabla principal.

4.2

ALTA

Fecha en la que se da de alta el registro.

Dispone de un asistente de selección de fechas en el lateral del campo.

4.3

CADUCA

Fecha en la que caduca el contenido y no será visible en los patrones HOME. Dispone de un asistente de selección de fechas en el lateral del campo.

4.4

ACTUALIZA Fecha en la que se actualiza el registro o su contenido.

Dispone de un asistente de selección de fechas en el lateral del campo.

4.5

ACTIVO

Establece el registro como disponible para visualizarse en la web.

Es muy común la utilización de este campo para cargar provisionalmente información que no se desea ver en la web.

© 2009 Juan Menéndez Crespo

106

4.6

MBC - CMS

PRINCIPAL

Establece el registro como visible para los patrones HOME, es decir para aquellos patrones que utilizan solo los registros principales.

4.7

IDIOMA

Desplegable de idioma, normalmente este campo se visualiza en los detalles de las tablas ya que fija que idiomas van a visualizar el contenido escrito.

4.8

DATOS

Agrupación de datos cargados, es un campo solo disponible en el bloque de noticias.

Su principal utilidad es poder agrupar todo tipo de informaciones en la misma tabla y agruparla por el dato contenido.

4.9

WEB

Selección de las plantillas web que dispondrán de la información del registro.

Los valores que se muestran se administran desde la Tabla Web

4.10

EVENTO

Selección de las subzonas web (denominadas eventos) que dispondrán de la información del registro.

Los valores que se muestran se administran desde la Tabla Eventos

4.11

ORDEN

Campo numérico que establece una opción de ordenación (ascendente o descendente) de la colección de registros recopilados para el patrón que se seleccione.

© 2009 Juan Menéndez Crespo

Campos Comunes

4.12

107

PRIVADO

Establece que el registro solo puede ser visible para los usuarios registrados, la información que se queda oculta será la descripción o texto ampliado.

4.13

TRAMO

Tercer nivel de agrupación para la tabla de noticias.

Utilice un literal de dos o mas letras para asignar tramos, la única precaución es que no contenga textos de un tramo otro.

Ejemplos que darían un filtro erróneo Ejemplo: tramo1=ne tramo2=news tramo3=new Corregido: Ejemplo: tramo1=nw tramo2=news tramo3=nvw En este caso evitamos que el más corto (nw) no sea igual a los inicios de los otros, de la misma forma el siguiente (tramo3=nvw) también evitamos que se idenfique con el resto.

4.14

VISITAS

Número de veces que ha sido solicitado el registro en curso.

4.15

RSS

Establece que sea visible en la RSS el registro en curso.

4.16

USUARIO

Usuario asociado al registro para limitar las opciones de actualización y modificación de contenidos.

Debe corresponder al número del usuario de mínimo nivel al que asociamos el registro. Este campo filtra permisos para poder acceder a los contenidos.

4.17

RATES

Valoraciones o votaciones recibidas en el registro. Es un número entero. © 2009 Juan Menéndez Crespo

108

4.18

MBC - CMS

No.RATES

Número total de votaciones recibidas. (Número entero)

4.19

RATES Val.

Valor total de los votos.

La división de este valor entre el No.Rates nos dará el Rating medio o valoración, es el dato que se muestra si activamos rating (rat) en la visualización de la ficha.

4.20

BLOG

Establece "blog" para la información que se muestra, es decir abre la opción de crear comentarios por el usuario que navega la página.

4.21

ESTILO

Asignación CSS adicional para el registro en curso en su caja.

4.22

TITULO

Literal principal de la información que se muestra, normalmente se utilizan etiquetas H1 a H6 para mejorar el aspecto y ayudar al indexado de la página web.

4.23

DESCRIPCION

Breve descripción de la información que posteriormente se detalla y amplia al navegante.

4.24

DETALLE

© 2009 Juan Menéndez Crespo

Campos Comunes

109

Texto completo y ampliado de la información inicial.

4.25

RSS ROTULO

Rótulo a mostrar en las RSS si están activas. Debe ser un literal de texto y evitar caracteres como & ' (apostrofe) o similares, que no sean aceptados por la norma RSS.

4.26

RSS TITULO

Título equivalente al título genérico para la web, deben ser evitados los caracteres no compatibles con los lectores RSS y en todo caso utilizar la norma ISO/UTF correspondiente.

4.27

RSS DESCRIPCION

Texto breve descriptivo equivalente a la descripción para la web, deben ser evitados los caracteres no compatibles con los lectores RSS y en todo caso utilizar la norma ISO/UTF correspondiente.

© 2009 Juan Menéndez Crespo

Top Level Intro This page is printed before a new top-level chapter starts

Part

V

Patrones

5

111

Patrones Un patrón de datos es una plantilla configurable que le permite crear de forma rápida un conjunto de información que se mostrará en la web.

Básicamente existen dos tipos de patrones, los orientados a datos específicos (como noticias, libros, links, etc...) o los genéricos de usos (como menú con sus versiones, webscroll, etc...)

La norma que siguen la mayor parte de los patrones específicos es: patronLISTA : listado completo de datos o bien específico de un elemento que se identifica con ID patronHLP : desplegables laterales de ayuda y selección agrupada o detallada de registros

5.1

Noticias Es el patrón más versátil y abierto, su destino es poder presentar todo tipo de datos agrupados de diferentes formas.

PARAMETR O

VALOR

DESCRIPCIÓN

tramo navtype

ASP/AJAX/ SHBOX

tipo de navegación

shwidth

ancho de la caja de sombras

shheight

alto de la caja de sombras

addhead navlist

full/list

Tipo de lista de datos que deseamos visualizar

rotulo idvar userotulo destajax spacerhead

0

spacerfoot

0

stylespacerh 0 ead stylespacerf 0 oot shfootshow

0/1

Mostrar el pie en la caja de sombras

0/1

Establece si debe ser mostrado el botón de más info

order masinfo

© 2009 Juan Menéndez Crespo

112

MBC - CMS

PARAMETR O

VALOR

DESCRIPCIÓN

5.2

Uniforme

5.3

Web Contenidos Varios

PARAMETR O

VALOR

DESCRIPCIÓN

rotulo

texto

Establece el literal que usará para traducir de la tabla Traducción

id

número

Identificador único del DOM para gestión de cajas

addhead

1/0

Activar o desactivar la cabecera del bloque de contenidos varios

idx

número

Identificador exclusivo del registro que se desea recuperar de la base de datos

top

número

Número de registros que deseamos se recuperen (creación de listas de valores web)

zona

texto

Parámetro en desarrollo en este versión no opera

show

head/deta Literal que establece la parte que deseamos ver, por defecto deta

masinfo

0/1

Muestra el botón de más información 0=no 1=si

zonadest

texto

Indica la zona de destino en el caso de disponer de links o información externa

mixzona

0/1

Se utiliza en los casos de uso de varias cajas con WebVarios que disponen de diferentes ID y además pueden estar con una lista de elementos que precisa un valor ID

5.4

Encuestas

5.5

Bd-Forms El patrón Bd-Forms pertenece a una utilidad externa agregada a MBC que le permitirá generar todo tipo de formularios y utilidades basadas en formularios para su página web.

Dada la extensión de la documentación de este patrón se ha dispuesto un manual independiente al que © 2009 Juan Menéndez Crespo

Patrones

113

podrá acceder desde http://www.mastercafe.com/manualforms Loa parámetros necesarios para su uso es idf=N donde N es el número del formulario que se desea presentar.

5.6

Menu Horizontal Patron menuhori Menú horizontal que dispone de varios tipo de modalidad de presentación: Javascript, CSS. Notas importantes: no use este menú con subniveles si dispone de elementos flash en las zonas del menú ya que este quedará bajo la imagen flash y no será utilizable. No use el formato javascript para páginas navegables en dispositivos móviles ya que la mayoría de estos desactivan java.

PARAMET RO

VALOR

DEFAUL DESCRIPCIÓN T

order

Orden en el que salen los elementos en el menú

top

Número de elementos máximos a mostrar

id

Número de identificador para el DOM

nivel

Nivel desde el que se inicia el menú en varios niveles

colorsombr amenu

Color de la Sombra del menú

colorfondo menu

Color del fondo del menú

colorborde menu

Color del borde del menú

colormouse out

Color del elemento al no tener el ratón

colormouse over

Color del elemento al tener el ratón

colorborder mouseout

Color borde elemento menu al no tener el raton sobre

colorborder mouseover colortextou t colortextov er menualinea do menuancho orientacion posicmenu transparent disablemwi dth © 2009 Juan Menéndez Crespo

114

MBC - CMS

PARAMET VALOR RO

DEFAUL DESCRIPCIÓN T

fontheight

14pt

Tamaño de la fuente a utilizar, es necesario identificar si son em pt o px

fonttype

Arial, Tahoma

Nombre de la tipografia a utilizar en el menú

Ejemplos de menú

Parámetros de configuración del menú

5.7

MenuCSS Patrón MenuCSS Sistema de menús basado en CSS (Hoja de estilos) totalmente visible para los spiders, su construcción se basa en una caja que denomina "botonera" y los elementos insertados en una lista desordenada (<ul>).

PARÁME VALO DEFA TRO R ULT 1

DESCRIPCIÓN

level

Númer o

Establece el nivel desde el que debe comenzar a crear el menú (alternativo parámetro = nivel)

top

Númer 100 Número de elementos del menú que deseamos mostrar o percen t

botstyle

texto CSS

classul

Texto

bot

depth

Númer o

1

Profundidad de niveles que se crean (máximo 3)

depend

Númer o

0

Indica de que menú principal depende este (campo dependiente)

Literal opción de estilo personalizable para la botonera Nombre del elemento .class definido en la hoja de estilos

Ejemplos de aspecto:

© 2009 Juan Menéndez Crespo

Patrones

115

Ejemplo de parámetros para un menú básico

level=1|classul=bot Asume un menú desde el nivel 1, usa la clase bot, el resto de valores por defecto establecen dependencia del elemento 0 (el primero de un menú) level=2|classul=bot|depend=484 Asume un menú desde el nivel 2, usa la clase bot para gestionar el aspecto del botón y solo visible para la dependencia del elemento 484 Definición del estilo para el menú #botonera{ height:25px; background-color:#000000; color:#ffffff; float:right; } #bot { margin: 0px 0 0 0px; padding:0; float:left; border:1px 1px 0px 0px solid #000000; } #bot li{ float: left; list-style: none; } #bot li a{ color: #ffffff; background-image:url(images/fb_gr.jpg); background-repeat:repeat-x; background-position:top left; margin-left: 1px; padding-top:7px; display:block; height:25px; width:110px; Text-align:center; Text-decoration:none; } #bot li a:hover{ background-image:url(images/fb_az.jpg); background-repeat:repeat-x; background-position:top left; color: #ffffff; } #bot li #este { background-image:url(images/fb_az.jpg); background-repeat:repeat-x; background-position:top left; color: #000000; font-weight:bold; }

© 2009 Juan Menéndez Crespo

116

MBC - CMS

Recuerde que en el caso de personalizar el menú es necesario que modifique las imágenes y estas sean subidas a la carpeta correspondiente para estar disponibles.

5.8

MenuImage Patrón MenuImage Este patrón está basado en la utilidad creada por Phatfusion como ImageMenu Sistema de menús basado en imágenes con desplazamientos laterales, totalmente visible para los spiders, su construcción se basa en una caja que denomina "imagemenu" y los elementos insertados en una lista desordenada (<ul>).

PARÁM VAL DEFAUL ETRO OR T 1

DESCRIPCIÓN

level

Núm ero

Establece el nivel desde el que debe comenzar a crear el menú (alternativo parámetro = nivel)

top

Núm ero

skin

texto imagem Establece la hoja de estilos que personaliza el aspecto (tamaño, separación, CSS enu.css bordes, etc)

100 Número de elementos del menú que deseamos mostrar percent

menuwi Núm dth ero

310

menubo Núm rder ero

2

Cantidad de pixels que separa la imagen para ser mostrada en el evento MouseOver Número de pixels para el borde del elemento que se muestra en el evento Mouse Over

Este menú precisa de dos librerías del Framework: Mootools 1.11 o Mootools 1.2 e ImageMenu (recuerde que es importante el orden en el que se cargan las librerías y siempre debe estar Mootools antes que ImageMenu).

Se han detectado algunos problemas de compatibilidad en Mootools 1.2 para FF3 y Opera en el ImageMenu, siendo correcto el funcionamiento en IE6, IE7 e IE8. Es importante que solo seleccione la versión 1.11 para evitar este problema de compatibilidad.

Ejemplos de aspecto:

© 2009 Juan Menéndez Crespo

Patrones

117

Ejemplo de parámetros para un menú básico

level=1|skin=css/miimage Asume un menú desde el nivel 1, usa la hoja de estilos miimage.css situada en su carpeta images/css (se asume siempre images/ como carpeta inicial del usuario) Definición del estilo para el menú .imageMenu { position: relative; /* relativo a la caja inicial */ width: 900px; /* ancho del menú visible total_elementos X ancho_elemento + borde */ height: 100px; /* alto del menú visible */ overflow: hidden; /* ocultar lo que sobra */ } .imageMenu ul { list-style: none; /* desactivar estilos para la lista */ margin: 0px; /* sin margen en la caja */ display: block; /* juntar en bloques los elementos */ height: 100px; /* alto predefinido */ width: 1000px; /* ancho predefinido */ } .imageMenu ul li { float: left; /* cada elemento a la izquierda */ } .imageMenu ul li a { text-indent: -1000px; /* identacion del texto que no se ve */ background:#FFFFFF none repeat scroll 0%; /* fondo generico de los elementos */ border-right: 2px solid #fff; /* borde por la derecha de 2px blanco */ cursor:pointer; /* activar el cursor del dedo */ display:block; /* juntar en bloque cada elemento */ overflow:hidden; /* ocultar lo que sobra */ width:98px; /* tamaño de cada pestaña al iniciar */ height: 100px; /* alto de cada pestaña */ } .clear { clear: both; /* limpiar la tabla generada y restablecer */ }

Recuerde que en el caso de personalizar el menú es necesario que se suba al servidor a la ruta indicada.

© 2009 Juan Menéndez Crespo

118

5.9

MBC - CMS

Menu Macintosh Patrón MenuMac También conocido como Menu-Eye o FishEye se basa en el uso de la librería jQuery con un interface adicional desarrollado bajo licencia MIT/GPL por Stefan Petre http://interface.eyecon.ro PARÁME VALO DEFA TRO R ULT 1

DESCRIPCIÓN

level

Númer o

Establece el nivel desde el que debe comenzar a crear el menú (alternativo parámetro = nivel)

top

Númer 100 Número de elementos del menú que deseamos mostrar o percen t

order

Texto

orden Campo por el que vamos a ordenar la lista, por defecto el propio campo ASC Orden ascendente fija la lista

Los datos están basados en la Tabla Menú de Config MBC, no es necesario el uso de los campos: ANCHO, ALTO, DEPENDIENTE, ESTILO. El resto de campos los usaremos según están definidos en la estructura de Datos Web / Menu Notas: El campo TEXTO debe contener el elemento imagen que se activa al usar el ratón, use formato html para establecer dicho elemento, ejemplo: <img src=""images/video.png"" alt=""video"" /> El campo STR-DECODE será usado para el texto adicional que se visualiza sobre la imagen al hacer el efecto Eye.

Sin el ratón, estado de espera

Con el ratón sobre el botón portfolio, la caja se amplia tanto horizontal como verticalmente

Activación del Menú Macintosh, datos básicos: -Active en las zonas de uso el MenuMac (Config MBC / Contenedor / Zonas) recuerde que si activa este menú no debe utilizar jQuery en otras versiones ya que duplicaría la librería.

-En Frameworks debe disponer del siguiente código: <HEAD> <script type="text/javascript" src="fwk/jquery/jquery-1.3.2.js"></script> <script type="text/javascript" src="fwk/jquery/interface.js"></script> <link href="css/macmenu.css" rel="stylesheet" type="text/css" />

© 2009 Juan Menéndez Crespo

Patrones

119

</BODY> <script type="text/javascript"> $(document).ready( function() { $('#dock2').Fisheye( { maxWidth: 60, items: 'a', itemsText: 'span', container: '.dock-container2', itemWidth: 40, proximity: 80, alignment : 'left', valign: 'bottom', halign : 'center' } ) } ); </script>

Del script inferior del /BODY puede alterar estos datos para conseguir otros efectos:

maxWidth : corresponde al máximo ancho en pixel para los elementos itemWidth: ancho de los elementos del menú proximity: distancia en pixel que afectan al comportamiento del efecto Eye valign : bottom o top según sea abajo o arriba el alineado y efecto que buscamos de crecimiento halign : left, center o right según sea izquierda, centrado o derecha el alineado total del menú

5.10

Datos Patrón DATOSLISTA Es el patrón basado en los datos de la tabla noticias con un uso del tipo multipropósito. El objetivo del patrón es facilitar todo tipo de aspectos y contenidos en formato de lista, además incorporar las funciones adicionales de tipos de navegación y accesibilidad.

PARÁMETR VALOR O bd

Texto

ppal

DEFAULT

DESCRIPCIÓN

zz

Grupo de datos almacenados en la tabla, por defecto zz será cualquiera disponible

Número

0

Indica si solo son seleccionados los registros principales o no (1=si 0=no)

expired

Número

1

Indica si los elementos expirados (1=si 0=no)

idd

Número

0

Número del registro de datos a mostrar

order

Texto

ctrlalta desc, ctrlorden asc

Orden por defecto para la lista a mostrar

blog

Número

0

Establece si debe ser mostrado el formulario de Blog del dato (solo en formato ID única) (1=si 0=no)

privado

Número

0

Habilitar el modo protegido para usuarios registrados (1=si 0=no)

© 2009 Juan Menéndez Crespo

120

MBC - CMS

PARÁMETR VALOR O

DEFAULT

DESCRIPCIÓN

tema

Número

0

Número de tema asociado (agrupación secundaria de datos)

addhead

Número

0

Muestra un encabezado para el bloque de lista de datos (1=si 0=no)

addfoot

Número

0

Muestra el pie de cada elemento de la lista (1=si 0=no)

pager

Número

1

Muestra el paginado de la lista (1=si 0=no)

spacerhead

Número

0

Agrega un espaciado entre la cabecera y los detalles (1=si 0=no)

stylespacerh Texto ead

Estilo para el espaciado basado en CSS

repag

Número

5

Número de registros por página en lista

rellink

Texto

Agrega a los links de navegación el elemento rel="libreria" permitiendo usar diferentes métodos de cajas de sombras o bien otras librerías externas. Ejem: rellink=shadowbox. Es necesario su uso junto al navtype si usa SHBOX (cajas de sombras).

usrclase o class

Texto

Establece la propiedad class="texto" para los links internos (método alternativo de uso de librerías como HighSlide, Thickbox, etc.)

navtype

Texto

asp

Método de navegación en la lista (asp shbox ajax acc tab) ASP es el método tradicional de petición de datos y refresco completo de pantalla. SHBOX abre una ventana con javascript y muestra el contenido solicitado en ella. AJAX realiza una peticion XML al servidor y retorna el contenido a la caja ajax en la ubicación que se defina. ACC muestra el primer campo como título del acordeón y el resto como datos contenidos en la pestaña. TAB muestra el primer campo como cabecera del tabulador y el resto de campos en la caja de contenido. En los casos de TAB y ACC es necesaria la activación de las librerias jQuery y jQueryUI, para SHBOX es necesaria la librería ShadowBox o en su lugar una equivalente (la que sea utilizada).

navlink

Texto

tit

Establece los elementos de la lista que disponen de link al detalle del elemento (lista por ID), su uso es idéntico a navlist variando el código del parámetro

navlist

Texto

tit-des-det

Establece los elementos a ser mostrados y el orden de los mismos. Los códigos actuales son: cdg (indice de elemento), alta (fecha de alta), rot (rótulo), tit (título), des (descripcion), det (detalle), vis (visitas), rat (Valoracion), fot (Imagen pequeña), fo1 (imagen ampliada), tem (tema de la información), usu (autor), com (comentarios), imp (imprimir), env (enviar), sha (marcador social), ajx (destino contenido Ajax), mas (botón de más información), blog (formulario de Blog para el elemento), blc (comentarios insertados en el blog). Recuerde que pese a mostrar los campos, estos se pueden ocultar desde la hoja de estilos de skin.

navlistid

Texto

tit-det

tramo

Texto

zz

Reutilización de navlist cuando se utiliza un filtro de ID o IDD único. Establece la información a mostrar de un único elemento de la lista. En este formato de presentación los links solo son utilizables como elementos incluidos en el texto correspondiente ya que se entiende que es una página final de información.

Indica el tramo de información que se desea seleccionar

© 2009 Juan Menéndez Crespo

Patrones

121

PARÁMETR VALOR O

DEFAULT

DESCRIPCIÓN

actionbgover Texto #HEX

#FF00FF

Número de color para el fondo de la caja en el evento mouseover

actionbgout

Texto #HEX

#00FF00

Número de color para el fondo de la caja en el evento mouseout

top

Número 100 percent Número de elementos a ser seleccionados en la consulta, muy útil para hacer listas

idvar

Texto

rcorner

Número

skin

Texto

skindefault Establece la hoja de estilos con la que se personalizará el estilo y aspecto de la lista de datos. Recuerde que esta personalización quedará siempre en la carpeta de images y bajo la ruta que desee. Es necesario crear el archivo o bien modificar el actual establecido.

skinid

Texto

Establece la hoja de estilos para mostrar un único resultado de la lista. Dispone del mismo uso y formato que SKIN

back

Número

dateformat

Texto

resizer

Número

0

resfoto

Número

100

Ancho por defecto en el resize de foto. Utilice solo números el valor se asume como pixels

resfoto1

Número

300

Ancho por defecto en el resize de foto. Utilice solo número el valor se asume como pixels

blog

Número

0

Muestra el formulario de Blog para el elemento mostrado. El número corresponde al formulario que será mostrado

blogcom

Número

0

Muestra el detalle de entradas en el blog, el número indica la cantidad de registros por página a mostrar

Establece un literal adicional a los contenidos de la caja para los casos de utilizar el mismo patrón varias veces en la misma zona.

0

0

Utilizar la librería MBC-Corners para redondear las areas div. Es necesario activar la libreria de MBC-Corner para que se pueda utilizar esta función.

Muestra el link de Volver o Página Atrás (personalizado en idiomas) solo opera en el formato de ID, no en el formato de lista.

dd/mm/yyyy Formato en el que se presentará la fecha de alta si esta se ha seleccionado en navlist Activar el ajuste de tamaño automático para las imágenes a mostrar

Ejemplos de configuración y aspecto final obtenido en la lista Desde la hoja de estilos principal, el usuario puede alterar los estilos predefinidos a base de agregar sus nuevos datos.

Estilos personalizables desde HEADCLASS en la Configuración, actual configuración en la hoja de estilos classes.css .rotulo { width:100%;height:auto;float:left;padding-top:3px;padding-bottom:3px;padding-left:0px;paddingright:0px;margin-left:0px;margin-right:0px;position:relative;} © 2009 Juan Menéndez Crespo

122

MBC - CMS

.rotulointerior {padding-left:4px;position:relative;} .pielista{width:auto;height:auto;text-align:right;padding-right:10px;padding-top:4px;float:right;position: relative;left:0px;margin-right:0px;} .pielista a{text-decoration:none;} Personalización y skins (aspecto) para la lista de elementos La lista se basa en una sucesión de cajas principales que denominamos areacn y que a su vez contienen las cajas correspondientes a: rotulo, título, detalle, descripción, tema, visitas, rates, foto, foto1, fecha. Su personalización se realiza en una hoja denominada skindefault.css que se encuentra en la carpeta de images/userfiles Las clases utilizadas son: Clase Descripción .arbcdg Muestra el código o ID de la información .arbalta Muestra la fecha de alta de la información .

Muestra el rótulo personalizado arbrotul o .arbtitle Muestra el título de la noticia .arbdeta Muestra los detalles o texto extendido .

Muestra la descripción o texto abreviado arbdesc .arbvisit Muestra el número de visitas recibidas .

Muestra la valoración que se ha realizado a la información arbrates .arbfoto Muestra la foto o imagen establecida en el campo foto (habitualmente la versión thumbnail o reducida) .

Muestra la foto o imagen establecida en el campo foto1 (habitualmente la versión ampliada) arbfoto1 .

Muestra el tema asociado a la información arbtema .

Muestra el autor recogiendo los datos desde la base de usuarios arbautor .

Muestra el número de comentarios realizados arbcom ment .arbprint Muestra el acceso a versión para imprimir de la información .

Muestra el acceso al formulario para enviar a un amigo arbmail .

Muestra el link o javascript asociado por la utilidad de marcador social arbshar e .

Muestra la fecha en la que se ha actualizado el contenido arbfech a .arbajax Muestra la caja destino en los casos de usar navegación AJAX .

Muestra el botón de mas info o el elemento gráfico definido a tal efecto arbmasi © 2009 Juan Menéndez Crespo

Patrones

123

Clase Descripción nfo .

Muestra los encabezados de los acordeones con el aspecto que se defina arbacco r

Las mismas denominaciones de clase pueden precedidas de id se convierten en las definiciones de los mismos elementos en formato elemento único.

Puede realizar modificaciones en dicho archivo, si bien se recomienda utilizar una copia del mismo y con otro nombre se indique en la configuración de MBC para su uso.

Recomendamos revise a fondo las posibilidades que se demuestran en los distintos ejemplos que se acompañan en los siguientes apartados, así como el uso de cada parámetro, las posibilidades son realmente extensas y será la imaginación el límite de estas.

Si usted es desarrollador y ha creado algún skin que desea compartir con el resto de la comunidad MBC use el foro de discusión para aportarlo.

5.10.1 Ejemplos parámetros Con el fin de facilitar el uso de los parámetros se ha creado este capítulo donde pondremos cada uno con los posibles aspectos y operaciones que se producen.

5.10.2 Ejemplo Simple 5.10.3 Ejemplo Extendido 5.10.4 Ejemplo Skin Creamos estos elementos gráficos

rotsqldatos.png

botsqldatos.png

bgsqldatos.png

btnsqldatos.png

© 2009 Juan Menéndez Crespo

124

MBC - CMS

Definimos la hoja de estilos para crear el skin del patrón datoslista sksql.css será el nombre con el que grabamos el archivo .areacn { width:237px; height:300px; float:left; display:block; position:relative; background-color:#1a1a1a; color:#fff; margin-right:4px; background:url(bgsqldatos.png) repeat-y top left; } .areacn a{ color:#0F0;} .areacn a:link{ color:#0F0;} .areacn a:visited{ color:#0F0;} .areacn .arbrotulo{ display:none; } .areacn .arbalta { display:none; } .areacn .arbtitle { font:Arial, Helvetica, sans-serif normal; font-size:12px; height:50px; background:url(rotsqldatos.png) top left no-repeat; color:#0F0; padding:15px 4px 0px 4px; } .areacn .arbdeta { padding:10px; font-size:10px; color:#FFF; background:inherit; } .areacn .arbdesc { padding:10px; font-size:10px; color:#FFF; background:inherit; } .areacn .arbtema { display:none; } .areacn .arbvisit { display:none; } .areacn .arbrates { display:none; } .areacn .arbfoto { display:none; } .areacn .arbfoto1{ display:none; }

© 2009 Juan Menéndez Crespo

Patrones

.areacn .arbfecha { display:none; } .areacn .arbmasinfo { display:block; position:absolute; bottom:30px; left:2px; background:url(btnsqldatos.png) width:230px; height:30px; text-align:center; color:#FFF; font-size:10px; } .areacn .arbpie { display:block; position:absolute; bottom:0px; left:0px; background:url(botsqldatos.png) width:237px; height:25px; text-align:center; color:#FFF; font-size:10px; } .toggler {cursor:pointer} .idarbrotulo{ } .idarbtitle { } .idarbdeta { } .idarbdesc { } .idarbtema { } .idarbvisit { } .idarbrates { } .idarbfoto { } .idarbfoto1{ } .idarbfecha { } .idarbalta { } .idarbmasinfo { }

no-repeat

top

left;

no-repeat

top

left;

Procedemos a subir los elementos dentro de una carpeta que llamamos css

Š 2009 Juan MenÊndez Crespo

125

126

MBC - CMS

Configuramos en el contenedor el patrón con la información que se desea mostrar

en este caso vamos a seleccionar los datos cargados como sq, no deseamos el paginado inferior, la navegación será ShadowBox, los links irán en Titulo y Mas Info, los elementos a mostrar serán Titulo, descripción, Mas Info y pie, mostramos hasta 4 elementos, el skin se llama sksql y lo hemos subido a la carpeta css (recuerde que no debe poner la extensión .css)

Esta es la lista de elementos que vamos a mostrar

5.10.5 Ejemplos Lista 5.10.6 Ejemplos Tabs

5.11

Lector RSS Patrón LectorRSS Gestor de lectura de archivos y páginas con formato XML que le permiten integrar contenidos de otras páginas en la suya de forma automática. Existen otros métodos de integración de lectores RSS a través de mashups de Google y otros proveedores, consulte la documentación de ejemplos de Mash-Up para ver otras alternativas a este patrón PARÁME VALO DEFA TRO R ULT url

Númer o

items

texto

DESCRIPCIÓN Indica la dirección web de donde serán extraidos los datos en formato XML, es necesaria la URL completa

5

Número de elementos que serán recopilados y mostrados © 2009 Juan Menéndez Crespo

Patrones

PARÁME VALO DEFA TRO R ULT

127

DESCRIPCIÓN

CSS rotulo

Texto

Literal alternativo que se recupera del traductor para este lector RSS (necesita establecer un nombre e idioma en Traductor)

colapse

Númer o

child

Texto

0,1,2,3 Items que son recopilados del origen para establecer Titulo, Link, Descripcion, Fecha (en este orden), caso de ser variado necesita asignar todos los valores, tenga en cuenta que el primer valor comienza en 0, de esta forma los hijos (child) que sean encontrados en la RSS se recopilan en orden y son mostrados como necesitemos

target

Texto

_blank Destino del vínculo de las RSS, se recomienda utilizar _blank para abrir nuevas ventanas ya que suelen ser contenidos externos a su web

1

Habilita o deshabilita el colapso de la caja para mostrar u ocultar con un click en el rótulo

Personalización de aspecto: En la hoja de estilos classes.css se han establecido valores por defecto para cada uno de los elementos, puede alterar el aspecto personalizando la hoja de estilos basándose en este modelo /* lectores RSS mostrar sus contenidos */ .titulo_rss a{ font: bold 13px "Trebuchet MS", Verdana, Arial; color: #676D46; text-decoration:none; display:block; margin-top:5px; } .titulo_rss a:hover{ color: #666; } .descripcion_rss { font: 11px Verdana, Arial, Helvetica, sans-serif; color: #888; display:block; margin-top:5px; margin-bottom:5px; } .fecha_rss { font: 10px "Lucida Sans Unicode", Verdana, Arial, Georgia; color: #CC6633; }

5.12

Agenda Recupera la información de la tabla de agenda para mostrarse en formato de lista Dispone de varios patrones de apoyo para mostrar los detalles y filtrar datos de la agenda en pantalla.

© 2009 Juan Menéndez Crespo

128

5.13

MBC - CMS

Galeria Generador de galerías multimedia.

Se apoya en el framework de shadowbox, por lo que debe ser activado para la zona correspondiente donde se muestra.

PARÁME VALO DEFA TRO R ULT addhead

Númer o

order

texto CSS

ctrlord Campo que se usará para ordenar los registros seleccionados, por defecto en el campo de orden

top

Texto

100 Número de elementos que se mostrarán de la selección de archivos. Debe PERC indicarse un número o bien dejar el valor por defecto para todos ENT

rotulo

Texto

Indica el literal se recupera de TRADUCTOR para mostrar en el rótulo de la galería según sea el idioma seleccionado

id

Texto

Fuerza un número específico para el control del DOM, por defecto usa el propio de la caja definido por BOXid

clave

Texto

Literal por el que vamos a filtrar los registros en el campo Clave siempre que esté contenido el texto que se indica

tema

Númer o

Establece un filtro por temas según la lista disponible. Se puede utilizar alternativamente un galtheme=NN como parámetro en la URL para entrar filtrando directamente

tipo

Texto

Filtro de tipo de imagen, tradicionalmente se utiliza i=imagen v=video p=podcast t=powerpoint a=audio, no obstante puede utilizar las letras que se deseen para este campo. Use t=texto externo, para insertar contenido en la galería basado en URL completas.

control

Númer o

gallery

Texto

hlptheme Númer o

0

DESCRIPCIÓN

0

Establece si se desea mostrar la cabecera de la galería. Valores disponibles 1=Si 0=No

Activar el panel de control de película (ShowMovieControl) para shadowbox.

Valores disponibles 1=Si 0=No. Solo se recomienda en uso de archivo multimedia propios y no de reproductores externos como YouTube que ya lo incorporan. Los controles serán los propios del elemento a mostrar (wmv, qt, flv, etc...)

Literal opcional para agrupar elementos en una galería correlativa. De esta forma puede crear subgrupos dentro de una galería.

0

Activa la caja lateral de ayuda e información de la galería

hlptheme Númer pos o

Posición de la caja lateral de ayuda

hlptheme Númer width o

Ancho de la caja lateral de ayuda

thmheight Númer o

100

Alto del thumbnail o imagen reducida de la galería

thmwidth Númer o

100

Ancho del thumbnail o imagen reducida de la galería

aspjpeg

Númer o

0

Activar el uso de aspjpeg sobre los thumbnail para simplificar el uso de imágenes

group

Númer

0

Agrupar los elementos de la galería por temas, mostrando de forma

© 2009 Juan Menéndez Crespo

Patrones

PARÁME VALO DEFA TRO R ULT

129

DESCRIPCIÓN

o

automática rótulos por temas y separando los thumbnails o imágenes pequeñas

sbvars

Texto

Agrega los valores de opciones especiales a la caja de sombras emergentes. Véase la documentación de Shadowbox

style

Texto

Redefine los estilos preestablecidos para div=thumbnail como margin y padding o colores de fondo.

showtitle Númer o

0

Muestra el título de la imagen 0=No mostrar 1=Superior 2=Inferior

Muestra de galería con valores por defecto

aspjpeg=1|gallery=video|tipo=v|thmwidth=200|showtitle=2|style=margin: 0px 20px 10px 0px;color:#fff;

En este ejemplo hemos activado el uso de aspjpeg para el escalado de imágenes, usamos un gallery=video para dar continuidad de un video a otro automáticamente, tipo=v para filtrar solo videos, thmwidth=200 para cambiar el ancho de la imágenes de 100px original por defecto a 200px (el alto se reajusta automáticamente con aspjpeg), showtitle=2 nos muestra el Título de la imagen en la parte inferior, finalmente hemos variado la composición del area de cada elemento metiendo estilos con márgen por la derecha de 20px para separarlas entre ellas horizontalmente, 10px en vertical, y 0px para superior e izquierda, el color=#FFF nos permite visualizar el texto del título en blanco para el fondo actual. Si hubieramos querido cambiar el fondo se habría agregado el literal background-color:#0000FF en el caso de un azul.

Para la utilización de un encabezado en la galería podemos usar dos métodos: agregar un patrón de contenidos varios antes de la caja actual o activar el uso de addhead en el patrón de la galería. © 2009 Juan Menéndez Crespo

130

MBC - CMS

Ejemplo de dos tipos de rótulos, el superior corresponde al método de patrón de contenidos varios, el inferior al propio rótulo con un estilo de letra de un tono más claro.

Veamos como personalizar este rótulo en el caso de addhead=1 (activar el rótulo).

El rótulo se compone de: · un estilo que fijamos en el propio patrón como ESTILO ROTULO, en este caso se ha escrito: color: #03486d;font-size:large; · un literal de la tabla Traductor que por defecto buscamos como Galeria (formulario) Titulo (campo) en el idioma que corresponda, aqui también podremos escribir código html que se insertará y podrá dar nuevas propiedades al literal. · un literal de rotulo alternativo en los parámetros de la caja galería indicando rotulo=texto y donde texto será el literal equivalente a formulario (antes Galeria para formulario), de esta forma podremos tener varios textos de rótulo repartidos en varias galerías de nuestra web.

© 2009 Juan Menéndez Crespo

Top Level Intro This page is printed before a new top-level chapter starts

Part

VI

132

6

MBC - CMS

Ejemplos Estas son algunas de las páginas web que han sido realizadas con MBC en sus diferentes formatos. http://www.mastercafe.com Web corporativa que explica algunas soluciones y conceptos de MBC y sus modelos http://www.ubicacionatlantida.com Web portal documental con blog y proyectos agrupados, usa varios patrones. http://www.atriocoaching.com Web basada en MBC-SQL con dos columnas laterales con una central elástica http://www.mbc3c.com Plantilla de ejemplos de uso de cajas y contenidos, mashup, widget, etc... para MBC3c http://www.civilizacionluna.com Basada en la plantilla MBC3c usa un diseño basado en blanco y negro http://www.neozink.com Web multiportal y multidominio basada en MBC-SQL, usa alternativamente métodos de navegación ASP y SHBOX http://www.monumenta.info Web multiportal basada en MBC3c con uso masivo de galerias e inclusiones de Google Maps http://www.labuganvilla.es Web multiportal basada en MBC3c con doble sistema de menús http://www.vahercol.com Web corporativa basada en MBC3c http://www.escueladivertimento.com Web corporativa basada en MBC3c http://www.sonimedia.com Web portal basada en MBC-SQL con usos diversos de Forms http://www.mbcsql.com Web de ejemplos de usos de MBC-SQL y sus plantillas (previsto inicio de actividad Julio'09) Aglutinará todas las funcionalidades de la nueva versión de MBC con uso alternativo de MBC y SQL-Server.

© 2009 Juan Menéndez Crespo

Top Level Intro This page is printed before a new top-level chapter starts

Part

VII

134

7

MBC - CMS

Integración Una de las principales características de MBC es la posibilidad de fusionarse con todo tipo de elementos externos, este es el concepto de Mash-Up o remezcla.

Las posibilidades son ilimitadas desde este punto de vista, simplemente insertar el código fuente que necesitamos y ya dispondrá de esa función.

Estas son algunas de las mezclas que han sido probadas: De Google: RSS API Ajax Google RSS Dynamic Google Google Calendar Google Maps Google Earth You Tube Google Video Google Search Google Adsense Marcadores sociales: Addthis - Simple y muy estable, poco tamaño y carga rápida, aunque no es el más extendido Share This - El más extendido y versátil, permite todo tipo de personalización con su propia API Frameworks: YUI Yahoo User Interface - Sin dudas la más potente de las librerías, por desgracia no es la más fácil de utilizar Prototype - La más conocida y extendida, es habitual su uso en algunas utilidades web 2.0 Mootools - Personalmente creemos que es una excelente librería simple, potente, estable y de poco tamaño jQuery - Una excelente opción a Mootools cumple con las mismas especificaciones de potencia, estabilidad y poco tamaño Script.aculo.us - Librería que trabaja sobre todo con Prototype y muy utilizada para algunos efectos Utilidades: Sothink DHTML Menu - Generador de menús tipo Dynamic HTML Sothink Java Web Scroller - Generador de scroll lateral de elementos gráficos y/o textos Sothink Tree Menu - Generador de menús verticales javascript con todo tipo de efectos FckEditor RTE - Editor de texto enriquecido PagePeel - Efecto página de WebPiccasso.de Librerías para cajas de sombras: LightBox Sin dudas la primera y no por ello menos importante, estable y sencilla de utilizar ShadowBox La más potente y flexible, todo tipo de capacidades de inserción en la caja HighSlide La más configurable y posiblemente funcional de las librerías de sombras, su licencia no es gratuita en sitios comerciales LiteBox LeightBox Multibox Tinybox SmoothBox © 2009 Juan Menéndez Crespo

Integración

Pirobox ThickBox Facebox FancyBox Se han realizado pruebas con todo tipo de códigos generados en páginas como: Dynamic Drive

© 2009 Juan Menéndez Crespo

135

Top Level Intro This page is printed before a new top-level chapter starts

Part

VIII

Video Tutoriales

8

137

Video Tutoriales Canal de Video Tutoriales http://www.youtube.com/mastercafe Entendiendo el modelo de cajas http://www.youtube.com/watch?v=I2QerI2hcGc Crear menu web horizontal http://www.youtube.com/watch?v=mvoH3fnKIdQ Usando ASP Jpeg en MBC http://www.youtube.com/watch?v=6zUrzrHDuio Creando cajas elásticas http://www.youtube.com/watch?v=RXiKWZkpvjA Configurando metasentencias http://www.youtube.com/watch?v=_-7OUBVIgWM Ejemplos de menús web http://www.youtube.com/watch?v=wVgUktfFyD0 Creando una pagina web http://www.youtube.com/watch?v=xJjjOmlJy84 Usa nuestro reproductor de video personalizado en YouTube <object width="416" height="337"><param name="movie" value="http://www.youtube.com/cp/ vjVQa1PpcFPqYI2pQdkKAED_jv6NLcD2fbhYA-Fs9SA="></param><embed src="http://www.youtube. com/cp/vjVQa1PpcFPqYI2pQdkKAED_jv6NLcD2fbhYA-Fs9SA=" type="application/x-shockwave-flash" width="416" height="337"></embed></object>

© 2009 Juan Menéndez Crespo

138

MBC - CMS

Index

-NNavegar por el servidor

-A-

-R-

Adobe Flash 41 Anchor link 38

Rich Text Editor RTE 29

-BBrowse server 41 Buscar archivos en el servidor

-CCSS en MBC

41

29

-S41

Subida de archivos

41

-T20

Tabla

-E-

39

-U-

Editor 29 Editor texto enriquecido

Upload

41

29

-GGestion de archivos

41

-Iinsertar email 39 Insertar Flash 41 Insertar imágenes 31 Insertar links 34 Insertar tabla 39

-LLink de email 39 Links de ancla 38

-MMacromedia Flash

41

© 2009 Juan Menéndez Crespo

139

Endnotes 2... (after index)

© 2009 Juan Menéndez Crespo

Back Cover