Cómo agregar SCRIPTS a nuestras páginas.

Vamos a analizar como utilizar scripts prediseñados en nuestros proyectos con el Web Page Maker

Primero un breve repaso de algunas cosas..

Script / código; dentro de este ámbito de edición, creación o adaptación Web, un script o código es parcial o totalmente un programa de ejecución Web escrito, generalmente para ejecución en el servidor o utilizando macros del browser. Como todo programa Web, también puede incluir llamados a otros scripts o códigos que se encuentran en otros servidores Web y pueden actuar de diferente forma según el browser en que se ejecute o visualice.

Un script, por ejemplo, puede ser una parte de un programa que expone una porción de otro sitio Web. Por ejemplo, son muy comunes los scripts de contadores de visitas. En muchos sitios referentes al tema se ofrecen gratuitamente gran variedad de códigos para insertar en nuestras páginas y visualizar posteriormente cuando la misma se encuentre online, contadores de visitas. Pero claro, cuando el visitante esta en nuestra página y visualiza el contador de visitas tiene la posibilidad de clikear en él y ser redireccionado a la página generadora del contador, casi nada

es gratuito y de alguna manera siempre estas cosas terminan haciendo publicidad para otros sitios. Hay maneras de evitar que suceda eso, por ejemplo creando un recuadro sobre la caja donde esta el script y ubicándolo en una capa superior cosa que cuando se visualice, el navegante clikée sobre el mismo y no suceda nada al estar clikeando en realidad sobre el recuadro que quedó sobre la caja del script. Claro, para utilizar estos scripts prediseñados, debemos insertarlos en nuestras páginas WEB de la siguiente manera; estando obviamente en un proyecto del Web Page Maker, nos dirigimos al

menú, “Insert” / “HTML code or Script code…”

Y luego insertamos el código…

Para este ejemplo, inserte un código gratuito de contador de visitas. Luego clikeamos en “OK” y listo, solo resta acomodar el cuadro en donde nos gustaría que aparezca el contador. Y si se

termina visualizando solo parcialmente, significa que debemos darle mas tamaño al recuadro o caja en donde tenemos cargado visualmente el script o código.

Otros scripts muy interesantes

Para este manual voy a utilizar como ejemplo unos scripts que hay insertados en un template de una inmobiliaria. Pueden ver/probar los scripts en el template que esta online en http://www.weblight.com.ar/inmobiliaria

En primer lugar veremos dos scripts que nos brindan cierta información de otros sitios, exacto, el clima y las cotizaciones actuales de monedas internacionales (algo muy adecuado a la temática de esa página en particular).

Estos son scripts o códigos de libre uso que inserté en la página, ofrecen información útil y si el visitante desea puede clikear sobre cualquiera de ellos y serán redireccionados a las páginas que patrocinan esta info.

En el proyecto se ven de la siguiente manera;

Y si previsualizamos con F5, en el sitio en funcionamiento se verán del siguiente modo…

Por ejemplo, así como sucede con los demás elementos, si le damos doble clik al cuadro del script o código se nos abrirá una ventana para su edición…

Dolarsi.com brinda este tipo de script para insertar en nuestros sitios de forma gratuita.

Y lo mismo sucede con el código del clima, clikeamos sobre el cuadro del script y vemos lo siguiente…

wunderground.com también nos brinda el código gratuito para excolocar en nuestro sitio el clima, en este caso de Mar delPlata. Ingresando en ese sitio se puede escoger otra zona geográfica y consecuentemente recoger el código adecuado para excolocar esa info en la página. Para seleccionar otra zona geográfica hacemos lo siguiente;

Vamos a http://www.wunderground.com/ , en el cuadro de “buscar” indicamos la zona, en este ejemplo Neuquén, y luego clikeamos en “Ir”…

Luego de clikear en “Ir” se nos abre una página con toda la información meteorológica de Neuquén, ahora hay que buscar el siguiente cuadro y clikear en ese botón…

Luego de clikear en ese botón se nos abre otra página con diferentes modelos de cajas informativas…

Cuando elegimos la que más se ajusta a nuestro diseño o necesidad, clikeamos sobre esa y se nos generará el código que debemos copiar y pegar en nuestro cuadro de script que en este caso en particular se llama “html2”…

De esa forma podemos insertar cajas informativas del estado del tiempo de la zona

correspondiente a, en este caso, unaempresa de bienes raíces. Veamos ahora otro interesante código que es cedido gratuitamente por Google… Para ello vamos a la página “contacto”, en nuestro proyecto, desplazándonos con el cuadro “Site Contents” y veremos un cuadro con un script llamado “html3” (html2 y html1 son los otros 2 scripts que acabamos de analizar) o también lo podemos ver en funcionamiento enhttp://www.weblight.com.ar/inmobiliaria/contacto.html;

Ok, si previsualizamos esa página o simplemente la visitamos online veremos lo siguiente;

Es un código que llama al servicio Google Maps de Google. Para insertar el código adecuado tenemos que hacer lo siguiente;

Primero vamos a Google Maps, http://maps.google.com/ y seguidamente buscamos la dirección o región que nos interesa, en este caso Mar del Plata…

Y una vez que llegamos al sitio cartográfico exacto, clikeamos en el siguiente orden los botónes que indico para recoger el código, primero clik en “Enlazar” y luego clik en “Personalizar…”

Estando en el nuevo cuadro de edición, seleccionamos en tamaño “Personalizado” para ajustar el mapa que visualizaremos al cuadro donde insertaremos el código…

Para saber qué medidas insertar en “Ancho” y “Alto” vallamos al proyecto, al cuadro (elemento “html3”) y veamos cuales son las medidas del mismo para terminar de completar esos datos en Google Maps. Para ello hacemos 1 clik sobre el cuadro “html3” con el botón derecho y luego en “propiedades” para editar o visualizar sus características…

Teniendo esos datos, vamos a completar a Google Maps…

E instantáneamente obtendremos el código que debemos copiar y pegar en nuestro cuadro de script, ese código se genera y esta a nuestro alcance justo debajo de donde acabamos de completar el Ancho y Alto…

Seleccionamos y copiamos, posteriormente vamos al proyecto y hacemos doble clik sobre el cuadro “html3” para que se nos abra el editor y podamos borrar el código viejo y pegar el nuevo…

Listo, con el nuevo código insertado podemos visualizar el mapa o vista satelital de la región que escogimos. Esto se puede utilizar también en los detalles de cualquier propiedad en venta, para que el posible cliente sepa exactamente donde está ubicada la propiedad. Para hacer eso sencillamente insertamos un nuevo código yendo al menú principal / insertar…

Completamos el cuadro de edición con el código que nos provee Google Maps, como con cualquier código o script que queramos insertar.

Luego redimensionamos y ubicamos donde nos convenga el cuadro del código, para ver el mapa cuando el sitio este en funcionamiento…

Fuente: http://libros.gratisespanol.info/practica-web-page-maker-insertar-

scripts-y-codes