revision 4 memoria graf i ca

MEMORIA GRÁFICA

UNIVERSIDAD

FACULTAD

AMPLIACIÓN Y

SONNY CHRISTIAN

NACIONAL

DE ARTES

PROFUNDIZACIÓN

GONZÁLEZ RANGEL

AUTÓNOMA

Y DISEÑO

DE CONOCIMIENTOS

DE MÉXICO

ÍNDICE

01

01

01

01

07

07

07

07

01 Contenido05 Contenido




07 Contenido05 Contenido13 Contenido15 Contenido17 Contenido17 Contenido17 Contenido19 Contenido

07 Contenido05 Contenido13 Contenido15 Contenido17 Contenido17 Contenido17 Contenido19 Contenido

07 Contenido05 Contenido 13 Contenido15 Contenido17 Contenido17 Contenido17 Contenido19 Contenido

07 Contenido05 Contenido 13 Contenido15 Contenido17 Contenido17 Contenido17 Contenido19 Contenido

INTRODUCCIÓN

INTRODUCCIÓN

INTRODUCCIÓN

INTRODUCCIÓN

WEB

WEB

WEB

WEB

SONNY G. RANGELMEMORIA GRÁFICA

4

Introducción

El mundo del diseño, desde su nacimiento, ha estado ligado a la tecnología. Desde el uso de tipos

móviles para la impresión de libros, los diseñadores han buscado adaptarse a las nuevas herramien-

tas disponibles en el mercado.

Dado esto los diseñadores tenemos la responsabilidad de responder eficazmente a las necesidades

de comunicación visual sin importar el tipo de soporte o giro, al que se tenga que apelar en la eje-

cución de un diseño.

En los últimos años los medios impresos han tenido que compartir terreno con un mercado cada

vez más presente en la actualidad, el internet y los sitios web. Hoy en día muchos de los medios

impresos como periódicos y revistas han pasado también a ser medios digitales, apoyándose en

plataformas web.

La disponibilidad de dispositivos a través de los cuales una persona puede accesar a contenido en

línea ha forzado a programadores y diseñadores a pensar sitios web responsivos que sean flexibles

antes las diferencias de tamaño y resolución entre los dispositivos.

Es por eso que en el diplomado de sitios web, se abordan diferentes legunajes de programación

para lograr una sinérgia entre el diseño y la funcionalidad del código que lo soporta

PRIMERMÓDULO


6

Historia del Internet

El desarrollo de Internet, como casi todos los

avances de la ciencia y la tecnología,no se debe

a una persona o a un grupo pequeño de per-

sonas,sino que ha sido fruto de las ideas y del

trabajo de miles de personas.sin embargo en un

repaso de la historia ,como reconocimiento al

cambio que internet ha producido en todas los

niveles de la sociedad ,el 23 de mayo de 2002

(1). Lawrence Roberts, Robert Kahn, Vinton Cerf

y Tim Berner-Lee fueron distinguidos con el pre-

mio Príncipe de Austria de investigación cientí-

fica y técnica en representación delas miles de

personas y muchas instituciones que han hecho

posibles este avance de nuestros tiempos. Según

la resolución del jurado. 2 Se les otorga el premio

por haber diseñado y realizado un sistema que

está cambiando el mundo al ofrecer posibilida-

des antes impensables para el `progreso cientí-

fico y social”.

A Lawrence (Larry) Roberts se le suele llamar “el

padre de internet”, porque fue el director del

equipo de ingenieros que crearon ARPANET, el

el precursor de la actual internet. A parte de ser

el director, también, fue el diseñador principal de

ARPANET.

En 1927 , Robert Kahn fue contratado por

Lawrence Roberts para trabajar en ARPA .trabajo

en el dsarrollo de un modelo de arquitectura de

red abierta ,donde cualquier ordenador pudiera

comunicarse con cualquier otro ,independien-

temente del hardare o el software particular de

cada uno de ellos. Este trabajo le llevo a desarro-

llar, junto con Viton Cerf, el protocolo Transmis-

sion Control/ Internet Protocol ( TCP/IP).

Vinton Cerf estuvo implicado desde los prime-

ros años en el desarrollo de ARPANET .en 1973,

se unio al proyecto de Robert Kahn de interco-

nexión de redes.su mayor contribución ha sido

el desarrollo .junto a Robert Kahn ,de TCP/IP ,el

protocolo que gobierna las comunicaciones en

internet y que permite conectar dinstintas redes

independientes entre si.

Finalmente,Tim Berners-Lee es conocido como

padre de la Web.èl fue quien creo HTML,el len-

guaje empleado para crear los documentos de la

web; Hyper text Transfer Protocol (HTTP),el pro-

tocolo que emplean los ordenadores para co-

municarse en la web y Universal Resource Loca-

tor (URL) ,COMO MEDIO DE LOCALIZACIÒN DE

LOS DINSTINTOS RECURSOS QUE FORMAN LA

WEB EN INTERNET. Ademas, también desarrollo

el primer servidor web y el primer navegador /

editor web.

1- El premio les fue entregado por el Principe de

Austria el 25 de octubre de 2002 en la ceremonia

que se celebró en Obviedo.

GENERACIONES DEL SITIO WEB

David Siegel,en su libro Creating Killer Web Sites:

the art of third-generation site desing ,estable-

cio tres generaciones de sitios web.Sin embargo

desde 1996,fecha en la que establecio su clasifi-

cación ,ha evolucionado la tecnologis empleada

en la web ,por lo que se puede añadir una gene-

ración màs a su clasificación.

Primera generación

La primera generación abarca desde el naci-

miento de la web (1992) hasta mediados de 1994.

La creación de páginas web durante esta gene-

ración se ve limitada por diversas razones tec-


7

nológicas: ancho de banda limitada(mòdems de

2.4 kbps)

Caracteristicas:

Tiempo de carga rapido :son paginas basadas en

texto ,como muy pocas imágenes y ningun re-

curso multimedia.

Navegaciòn poco estructurada,con falta de co-

herencia.

Poco uso de enlaces entre paginas de un mismo

sitio web.

Ejemplo de pagina web de la primera generaciòn

SEGUNDA GENERACIÒN

Se extiende de 1995 hasta la actualidad .La di-

ferencia principal con las paginas web de la ge-

neraciòn anterior es la masiva incorporacion de

elementos graficos en las paginas:

Los iconos sustituyen a las palabras

El colo de fondo se sistituye por una imagen de

las paginas

los banner sustituyrn a los encabezados de las

paginas.

TERCERA GENERACIÒN

Aparece a mediados de 1996.Las paginas perte-

necientes a esta generaciòn son las màs comu-

nes en la actualidad. Se caracteriza por :

Tiempo de carga rapido.

Las paginas se limitan para que se pueda visuali-

zar completamente en una pantalla,sin tener que

realizar desplazamiento (scroll)

Los sitios web se crean teniendo en cuenta las

posibles usuarios y el objetivo del sitio (informar,-

vender, ofrecer servicios,etc.)

CUARTA GENERACIÒN

La cuarta generaciòn empieza a desarrollarse

plenamente en 1999 y discurre hasta la actuali-

dad.sus caracteristicasprincipales son:

Se vuelven a emplear en exseso los recursos gra-

ficos

En muchos casos se intenta aprovechar hasta el

ultimo pixel de las paginas para presentar infor-

macìon.

Uso de nuevas tecnolgias multimedia (como Ma-

cromedia Flash) (2): se puede crear un sitio web

sin tener que emplear HTML

2- en diciembre de 1996.Macromedia INC. Com-

pro a Janathan Gay su herramienta de animaciòn

FutureWave Sofware,que paso a llamarse Macro-

media Flash

EL PRIMER NAVEGADOR

el primer navegador web ,fue programado por

Tim Berners-Lee a finales de 1990.Al principio lo

llamo WorldWideWeb ,pero despues cambio el

nombre por Nexus,ya que empezaba a usarse el

World Wide Webpara referirse de forma generica

al sistema de comunicaciones que habia ideado.

Este primer navegador se programo en objeti-

ve-C en un ordenador Next.segun Tim ,le llevo

un par de meses programarlo, gracias a que el


8


9


10

sistema operativo NeXTStep facilitaba la pro-

gramaciìon al disponer de herramientas para

construir los menus ,tecnologia What You See Is

Whats You Get (WYSIWYG)

El sistema operativo NeXTStep presenta un lla-

mativo entorno grafico multiventana.

En la esquina superior izquierda se puede obser-

var el menu del navegador,con su nombre en la

primera linea.

La X que tienen la ventana permite cerrarlas (mas

tarde lo copia Micrisoft)

PALABRAS CLAVES Y METADADOS

Son un modo perfecto para que los webmasters

faciliten a los motores de búsqueda información

sobre sus sitios. Se pueden utilizar para ofrecer

información a todo tipo de clientes. Cada siste-

ma procesa únicamente aquellas que entiende

e ignora el resto. Las metaetiquetas se añaden a

la sección <head> de tu página HTML y normal-

mente tienen el aspecto siguiente:

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8”>

<META NAME=”Description” CONTENT=”Au-

tor: A. N. Autor, Ilustrador: P. Fotografía, Catego-

ría: Libros, Precio: £ 9,24 libras, Páginas: 784”>

<meta name=”google-site-verification” con-

tent=”+nxGUDJ4QpAZ5l9Bsjdi102tLVC21AIh5d-

1Nl23908vVuFHs34=”/>

<title>Libros de ejemplo - libros usados de alta

calidad para niños</title>

<meta name=”robots” content=”noindex,no-

follow”>

<meta name=”description” content=”Descrip-

ción de la página” />

Esta etiqueta proporciona una descripción bre-

ve de la página. En algunos casos esta descrip-

ción se utiliza como parte del fragmento que

se muestra en los resultados de búsqueda.

<title>El título de la página</title> Aunque técnicamente no se trata de una me-

taetiqueta, se suele utilizar junto con la “des-

cripción”. El contenido de esta etiqueta suele

mostrarse como el título de los resultados de

búsqueda (y, por supuesto, en el navegador del

usuario).


11


12

<meta name=”robots” content=”..., ...” />

<meta name=”googlebot” content=”..., ...” />

Estas metaetiquetas pueden controlar el com-

portamiento del rastreo y la indexación del

motor de búsqueda. La metaetiqueta robots

se aplica a todos los motores de búsqueda,

mientras que “googlebot” es específica de

Google. Los valores predeterminados son “in-

dex, follow” (igual que “all”) y no es necesario

especificarlos. Google entiende los siguientes

valores (si especificas varios valores, sepáralos

con una coma):

· noindex: impide que la página se indexe

· nofollow: impide que Googlebot siga

enlaces de esta página

· nosnippet: impide que un fragmento se

muestre en los resultados de búsqueda

· noodp: impide que se utilice la descrip-

ción alternativa de ODP/DMOZ

· noarchive: impide que Google muestre el

enlace En caché de una página.

· unavailable_after:[date]: te permite espe-

cificar la hora y la fecha exactas en que

quieres detener el rastreo y la indexación

de la página.

· noimageindex: te permite especificar que

no quieres que la página aparezca como

la página de referencia de una imagen

que se muestra en los resultados de bús-

queda de Google.

· none: equivale a noindex, nofollow.

Ahora también se puede especificar esta infor-

mación en la cabecera de las páginas mediante

la directiva de cabecera HTTP “X-Robots-Tag”.

Esto resulta especialmente útil para limitar la

indexación de archivos que no sean HTML,

como archivos gráficos y otro tipo de docu-

<meta name=”google” content=”notranslate”

/>

Cuando reconocemos que el contenido de

una página no está en el idioma que el usuario

podría querer encontrar, solemos proporcionar

un enlace a una traducción en los resultados

de búsqueda. En general, esto permite ofrecer

un contenido único y convincente a un grupo

de usuarios mucho mayor. Sin embargo, es

posible que haya casos en los que no quieras

utilizar esta opción. Esta metaetiqueta indica a

Google que no proporcione una traducción de

esta página

<meta name=”google-site-verification” con-

tent=”...” />

Puedes utilizar esta etiqueta en la página de

nivel superior de tu sitio para verificar la pro-

piedad del mismo en las Herramientas para

webmasters de Google. Recuerda que, aunque

los valores de los atributos “name” y “content”

deben coincidir exactamente con los datos

que se te proporcionen (incluidas mayúsculas

y minúsculas), no importa que cambies la eti-

queta de XHTML a HTML ni que el formato de

la etiqueta coincida con el de tu página

<meta http-equiv=”Content-Type” content=”...;

charset=...” />

<meta charset=”...” >

Esta metaetiqueta define el tipo de contenido

de la página y el conjunto de caracteres. Ase-

gúrate de delimitar el valor del atributo de con-

tenido con comillas; de lo contrario, el atributo

del conjunto de caracteres podría interpretarse

de manera incorrecta. Recomendamos utilizar

Unicode/UTF-8 siempre que sea posible.

<meta http-equiv=”refresh” content=”...;url=...”

/>

Esta metaetiqueta redirige al usuario a una URL

nueva tras un periodo de tiempo y a veces se

usa como forma sencilla de redireccionamien-

to. Sin embargo, no es compatible con todos

los navegadores y puede resultar confuso para

el usuario. El W3C no recomienda el uso de

esta etiqueta. En su lugar, Google sugiere el

redireccionamiento 301 por parte del servidor.

BASESESCENSIALES PARA UN SITIO WEB

Tener en cuenta que:


13

1. El usuario tiene 3,8 segundos para ver una pu-

blicación.

2. El usuario tarda para analizar una aplicación

web aproximadamente 13,2 segundos y darse

cuenta si es la apropiado para su búsqueda.

Las páginas Web no deben de ser pesadas lo más

funcional es lo más práctico.

Mensaje claro.

Ver lo que se ofrece de manera rápida sin intro-

ducciones o distracciones animadas.

El usuario está acostumbrado a encontrar de

manera sencilla sus búsquedas y si tiene que es-

perar para ver el resultado de su búsqueda no

aprobará el sitio web.

Información.

Sólo la adecuada de acuerdo al servicio, no ofre-

cer mil posibilidades no abusar de link inapro-

piados ni publicidad excesiva de otros servicios,

tampoco es recomendable el uso de submenús

o menús animados con sonido o con animacio-

nes saturadas.

Jerarquías.

Conjugar elementos, resaltar la información re-

levante y poner por separado las secundarias.

Dividir mediante uso de color y fotografías o tex-

tos remarcados.

Textos.

Leer, mirar y entender.

Mantener un balance entre imagen y texto, ya

que el uso excesivo de información y textos in-

adecuados dar fatiga visual lo que conlleva a que

nuestro público desista del sitio web.

Formularios.

A mayor cantidad de campos por completar /

menor actividad por parte del usuario.

El uso de formularios es muy concreto y no debe

de ser ambiguo.

No se debe de pedir datos privados como telé-

fono, números de cuentas bancarias o similares

ya que podemos crear la desconfianza de nues-

tro público a nuestro sitio web.

Confiabilidad.

Hacer uso de marcas reconocidas o logos de

confianza hacen que el cliente se sienta cómodo

con el servicio.

Ubicar dichos logotipos reconocidos mundial-

mente en un mayor protagonismo con la página

hace más vistosa y confiable la misma.

El uso de Patrocinadores da renombre y apoyo a

una campaña publicitaria igual que en una pági-

na web.

Atención.

ANUNCIO es igual a CONTENIDO y este es igual

a PAGINA DE DESTINO.

Proporcionar claramente el mensaje / NO dar

vueltas al mensaje ni dar más distracciones. Esto

da agilidad al servicio y prestigio a la página.

DEFINICIONES

HTTP


14

El protocolo de trasferencia hipertexto (HiperTex Trasnfer

Protocol) es un protocolo de niveles de aplicación, gené-

rico orientado a objetos y sin estado para la trasferencia de

información hipermedia.

Ventajas

Versatilidad, al ser un protocolo genérico y orientado a ob-

jetos puede servir como substrato para la trasferencia de

información de muy diversos tipo.

Puede servir como un protocolo base para la comunicación

entre clientes (navegadores) y proxies y gateways con otros

servicios de internet como los de correo.

Desventajas

Simpleza.

Funcionamiento.

El protocolo HTTP es un protocolo de petición y respuesta.

Por tanto el esquema básico se inicia con la petición de un

documento HTML por el navegador al servidor, esta peti-

ción tiene un formato establecido por el protocolo .Cuando

el servidor recibe el mensaje de petición, servidor intentara

proporcionara el recurso solicitado al cliente, indicando la

causa en caso de no poder atenderla.

URI

(Uniform Resource Identifier) es una cadena de caracteres

utilizada para representar un recurso físico o abstracto, de

tal forma que cada URI representara un único recurso, pu-

diendo un recurso ser reresentado por distintas URIs.

URL

(Uniform Resource Locator ) que no es más un subjuntivo

de URI que permite la localización de un recurso utilizado

una identificación abstracta de su situación.

URL es lo que comúnmente se ha dado en llamar una di-

rección internet.

WWW

World Wide Web (web) es uno de los servicios que puede

encontrar en internet.

Es un potente sistema utilizado para localizar y acceder a

las fuentes de información de internet .Es un protocolo que

permite a los usuarios hacer que su información sea fácil-

mente accesible para los otros usuarios. El WW es un siste-

ma cliente/servidor que soporta referencias de hipertexto.

El web es una de las formas de acceder a la información que

circula por internet. Allí unos ordenadores llamados servi-

dores almacenan la información y ejecutan sofwere que les

permite ponerla a disposición de los demás mediante una

o varias de esas formas de acceso; otros ordenadores soli-

citan la información mediante la ejecutan de determinados

programas ,y adoptan a así la función de clientes de los pri-

meros.

W3C

World Wide Web Consortium Consorcio internacional de

campañias y organizaciones involucradas en el desarrollo

de internet y en especial de la WWW. Su propósito es desa-

rrollar estándares y poner orden en Internet.

HTML5

Es un nuevo concepto para la construcción de

sitios web y aplicaciones en una era que combi-

na dispositivos móviles,computación en la nube

y trabajos en red.

HTML5 es, de hecho, una mejora de esta com-

binación, el pegamento que une todo. HTML5

propone estándares paracada aspecto de la web

y también un propósito claro para cada una de

las tecnologías involucradas. A partir de ahora,

HTMLprovee los elementos estructurales, CSS

se encuentra concentrado en cómo volver esa

estructura utilizable y atractiva a lavista, y Javas-


15

cript tiene todo el poder necesario para proveer

dinamismo y construir aplicaciones web com-

pletamente

Funcionales.

Las barreras entre sitios webs y aplicaciones fi-

nalmente han desaparecido. Las tecnologías

requeridas para el procesode integración están

listas. El futuro de la web es prometedor y la evo-

lución y combinación de estas tres tecnologías

(HTML,CSS y Javascript) en una poderosa espe-

cificación está volviendo a Internet la plataforma

líder de desarrollo. HTML5 indicaclaramente el

camino.

HTML5 provee básicamente tres características:

estructura, estilo y funcionalidad. Nunca fue de-

clarado oficialmente pero,incluso cuando algu-

nas APIs (Interface de Programación de Aplica-

ciones) y la especificación de CSS3 por completo

no son parte del mismo, HTML5 es considerado

el producto de la combinación de HTML, CSS y

Javascript. Estas tecnologías son altamente de-

pendientes y actúan como una sola unidad or-

ganizada bajo la especificación de HTML5. HTML

está a cargo de la estructura, CSS presenta esa

estructura y su contenido en la pantalla y Javas-

cript hace el resto que (como veremos más ade-

lante) es extremadamente significativo.

Ventajas y desventajas

2) Ahorran tiempo

3) Son compatibles con varios dispositivos

4) No ocupan mucho espacio

5) Las actualizaciones son inmediatas

6) El consumo de recursos es bajo

7) Son multiplataforma

8) Portables

9) La disponibilidad suele ser alta

10) Son en su mayoría el trabajo colaborativo

11) El aspecto es funcional

12) La usabilidad y accesibilidad esta cuidada

13) Los gráficos son de alta calidad y apelan

la buen uso del color

Desventajas:

1) La disponibilidad depende de un tercero

en cuanto a sus actualizaciones

2) Funcionalidades limitadas

CONVERSIÒN WEB

Obtención de resultados con el usuario.

Captar la atención: Dar lo que el cliente especí-

ficamente entro el sitio web a buscar (nada más)

ejemplo: el usuario entra a su correo electrónico,

el espera ver una página sencilla con un Siginup

para poder entrar, sin embargo si entra a una pá-

gina que anuncia comerciales, distracciones el

desistirá del sitio web.

Despertar el interés: Apelando el uso gráfico, uso

de eslogan, frases cortas y listados ofrece que el

producto o servicio es mejor que la competencia

o superior a está basada en sus características y

no en el uso desmesurado de animaciones.

Generar deseo: Seducir al usuario. El deseo a un

objeto, producto, bien o servicio es demostrado

en tanto dicho objeto deseado es algo prohibi-

do, algo que perdió, algo que pertenece a otra

persona, algo que solo sea para su uso personal,


16

despertar el morbo, obteniendo el interés es la

clave para que su sitio web recaude más visitan-

tes.

Acción: El usuario deberá hacer la conversión:

comprar, llenar un formulario, subscribirse a un

servicio de información o difundir el mensaje.

LA IDENTIDAD

Se requiere de una identidad corporativa para

que su producto o servicio este reconocido a

nivel mundial, dicha identidad es como su hue-

lla digital en el mundo electrónico, puesto que

identifica y refleja su desempeño como presta-

dor de servicio o producto.

Si el cliente cuenta con dicha imagen corporativa,

los prestadores del servicio Web deberán reco-

lectar información de su empresa, volantes, tríp-

ticos, mantas, y publicidad en general para con

ello entender la marca ver el desenvolvimiento

del al misma en el ámbito de la mercadotecnia ,

como trata a sus usuarios y como quiere que lo

vean estos, de esta manera se hace un recolec-

ción de REFERENTES de la empresa puesto que

se realizara un pequeño listado del gusto de los

Clientes a fin de saber los aspectos que quieren

destacar de su producto o servicio.

LA COMPETENCIA

Periódicamente se revisara sitios web de la com-

petencia para mantener el suyo a la vanguardia;

se usaran los recursos de otros sitios web a fin de

implementarlos en el suyo, pero con ello no se

robaran derechos de autor si no se interpretaran

los usos y novedades para la innovación de su

sitio web y maximizar el potencial de su empresa.

CLIENTE

Puesto que las páginas y sitios web son una gran

puerta para el desenvolvimiento en el mundo

virtual, los textos que ofrece el cliente deberán

estar corregidos, por un intérprete o corrector de

estilo, o en su caso un copy, para que su sitio

web no tenga errores ortográficos o uso de len-

guaje ofensivo o coloquial.

Las imágenes que requieran retoque digital, No

están contempladas en el paquete Web, pero si

es el caso se acumulara al monto total de su en-

trega.

En ocasiones si no se cuentan con el debido

banco de imágenes para tener un sitio Web con

sus propios derechos de autor por ello si es nece-

sario se compraran imágenes para que el cliente

pueda usarlas como propias y así complementar

su Sitio Web o bien se contratará a un fotógrafo

profesional y modelos o escenarios para dichas

imágenes.

MISELANIUS

Que ofrece el diseñador web:

Favico (icono web) Estático / Dinámico

Botonera ( Roll Over / Animada / Listada )

Menu (Sprite / Javascript / HTML / XHTML5 /

CSS3)

Banner (swf / javascript / estatico)

Imágenes (optimizadas)

Textos (redacción, corrección de estilo)

Link (diferentes estados)

Anuncios (Patrocinadores)

Animaciones (swf / fla / 3d / Giff )


17

Zonas sensibles (Mapas / Imágenes)

Efectos web (Desplazamiento de textos uso de

CSS3)

Formularios (PHP, HTML5, Base de Datos MySQL)

Buscadores (internos / google) $ requiere crédi-

tos AdWord

Campaña SEO SEM

Metadatos

Geoposicionaminento

Codigos de QR Bidimencionales

Videos (FLV, MOV, WMA, Youtube, WEBM )

Redes Sociales (Facebook, Twiteer, Blogger)

Fechador

Reloj

Contador / Timer

Descargas Wallpapers PDF

Reproductor MP3

Bullets

Tablas Exel, Graficas

Plantillas CMS Worpres, Drupal, Joomla, Wix,

Magento etc

Hosting y dominio

Cuentas de correo electrónicas

Sistema de base de datos

Estadísticas

Certificados de w3c

APLICACIÒN WEB

Es fácil darse cuenta de que los servicios en la

web que solemos utilizar hoy en día no se pa-

recen a aquellas que se utilizaban en los inicios

de Internet. Actualmente, muchas sedes web son

capaces de sorprendernos por su diseño gráfico,

por su diseño informacional, por los contenidos

que se ofrecen o por otros muchos aspectos que

hasta hace pocos años eran absolutamente im-

pensables.

Con la llegada de las nuevas tecnologías de la

información y la comunicación el mundo de la

post-pc a cambiado a tal grado de que la inte-

ractividad con la web y uso de mejores sistemas

nos evocan a nuevas formas de concebir el en-

torno virtual.

Se denomina aplicación web a aquellas herra-

mientas que los usuarios pueden utilizar acce-

diendo a un servidor web a través de Internet

o mediante un navegador. En otras palabras, es

una aplicación software que se codifica en un

lenguaje soportado por los navegadores web

(HTML, XHTML, CSS,JS etc) en la que se confía la

ejecución al navegador.

La aplicación puede ser tan simple como un ta-

blero de mensajes o un cliente de inicio de se-

sión en el libro en un sitio, o un servicio de lan-

digpage, e-mailmarketing, o tan complejo como

un procesador de textos o una hoja de cálculo,

o un ambiente virtual o una interconexión con

bases de datos.

Las aplicaciones web son populares debido a lo

práctico del navegador web como cliente lige-

ro, a la independencia del sistema operativo, así

como a la facilidad para actualizar y mantener

aplicaciones web sin distribuir e instalar software

a miles de usuarios potenciales.


18

Existen otras aplicaciones como los Weblog,

tiendas en línea, bibliotecas virtuales, Wikipedia

y repositorios que son ejemplos de aplicaciones

web más usadas.

Es importante mencionar que una aplicación

Web puede contener elementos que permiten

una comunicación activa entre el usuario y la in-

formación.

Esto permite que el usuario acceda a los datos

de modo interactivo, gracias a que la página res-

ponderá a cada una de sus acciones, como por

ejemplo rellenar y enviar formularios, participar

en juegos diversos y acceder a gestores de base

de datos de todo tipo.

¿Qué es la Usabilidad?

La usabilidad es la cualidad que tiene un produc-

to o servicio para ser usado con facilidad; el tér-

mino se utiliza para referirse a la medida en la

que un dispositivo, un sistema o una aplicación

resultan fáciles de usar.

La usabilidad es un atributo que está determina-

do por múltiples factores, como son la interfaz

de usuario, los tipos de usuarios, las necesidades

específicas de uso y el contexto de interacción.

La medida de usabilidad es de tipo empírico, re-

lativa al propio dispositivo o sistema y se obtiene

con base en pruebas de control. Cada medida

corresponde a una meta de uso e indica lo senci-

llo, rápido o satisfactorio que resulta utilizar.

La Organización Internacional para la Estandari-

zación define a la usabilidad como:

“La capacidad de un software de ser comprendi-

do, aprendido, usado y ser atractivo para el usua-

rio en condiciones específicas de uso” (ISO/IEC

9126)

Hace referencia además a la calidad de uso y el

contexto de interacción, al señalar que la usabi-

lidad es:

“La medida en la que un producto se puede usar

por determinados usuarios para conseguir obje-

tivos específicos con efectividad, eficiencia y sa-

tisfacción en un contexto de uso especificado”

(ISO/IEC 9241)

Asimismo, con frecuencia se emplea el término

de usabilidad para referirse a los métodos apli-

cados en el diseño la experiencia del usuario.

Sin duda, cada vez es mayor la importancia que

se da ésta en el diseño de sitios web, intranets,

servicios en línea y aplicaciones para dispositivos

móviles.

Cabe señalar que aunque en las dos últimas dé-

cadas Internet cambió en forma significativa, la

definición básica que hizo el experto Jakob Niel-

sen*, sigue vigente

“La usabilidad es un atributo relacionado con la

facilidad de uso. Más específicamente, se refiere

a la rapidez con que se puede aprender a utili-

zar algo, la eficiencia al utilizarlo, cuán memora-

ble es, cuál es su grado de propensión al error y

cuánto le gusta a los usuarios”.

* Jakob Nielsen y Hoa Loranger, “Usabilidad.

Prioridad en el diseño Web”, 2007.

¿Qué es la Accesibilidad?

En el Ceus concebimos la accesibilidad como un

principio de derecho, el derecho de todos a tener

acceso a la información y a los servicios que se

proveen por medio de Internet. La accesibilidad

es el piso básico sobre el cual debe construirse


19

un sitio web que pretenda ser genuinamente in-

cluyente.

Aunque es frecuente que se emplee el término

de accesibilidad como sinónimo de usabilidad,

considerando que garantiza el acceso y la faci-

lidad de uso de una interfaz o un dispositivo, se

trata en realidad de dos niveles de calidad en la

experiencia de usuario.

La accesibilidad web implica la posibilidad de

acceso a determinada información, servicio y/o

recurso a través de Internet, esto es, que el con-

tenido puede ser visualizado, leído, escuchado

y/o utilizado, por cualquier persona, pero en es-

pecial, por aquellas que enfrentan una limitación

derivada de alguna discapacidad individual. Sin

embargo, las limitaciones pueden estar relacio-

nadas con el idioma, los conocimientos y/o la

experiencia del usuario o la tecnología.

Por lo anterior, podemos definir la accesibilidad

como la posibilidad que un contenido pueda ser

accedido y usado por el mayor número de per-

sonas, con indiferencia de las limitaciones deri-

vadas de algún tipo de discapacidad -sea física,

psíquica, sensorial o de funcionamiento intelec-

tual- o por causas atribuibles al contexto de uso.

ARQUITECTURA DE LA INFORMACIÒN

Aunque para la mayoría de los usuarios “la inter-

faz es la aplicación” puesto que es la parte que

ven y a través de la cual interactúan (Hartson;

1998) , debemos entender que la usabilidad de la

aplicación depende no sólo del diseño del inter-

faz, sino también de su arquitectura - estructura

y organización -, en otras palabras, del compo-

nente no visible del diseño.

La Arquitectura de la información es definida

como el arte y la ciencia de organizar espacios

de información con el fin de ayudar a los usua-

rios a satisfacer sus necesidades de información.

La actividad de organizar comporta la estructu-

ración, clasificación y rotulado de los contenidos

del sitio web (Toub; 2000).

En general, una aplicación web puede crearse si-

guiendo dos modelos:

Mediante el uso de tecnologías estandarizadas,

como (X)HTML(5), CSS o JavaScript.

Mediante el uso de tecnologías incrustadas, ha-

ciendo uso de unas determinadas marcas (X)

HTML que permiten ejecutar una aplicación ex-

terna en el agente de usuario. Las tecnologías

más habituales que siguen este modelo son las

tecnologías propietarias Adobe Flash y Microsoft

Silverlight.

Implementar una APW mediante estándares no

representa cambios muy importantes en lo que

se refiere al proceso de desarrollo y se pueden

distinguir hasta en 3 capas de proceso:

La capa de estructura y contenido.(HTML)

Es la capa donde se definen los diferentes

bloques que componen la página (cabece-

ra, contenido, pie, navegación, etc.) y el con-

tenido que se presenta. Normalmente, la tec-

nología utilizada en esta capa es (X)HTML.

La capa de presentación.(CSS)

Es la capa donde se diseña la apariencia visual y

la distribución de los bloques estructurales (o la-

yout) y de los contenidos. Normalmente, la tec-

nología utilizada en esta capa es CSS.


20

La capa de comportamiento.(Javascript)

Es la capa donde se programa cómo debe reac-

cionar la página frente a las acciones del usuario.

Esta capa interactúa directamente con el DOM

(Document Object Model) del agente de usua-

rio, lo que permite conocer todos los detalles de

interacción (movimiento de ratón, clic, presión

de tecla, etc.), acceder a todos los contenidos

que se presentan en la página y modificarlos si

es preciso. Por ejemplo, es muy habitual verificar

que los datos introducidos por el usuario en un

formulario sean correctos antes de ser enviados

al servidor y modificar el color de los campos

erróneos. Normalmente, la tecnología utilizada

en esta capa es JavaScript.

Diagramación

1) Planeación

2) Desarrollo

3) Fases del proceso

4) Planificación

5) Diseño

6) Prototipado

7) Evaluación

8) Implementación

9) Lanzamiento

10) Mantenimiento

11) Seguimiento

12) Opinión/Usuario

13) Impacto

14) Métricas

15) Conclusiones

MOTORES DE BUSQUEDA

Las palabras clave son la fuente de que nos en-

cuentren en internet, son las palabras por las

cuales los usuarios potenciales acceden a nues-

tro servicio o aplicación. Los motores de bús-

queda (ejemplos) son los que hacen llegar a los

clientes resultados allegados a su investigación, y

por lo tanto, estar en el TOP de búsquedas.

De esta manera nos proporcionan más tráfico a

nuestro servicio, y así poder estar en los prime-

ros lugares del ranking si hacemos una larga lista

descriptiva de los metadatos (ejemplo metada-

tos); para posteriormente agregarlos y así tener

un posicionamiento SEO o SEM según sea el

caso para generar un ROI.

INTERFACE WYSIWYG

WYSIWYG

Es un término usado para describir procesadores

de texto que muestran la apariencia final de los

documentos en todo momento.

DEFINICIONES

HTTP: Hypertext Transfer Protocol (en español

protocolo de transferencia de hipertexto) es el

protocolo usado en cada transacción de la WWW.

HTTP define la sintaxis y la semántica que utili-

zan los elementos de software de la arquitectura

web (clientes, servidores, proxies) para comuni-

carse. Es un protocolo orientado a transaccio-

nes y sigue el esquema petición-respuesta entre

un cliente y un servidor. Al cliente que efectúa

la petición (un navegador web o un spider) se lo


21

conoce como “user agent” (agente del usuario).

URL: localizador de recursos uniforme, más co-

múnmente denominado URL (sigla en inglés de

uniform resource locator), es una secuencia de

caracteres, de acuerdo a un formato modélico

y estándar, que se usa para nombrar recursos

en Internet para su localización o identificación,

como por ejemplo:

Documentos textuales, imágenes, vídeos, pre-

sentaciones digitales, etc.

Los localizadores uniformes de recursos fueron

una innovación en la historia de la Internet. Fue-

ron usadas por primera vez por Tim Berners-Lee

en 1991, para permitir a los autores de documen-

tos establecer hiperenlaces en la WWW.

WWW: World Wide Web o Red informática mun-

dial es un sistema de distribución de información

basado en hipertexto o hipermedios enlazados

y accesibles a través de Internet. Con un nave-

gador web, un usuario visualiza sitios, portales,

aplicaciones, servicios, ambientes virtuales, etc.,

compuestos elementos web que pueden conte-

ner texto, imágenes, vídeos u otros contenidos

multimedia, y navega a través de ellas usando hi-

perenlaces.

HTML:, siglas de HyperText Markup Language

(«lenguaje de marcado de hipertexto»), hace

referencia al lenguaje de marcado predominan-

te para la elaboración de servicios web que se

utiliza para describir y traducir la estructura y la

información en forma de texto, así como para

complementar el texto con objetos tales como

imágenes. El HTML se escribe en forma de «eti-

quetas», rodeadas por corchetes angulares (<,>).

HTML también puede describir, hasta un cierto

punto, la apariencia de un documento de un ele-

mento de un servicio de un ambiente virtual, y

puede incluir un script (por ejemplo, JavaScript,

ajax, Java), el cual puede afectar el comporta-

miento de navegadores web y otros procesado-

res de HTML.

Entre los mejores programas de esta clase des-

tacan Adobe Golive, Claris Home Page, Drea-

mWeaver, Microsoft FrontPage, Brakets, Sublime

Tex, Adobe Muse, XCode, Eclipse entre otros .

La extensión de un archivo HTML suele ser .html

o .htm5. Se deben emplear nombres cortos y

sencillos. Hay que evitar el uso de espacios o de

caracteres especiales en el nombre del archivo

y también controlar el uso de mayúsculas y mi-

núsculas puesto que en Internet existen multi-

tud de sistemas operativos y alguno puede ser

que no acepte los mismos nombres de archivo

que acepta el nuestro. Por ejemplo, hay sistemas

operativos en los que las mayúsculas y minúscu-

las se distinguen (Unix) y otros donde no (Micro-

soft Windows6).

Los navegadores actuales son muy fiexibles: si

falta alguna etiqueta de fin no producen un error

y muestran la página lo mejor posible. De todas

formas, es recomendable ajustarse siempre a la

sintaxis y no cometer errores, ya que así se logra-

rá la máxima compatibilidad.

Las etiquetas de fin tienen el mismo nombre que

las de inicio, pero van precedidas del símbolo /

(barra inclinada). Por ejemplo, la etiqueta de cie-

rre correspondiente a <HTML> es </HTML>. Una

etiqueta puede poseer varios atributos a los que

hay que asignar valor. Algunos de estos atribu-

tos son obligatorios, mientras que otros suelen


22

ser opcionales. Por otro lado, algunos aceptan

un valor de cualquier tipo, otros cualquier valor

de un tipo concreto (alfanumérico, numérico,

etc.) y, por último, algunos necesitan un valor

concreto de un conjunto de valores. Los atribu-

tos se escriben dentro de la etiqueta y separados

por espacios en blanco. Para asignar un valor a

un atributo se emplea el signo igual (=). El valor

que se asigna a un atributo tiene que ir encerrado

entre comillas. Por ejemplo, la etiqueta <IMG>,

que no tiene una etiqueta de cierre, tiene varios

atributos, entre ellos SRC que espera cualquier

carácter valido en una URL, WIDTH y HEIGHT

que esperan un valor numérico y el atributo ALT

que espera cualquier cadena de caracteres. Un

ejemplo de uso de esta etiqueta es: <IMG SRC=”-

fichero.gif” WIDTH=”10” HEIGHT=”10” ALT=”Al-

go”> Los atributos sólo se ponen en la etiqueta

de inicio: la etiqueta de fin nunca lleva atributos.

W3C:El World Wide Web Consortium, abreviado

W3C, es un consorcio internacional que produce

recomendaciones para la World Wide Web. Está

dirigida por Tim Berners-Lee, el creador origi-

nal de URL (Uniform Resource Locator, Locali-

zador Uniforme de Recursos), HTTP (HyperText

Transfer Protocol, Protocolo de Transferencia de

HiperTexto) y HTML (Hyper Text Markup Langua-

ge,Lenguaje de Marcado de HiperTexto) que son

las principales tecnologías sobre las que se basa

la Web.

CSS:(Cascading Style Sheet) Hojas de estilo en

cascada. La idea que se encuentra detrás del de-

sarrollo de CSS es separar la estructura de un do-

cumento de su presentación. La información de

estilo puede ser adjuntada como un documento

separado o en el mismo documento HTML. En

este último caso podrían definirse estilos gene-

rales en la cabecera del documento o en cada

etiqueta particular mediante el atributo “<style>”.

JAVASCRIPT:JavaScript es un lenguaje de pro-

gramación interpretado.

Se utiliza principalmente en su forma del lado del

cliente (client-side), implementado como parte

de un navegador web permitiendo mejoras en la

interfaz de usuario y aplicaciones web dinámi-

cas, en bases de datos locales al navegador.

Tiene uso en aplicaciones externas a la web, por

ejemplo en documentos PDF, aplicaciones de

escritorio (mayor uso de widgets) es también sig-

nificativo. JavaScript se diseñó con una sintaxis

similar al C, aunque adopta nombres y conven-

ciones del lenguaje de programación Java.

Todos los navegadores modernos interpretan

el código JavaScript integrado en la web. Para

interactuar y provee ellenguaje JavaScript a una

implementación del Document Object Model

(DOM).

DHTML:El HTML Dinámico o DHTML (del inglés

Dynamic HTML) designa el conjunto de técni-

cas que permiten crear web interactiva utilizan-

do una combinación de lenguaje HTML estático,

un lenguaje interpretado en el lado del cliente

(como JavaScript), el lenguaje de hojas de estilo

en cascada (CSS) y la jerarquía de objetos de un

Document Object Model (DOM).

Una página de HTML Dinámico afecta la aparien-

cia y las funciones de los objetos de la web. La

característica dinámica del DHTML,son la forma

en que la página interactúa con el usuario cuan-

do la está viendo, siendo la página la misma para

todos los usuarios y son el resultado de la ejecu-

ción de un programa en algún tipo de lenguaje


23

de programación en el servidor.

g) Uso y propiedades de los links

Un link, enlace o Hyperlink es una referencia a

una página web o un contenido específico de

un sitio web. En el sentido original, un enlace es

una referencia a un documento. Los enlaces que

vemos hoy en nuestro navegador, pueden tener

incluso más información, como por ejemplo si

el documento vinculado se abrirá en una nueva

ventana del navegador o si el documento abier-

to se usará. Los links o vínculos son palabras re-

saltadas que al hacer click sobre ellas, el usuario

puede ser dirigido a otro archivo del computador

o a otra página Web.

El desarrollo de enlaces

Un enlace se construye de la siguiente forma: <a

href=”direcciónURL”> muestra de texto </ a>, la

URL de destino, es la dirección de destino de un

documento particular que debe ser especificado.

Además, es posible añadir un anuncio de texto

específico, es decir, se puede cambiar el nom-

bre del enlace. El nombre de un link puede ser

útil por varias razones. En primer lugar, porque

la mayoría de direcciones URL muy largas no se

pueden mostrar. Otra razón es, sin duda la indi-

cación que obtiene el usuario cuando abre el en-

lace. La posibilidad de mostrar un objeto como

un enlace, una imagen o un vídeo refuerzan es-

tas razones.

¿Cómo distinguimos un enlace?

Un enlace simple es generalmente azul, aunque

este puede también tener otro color y aparece

subrayado en la pantalla del navegador. Este tipo

de presentación se ha establecido para que to-

dos los internautas sepan que se trata de un en-

lace.

Los links o vínculos son palabras resaltadas que

al hacer click sobre ellas, el usuario puede ser

dirigido a otro archivo del computador o a otra

página web.

Características

Facilitan la navegación a la “araña” a la hora de

rastrear todos nuestros contenidos.

Mejoran la experiencia de navegación de nues-

tros usuarios.

Contribuyen a repartir el peso de la relevancia

por todo el sitio web para facilitar, en conjunto,

su posicionamiento global.

Una construcción natural de enlaces internos

nos permitirá mejorar la experiencia de navega-

ción de nuestros usuarios. Y no solo contribui-

remos a enriquecer su navegación, facilitándoles

el acceso directo a contenidos relacionados que

les aporten valor, sino que igualmente mejora-

remos la calidad de la visita y con ello el SEO,

ya que se quedarán más tiempo en nuestro sitio

web y esto ayudará a reducir la tasa de rebote.

5) ESTRUCTURA Y COMPONENTES (COLOR SCHEME DESIGNER & ADOBE KULER)

a) Manejo y uso de color

Color Primario: es el tono básico de la página, el

que la define, y el que ocupa la gran mayoría de

la misma. Sería el color del atributo “background”

de la página.


24

Color Secundario: es el segundo tono predo-

minante en la página, aunque en mucha menor

medida que el primario. Normalmente debe aco-

tar o resaltar áreas y debe ser bastante próximo

en tono al primario.

Color Destacado: es el color que se utiliza para

resaltar aspectos concretos de la página. Por de-

finición debe contrastar mucho con los colores

primario y secundario y, por tanto, debe utilizar-

se con moderación. Puede utilizarse el Comple-

mentario o el Complementario Escindido del co-

lor primario de la página.

Relación entre colores:

Según su posición relativa en el Círculo Estándar

de Color, los colores pueden ser:

Colores Análogos: Para un color dado, sus co-

lores análogos son aquellos que se encuentran

a ambos lados del mismo en el círculo de color.

Colores Complementarios: Son aquellos que se

encuentran opuestos en el círculo de color (por

ejemplo el amarillo y el violeta). Usados juntos

producen un gran contraste destacando mucho

uno sobre el otro. Su efecto puede ser llamativo

y un poco agresivo.

Colores Monocromáticos: Son aquellos que se

encuentran aislados, sin presencia de otros colo-

res. Usados producen sensación de unidad, ho-

mogeneidad y robustez. Se puede evitar la mo-

notonía utilizándolos con diferente luminosidad

(más claros y más oscuros).

Colores Complementarios Adyacentes: Dado un

color, sus complementarios adyacentes son los

colores análogos de su color complementario.

El uso de un color y sus complementarios ad-

yacentes aporta un alto nivel de contraste, sin

llegar al extremo cuando se usa directamente

su complementario. También suele ser mayor la

sensación de armonía que usando el comple-

mentario directo.

Colores Triada: Tres colores constituyen una

Triada cuando sus tonos son equidistantes en el

Círculo Estándar de Color.

Utilizar un esquema de color en triada suele ser

una buena solución cuando se desea un diseño

colorido, ya que la mezcla estará bien balancea-

da. Si el conjunto resulta demasiado colorido

para nuestras necesidades, siempre se pueden

apagar un poco los colores disminuyendo su lu-

minosidad o su saturación (o ambas).

Esquema Cromático Monotono: Un esquema de

color monotono lo constituye un único tono de

color junto a sus posibles variaciones en térmi-

nos de tintes, luminosidad y saturación.

Esquema Acromático Monotono: Un esquema

de color acromático monótono es un caso par-

ticular del esquema de color monótono consti-

tuido sólo por colores neutros dentro de la gama

del negro al blanco.

Con los Códigos de colores HTML puede esta-

blecer el color de fondo del sitio web, el color del

texto, de las celdas en las tablas y mucho más.

DreamWeaver para facilitar la labor de la edición

web muestra series de combinaciones de colo-

res seguros para la web desarrollados por Bruce

Heavin y Lynde Weinman. Desarrollan 11 com-

binaciones en función de los colores básicos y

cada una tiene de 3 a 9 variantes cambiando los

colores de texto, vínculos y fondo.

Podemos adoptar una de las, aproximadamen-


25

te, 60 combinaciones o aprovechar algún color

aislado copiando su expresión hexadecimal que

viene explícita en cada combinación de colores.

Algunos programas de tratamiento del color,

como Color Schemer o AbobeKuler nos propor-

cionan los colores amigables y los códigos hexa-

decimales correspondientes para incluirlos en el

editor. Tanto Color Schemer como AdobeKuler,

también tiene una página web desde la que po-

demos perfilar infinidad de gamas de diferentes

colores online.

b) Paleta segura de color

Las pantallas de ordenador de los usuarios por

lo general soportan miles de colores. Es raro en-

contrar monitores con 256 colores aunque aún

existen algunos y va siendo normal encontrar

monitores con millones de colores.

La selección de “colores básicos” de nuestro sitio

se debe mantener dentro del rango de 256 co-

lores. Podremos ampliar el rango en elementos

no fundamentales (fotos, ilustraciones, etc.) pero

debemos asegurarnos que el 100% de la pobla-

ción podrá acceder a nuestro sitio sin problemas.

A la hora de seleccionar los colores debemos

identificar las partes del sitio.

En HTML, los colores se expresan en forma de

valores hexadecimales (por ejemplo, #FF0000 )

o con nombres ( red ). Un color seguro para la

Web es aquél que se muestra de la misma forma

en Netscape Navigator y en Microsoft Internet

Explorer, tanto en Windows como en Macintosh,

con un modo de 256 colores. Suele decirse que

existen 216 colores comunes y que cualquier va-

lor hexadecimal que combine los pares 00, 33,

66, 99, CC o FF (valores RGB 0, 51, 102, 153, 204

y 255, respectivamente) representa a un color

seguro para la Web.

Al realizar pruebas, sin embargo, se descubre

que hay sólo 212 colores seguros para la Web,

y no 216, ya que Internet Explorer en Windows

no muestra correctamente los colores #0033FF

(0,51,255), #3300FF (51,0,255), #00FF33

(0,255,51) y #33FF00 (51,255,0).

Cuando aparecieron los primeros navegadores

Web, la mayor parte de los equipos mostraban

únicamente 265 colores (8 bits). Actualmente, la

mayoría de los equipos muestran miles o millo-

nes de colores (16 y 32 bits), por lo que queda

mucho menos justificado el uso de la paleta de

colores válidos para los navegadores si desarrolla

el sitio para usuarios que disponen de equipos

actualizados.

Un motivo para utilizar la paleta de colores aptos

para la Web es el desarrollo orientado a los dis-

positivos Web alternativos, como los PDA y las

pantallas de los teléfonos móviles. Muchos de

estos dispositivos ofrecen pantallas en blanco y

negro (1 bit) o de 256 colores (8 bits) solamente.

Las paletas Cubos de color (predeterminado) y

Tono continuo en Dreamweaver utilizan la paleta

de 216 colores seguros para la Web; al seleccio-

nar un color de estas paletas, se muestra el valor

hexadecimal del color. Para seleccionar un co-

lor situado fuera de la gama segura para la Web,

abra los colores del sistema haciendo clic en el

botón Rueda de color situado en la esquina su-

perior derecha del selector de color de DW. Los

colores del sistema no se limitan a los colores


26

seguros para la Web.

Las versiones de Netscape Navigator para UNIX

usan una paleta de colores distinta a la de las

versiones para Windows y Macintosh. Si está de-

sarrollando el sitio Web para navegadores UNIX

exclusivamente (o si los destinatarios serán usua-

rios de Windows o Macintosh con monitores de

24 bits y usuarios de UNIX con monitores de 8

bits), es recomendable utilizar valores hexade-

cimales que combinen los pares 00, 40, 80, BF

o FF para lograr colores seguros para la Web en

SunOS.

c) Outliner sistem map H5O*

d) Uso y propiedades de las tablas

El modelo de tablas de HTML permite a los auto-

res organizar datos-textos, texto pre formatea-

do, imágenes, vínculos, formularios, campos de

formularios, otras tablas, etc., en filas y en co-

lumnas.

Las tablas se usan con profusión en las páginas

web, muchas veces debido a que son el único

instrumento con el que se cuenta, para asegu-

rarse que las cosas estarán en su sitio. Para defi-

nir una tabla se usan las etiquetas:

<table> y </table> son las etiquetas donde está

contenida la tabla

<tr> y </tr> son las etiquetas que indican el co-

mienzo y fin de una fila (<th> y </th> si es una fila

de cabecera)

<td> y </td> señalan una columna

La tabla se va definiendo declarando una fila y a

continuación las columnas que contiene esa fila,

luego otra fila y sus columnas, etc. No es nece-

sario que todas las filas contengan el mismo nú-

mero de columnas.

Atributos de la etiqueta <table></table>

..

Todos los atributos son opcionales (ejemplo):

BORDER=”4”. Indica el tamaño del borde en

píxels, en este caso 4. Si no se indica nada carece

de borde

WIDTH=”5” o WIDTH=”50%”. Es el ancho de la

tabla, puede especificarse en valor absoluto (5

píxels) o como un porcentaje (50% del ancho

disponible)

CELLSPACING=”2”. Es el espacio entre las celdas,

por defecto es 2

CELLPADDING=”5”. Es el espacio entre el conte-

nido de las celdas y el borde de las mismas, por

defecto es 1

ALIGN=” left”, “right”, “center”. Alinea la tabla a la

izquierda, derecha o en el centro.

Atributos de las etiquetas de fila<tr></tr> y co-

lumna<td></td>

Las etiquetas que soportan las filas y las colum-

nas son:

WIDTH=”30”. Ancho de toda la fila o celda. Tam-

bién se puede dar en %

ALIGN=” left”, “right”, “center”. Alinea el conteni-

do a la izquierda, derecha o centro

VALIGN=”top”, “middle” o “bottom”. Alinea el

contenido verticalmente arriba, en medio o abajo

BGCOLOR=”#AACCEE”. Pone un fondo del co-

lor especificado a la celda o fila


27

COLSPAN=3. Especifica el número de columnas

que abarca la fila

ROWSPAN=2. Especifica el número de filas que

abarca la columna

e) Análisis de sitios web en internet*

6) OPTIMIZACIÓN DE IMÁGENES Y OBJETOS MEDIA (PHOTOSHOP CS6 & ILUSTRATOR CS6)

Manipulación de imágenes

La preparación de imágenes para la web exige

algunas precauciones cuando se parte de una

imagen escaneada o cualquier otro tipo de ima-

gen con alta resolución. Debemos tener pre-

sente que la resolución del monitor es aproxi-

madamente de sólo 72dpi (puntos por pulgada).

Si escaneamos a 300 dpi, estamos obteniendo

imágenes que serán innecesariamente grandes y

que no se verán en absoluto mejor que la imagen

adquirida al mínimo de resolución. Una imagen

enorme puede tardar una eternidad en descar-

garse, ocupará espacio innecesario en nuestro

servidor y probablemente los visitantes no ten-

gan paciencia para esperar.

Uno de los errores más comunes en los princi-

piantes al incluir imágenes es el tomarlas direc-

tamente del banco de imágenes y simplemente

escalarlas al tamaño que desean en el programa

de edición de páginas. La solución es muy senci-

lla; en el programa de tratamiento de imágenes

(photoshop o illustrator), buscamos la opción

que permita cambiar la densidad de la imagen (la

resolución) o efectuar un nuevo muestreo para

ajustar el tamaño a la resolución de pantalla.

Después de preparar los ficheros para las pági-

nas web, debe guardarse siempre una imagen

original con el tamaño, resolución y número de

colores necesarios para poderla manipular sin

limitaciones. Si queremos recuperar toda esta

información después de alterar la imagen para

optimizarla en pantalla, pueden surgir todo tipo

de imperfecciones. En pocas palabras, los “ori-

ginales” deben guardarse en un formato que no

pierda calidad, y que conserve íntegra la infor-

mación de los colores.

¿Cómo optimizar el tamaño de las imágenes?

Puesto que el tamaño de un fichero gráfico de-

pende del número de colores, tamaño y resolu-

ción, todo lo que permita recortar estos paráme-

tros implicará reducción del tamaño del fichero y

por tanto, del tiempo de descarga necesario. Por

otro lado, debemos elegir el formato de fichero

adecuado, con los sistemas de compresión JPG,

PNG Y GIF. Todos admiten diferentes opciones,

y según elijamos, podemos llegar a una solución

satisfactoria: imagen de buena calidad con ta-

maño aceptable.

Sobre la resolución, está todo dicho: basta con

72 dpi.

b) JPG/PNG/GIF

JPG

JPG son las siglas de Joint Photographic Experts

Group, el nombre del grupo que creó este for-

mato. jpg, es un formato de compresión de imá-

genes, tanto en color como en escala de grises,

con alta calidad (a todo color).


28

El formato JPEG utiliza habitualmente un algo-

ritmo de compresión con pérdida para reducir el

tamaño de los archivos de imágenes, esto sig-

nifica que al descomprimir o visualizar la ima-

gen no se obtiene exactamente la misma ima-

gen de la que se partía antes de la compresión.

Existen también tres variantes del estándar JPEG

que comprimen la imagen sin pérdida de datos:

JPEG2000, JPEG-LS y Lossless JPEG.

El algoritmo de compresión JPEG se basa en dos

fenómenos visuales del ojo humano: uno es el

hecho de que es mucho más sensible al cambio

en la luminancia que en la crominancia; es decir,

capta más claramente los cambios de brillo que

de color. El otro es que nota con más facilidad

pequeños cambios de brillo en zonas homogé-

neas que en zonas donde la variación es grande;

por ejemplo en los bordes de los cuerpos de los

objetos.

Una de las características del JPEG es la flexibi-

lidad a la hora de ajustar el grado de compre-

sión. Un grado de compresión muy alto generará

un archivo de pequeño tamaño, a costa de una

pérdida significativa de calidad. Con una tasa de

compresión baja se obtiene una calidad de ima-

gen muy parecida a la del original, pero con un

tamaño de archivo mayor.

La pérdida de calidad cuando se realizan sucesi-

vas compresiones es acumulativa. Esto significa

que si se comprime una imagen y se descom-

prime, se perderá calidad de imagen, pero si se

vuelve a comprimir una imagen ya comprimida

se obtendrá una pérdida todavía mayor. Cada

sucesiva compresión causará pérdidas adicio-

nales de calidad. La compresión con pérdida no

es conveniente en imágenes o gráficos que ten-

gan textos, líneas o bordes muy definidos, pero

sí para archivos que contengan grandes áreas de

colores sólidos.

PNG

Los Gráficos de red portátiles, o PNG para abre-

viar, es un estándar de archivo de imágenes que

se creó a mediados de 1990. PNG fue diseñado

para reemplazar el estándar GIF que ya era ob-

soleto, proporcionando una mejor compresión,

calidad y características. Los PNG pueden alcan-

zar un índice de compresión mucho mayor que

los GIF, en las fotos grandes y complejas, mante-

niendo su capacidad para agregarle transparen-

cia. Los PNG también cuentan con una profundi-

dad de color mucho mayor, con 24 bits en lugar

de 8 bits. Cuando se utilizan las imágenes son

grandes o de alta calidad en las plantillas web y

en otros formatos se requiere que sean flexibles,

y el formato PNG es una excelente alternativa

para reemplazar al GIF.

GIF

GIF (Graphic Interchange Format) es un tipo de

codificación para gráficos. En informática las

imágenes se codifican según diferentes están-

dares, lo que comúnmente conocemos como

formatos. Uno de estos formatos, quizás de los

más difundidos, es el GIF, muy usado sobre todo

en Internet, debido a que es un formato compri-

mido y por tanto, los archivos de imagen ocupan

menos y se reduce el tiempo de carga de estos.

Frente al formato GIF hay muchos otros, como el

PCX, JPEG, BMP...

En general, las imágenes en el ordenador de-

ben contener información de todos los pixeles o

puntos que se muestran.

El formato GIF usa un protocolo de compresión


29

(llamado LZW) para agrupar datos idénticos y

que así el archivo necesite menos espacio. Sin

embargo tiene la gran desventaja de que sólo

permite utilizar una paleta de 256 colores, la cual

se queda bastante corta para las necesidades

de hoy en día. Aun así, sigue siendo un forma-

to bastante extendido para pequeñas imágenes.

Algunos archivos GIF pueden contener también

animaciones de baja calidad.

La gran ventaja de los archivos GIF no es pues su

gran resolución, su calidad ni su precisión, sino

su portabilidad, su facilidad de transmisión y ade-

más y sobre todo, su compatibilidad. Casi todos

los dispositivos del mercado permiten usar estos

gráficos, sin necesidad de tener que convertirlos,

lo que como hemos dicho, facilita su uso. Otra

ventaja bastante importante es que actualmente

es un formato totalmente gratuito, al haber expi-

rado la patente del formato de compresión LZW,

que obligaba a pagar a los autores un canon por

usarlo para crear imágenes. Es por ello que hoy

en día puedes encontrarte millones de GIFs libres

por la web.

Hay algunos GIF que no usan la compresión

LZW, sino que están descomprimidos (en gene-

ral esto se hacía para evitar el pago de derechos).

También la capacidad de incluir varias imágenes

dentro de un mismo archivo GIF, permite crear

imágenes con paletas mayores de 256 colores,

si bien no es un método muy usado pues el ta-

maño de la imagen crece demasiado. Esa mis-

ma capacidad de incluir varias imágenes en el

mismo archivo es la que permite la creación de

pequeñas animaciones al mostrar esas imágenes

en una sucesión.

c) Optimización para web

Una página web contiene varias imágenes. Des-

de los pequeños iconos que incorpora hasta las

grandes imágenes que ilustran las entradas o ar-

tículos. Para el usuario, cargar cada imagen es un

pequeño retardo en la carga del sitio web. Esto

es algo bastante importante. Una web lenta es

sinónimo de pérdida de usuarios (abandonan o

buscan otras webs, cansados por la lentitud de

carga), pero además ahora sabemos que Google

le da importancia a la velocidad de carga de una

web, por lo que será algo que influye a la hora de

posicionarse en Google.

Cada página de nuestra web, contiene varias

imágenes en diferentes formatos (y muchas ve-

ces, poco apropiados) que habrá que descargar

al acceder a ella. Es por esta razón, que lo ideal

sería disminuir lo máximo posible el tamaño de

cada una de ellas, para que ocupen menos y se

descarguen antes, incluso en usuarios con cone-

xiones lentas.

La decisión: ¿JPG, PNG o GIF?

La primera pregunta que nos podemos plantear

es: ¿Qué formato de imagen debo utilizar? Exis-

ten multitud de formatos de imagen, algunos

nuevos, otros más desconocidos. Lo más impor-

tante es conocer la diferencia entre los formatos

con pérdidas y los formatos sin pérdidas. Noso-

tros nos basaremos en los tres más utilizados:

JPG, PNG y GIF. A grandes rasgos, el método

más sencillo para saber que formato utilizar, es

el siguiente:

Formato JPG: Fotografías. Muchas texturas. De-

talles complejos. No nos importa perder parte de

calidad de la imagen original.

Formato PNG: Capturas de pantalla. Dibujos.

Bocetos. Imágenes en las que hay amplias zonas


30

«lisas» con el mismo color.

Formato GIF: Similar a PNG, pero actualmente

utilizado sólo para imágenes animadas.

¿JPG o PNG? Artefactos de compresión

Es posible que llegado a este punto, no estés

seguro si utilizar JPG o PNG para tus imágenes.

Ambos formatos son comprimidos internamente

para conseguir ocupar menos espacio en disco:

Imágenes JPG: Con un valor entre 1 y 100 (más

alto, menor compresión y mayor tamaño) Imá-

genes PNG: Con un valor entre 0 y 9 (más alto,

mayor compresión y menor tamaño)

Antes de continuar, seguro que conoces un des-

agradable efecto producido en los archivos JPEG

(con alto grado de compresión): unas feas mar-

cas alrededor de ciertos objetos en imágenes.

Estas marcas se denominan artefactos de com-

presión, y se producen debido a que las imáge-

nes JPG son un formato de imagen con pérdidas:

para conseguir que ocupen menos, reducimos la

calidad de la imagen (perdiendo nitidez).

En contraposición, las imágenes PNG son un for-

mato de imagen sin pérdidas: para conseguir que

ocupen menos, se utilizan algoritmos de com-

presión «reversibles», que no reducen tanto el

tamaño, pero consiguen no introducir artefactos.

Cada formato es útil para cada caso concreto.

Simplificando, la norma general suele ser; utilizar

imágenes JPG para fotografías y utilizar imáge-

nes PNG para imágenes que contengan zonas de

color uniformes.

d) Integración de imágenes para botones, fondos

y mapas

La integración de imágenes hace referencia a

aquellas que aparecen en las páginas web y que

al hacer clic sobre ellas, redirigen al usuario a otro

sitio o recurso. La creación de una imagen para

un botón, fondo o mapa, implica el uso de una

imagen gráfica combinada con código de Len-

guaje de Marcado de Hipertexto (HTML por sus

siglas en inglés) para lograr la acción deseada.

El proceso de realiza de la siguiente manera

(ejemplo):

Escribe el siguiente código HTML en la página en

el punto en el que deseas activar la imagen del

botón: <a href=”paginados.html”>, donde “pagi-

nados” es la página a la cual será dirigido el usua-

rio cuando haga clic en la imagen.

Escribe el código que describe la ubicación

exacta de la imagen en relación a la página que

estás creando. Esto podría ser: <IMG SRC=”ima-

gen.jpg”>, donde “imagen” es el nombre de la

imagen creada, y “jpg” es el formato del archivo

de imagen. Inserta este código inmediatamente

después del código HTML. Guarda el archivo.

Abre la página con tu navegador de Internet pre-

ferido. El cursor cambiará a medida que “flote”

sobre la imagen, indicando que tiene un hiper-

vínculo incorporado. Haz clic en la imagen para

visualizar la segunda página web que creaste.

Es importante destacar, que los atributos que se

otorguen a cada botón, pueden variar, y depen-

derá de las necesidades de cada sitio.

7) CREACIÓN DE LA NAVEGACIÓN

a) Sección aurea

El número áureo representa la proporción que

existe entre dos segmentos, tales que el seg-

mento menor es al mayor lo que el mayor es a la


31

totalidad.

Es un número irracional φ = (1+√5)/2 ≈ 1.61803

representado por la letra griega φ (fi) (en minús-

cula) o φ (fi) (en mayúscula), en honor al escultor

griego Fidias

Pero más sencillo de entender es con un esque-

ma dibujado:

Buscamos el punto medio de uno de los lados

del cuadrado, desde ese punto trazamos una

diagonal hasta una de sus esquinas, y por ultimo

a partir del punto medio que marcamos llevamos

la línea hasta el lado. Así obtenemos un rectán-

gulo áureo.

Esto es igual que multiplicar la recta AB por el

numero Phi, que da como resultado la recta AC.

Esta proporción son dos segmentos de 62% y

38% aproximadamente, de una recta por tamaño

100%.

Es considerada como la proporción perfecta.

Se encuentra en figuras geométricas, partes del

cuerpo y en la naturaleza. Los griegos la utiliza-

ron para diseñar las proporciones de sus tem-

plos. Platón consideró a la sección aurea como

la relación matemática perfecta.

Sección áurea en la web

Manteniendo estas proporciones para la distri-

bución de los elementos en nuestra página, po-

dremos conseguir una mayor armonía y hacerla

más atractiva para nuestros usuarios.

Estudios sobre el comportamiento de los usua-

rios navegando, nos indican que las webs se leen

desde arriba a la izquierda, en diagonal, hacia

abajo a la derecha, perdiendo importancia según

se va bajando. Los elementos más importantes

tienen que ir siguiendo esta tendencia.

Si esto lo llevamos a la práctica tendríamos por

ejemplo que para una interfaz 1024 x 768 con

un ancho de 1010 pixeles visibles (le restamos 14

pixeles, que es lo que usan las barras de desli-

zamiento laterales) quedaría dividida en dos co-

lumnas una de 624 y otra de 386, resultado de

dividir 1010 por Phi que da como resultado 624.

Podemos ir repitiendo esta operación hasta ob-

tener una cuadricula con las divisiones que que-

remos para plantear nuestra página web. Este es

un ejemplo muy sencillo de cómo podría quedar

una página con una cabecera, pie de página, y

dividida en dos columnas.

El problema es que normalmente no podemos

saber la altura de la página, ya que varía depen-

diendo del contenido de ésta. Pero podemos

crear una retícula proporcionada para colocar

los diferentes elementos con proporciones áu-

reas.

b) Plantilla digital

Las plantillas web son diseños predeterminados

que sirven como modelo para crear un website

sin necesidad de tener que recurrir a programas

especializados de desarrollo gráfico ni contar

con una formación avanzada en programación

cibernética.

Las posibilidades de las plantillas web

El surgimiento de las plantillas web se da a partir

de la creciente necesidad de crear página web

de manera sencilla y sin tener que recurrir a la

contratación de servicios de una tercera parte.

Lo que esto significa es que mediante el uso de


32

plantillas web, cualquier persona con acceso a

una computadora tiene la posibilidad de crear

una página web de manera intuitiva únicamen-

te teniendo que rellenar campos de información

predeterminados introduciendo los textos que

sea de su interés comunicar.

Otra de las ventajas que representa el crear una

página web con plantillas o templates es que,

en el caso de los editores web más avanzados,

también existe la posibilidad de agregar fotogra-

fías propias e incluso videos, ya sea que estos se

tengan en una memoria física o aún si se toman

desde reproductores online como YouTube o vi-

meo.

Una web de todos y para todos

Lo que las plantillas web representan como avan-

ce tecnológico en sentido práctico, es un paso

más en la democratización del mundo online,

pues a causa de su facilidad de uso permiten que

individuos y organizaciones por igual, sin impor-

tar su tamaño y recursos disponibles, puedan in-

tegrarse a la conversación digital en internet.

8) MAQUETACIÓN

Administración de un sitio web

Se refiere a la distribución de los elementos en

nuestra página.

Es el proceso por el cual se sitúan los contenidos

en la página web obedeciendo a unos espacios,

generalmente divididos en columnas. Antes de la

aparición de CSS la maquetación se hacía con

tablas y actualmente se aconseja hacer con las

Hojas de Estilo en Cascada.

Maquetar una web consiste en tomar el diseño

y la arquitectura del sitio y convertirlo en código

para el programador.

El diseño de un sitio web debe responder y adap-

tarse a las dimensiones del dispositivo en el que

se muestra. Los diseños de cuadrícula fluida pro-

porcionan un medio visual para crear diferentes

diseños correspondientes a dispositivos en los

que se muestra el sitio web.

Por ejemplo, el sitio web se va a mostrar en equi-

pos de escritorio, tabletas y teléfonos móviles.

Puede utilizar diseños de cuadrícula fluida para

especificar diseños para cada uno de estos dis-

positivos. Dependiendo de si el sitio se muestra

en un equipo de escritorio, una tableta o un telé-

fono móvil, se emplea el diseño correspondiente

para mostrar el sitio web.

9) BASES DE CSS3

Propiedades de CSS3

CSS, es un lenguaje utilizado para definir como

se despliega el contenido basado en HTML en

la web. CSS se puede utilizar para controlar un

layout, espacio, colores, fuentes y mucho más.

Ha sido un componente integral de la Web desde

que empezó a ganar popularidad a mediados de

los 90s.

Todas las tecnologías maduran con el paso del

tiempo, por esto es común la adopción de nú-

meros de versiones y términos como “beta”. Es-

tas etiquetas permiten identificar que versión de

una tecnología en particular estas utilizando y así

esperar de manera confiada en el soporte que

tendrán las características de una pieza de sof-


33

tware.

CSS3 es la tercera iteración del estándar CSS; es

la madurez del lenguaje Cascading Style Sheets,

que define nuevas características y permite una

mejor presentación de contenido HTML.

La web cambió para siempre cuando unos años

atrás nuevas aplicaciones desarrolladas sobre

implementaciones Ajax mejoraron el diseño y la

experiencia de los usuarios. La versión 2.0, asig-

nada a la web para describir un nuevo nivel de

desarrollo, representó un cambio no solo en la

forma en que la información era transmitida sino

también en cómo los sitios

web y nuevas aplicaciones eran diseñados y

construidos.

Los códigos implementados en esta nueva ge-

neración de sitios web pronto se volvieron es-

tándar. La innovación se volvió tan importante

para el éxito de cualquier proyecto en Internet

que programadores desarrollaron librerías com-

pletas para superar las limitaciones y satisfacer

los nuevos requerimientos de los diseñadores.

La falta de soporte por parte de los navegadores

era evidente, pero la organización responsable

de los estándares web no tomó las tendencias

muy seriamente e intentó seguir su propio cami-

no. Afortunadamente, algunas mentes brillantes

siguieron desarrollando nuevos estándares en

paralelo y pronto HTML5 nació. Luego del retor-

no de la calma (y algunos acuerdos de por me-

dio), la integración entre HTML, CSS y Javascript

bajo la tutela de HTML5 fue como el caballero

bravo y victorioso que dirige las tropas hacia el

palacio enemigo.

A pesar de la reciente agitación, esta batalla co-

menzó mucho tiempo atrás, con la primera es-

pecificación de la tercera versión de CSS. Cuando

finalmente, alrededor del año 2005, esta tecno-

logía fue oficialmente considerada estándar, CSS

estaba listo para proveer las funciones requeridas

por desarrolladores (aquellas que programado-

res habían creado desde

años atrás usando códigos Javascript complica-

dos de implementar y no siempre compatibles).

En este capítulo vamos a estudiar las contribu-

ciones hechas por CSS3 a HTML5 y todas las

propiedades que simplifican la vida de diseñado-

res y programadores.

CSS3 se vuelve loco

CSS fue siempre sobre estilo, pero ya no más.

En un intento por reducir el uso de código Ja-

vascript y para estandarizar funciones populares,

CSS3 no solo cubre diseño y estilos web sino

también forma y movimiento. La especificación

de CSS3 es presentada en módulos que permiten

a la tecnología proveer una especificación están-

dar por cada aspecto involucrado en

la presentación visual del documento. Desde es-

quinas redondeadas y sombras hasta transfor-

maciones y reposicionamiento de los elementos

ya presentados en pantalla, cada posible efecto

aplicado previamente utilizando Javascript fue

cubierto.

Este nivel de cambio convierte CSS3 en una tec-

nología prácticamente inédita comparada con

versiones anteriores.

Cuando la especificación de HTML5 fue escrita

considerando CSS a cargo del diseño, la mitad de

la batalla contra el resto de las especificaciones

propuesta había sido ganada.


34

¿Qué hay de nuevo?

Desde su adopción, CSS ha permitido ajustar

la presentación de la información de conteni-

do HTML. Fuentes, colores, imágenes de fondo,

bordes sólidos y así sucesivamente, se han confi-

gurado fácilmente a traves de estilos CSS.

CSS3 no se opone a las capacidades existentes

de la web, en cambio, aumenta y extiende las ca-

pacidades de un navegador para el soporte de

mejores características y mejor presentación de

contenido basado en HTML.

Módulos CSS3

Iteraciones previas de la especificación de CSS,

fueron definiciones acompasadas de lo que aho-

ra es el lenguaje CSS. En CSS3, la especificación

se dividió en una colección de especificaciones

más pequeñas, conocidas como módulos. Cada

módulo define aspectos de funcionalidad den-

tro de un conjunto. Un módulo se encarga de

media selectors, otro de colores, otro de SVG, y

así sucesivamente. El enfoque modular permite

la aprobación de aspectos específicos de la es-

pecificación CSS para que se aprueben e imple-

menten como un estándar más rápido de lo que

tomaría una especificación masiva que incluya

todas sus características; que indudablemen-

te tomaría más tiempo para ser ratificada como

un estándar. Esto significa que es un estándar

en evolución constante, donde unos aspectos

se pueden estandarizar antes que otros. Puedes

aprender más del diseño modular de la especifi-

cación CSS3 en la W3C.

El movimiento de la Web 2.0 trajo consigo un

nuevo nivel de diseño basado en interfaces. Las

páginas ya no eran una organización de colores

sólidos, imágenes y cuadros. Las interfaces basa-

das en HTML empezaron a surgir con fuentes no

estandarizadas, degradados complejos, esqui-

nas redondeadas y sobre todo un look and feel

mucho más refinado. La combinación de HTML

y CSS que se utilizó para crear estas interfaces,

regularmente se hacía complejo, frágil y poco

manejable. CSS3 introduce nuevos estilos para

un mejor control sobre la presentación de estas

sofisticadas interfaces.

CSS3 define estilos que controlan la redondez

de las esquinas de divs, spans, u otros elementos

de HTML; así al crear una caja, ya no requieres

de múltiples contenedores anidados e imágenes

recortadas. Ahora se puede especificar a través

de simples definiciones de CSS, en un solo con-

tenedor HTML.

CSS3 es comúnmente mal concebido como una

característica dentro de HTML5. Mientras que

CSS3 y HTML5 generalmente se complementan,

no son sinónimos. HTML5 es la quinta iteración

de la especificación HTML (Hyper Text Markup

Language), que es usado para definir la estruc-

tura, contenido y capacidades en documentos

HTML.

HTML5 permite el uso de nuevas etiquetas y el

soporte de rich media, mientras que CSS3 defi-

ne reglas para personalizar la presentación de la

interface del usuario. CSS3 define como el con-

tenido HTML será presentado dentro del nave-

gador.

La mayoría de los navegadores de escritorio (In-

ternet Explorer, Chrome, Firefox, Safari, Opera)

soportan muchas características de CSS3. Sin

embargo, sólo las últimas versiones de estos na-

vegadores realmente soportan la mayoría de las

características de CSS3. Versiones anteriores de


35


36

estos populares navegadores pueden no tener

soporte de algunas características de CSS3 inclu-

so de ninguna. Si aprovechas los estilos de CSS3

dentro de tu contenido, debes asegurarte de que

la audiencia a la que te diriges, puede visualizar

esos elementos, antes de ir más adelante.

Si te diriges a navegadores móviles, entonces

tienes suerte. CSS3 tiene soporte en la mayoría

de los sistemas operativos de smartphones. Esto

incluye el navegador predeterminado para iOS,

Android, BlackBerry e incluso la última genera-

ción de dispositivos Windows. De hecho, los na-

vegadores móviles, tienen el mejor soporte para

CSS3. El truco es que no todos los navegadores

de escritorio y móviles soportan las característi-

cas de igual forma.

CSS externos

Aunque el CSS interno nos permite unificar en

una declaración todos los estilos para un archivo

html, seguimos teniendo el problema de tener

que repetir la definición de estilos en la cabecera

de cada uno de los archivos html de nuestro de-

sarrollo web. Si el desarrollo tiene pocos archivos

quizás sea menos problemático, pero cuando el

desarrollo tiene cientos o miles de archivos sí

se convierte en un verdadero problema, ya que

cada vez que introdujéramos cambios habría que

hacerlo en los cientos o miles de archivos de que

constara el desarrollo.

Para solventar esta solución se ideó la declara-

ción externa de CSS, basada en declarar los esti-

los CSS en un archivo independiente que puede

servir como referente para dotar de estilos a de-

cenas, cientos o miles de archivos html, que úni-

camente deberán invocar el nombre de archivo

utilizando una sintaxis específica. De este modo

un cambio en los estilos habrá que hacerlo úni-

camente en el archivo de estilos correspondien-

te, lo cual supone una gran ventaja. Incluso un

cambio completo de los estilos de una página

web se puede conseguir simplemente sustitu-

yendo el archivo correspondiente.

Seguimos usando las mismas propiedades CSS y

los mismos valores que hemos usado en la forma

CSS en línea y en la forma CSS interna.

Los contenidos que se encuentren entre los sím-

bolos /* …. */ serán considerados comentarios y

se pueden usar para introducir información del

autor del archivo, versión, etc. así como para es-

cribir aquellas aclaraciones sobre los estilos que

se consideren necesarias. Un comentario puede

comprender una o varias líneas según se desee.

Elige Guardar Como… y guarda el archivo con un

nombre y extensión css, por ejemplo estilos.css.

Asegúrate que la extensión del archivo sea css.

No es válido si no tiene esta extensión.

En nuestro archivo HTML eliminaremos la defini-

ción de estilos interna y dejaremos sólo la invo-

cación al archivo escrita con la siguiente sintaxis:

<head>

<link rel=”stylesheet” type=”text/css” href=”ruta-

DelArchivo.css”>

</head>

<link> es una etiqueta que se usa en HTML para

establecer vínculos entre un documento HTML y

otros recursos como una imagen de icono o una

hoja de estilos CSS. En este caso se indica con

la propiedad rel (relación o relationship) que el

documento HTML debe usar los estilos definidos


37


38

como texto/css en un archivo con el nombre in-

dicado. Ten en cuenta que si como ruta de archi-

vo indicas simplemente el nombre del archivo,

éste debe encontrarse en la misma carpeta en

que se encuentre el documento HTML. Si el ar-

chivo CSS se encuentra en otra carpeta deberás

indicarlo escribiendo una URL completa u bien

una URL relativa que determine la ruta.

Declarar los estilos en la cabecera del documen-

to ahorra espacio y vuelve al código más con-

sistente y actualizable, pero nos requiere hacer

una copia de cada grupo de estilos en todos los

documentos de nuestro sitio web. La solución

es mover todos los estilos a un archivo externo

y luego utilizar el elemento <link> para insertar

este archivo dentro de cada documento que los

necesite. Este método nos permite cambiar los

estilos por completo simplemente incluyendo

un archivo diferente.

También nos permite modificar o adaptar nues-

tros documentos a cada circunstancia o dispo-

sitivo.

Utilizando la línea <link rel=”stylesheet” href=”ar-

chivo.css”> le decimos al navegador que

cargue el archivo archivo.css porque contiene

todos los estilos necesitados para presentar el

documento en pantalla.

Esta práctica fue ampliamente adoptada por di-

señadores que ya están trabajando con HTML5.

La etiqueta <link> referenciando el archivo CSS

será insertada en cada uno de los documentos

que requieren de esos estilos:

<!DOCTYPE html>

<html lang=”es”>

<head>

<title>Este texto es el título del documento</tit-

le>

<link rel=”stylesheet” href=”misestilos.css”>

</head>

<body>

<p>Mi texto</p>

</body>

</html>

Almacenar todos nuestros estilos en un archivo

externo e insertar este archivo dentro de cada

documento que lo necesite es muy convenien-

te, sin embargo no podremos hacerlo sin buenos

mecanismos que nos ayuden a establecer una

específica relación entre estos estilos y los ele-

mentos del documento que van a ser afectados.

Extensión Web Developer

Para obtener Web Developer, la barra de herra-

mientas para desarrolladores, tienes que acceder

con tu Firefox a la siguiente dirección: https://

addons.mozilla.org/es-ES/firefox/addon/60/.

Como decíamos, esta extensión crea una nueva

barra de navegación, que se sitúa en la parte de

arriba de la ventana de Firefox. Esta barra de nave-

gación contiene una serie de funciones ordenadas

en varios botones. Veremos las más interesantes:

Disable: Sirve para deshabilitar diversos


39

componentes o partes del navegador. Por

ejemplo, para deshabilitar la caché, Javascript, el

bloqueador de popups, los colores de la página…

Cookies: nos permite hacer cosas con

las cookies, como no permitirlas o

encontrar información completa de las

cookies que nos envían en cada página.

CSS: para realizar diversas acciones sobre las hojas

de estilo. Nos permite no aplicarlas a la página,

ver algunos estilos y otros no… incluso tiene una

opción para editar las hojas de estilo en el propio

Firefox y así ver cómo, alterando el código CSS

de la página, se cambia el aspecto de la web.

Forms: nos permite realizar diversas acciones

sobre formularios, como reasaltar y obtener

información de todos sus campos. Pero también

nos permite hacer cosas más peregrinas, como

cambiar un campo select por un campo de texto,

completar con textos todos los campos del

formulario o quitar los maxlength de los campos.

Images: dispone de diversas opciones para alterar

la presencia de las imágenes. Puedes permitirlas

o deshabilitarlas, incluso deshabilitar sólo las

imágenes que son externas al sitio web. Mos-

trar información de las imágenes, como sus ru-

tas, tamaño en bytes, dimesiones en píxeles, etc.

Information: nos permite obtener más información

de un montón de elementos de la página. Permite

ver información sobre las anclas, el tamaño

del documento, la profundidad de las tablas, el

Javascript que se está ejecutando, información

de los enlaces, etc. Hay tantas cosas que algunas

son difíciles de entender qué es lo que muestran.

Miscellaneous: son varias opciones de distinta

índole, como mostrar comentarios, unas guías

para saber la localización de puntos en la pági-

na, editar el código HTML para ver qué ocurre

directamente al cambiar el código de cualquier

página sin tener que subirla al servidor, una vi-

sualización de la página en dispositivos con pan-

tallas pequeñas.... Estas son opciones desco-

nectadas entre si, pero algunas bastante útiles.

Outline: que sirve para destacar elementos

de la página, como los enlaces, frames,

tablas, celdas, elementos obsoletos que se

puedan estar utilizando en el código, etc.

Resize: es una interesante utilidad para

redimensionar la ventana del navegador,

para observar el aspecto que tiene la

web si se redimensiona la ventana a

otros tamaños o definiciones de pantalla.

Tools: contiene unas herramientas muy útiles,

como verificador de links, validadores del código,

acceso a la consola de Java o Javascript, etc.

View Source: como su nombre indica, nos sirve

para ver el código fuente.

http://www.desarrolloweb.com/articulos/2413.

php

Qué es una división <div>

La etiqueta <div> define una división. Esta etique-

ta permite agrupar varios elementos de bloque

(párrafos, encabezados, listas, tablas, divisiones,

etc). En principio, los navegadores no muestran

nada especial cuando se crea una división, salvo

que se dé formato a la división con la hoja de


40

estilo.

Divisiones anidadas

La etiqueta <div> se puede anidar (es decir, que

una división puede contener otras divisiones),

por lo que se utiliza para estructurar en bloques

el contenido de la página web.

Para distinguir unas divisiones de otras en la hoja

de estilo se pueden utilizar clases o selectores de

tipo o selectores de descendientes, como en el

ejemplo siguiente:

Cuándo utilizar una división

Las divisiones son elementos muy útiles, puesto

que permiten agrupar elementos, pero hay que

evitar las divisiones innecesarias. Por ejemplo, en

general no suele ser necesario crear divisiones

cuando sólo contienen un elemento.

Los dos ejemplos siguientes ilustran esa situa-

ción. En el primer ejemplo, se han creado tres

divisiones (una por cada párrafo) para dar el color

de fondo. Esas divisiones son innecesarias, direc-

tamente se podía haber dado color de fondo a

los párrafos, como se ha hecho en el segundo

ejemplo. El resultado es idéntico en ambos ca-

sos.

<header>

Este elemento presenta información

introductoria y puede ser aplicado en diferentes

secciones deldocumento. Tiene el propósito

de contener la cabecera de una sección pero

también puede ser utilizado paraagrupar índices,

formularios de búsqueda, logos, etc…

<footer> Define una región pie de página o foo-

ter de una página o de una sección. Define la in-

formación del pie de página de la página web o

de una sección. Como se ha visto a lo largo del

tiempo el pie de página generalmente contienen

información de derechos de autor ( copyrigth )

o acerca de quién es el dueño de la página. La

especificación dice que se pueden tener varios

pies de página en un documento.

<nav> Define una región de navegación de una

página o de una sección. Los elementos de

navegación son vitales para el éxito de un si-

tio web. Se debe de facilitar a sus usuarios que

encuentren lo que buscan, lo que justifica te-

ner para la navegación su propio tag HTML.

Ahora se agrega una sección de navegación al

header del documento. Esto se logra utilizando

el tag nav; este elemento define una sección que

está destinada o definida para alojar elementos

de navegación.

<section> Define una región lógica de una página

o un grupo de contenido. Secciones y artículos.

Las secciones son las regiones lógicas de una

página y el elemento section está aquí para evitar

los abusos en el uso del tag div. Debes usar las

secciones para agrupar lógicamente el conteni-

do de tu página web.

<article> Define un artículo o una pieza comple-

ta de contenido. El elemento article describe el

contenido real de una página web. Con tantos

elementos en la página (headers, footers, ele-

mentos de navegación, etc.), en ocasiones se

olvida que las personas van a una página en bús-

queda de cierto contenido, el tag article ayuda

a resaltar este contenido. Cada artículo debe de

contener un header, cierto contenido y un foo-


41

ter.

<aside> Define un contenido secundario. En

ocasiones se tiene algún contenido extra que

agrega un buen comentario o refuerza el con-

tenido principal de tu página, puedes utilizar el

nuevo tag aside para identificar estos elementos.

Se incrusta este elemento aside dentro del arti-

culo para mantenerlo cerca del contenido rela-

cionado.

Main

Se usa para contener o representar el conteni-

do principal del cuerpo (body) de una página o

aplicación web.

Solo puede albergar el contenido de la pági-

na que es ÚNICO, por lo que excluiremos todo

contenido que se pueda repetir en diferen-

tes paginas como puede ser el footer o pié de

página, el header o cabecera, menús (si el menú

es unico para una sección, esta puede estar den-

tro del contenedor main) , aside o barras latera-

les, etc…

CLASs

La mayoría del tiempo, en lugar de utilizar

el atributo

id

para propósitos de estilos es mejor utilizar

class

. Este atributo esmás flexible y puede ser

asignado a cada elemento HTML en el do-

cumento que comparte un diseño similar:

La razón por la que debemos utilizar un

punto delante del nombre de la regla es

que es posible construir referencias más-

complejas. Por ejemplo, se puede utilizar

el mismo valor para el atributo

class

en diferentes elementos pero

asignar diferentes estilos para cada tipo:

p.texto1 { font-size: 20px

ELEMENTOS FLOTANTES

Los elementos se pueden hacer flotar a la dere-

cha o a la izquierda usando la propiedad float. Es

decir, que la caja con su contenido flota bien a la

derecha o la izquierda de un documento (o de la

caja contenedora)

TEORIA DE FLUIDOS

El peso que empiezan a tener en las analíticas

las visitas desde terminales iOS y Android ha-

cen que los diseñadores y responsables de si-

tios web empiecen a plantearse seriamente la

necesidad de adaptar sus diseños y contenidos

para dispositivos móviles. Cuando esta necesi-

dad surge, se nos plantean dos alternativas:

1.- Crear una versión alternativa de nues-

tro sitio específica para móviles. Sitios web

comomarca utilizan una versión completa para

navegadores de escritorio y otra alternativa

para navegadores de dispositivos móviles.

Generalmente, esta opción es conveniente

cuando no solo necesitamos adaptar el

diseño sino también el contenido a mostrar.

Sitios muy pesados, con muchas imágenes y

contenido en su versión completa pueden re-


42

sultar lentos de cargar en dispositivos móviles

que disponen de menos recursos de hardware

(RAM, procesador…) y velocidades de conexión

a internet más lentas. En este caso se desarrolla

una versión “light” de la web en cuanto a con-

tenidos y se aprovecha para adaptar también el

diseño.

2.- Publicar la misma web para escritorio y mó-

viles usando “responsive design”. El responsive

designo diseño adaptable, consiste en hacer que

nuestra web adapte su diseño en función de cier-

tos parámetros del dispositivo que navega por

nuestro sitio web, generalmente el tamaño de la

pantalla. Los contenidos son idénticos (en todo

caso se muestran u ocultan algunas partes de la

maquetación) pero la apariencia y colocación de

los elementos cambia para adaptarse al tamaño

de la ventana del navegador que muestra la web.

favicon.ico

El favicon o icono para favoritos es el pequeño

icono que muestran las páginas en varias partes

del

navegador. Dependiendo del navegador que se

utilice, este icono se muestra en la barra de di-

recciones,

en la barra de título del navegador y/o en el menú

de favoritos/marcadores.

Un favicon tiene normalmente un tamaño de

16x16 píxeles, aunque puede tener un tamaño

mayor

(32x32, 64x64 o 128x128) que actualmente los

navegadores suelen escalar.

QR

Los códigos QR (en inglés “Quick Response”,

“respuesta rápida”) son códigos de barras bidi-

mensionales, que fueron desarrollados por la

compañía japonesa Denso Wave, en 1994.

Respecto a los datos que puede manejar, te

interesará saber que pueden contener hasta

4.200 caracteres alfanuméricos, es decir, letras,

números y caracteres.

La matriz de puntos en la que se guardan los da-

tos no es legible para el ojo humano. Se debe

leer con un teléfono móvil o con un dispositivo

que disponga de la aplicación correspondiente

(un lector de códigos QR). La lectura del código

se lleva a cabo en cuestión de segundos. Además,

gracias a la corrección de errores, la lectura tam-

bién funciona si falta alguna pieza en el código.

Los códigos QR se pueden crear y guardar como

un archivo gráfico o imagen. Luego se pue-

den colocar en una tarjeta de visita, en un sitio

web o, por ejemplo, enviarlos por correo elec-

trónico o mediante mensajería instantánea.

GOOGLE MAPS

Google Maps es un servidor de aplicaciones de

mapas en la web que pertenece a Google. Ofrece

imágenes de mapasdesplazables, así como foto-

grafías por satélite del mundo e incluso la ruta

entre diferentes ubicaciones o imágenes a pie de

calleGoogle Street View.

Puedes añadir un mapa a tu sitio web o blog. Para

insertar un mapa básico, indicaciones en coche

o mapas creados por otros:

Abre la versión clásica de Google Maps.

Nota: Estas instrucciones solo son aplicables a la

versión clásica de Maps.


43

Asegúrate de que el mapa que quieras insertar

aparezca en la pantalla de mapa actual.

Haz clic en el botón “Enlazar” de la esquina su-

perior izquierda.

En el cuadro que aparece, copia el código HTML

de debajo de “Pegar HTML para insertar en sitio

web” y pégalo en el código fuente de tu sitio web

o blog.

INSERTAR UN VIDEO

Busca el vídeo que quieras incluir o sube uno

tuyo

Busca la opción insertar o, si estás viendo este

vídeo de YouTube en otra página que no sea you-

tube.com, (en otras palabras, ya está incrustado)

la opción aparecerá al final del vídeo.

Copia el código

Pega el código en tu página donde quieras que

aparezca el vídeo.

FORMULARIO HTML

Los formularios interactivos permiten a los auto-

res de páginas Web poner elementos interactivos

en sus páginas, por ejemplo, para recibir mensa-

jes de sus lectores, de forma similar a las cartas

de respuestas que se encuentra en algunas re-

vistas.

El lector escribe la información rellenando cam-

pos o haciendo clic sobre botones, y luego pre-

siona un botón de envío para enviarla a una di-

rección URL que se suele dirigir a una dirección

de correo electrónico o a un script dinámico

Web como PHP, ASP o CGI.

La etiqueta FORM

Los formularios están delimitados con la etique-

ta <FORM> ... </FORM>, que permite reunir va-

rios elementos de formulario, como botones y

casillas de texto y que debe poseer los siguientes

atributos:

METHOD indica cómo se enviarán las respuestas

“POST” es el valor que envía los datos al agente

de procesamiento almacenándolos en el cuerpo

del formulario, en tanto que “GET” envía los datos

agregándolos a la dirección URL y separándolos

de la dirección con un signo de interrogación

(para aprender más sobre los métodos POST y

GET, consulte el artículo sobre protocolo HTTP)

ACTION indica la dirección a la que se enviará la

información (un script CGI o dirección de correo

electrónico (mailto:dirección_de_correo_e@

equipo))

Un atributo opcional de la etiqueta FORM es ENC-

TYPE, que especifica cómo se codifican los da-

tos del formulario. De cualquier forma, esto no

necesita especificarse, ya que el valor predeter-

minado (application/x-www-form-urlencoded)

es el único valor válido. El atributo opcional AC-

CEPT se usa para establecer tipos MIME para los

datos que el formulario puede enviar.

Dentro de la etiqueta FORM

La etiqueta FORM actúa como una especie de

contenedor para almacenar elementos que per-

miten al usuario seleccionar o introducir datos.

Todos los datos se enviarán a la dirección URL

indicada en el atributo ACTION de la etique-

ta FORM, por el método indicado en el atribu-

to METHOD.

Se puede insertar cualquier elemento HTML en

una etiqueta FORM (como texto, botones, tablas


44

y enlaces), pero los elementos interactivos son

los más interesantes. Estos elementos interacti-

vos son:

La etiqueta INPUT: Todos los botones y casillas

de texto

La etiqueta TEXTAREA: una casilla de texto

La etiqueta SELECT: una lista de opciones múl-

tiples

La etiqueta TEXTAREA

La etiqueta TEXTAREA se usa para definir un cua-

dro de texto más grande que la línea simple pro-

puesta por la etiqueta INPUT. Esta etiqueta tiene

los siguientes atributos:

cols: representa el número de caracteres que

puede contener un línea

rows: representa el número de líneas

name: representa el nombre asociado con el

cuadro de texto, que permite su identificación en

el par nombre/valor.

readonly: impide que el usuario modifique el tex-

to predeterminado en el campo

value: representa el valor predeterminado que se

enviará al script si el usuario no ha escrito nada

en el cuadro de texto

La etiqueta SELECT

La etiqueta SELECT sirve para crear una lista des-

plegable de elementos (especificados por las eti-

quetas OPTION dentro de ella). Los atributos de

esta etiqueta son:

name: name: representa el nombre asociado con

la casilla de texto, que permite su identificación

en el par nombre/valor.

disabled: crea un lista desactivada, que aparece

atenuada

size: representa el número de líneas de la lista

(este valor puede ser más grande que el número

de elementos reales de la lista).

multiple: Permite al usuario seleccionar varios

campos de la lista

La etiqueta INPUT

La etiqueta INPUT es una etiqueta esencial para

los formularios, ya que se usa para crear muchos

elementos “interactivos”

El atributo name es esencial, ya que permi-

te al script CGI reconocer qué campo está asocia-

do con un par nombre/valor, lo que significa que

el nombre del campo estará seguido de un signo

igual (“=”) seguido de un valor que el usuario in-

trodujo, o si el usuario no introdujo ningún valor,

por el valor predeterminado de la etiqueta value.

El atributo type se usa para especificar qué tipo

de elemento se representa con la etiqueta INPUT.

Estos son los valores posibles:

checkbox: Las casillas de elección pueden adop-

tar uno de dos estados: checked (seleccionado)

o unchecked (no seleccionado). Cuando la casi-

lla es seleccionada, el par nombre/valor se envía

al CGI.

hidden: Este campo, que el navegador no mues-

tra, es para definir una configuración única que

se enviará al CGI como par nombre/valor.

file: Un campo que permite al usuario especificar

una ruta de archivo que lleva al archivo que se

enviará con el formulario. Los tipos de archivo

que pueden ser enviados deben especificarse uti-

lizando el atributo ACCEPT de la etiqueta FORM.


45

image: Un botón de envío personalizado que

aparece cuando se ubica una imagen en la ubi-

cación definida por el atributo SRC.

password: Una casilla de texto donde los carac-

teres escritos aparecen como asteriscos para ca-

muflar el texto de entrada.

radio: Un botón que permite al usuario elegir en-

tre varias opciones. Cada uno de estos botones

debe tener el mismo atributo name. El par nom-

bre/valor del botón radio seleccionado se envia-

rá al CGI. Al aplicar el atributo checkedpara uno

de estos botones se definirá como seleccionado

de forma predeterminada.

reset: Un botón de restauración para quitar to-

dos los elementos en el formulario y restablecer

sus valores predeterminados.

submit: Un botón de envío para enviar el formu-

lario. El texto en el botón puede definirse usando

el atributo value.

text: Una casilla de texto para escribir una línea

de texto. El tamaño de la casilla puede definirse

usando el atributo size y la extensión máxima del

texto con el atributo maxlength.

Botones

botón de envío de formulario (botón de submit)

Para dar por finalizado el proceso de relleno del

formulario y hacerlo llegar a su gestor, el na-

vegante ha de enviarlo por medio de un botón

previsto a tal efecto. La construcción de dicho

botón no reviste ninguna dificultad una vez fami-

liarizados con las etiquetas INPUT ya vistas:

<input type=”submit” value=”Enviar”>

Final del formulario

Como puede verse, tan solo hemos de especifi-

car que se trata de un botón de envío (type=”sub-

mit”) y hemos de definir el mensaje que quere-

mos que aparezca escrito en el botón por medio

del atributo value. Este tipo de campos INPUT,

para envío de formularios, a menudo se conocen

simplemente como “botones de submit”.

Nota: Al enviar el formulario se creará un mensa-

je con tu programa de correo, que se debe enviar

con ese propio programa de correo, para que

llegue al destinatario. Este es el comportamiento

típico de los formularios que se programan con

HTML, que requiere que el usuario tenga un pro-

grama de correo instalado y configurado para

que funcione.

Una duda típica es cómo realizar el formulario

para que se envíe directamente desde la página

web, sin que el usuario deba tener un programa

de correo, sino que se pulse el botón de enviar y

se genere y envíe el mensaje automáticamente.

Para ello es necesario realizar algo de progra-

mación, aparte del propio formulario en HTML,

en un lenguaje avanzado, que sea del lado del

servidor, como PHP, ASP... En DesarrolloWeb.

com tienes todo lo que necesitas para aprender

a conseguir el envío automático de correos, con

explicaciones detalladas para obtener los resul-

tados por varias vías. Te recomendamos leer el

manual Envío de formularios avanzado.

botón de borrado (botón de reset)

Este botón nos permitirá borrar el formulario por

completo, en el caso de que el usuario desee re-

hacerlo desdeel principio. Su estructura sintácti-

ca es análoga a la anterior:

<input type=”reset” value=”Borrar”>


46

A diferencia del botón de envío, indispensable en

cualquier formulario, el botón de borrado resulta

meramente optativo y no es utilizado frecuen-

temente. Hay que tener cuidado de no ponerlo

muy cerca del botón de envío y de distinguir cla-

ramente el uno del otro, para que ningún usuario

borre el contenido del formulario que acaba de

rellenar por error.

Datos ocultos (campos hidden)

En algunos casos, aparte de los propios datos

rellenados por el usuario, puede resultar prácti-

co enviar datos definidos por nosotros mismos

que ayuden al programa en su procesamien-

to del formulario. Este tipo de datos, que no se

muestran en la página pero si pueden ser detec-

tados solicitando el código fuente, no son fre-

cuentemente utilizados por páginas construidas

en HTML, son más bien usados por páginas que

emplean tecnologías de servidor. No os asustéis,

veremos más adelante qué quiere decir esto. Tan

solo queremos dar constancia de su existencia y

de su modo creación. He aquí un ejemplo:

<input type=hidden name=”sitio” value=”www.

desarrolloweb.com”>

Esta etiqueta, incluida dentro de nuestro formu-

lario, enviara un dato adicional al correo o pro-

grama encargado de la gestión del formulario.

podríamos, a partir de este dato, dar a conocer

al programa el origen del formulario o algún tipo

de acción a llevar a cabo (una redirección por

ejemplo).

Botones normales

Dentro de los formularios también podemos co-

locar botones normales, pulsables como cual-

quier otro botón. Igual que ocurre con los cam-

pos hidden, estos botones por si solos no tienen

mucha utilidad pero podremos necesitarlos para

realizar acciones en el futuro. Su sintaxis es la si-

guiente.

<input type=button value=”Texto escrito en el

botón”>

Principio del formulario

Final del formulario

El uso más frecuente de un botón es en la pro-

gramación en el cliente. Utilizando lenguajes

como Javascript podemos definir acciones a to-

mar cuando un visitante pulse el botón de una

página web.

Estructura lógica y fisica

Tipos de sitios y arquitecturas

Los sitios Web pueden clasificarse en categorías,

tales como sitios Intranet, Extranet, otambién

pueden clasificarse en clases, como por ejemplo

sitios comerciales o páginas personales. Depen-

diendo de sus objetivos cada sitio tendrá un di-

seño diferente y para lograr los objetivos se debe

tener una adecuada organización del mismo.

Tipos comunes de sitios Web

Un sitio Web público es un sitio cuyo acceso no

está restringido explícitamente a ningún tipo de

usuarios

Un sitio Web Intranet es un sitio que está reser-

vado a una determinada organización general-

mente dentro de una red privada

Un sitio Extranet es un sitio Web al que puede al

que puede acceder una clase limitada de usua-

rios a través de Internet


47

Un sitio Interactivo es elk que los usuarios pue-

den actuar directamente sobre el contenido del

sitio o con otros usuarios del mismo

Un sitio estático es aquel que su contenido es

fijo, y que los usuarios no pueden interactuar con

el contenido, excepto en el orden en que se de-

sea ver el contenido.

Un sitio generado dinámicamente es aquel que

sus páginas se generan en el momento de la so-

licitud por parte del usuario

Hay dos tipos de estructuras en cualquier sitio

Web: la lógica y la física. La estructura lógica re-

seña como se relacionan entre sí los documen-

tos y define los vínculos entre documentos. La

estructura física describe donde se encuentra

realmente el documento.

ESTRUCTURA DE UN SITIO WEB

1.- ESTRUCTURA CANONICA

default.htm ------------------> Pagina Princi-

pal el Sitio Web.

Paginas ----------------------> Carpeta don-

de se guardan las paginas del Sitio Web.

Imagenes -------------------> Carpeta donde

se guardan las ilustraciones de la Pagina Principal

solamente.

Sonidos ---------------------> Carpeta don-

de se guardan los sonidos de la Pagina Principal

solamente.

2.- UNIDAD INFORMATIVA : Paginas

Corresponde a cada una de las paginas web co-

rrespondientes a su estructura funcional.

PaginaXX.htm -----------> Corresponde a un

determinado contenido informativo.

Paginas -------------------> Carpeta donde se

guardan las paginas dependientes de ésta pagi-

na.

Imagenes ----------------> Carpeta donde se

guardan las ilustraciones de ésta pagina.

Sonidos ------------------> Carpeta donde se

guardan los sonidos de ésta pagina

ESTRUCTURA FÍSICA DE SITIOS WEB

Un SITIO WEB esta formado por una pagina úni-

ca o por varias paginas web organizadas con di-

ferentes estructuras

Única Lineal Jerárquica Mallada

PAGINA ÚNICA

Cuando se trata de una sola pagina de un Sitio

Web, el TITULO tiene un Encabezado 1 con color

llamativo y su estructura está formada por PA-

RRAFOS identificados por subtítulos, general-

mente con Encabezado 3 y con un color dife-

rente. Generalmente se utilizan fuentes sin serif.

El texto de los parrafos generalmente está escri-

to con tamaño 12 y con fuentes con serif ( Arial,

Times, Etc.)

ESTRUCTURA LINEAL

Está formada por varias paginas web encadena-

das una detras de la otra. Esta estructura tambien

se conoce con el nombre de LIBRO ELECTRO-


48

NICO y en el caso de Modulos Instruccionales

con el nombre de TUTORIALES.

ESTRUCTURA JERÁRQUICA

Esta organizada en forma de árbol, donde hay

paginas relacionadas en forma lineal. Esta es-

tructura es la mas típica cuando se tiene un sis-

tema infológico bien diseñado.

ESTRUCTURA MALLADA

Está organizada de tal forma que las paginas

tienen relación entre si, no distinguiéndose una

dependencia jerárquica, salvo con la pagina prin-

cipal. Es la estructura mas versátil pero la mas di-

fícil de diseñar.

ANCLAS O MARCADORES

Ubicación especial y determinada con un nom-

bre en una página la cual es el destino de un en-

lace. Los marcadores o anclas permiten que los

autores diseñen vínculos a una sección específi-

ca de una página de destino.

Un marcador o ancla se puede aplicar a un juego

de caracteres o puede existir en una página se-

parado de cualquier texto.

En una dirección URL, delante del marcador se

muestra un signo de número (#). Por ejemplo :

paginasweb/hipertexto#anclas

Esto indica que en la página hipertexto del si-

tio paginasweb se tiene que ir a un sitio especial

marcado con el nombre anclas.

La marca o ancla no es visible al usuario de la

pagina que esta viendo.

Por ejemplo, al presionar la palabra arriba Ud.

pasa a ver el titulo de este tema.

ENLACES

Un enlace o hipervinculo es una conexión desde

un texto o desde un mapa de imágenes a una pá-

gina u otro tipo de archivo del World Wide Web.

En las páginas Web, los enlaces son la forma

principal de explorar páginas y sitios Web o de

lo que se conoce familiarmente como navegar.

Un enlace o hipervínculo es una conexión desde

una página del World Wide Web a otra ubicación

del World Wide Web. El destino del enlace suele

ser otra página Web, pero también puede ser una

imagen, una dirección de correo electrónico, un

archivo multimedia o incluso un programa.

Los enlaces están incrustados directamente en

el texto o las imágenes de una página y ofrecen

indicaciones textuales o gráficas sobre el lugar al

que llevan. Por ejemplo, un enlace de texto de

la frase “Mérida Virtual” y un enlace de imagen

del logotipo de Mérida indicarían que el enlace

conduce a una página que contiene datos, infor-

mación o conocimientos sobre Mérida.


49

Normalmente, los exploradores de Web sub-

rayan los enlaces de texto y lo muestran en un

determinado color, generalmente de color azul

subrayado.

Por ejemplo: Si desea pasar al contenido de esta semana lo puede hacer presionando las

palabras marcadas en azul y subrayadas. (NOTA:

Debe cerrar la ventana para continuar)

Los enlaces de imágenes son invisibles. No obs-

tante, los usuarios saben cuándo el puntero está

sobre un hipervínculo porque cambia su aparien-

cia, normalmente a una mano que señala algo.

Cuando se inserta un enlace en una página, el

destino de dicho enlace se codifica como direc-

ción URL (Localizador de Recursos Uniforme).

Esta proporciona la dirección de un archivo del

World Wide Web e identifica el servicio de Inter-

net, como HTTP, FTP, etc. que controlará el ar-

chivo.

Las direcciones URL pueden ser absolutas o re-

lativas.

Una dirección URL es absoluta, llamada tam-

bien físíca, cuando la dirección completa de una

página o de un archivo, incluye el protocolo, la

ubicación de red, la ruta de acceso y el nombre

del archivo, este último puede ser opcional. Por

ejemplo:

http://cavirtual.ing.ula.ve

es una dirección URL absoluta.

Una dirección URL relativa, llamada tambien ló-

gica, es una dirección URL a la que le falta una o

más partes. Los exploradores toman la informa-

ción que falta de la página que contiene la di-

rección URL. Por ejemplo, si falta el protocolo,

el explorador utilizará el protocolo de la página

actual y, si falta la ubicación de red, el explorador

utilizará la ubicación de red de la página actual.

Por ejemplo :

../../../../presentacion.htm

El tipo más común de dirección URL relativa sólo

contiene un nombre de archivo y una ruta par-

cial, pero no la ubicación de red. Si la página uti-

liza este tipo de dirección URL relativa para hacer

un enlace a otra página y ambas se mueven a

otro servidor, el enlace funcionará si las posicio-

nes relativas de las páginas permanecen igual en

el nuevo servidor. Por ejemplo, la dirección URL

relativa hipertexto.htm señala a una página de la

misma carpeta que la página que contiene el en-

lace. Si se movieran ambas páginas a la misma

carpeta de otro servidor, la dirección URL segui-

ría siendo correcta.

.

También se pueden crear enlaces a direcciones

de correo electrónico. Cuando un usuario que

está visitando su sitio Web hace clic en un enlace

de éste tipo, el explorador Web le solicitará un

mensaje y enviará el mensaje a la dirección de

correo electrónico especificada. Un enlace típico

para enviar un correo electrónico es el siguiente:

[email protected]

MAPAS

Ilustración que contiene una o más regiones in-

visibles, que se denominan zonas activas y que

están asignadas a determinados enlaces.

Normalmente, un mapa de imágenes ofrece a los

usuarios pistas visuales sobre la información que


50

está disponible al hacer clic en cada parte de la

imagen. Por ejemplo, un mapa geográfico podría

convertirse en un mapa de imágenes mediante

la asignación de zonas activas a cada región de

interés del mapa.

El mapa de imágenes puede estar del lado del

cliente o del servidor.

El mapa de imágenes está del lado del cliente

cuando codifica la dirección URL de destino de

cada zona activa directamente en la página. Los

mapas de imágenes del lado del cliente no re-

quieren procesamiento alguno por parte de un

servidor para seguir los enlaces del mapa de imá-

genes, por lo que son más eficientes. Sin embar-

go, no todos los exploradores aceptan mapas de

imágenes del lado del cliente.

El mapa de imágenes está del lado del servidor

cuando pasa las coordenadas del cursor del ra-

tón a una rutina controladora en el servidor. Los

mapas de imágenes del lado del servidor requie-

ren que su servidor calcule la dirección URL de

destino del enlace según las coordenadas del

puntero del ratón.

Por ejemplo, con el mapa siguiente se puede

“navegar” a diferentes sitios de éste tema :

Estructura del lenguaje etiquetado HTML5

Todos los documentos Html tienen la estructura

que se muesta a continuación, aunque la

etiqueta <body> puede ser sustituida por <fra-

meset> para un tipo de páginas que dividen la

ventana del navegador en varios cuadros (fra-

mes).

<HTML> <HEAD> <TITLE>Título de la

página</TITLE> ... </HEAD> <BODY>

Aquí iría el contenido de la página </BODY> </

HTML>

Vamos a analizar más detenidamente las distin-

tas secciones que componen la página

Entre las etiquetas <html> y <head> se

suelen colocar otras opcionales, como por

ejemplo:

<meta name=”description” content=”Infor-

mación sobre el Centro,las enseñanzas que se

pueden cursar, los departamentos didácticos”>

<meta name=”keywords” content=”educa-

ción,enseñanza,instituto, profesores, alumnos”>

En este caso las etiquetas le indican a los busca-

dores el contenido de nuestras páginas (descrip-

tion) y algunas palabras clave (keywords) para su

localización.

La cabecera es la sección comprendida

entre <head> y </head>. En ella se encuentra

necesariamente el título (entre las etiquetas <tit-

le> y </title>).

El título de la página debe describir su conte-

nido por ejemplo:

<TITLE>Colegio Público de Villamañán - Ámbito

de Influencia - </TITLE>

no valdría en cambio

<TITLE>Página de Inicio</TITLE> ya que esto no

dice nada por si solo

Dentro de la cabecera también se suele incluir

código en JavaScript, que se reconoce porque

va comprendido entre las etiquetas

<script language=”JavaScript”>

51



</SCRIPT>

El cuerpo (body) del documento html es

normalmente lo más importante. Es aquí donde

debemos colocar el contenido de nuestra página:

texto, fotos, etc.

El cuerpo está delimitado por las etique-

tas <body> y </body> La etiqueta <body> suele

contener algunos atributos, a saber:

BGCOLOR parámetro usado para especificar el

color de fondo de la página. El color se define

como una terna de números (#rrggbb) en base

hexadecimal en el orden rojo, verde, azul (Red,

Green, Blue). También se puede usar el nombre

en inglés de los colores predefinidos en los na-

vegadores.

Sintaxis: <BODY BGCOLOR=#-

0000FF> o <BODY BGCOLOR=blue>

Una buena ayuda para la seleccion de colores

con #rrggbb la puedes encontrar en: Paleta de

Colores

TEXT, parametro usado para definir el color del

texto por omision. Su formato es el mismo que

el de BGCOLOR. Si no se pone nada es negro.

LINK, VLINK, ALINK, parámetros usados para

especificar el color por omision de: texto con

enlace, enlace ya visitado y enlace activo.

Los colores por omision son LINK=blue,

VLINK=purple y ALINK=red. El formato es el

mismo que BGCOLOR.

BACKGROUND, parámetro usado para espe-

cifica la ruta y nombre de archivo (URL) de la

imagen que será usanda como fondo del do-

cumento. Esta se verá como mosaico para cu-

brir toda la ventana si es pequeña (lo habitual).

Sintaxis: <BODY BACKGROUND=”ruta/archi-

vo.gif”>

Es conveniente especificar la ruta de modo re-

lativo, esto quiere decir que si cambiamos el

directorio completo donde están nuestras pá-

ginas, desde C:\ a C:\webs por ejemplo, la

ruta especificada debe seguir siendo válida.

Por ejemplo si la página desde la que ha-

cemos el enlace se encuentra en el di-

rectorio Aprendiendo Html y queremos

poner como fondo la imagenfondo.gif,

que se encuentra en gifs, se debe poner:

<BODY BACKGROUND=”gifs/fondo.gif”>

Si la página estuviese en ejemplos se pondría:

<BODY BACKGROUND=”../gifs/fondo.gif”>

Fíjate en ../ pues es lo que indica al navegador

que debe acudir al directorio superior

Usuario/ Cliente /Servidor

La arquitectura cliente-servidor es un modelo

de aplicación distribuida en el que las tareas se

reparten entre los proveedores de recursos o

servicios, llamadosservidores, y los demandan-

tes, llamados clientes. Un cliente realiza peti-

ciones a otro programa, el servidor, quien le da


52

respuesta. Esta idea también se puede aplicar a

programas que se ejecutan sobre una sola com-

putadora, aunque es más ventajosa en un siste-

ma operativo multiusuario distribuido a través de

una red de computadoras.

En esta arquitectura la capacidad de proceso

está repartida entre los clientes y los servidores,

aunque son más importantes las ventajas de tipo

organizativo debidas a la centralización de la

gestión de la información y la separación de res-

ponsabilidades, lo que facilita y clarifica el diseño

del sistema.

La separación entre cliente y servidor es una

separación de tipo lógico, donde el servidor

no se ejecuta necesariamente sobre una sola

máquina ni es necesariamente un sólo programa.

Los tipos específicos de servidores incluyen los

servidores web, los servidores de archivo, los

servidores del correo, etc. Mientras que sus pro-

pósitos varían de unos servicios a otros, la arqui-

tectura básica seguirá siendo la misma.

Una disposición muy común son los sistemas

multicapa en los que el servidor se descompone

en diferentes programas que pueden ser

ejecutados por diferentescomputadoras aument

ando así el grado de distribución del sistema.

La red cliente-servidor es una red de comunica-

ciones en la cual los clientes están conectados a

un servidor, en el que se centralizan los diversos

recursos y aplicaciones con que se cuenta; y que

los pone a disposición de los clientes cada vez

que estos son solicitados. Esto significa que to-

das las gestiones que se realizan se concentran

en el servidor, de manera que en él se disponen

los requerimientos provenientes de los clientes

que tienen prioridad, los archivos que son de uso

público y los que son de uso restringido, los ar-

chivos que son de sólo lectura y los que, por el

contrario, pueden ser modificados, etc. Este tipo

de red puede utilizarse conjuntamente en caso

de que se este utilizando en una red mixta.

Transferencia de datos y principios de servidor remoto (XAMPP, WAMPP, MAMP )

XAMPP: Es un servidor independiente de

software libre que consiste principalmente en

la base de datos MySQL, el servidor web Apa-

che y los intérpretes para lenguajes de

script: PHP y Perl. El nombre proviene del acró-

nimo de X (para cualquiera de los diferentes

sistemas operativos), Apache, MySQL, PHP, Perl.

El programa está liberado bajo la licencia GNU y

actúa como un servidor web libre, fácil de

usar y capaz de interpretar páginas dinámicas.

Actualmente XAMPP está disponible para Micro-

soft Windows, GNU/Linux, Solaris y MacOS X.

MAMP: El acrónimo MAMP se refiere al conjunto

de programas software comúnmente usados

para desarrollar sitios web dinámicos sobre

sistemas operativos Apple Macintosh, MAC OS X.

Este nombre proviene de las iniciales Mac Os X,

como sistema operativo. Apache, como servidor

web. MySQL sistema gestor de Bases de Datos

y PHP, Perl o Python, lenguajes de programa-

ción usados para la creación de sitios web.

LAMP: Es el acrónimo utilizado para describir un

sistema de infraestructura de internet que usa las


53

siguientes herramientas: LINUX como sistema

operativo, APACHE como servidor web, MySQL

como gestor de base de datos y Perl, PHP o

Pytho como lenguajes de programación.

WAMP: Este el acrónimo usado para describir un

sistema de infraestructura de internet que usa

las siguientes herramientas: WINDOWS como

sistema operativo, APACHE como servidor web,

MySQL como servidor web y PHP, Perl o Python

como lenguajes de programación.

Sitio web Corporativo

Muchas grandes empresas o PYMES deben con-

siderar dentro de sus estrategias incorporar una

Web corporativa profesional si es que quieren

seguir evolucionando y aprovechando este tipo

de herramientas para poder captar más clientes

y cumplir sus objetivos trazados.

Una Web Corporativa es la imagen de la empre-

sa o negocio para con los visitantes o posibles

clientes, hace muchos años dichas web solo

tenían cierto tipo información estática o web 1.0.

En la web 1.0 de hace ya varios años, las empresas

o negocios se dedicaron a crear sitios web en

dónde el visitante o el cliente pudiera encontrar

lo básico como por ejemplo: quienes somos,

valores de la empresa, dirección de la empresa,

contacto, desde luego una descripción sobre el

giro y un catálogo de productos o servicios.

Actualmente la creación de sitios webs ha cam-

biado, ahora estamos en la etapa de la web 2.0,

que en pocas palabras significa la interacción del

usuario con un portal web o una comunicación

bidireccional.

Una web corporativa profesional 2.0, se utiliza

para mucho más que solo dejar información es-

tática, a continuación te voy a mencionar algu-

nas ventajas.

Diagrama de flujo

Un diagrama de flujo es una representación

gráfica de un proceso. Cada paso del proceso

es representado por un símbolo diferente que

contiene una breve descripción de la etapa de

proceso. Los símbolos gráficos del flujo del

proceso están unidos entre sí con flechas que

indican la dirección de flujo del proceso.

El diagrama de flujo ofrece una descripción vi-

sual de las actividades implicadas en un proceso

mostrando la relación secuencial ente ellas, faci-

litando la rápida comprensión de cada actividad

y su relación con las demás, el flujo de la infor-

mación y los materiales, las ramas en el proceso,

la existencia de bucles repetitivos, el número de

pasos del proceso, las operaciones de interde-

partamentales… Facilita también la selección de

indicadores de proceso

HTML5

HTML5 (HyperText Markup Language, versión 5) es

la quinta revisión importante del lenguaje básico de

la World Wide Web, HTML. HTML5 especifica dos

variantes de sintaxis para HTML: un «clásico» HTML

(text/html), la variante conocida como HTML5 y

una variante XHTML conocida como sintaxis XHT-

ML5 que deberá ser servida como XML.1 2Esta es la

primera vez que HTML y XHTML se han desarrolla-

do en paralelo.

Todavía se encuentra en modo experimental,nota

1 lo cual indica la misma W3C, aunque ya es usado

por múltiples desarrolladores web por sus avances,


54

mejoras y ventajas.

Al no ser reconocido en viejas versiones de nave-

gadores por sus nuevas etiquetas, se recomienda al

usuario común actualizar a la versión más nueva,

para poder disfrutar de todo el potencial que pro-

vee HTML5.

El desarrollo de este lenguaje de marcado es

regulado por el Consorcio W3C.

Nuevos elementos[editar]

HTML5 establece una serie de nuevos elementos

y atributos que reflejan el uso típico de los sitios

web modernos. Algunos de ellos son técnicamente

similares a las etiquetas <div> y <span>, pero tie-

nen un significado semántico, como por ejem-

plo <nav> (bloque de navegación del sitio web)

y <footer>. Otros elementos proporcionan nuevas

funcionalidades a través de una interfaz estanda-

rizada, como los elementos <audio> y <video>.

Mejora el elemento <canvas>, capaz de renderizar

elementos 3D en los navegadores más importantes

(Firefox, Chrome, Opera, Safari e Internet Explorer).

Algunos elementos de HTML 4.01 han quedado

obsoletos, incluyendo elementos puramente de

presentación, como <font> y <center>, cuyos efec-

tos son manejados por Hojas de estilo en cascada.

También hay un renovado énfasis en la importancia

del scripting DOM para el comportamiento de la

web. 2.0.

Integración de Metadatos

Metadatos (del griego μφφφ, meta, ‘después

de, más allá de’1 y latín datum, ‘lo que se da’,

«dato»2 ), literalmente «sobre datos», son datos

que describen otros datos. En general, un grupo

de metadatos se refiere a un grupo de datos,

llamado recurso. El concepto de metadatos es

análogo al uso de índices para localizar objetos

en vez de datos. Por ejemplo, en una biblioteca

se usan fichas que especifican autores, títulos,

casas editoriales y lugares para buscar libros. Así,

los metadatos ayudan a ubicar datos.3

Para varios campos de la informática, como

la recuperación de información o la web semán-

tica, los metadatos en etiquetas son un enfoque

importante para construir un puente sobre el in-

tervalo semántico.

El término «metadatos» no tiene una definición

única. Según la definición más difundida de

metadatos es que son «datos sobre datos».

También hay muchas declaraciones como

«informaciones sobre datos»,4 «datos sobre

informaciones»5 e «informaciones sobre

informaciones».6

Otra clase de definiciones trata de precisar el

término como «descripciones estructuradas y

opcionales que están disponibles de forma pú-

blica para ayudar a localizar objetos»7 o «datos

estructurados y codificados que describen

características de instancias conteniendo

informaciones para ayudar a identificar,

descubrir, valorar y administrar las instancias

descritas».8 Esta clase surgió de la crítica de que

las declaraciones más simples son tan difusas

y generales que dificultarán la tarea de acordar

estándares, pero estas definiciones no son muy

comunes.

Podemos también considerar los metadatos, en

las áreas de telecomunicaciones e informática,

como información no relevante para el usuario

final pero sí de suma importancia para el sistema

que maneja la data. Los metadatos son enviados

junto a la información cuando se realiza alguna


55

petición o actualización de la misma.

En el campo biológico los metadatos se han con-

vertido en una herramienta fundamental para el

descubrimiento de datos e información. En este

contexto se pueden definir los metadatos como

«una descripción estandarizada de las caracte-

rísticas de un conjunto de datos» con esto se in-

cluye la descripción del contexto en el cual los

datos fueron coleccionados y además se refiere

al uso de estándares para describirlos

SEGUNDOMÓDULO


57

Conceptos básicos de programación

¿Qué es Programación?

Es el proceso de diseñar, codificar, depurar y

mantener el código fuente de programas com-

putacionales. El código fuente es escrito en un

lenguaje de programación. El propósito de la

programación es crear programas que exhiban

un comportamiento deseado. El proceso de

escribir código requiere frecuentemente cono-

cimientos en varias áreas distintas, además del

dominio del lenguaje a utilizar, algoritmos espe-

cializados y lógica formal. Programar no involu-

cra necesariamente otras tareas tales como el

análisis y diseño de la aplicación (pero sí el dise-

ño del código), aunque sí suelen estar fusionadas

en el desarrollo de pequeñas aplicaciones.

Del proceso de programación surge lo que co-

múnmente se conoce como software (conjunto

de programas), aunque estrictamente éste último

abarca mucho más que sólo la programación.

Para crear un programa, y que la computadora

lo intérprete y ejecute las instrucciones escritas

en él, debe usarse un lenguaje de programación.

¿Qué es un Programa?

Un programa normalmente implementa (traduce

a un lenguaje de programación concreto) uno o

más algoritmos.

Los programas suelen subdividirse en partes me-

nores, llamadas módulos, de modo que la com-

plejidad algorítmica de cada una de las partes sea

menor que la del programa completo, lo cual

ayuda al desarrollo del programa.

Según Niklaus Wirth, un programa está formado

por los algoritmos y la estructura de datos.

Se han propuesto diversas técnicas de progra-

mación cuyo objetivo es mejorar tanto el pro-

ceso de creación de software como su mante-

nimiento. Entre ellas, se pueden mencionar las

siguientes:

Programación declarativa

Programación estructurada

Programación modular

JAVACRIPT


58

Programación orientada a objetos

¿Qué es un Algoritmo?

Un algoritmo es una secuencia no ambigua, fi-

nita y ordenada de instrucciones que han de se-

guirse para resolver un problema. Un algoritmo

puede expresarse de distintas maneras: en forma

gráfica, como un diagrama de flujo, en forma de

código como en pseudocódigo o un lenguaje de

programación, en forma explicativa, etc.

Características

Tiene que ser preciso.

Tiene que estar bien definido.

Tiene que ser finito.

La programación es adaptar el algoritmo al or-

denador.

El algoritmo es independiente según donde lo

implemente.

Introducción

Sintaxis

La sintaxis de un lenguaje de programación se

define como el conjunto de reglas que deben

seguirse al escribir el código fuente de los pro-

gramas para considerarse como correctos para

ese lenguaje de programación.

Las normas básicas que definen la sintaxis de Ja-

vaScript son las siguientes:

No se tienen en cuenta los espacios en blanco y

las nuevas líneas: como sucede con XHTML, el

intérprete de JavaScript ignora cualquier espacio

en blanco sobrante, por lo que el código se pue-

de ordenar de forma adecuada para entenderlo

mejor (tabulando las líneas, añadiendo espacios,

creando nuevas líneas, etc.)

Se distinguen las mayúsculas y minúsculas: al

igual que sucede con la sintaxis de las etiquetas y

elementos XHTML. Sin embargo, si en una pági-

na XHTML se utilizan indistintamente mayúsculas

y minúsculas, la página se visualiza correctamen-

te, siendo el único problema la no validación de

la página. En cambio, si en JavaScript se inter-

cambian mayúsculas y minúsculas el script no

funciona.

No se define el tipo de las variables: al crear una

variable, no es necesario indicar el tipo de dato

que almacenará. De esta forma, una misma va-

riable puede almacenar diferentes tipos de datos

durante la ejecución del script.

No es necesario terminar cada sentencia con el

carácter de punto y coma (;): en la mayoría de

lenguajes de programación, es obligatorio ter-

minar cada sentencia con el carácter ;. Aunque

JavaScript no obliga a hacerlo, es conveniente

seguir la tradición de terminar cada sentencia

con el carácter del punto y coma (;).

Se pueden incluir comentarios: los comentarios

se utilizan para añadir información en el código

fuente del programa. Aunque el contenido de los

comentarios no se visualiza por pantalla, si que

se envía al navegador del usuario junto con el

resto del script, por lo que es necesario extremar

las precauciones sobre la información incluida

en los comentarios.

JavaScript define dos tipos de comentarios: los

de una sola línea y los que ocupan varias líneas.

Formas de incluir Lenguaje JavaScript,

en la página web

La integración de JavaScript es muy flexible, ya


59

que existen al menos tres formas para incluir có-

digo JavaScript en las páginas web.

Incluir JavaScript en el mismo documento XHT-

ML

El código JavaScript se encierra entre etiquetas

<script> y se incluye en cualquier parte del do-

cumento. Aunque es correcto incluir cualquier

bloque de código en cualquier zona de la página,

se recomienda definir el código JavaScript den-

tro de la cabecera del documento (dentro de la

etiqueta <head>):

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML

1.0 Transitional//EN” “http://www.w3.org/TR/

xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”-

text/html; charset=iso-8859-1” />

<title>Ejemplo de código JavaScript en el propio

documento</title>

<script type=”text/javascript”>

alert(“Un mensaje de prueba”);

</script>

</head>

<body>

<p>Un párrafo de texto.</p>

</body>

</html>

Para que la página XHTML resultante sea válida,

es necesario añadir el atributo type a la etiqueta

<script>. Los valores que se incluyen en el atri-

buto type están estandarizados y para el caso de

JavaScript, el valor correcto es text/javascript.

Este método se emplea cuando se define un

bloque pequeño de código o cuando se quieren

incluir instrucciones específicas en un determi-

nado documento HTML que completen las ins-

trucciones y funciones que se incluyen por de-

fecto en todos los documentos del sitio web.

El principal inconveniente es que si se quiere ha-

cer una modificación en el bloque de código, es

necesario modificar todas las páginas que inclu-

yen ese mismo bloque de código JavaScript.

Definir JavaScript en un archivo externo

Las instrucciones JavaScript se pueden incluir en

un archivo externo de tipo JavaScript que los do-

cumentos XHTML enlazan mediante la etiqueta

<script>. Se pueden crear todos los archivos

JavaScript que sean necesarios y cada docu-

mento XHTML puede enlazar tantos archivos

JavaScript como necesite.

Ejemplo:

Archivo codigo.js

alert(“Un mensaje de prueba”);

Documento XHTML





<head>



60



documento</title>

<script type=”text/javascript” src=”/js/codigo.

js”></script>

</head>

<body>

<p>Un párrafo de texto.</p>

</body>

</html>

Además del atributo type, este método requiere

definir el atributo src, que es el que indica la

URL correspondiente al archivo JavaScript que se

quiere enlazar. Cada etiqueta <script> solamen-

te puede enlazar un único archivo, pero en una

misma página se pueden incluir tantas etiquetas

<script> como sean necesarias.

Los archivos de tipo JavaScript son documen-

tos normales de texto con la extensión .js, que

se pueden crear con cualquier editor de texto

como Notepad, Wordpad, EmEditor, UltraEdit, Vi,

etc.

La principal ventaja de enlazar un archivo JavaS-

cript externo es que se simplifica el código

XHTML de la página, que se puede reutilizar el

mismo código JavaScript en todas las páginas

del sitio web y que cualquier modificación rea-

lizada en el archivo JavaScript se ve reflejada in-

mediatamente en todas las páginas XHTML que

lo enlazan.

Incluir JavaScript en los elementos XHTML

Este último método es el menos utilizado, ya que

consiste en incluir trozos de JavaScript dentro

del código XHTML de la página:





<head>




documento</title>

</head>

<body>

<p onclick=”alert(‘Un mensaje de prueba’)”>Un

párrafo de texto.</p>

</body>

</html>

El mayor inconveniente de este método es que

ensucia innecesariamente el código XHTML de

la página y complica el mantenimiento del có-

digo JavaScript. En general, este método sólo se

utiliza para definir algunos eventos y en algunos

otros casos especiales, como se verá más ade-

lante.

Alert, Confirm y Prompt, diálogos para envío de

mensajes

Alert

Crea una caja de diálogo con un icono de peligro

amarillo, un botón ‘Aceptar’ y un texto definido por el

parámetro enviado a la función.


61

Las alertas, nos serán útiles para transmitir informa-

ción al usuario tal como errores ocurridos en la nave-

gación, problemas en el rellenado de un formulario,

etc.

Confirm

Crea una caja de confirmación con un icono de in-

terrogación, botones Aceptar y Cancelar y un texto

definido por el parámetro enviado a la función.

Devuelve 1 cuando el usuario abandona el diálogo

pulsando Aceptar y 0 si lo hace pulsando Cancelar o

el aspa de cerrar.

Será útil para recibir información del usuario en tiem-

po de ejecución (al pulsar un botón, al pasar el mouse

por un lugar...)

Prompt

Muestra un diálogo de campo de formulario con

botones Aceptar y Cancelar, un texto definido

por el primer parámetro enviado a la función y

un input de texto con valor predeterminado de-

finido por el segundo parámetro.

La función devuelve el valor insertado en el cam-

po de formulario si el usuario pulsa en Aceptar o

Null si pulsa Cancelar o el aspa de cerrar.

Prompt nos será útil sobre todo para recojer da-

tos del usuario para utilizar en nuestro script en

tiempo de ejecución.

Variables

Las variables en los lenguajes de programación si-

guen una lógica similar a las variables utilizadas en

otros ámbitos como las matemáticas. Una variable es

un elemento que se emplea para almacenar y hacer

referencia a otro valor. Gracias a las variables es po-

sible crear

“programas genéricos”, es decir, programas que fun-

cionan siempre igual independientemente de los va-

lores concretos utilizados.

De la misma forma que si en Matemáticas no exis-

tieran las variables no se podrían definir las ecua-

ciones y fórmulas, en programación no se podrían

hacer programas realmente útiles sin las variables.

Si no existieran variables, un programa que suma

dos números podría escribirse como:

resultado = 3 + 1

El programa anterior es tan poco útil que sólo

sirve para el caso en el que el primer número de

la suma sea el 3 y el segundo número sea el 1.

En cualquier otro caso, el programa obtiene un

resultado incorrecto.

Sin embargo, el programa se puede rehacer de la

siguiente manera utilizando variables para alma-

cenar y referirse a cada número:

numero_1 = 3

numero_2 = 1

resultado = numero_1 + numero_2

Los elementos numero_1 y numero_2 son va-

riables que almacenan los valores que utiliza el

programa. El resultado se calcula siempre en

función del valor almacenado por las variables,

por lo que este programa funciona correcta-

mente para cualquier par de números indicado.

Si se modifica el valor de las variables numero_1

y numero_2, el programa sigue funcionando co-

rrectamente.

Las variables en JavaScript se crean mediante la

palabra reservada var. De esta forma, el ejemplo


62

anterior se puede realizar en JavaScript de la si-

guiente manera:

var numero_1 = 3;

var numero_2 = 1;

var resultado = numero_1 + numero_2;

La palabra reservada var solamente se debe indi-

car al definir por primera vez la variable, lo que se

denomina declarar una variable.

Si cuando se declara una variable se le asigna

también un valor, se dice que la variable ha sido

inicializada. En JavaScript no es obligatorio ini-

cializar las variables, ya que se pueden declarar

por una parte y asignarles un valor posterior-

mente.

Una de las características más sorprendentes de

JavaSript para los programadores habituados a

otros lenguajes de programación es que tampo-

co es necesario declarar las variables. En otras

palabras, se pueden utilizar variables que no se

han definido anteriormente mediante la palabra

reservada var.

El nombre de una variable también se conoce

como identificador y debe cumplir las siguientes

normas:

Sólo puede estar formado por letras, números y

los símbolos $ (dólar) y _ (guión bajo).

El primer carácter no puede ser un número.

Tipos de Variables

Aunque todas las variables de JavaScript se crean

de la misma forma (mediante la palabra reserva-

da var), la forma en la que se les asigna un valor

depende del tipo de valor que se quiere almace-

nar (números, textos, etc.)

Así tenemos:

Numéricas

Se utilizan para almacenar valores numéricos

enteros (llamados integer en inglés) o decimales

(llamados float en inglés). En este caso, el valor

se asigna indicando directamente el número en-

tero o decimal. Los números decimales utilizan

el carácter . (punto) en vez de , (coma) para se-

parar la parte entera y la parte decimal:

var iva = 16; // variable tipo entero

var total = 234.65; // variable tipo decimal

Cadenas de texto

Se utilizan para almacenar caracteres, palabras

y/o frases de texto. Para asignar el valor a la va-

riable, se encierra el valor entre comillas dobles

o simples, para delimitar su comienzo y su final:

var mensaje = “Bienvenido a nuestro sitio web”;

var nombreProducto = ‘Producto ABC’;

var letraSeleccionada = ‘c’;

Booleanos

Las variables de tipo boolean o booleano tam-

bién se conocen con el nombre de variables de

tipo lógico. Aunque para entender realmente su

utilidad se debe estudiar la programación avan-

zada con JavaScript del siguiente capítulo, su

funcionamiento básico es muy sencillo.

Una variable de tipo boolean almacena un tipo

especial de valor que solamente puede tomar

dos valores: true (verdadero) o false (falso). No se

puede utilizar para almacenar números y tampo-

co permite guardar cadenas de texto.

Los únicos valores que pueden almacenar estas


63

variables son true y false, por lo que no pueden

utilizarse los valores verdadero y falso. A conti-

nuación se muestra un par de variables de tipo

booleano:

var clienteRegistrado = false;

var ivaIncluido = true;

Arreglos

Arrays

En ocasiones, a los arrays se les llama vectores,

matrices e incluso arreglos. No obstante, el tér-

mino array es el más utilizado y es una palabra

comúnmente aceptada en el entorno de la pro-

gramación.

Un array es una colección de variables, que pue-

den ser todas del mismo tipo o cada una de un

tipo diferente. Su utilidad se comprende mejor

con un ejemplo sencillo: si una aplicación ne-

cesita manejar los días de la semana, se podrían

crear siete variables de tipo texto:

var dia1 = “Lunes”;

var dia2 = “Martes”;

...

var dia7 = “Domingo”;

Aunque el código anterior no es incorrecto, sí

que es poco eficiente y complica en exceso la

programación. Si en vez de los días de la semana

se tuviera que guardar el nombre de los meses

del año, el nombre de todos los países del mun-

do o las mediciones diarias de temperatura de

los últimos 100 años, se tendrían que crear de-

cenas o cientos de variables.

En este tipo de casos, se pueden agrupar todas

las variables relacionadas en una colección de

variables o array. El ejemplo anterior se puede

rehacer de la siguiente forma:

var dias = [“Lunes”, “Martes”, “Miércoles”, “Jue-

ves”, “Viernes”, “Sábado”, “Domingo”];

Ahora, una única variable llamada dias almacena

todos los valores relacionados entre sí, en este

caso los días de la semana.

Para definir un array, se utilizan los caracteres [ y

] para delimitar su comienzo y su final y se utiliza

el carácter , (coma) para separar sus elementos:

var nombre_array = [valor1, valor2, ..., valorN];

Una vez definido un array, es muy sencillo acce-

der a cada uno de sus elementos. Cada elemen-

to se accede indicando su posición dentro del

array. La única complicación, que es responsable

de muchos errores cuando se empieza a progra-

mar, es que las posiciones de los elemento em-

piezan a contarse en el 0 y no en el 1:

var diaSeleccionado = dias[0]; // diaSelecciona-

do = “Lunes”

var otroDia = dias[5]; // otroDia = “Sábado”

En el ejemplo anterior, la primera instrucción

quiere obtener el primer elemento del array. Para

ello, se indica el nombre del array y entre cor-

chetes la posición del elemento dentro del array.

Como se ha comentado, las posiciones se em-

piezan a contar en el 0, por lo que el primer ele-

mento ocupa la posición 0 y se accede a el me-

diante dias[0].

El valor dias[5] hace referencia al elemento que

ocupa la sexta posición dentro del array dias.

Como las posiciones empiezan a contarse en 0,


64

la posición 5 hace referencia al sexto elemento,

en este caso, el valor Sábado.

Caracteres de Escape

En ocasiones, el texto que se almacena en las va-

riables no es tan sencillo.

A veces las cadenas de texto contienen tanto

comillas simples como dobles. Además, existen

otros caracteres que son difíciles de incluir en

una variable de texto (tabulador, ENTER,

etc.) Para resolver estos problemas, JavaScript

define un mecanismo para incluir de forma sen-

cilla caracteres especiales y problemáticos den-

tro de una cadena de texto.

El mecanismo consiste en sustituir el carácter

problemático por una combinación simple de

caracteres. A continuación se muestra la tabla de

conversión que se debe utilizar:

Este mecanismo de JavaScript se denomina “me-

canismo de escape” de los caracteres problemá-

ticos, y es habitual referirse a que los caracteres

han sido “escapados”.

Estructuras de control de flujo

Las estructuras de control de flujo, son instruc-

ciones del tipo “si se cumple esta condición,

hazlo; si no se cumple, haz esto otro”. También

existen instrucciones del tipo “repite esto mien-

tras se cumpla esta condición”.

Si se utilizan estructuras de control de flujo, los

programas dejan de ser una sucesión lineal de

instrucciones para convertirse en programas in-

teligentes que pueden tomar decisiones en fun-

ción del valor de las variables.

Estructura if

La estructura más utilizada en JavaScript y en la

mayoría de lenguajes de programación es la es-

tructura if. Se emplea para tomar decisiones en

función de una condición. Su definición formal

es:

if(condicion) {

...

}

Si la condición se cumple (es decir, si su valor es

true) se ejecutan todas las instrucciones que se

encuentran dentro de {...}. Si la condición no se

cumple (es decir, si su valor es false) no se eje-

cuta ninguna instrucción contenida en {...} y el

programa continúa ejecutando el resto de ins-

trucciones del script.

Ejemplo:

var mostrarMensaje = true;

if(mostrarMensaje) {

alert(“Hola Mundo”);

}

En este caso, la condición es una comparación

entre el valor de la variable mostrarMensaje y el

valor true. Como los dos valores coinciden, la

igualdad se cumple y por tanto la condición es

cierta, su valor es true y se ejecutan las instruc-

ciones contenidas en ese bloque del if.

Estructura for

La estructura for permite ejecutar de forma repe-

titiva una instrucción. Realizar este tipo de repe-

ticiones (también llamadas bucles) es muy sen-

cillo. No obstante, su definición formal no es tan

sencilla como la de if():


65

for(inicializacion; condicion; actualizacion) {

...

}

La idea del funcionamiento de un bucle for es la

siguiente: “mientras la condición indicada se siga

cumpliendo, repite la ejecución de las instruc-

ciones definidas dentro del for. Además, después

de cada repetición, actualiza el valor de las varia-

bles que se utilizan en la condición”.

φ La “inicialización” es la zona en la que se es-

tablece los valores iniciales de las variables que

controlan la repetición.

φ La “condición” es el único elemento que decide

si continua o se detiene la repetición.

φ La “actualización” es el nuevo valor que se asig-

na después de cada repetición a las variables que

controlan la repetición.

Ejemplo

var mensaje = “Hola, estoy dentro de un bucle”;

for(var i = 0; i < 5; i++) {

alert(mensaje);

}

Tipos de Operadores (suma, resta, multipli-

cación, división, residuo)

Las variables por sí solas son de poca utilidad.

Hasta ahora, sólo se ha visto cómo crear varia-

bles de diferentes tipos y cómo mostrar su valor

mediante la función alert(). Para hacer progra-

mas realmente útiles, son necesarias otro tipo de

herramientas.

Los operadores permiten manipular el valor de

las variables, realizar operaciones matemáticas

con sus valores y comparar diferentes variables.

De esta forma, los operadores permiten a los

programas realizar cálculos complejos y tomar

decisiones lógicas en función de comparaciones

y otros tipos de condiciones.

JavaScript permite realizar manipulaciones ma-

temáticas sobre el valor de las variables numé-

ricas. Los operadores definidos son: suma (+),

resta (-), multiplicación (*) y división (/).

Ejemplo:

var numero1 = 10;

var numero2 = 5;

resultado = numero1 / numero2; // resultado = 2

resultado = 3 + numero1; // resultado = 13

resultado = numero2 – 4; // resultado = 1

resultado = numero1 * numero 2; // resultado =

50

Además de los cuatro operadores básicos, Ja-

vaScript define otro operador matemático que

no es sencillo de entender cuando se estudia

por primera vez, pero que es muy útil en algunas

ocasiones.

Se trata del operador “módulo”, que calcula el

resto de la división entera de dos números. Si se

divide por ejemplo 10 y 5, la división es exacta y

da un resultado de 2. El resto de esa división es 0,

por lo que módulo de 10 y 5 es igual a 0.

Sin embargo, si se divide 9 y 5, la división no es

exacta, el resultado es 1 y el resto 4, por lo que

módulo de 9 y 5 es igual a 4.

El operador módulo en JavaScript se indica me-


66

diante el símbolo %, que no debe confundirse

con el cálculo del porcentaje:

Ejemplo:

var numero1 = 10;

var numero2 = 5;

resultado = numero1 % numero2; // resultado =

0

numero1 = 9;

numero2 = 5;

resultado = numero1 % numero2; // resultado =

4

Funciones y propiedades JavaScript

JavaScript incorpora una serie de herramientas

y utilidades llamadas funciones y propiedades,

para el manejo de las variables. De esta forma,

muchas de las operaciones básicas con las va-

riables, se pueden realizar directamente con las

utilidades que ofrece JavaScript.

Funciones útiles para cadenas de texto

A continuación se muestran algunas de las fun-

ciones más útiles para el manejo de cadenas de

texto:

length, calcula la longitud de una cadena de tex-

to (el número de caracteres que la forman)

var mensaje = “Hola Mundo”;

var numeroLetras = mensaje.length; // numero-

Letras = 10

+, se emplea para concatenar varias cadenas de

texto

var mensaje1 = “Hola”;

var mensaje2 = “ Mundo”;

var mensaje = mensaje1 + mensaje2; // mensaje

= “Hola Mundo”

Además del operador +, también se puede utili-

zar la función concat()


var mensaje2 = mensaje1.concat(“ Mundo”); //

mensaje2 = “Hola Mundo”

Las cadenas de texto también se pueden unir

con variables numéricas:

var variable1 = “Hola “;

var variable2 = 3;

var mensaje = variable1 + variable2; // mensaje

= “Hola 3”

toUpperCase(), transforma todos los caracteres

de la cadena a sus correspondientes caracteres

en mayúsculas:


var mensaje2 = mensaje1.toUpperCase(); //

mensaje2 = “HOLA”

toLowerCase(), transforma todos los caracteres

de la cadena a sus correspondientes caracteres

en minúsculas:

var mensaje1 = “HolA”;

var mensaje2 = mensaje1.toLowerCase(); //

mensaje2 = “hola”

Funciones útiles para arrays


ciones más útiles para el manejo de arrays:


67

length, calcula el número de elementos de un

array

var vocales = [“a”, “e”, “i”, “o”, “u”];

var numeroVocales = vocales.length; // numero-

Vocales = 5

concat(), se emplea para concatenar los elemen-

tos de varios arrays

var array1 = [1, 2, 3];

array2 = array1.concat(4, 5, 6); // array2 = [1, 2,

3, 4, 5, 6]

array3 = array1.concat([4, 5, 6]); // array3 = [1, 2,

3, 4, 5, 6]

join(separador), es la función contraria a split().

Une todos los elementos de un array para formar

una cadena de texto. Para unir los elementos se

utiliza el carácter separador indicado

var array = [“hola”, “mundo”];

var mensaje = array.join(“”); // mensaje = “hola-

mundo”

mensaje = array.join(“ “); // mensaje = “hola mun-

do”

pop(), elimina el último elemento del array y lo

devuelve. El array original se modifica y su longi-

tud disminuye en 1 elemento.

var array = [1, 2, 3];

var ultimo = array.pop();

// ahora array = [1, 2], ultimo = 3

push(), añade un elemento al final del array. El

array original se modifica y aumenta su longitud

en 1 elemento. (También es posible añadir más

de un elemento a la vez)

var array = [1, 2, 3];

array.push(4);

// ahora array = [1, 2, 3, 4]

shift(), elimina el primer elemento del array y lo

devuelve. El array original se ve modificado y su

longitud disminuida en 1 elemento.

var array = [1, 2, 3];

var primero = array.shift();

// ahora array = [2, 3], primero = 1

unshift(), añade un elemento al principio del

array. El array original se modifica y aumenta

su longitud en 1 elemento. (También es posible

añadir más de un elemento a la vez)

var array = [1, 2, 3];

array.unshift(0);

// ahora array = [0, 1, 2, 3]

reverse(), modifica un array colocando sus ele-

mentos en el orden inverso a su posición origi-

nal:

var array = [1, 2, 3];

array.reverse();

// ahora array = [3, 2, 1]

Funciones útiles para números


ciones y propiedades más útiles para el manejo

de números.

NaN, (del inglés, “Not a Number”) JavaScript em-

plea el valor NaN para indicar un valor numérico

no definido (por ejemplo, la división 0/0).


68

var numero1 = 0;

var numero2 = 0;

alert(numero1/numero2); // se muestra el valor

NaN

isNaN(), permite proteger a la aplicación de posi-

bles valores numéricos no definidos

var numero1 = 0;

var numero2 = 0;

if(isNaN(numero1/numero2)) {

alert(“La división no está definida para los núme-

ros indicados”);

}

else {

alert(“La división es igual a => “ + numero1/nu-

mero2);

}

Infinity, hace referencia a un valor numérico infi-

nito y positivo (también existe el valor

–Infinity para los infinitos negativos)

var numero1 = 10;

var numero2 = 0;

alert(numero1/numero2); // se muestra el valor

Infinity

toFixed(digitos), devuelve el número original con

tantos decimales como los indicados por el pa-

rámetro digitos y realiza los redondeos necesa-

rios. Se trata de una función muy útil por ejemplo

para mostrar precios.

var numero1 = 4564.34567;

numero1.toFixed(2); // 4564.35

numero1.toFixed(6); // 4564.345670

numero1.toFixed(); // 4564

Ámbito de variables (global y local)

El ámbito de una variable (llamado “scope” en in-

glés) es la zona del programa en la que se define

la variable. JavaScript define dos ámbitos para las

variables: global y local.

El siguiente ejemplo ilustra el comportamiento

de los ámbitos:

function creaMensaje() {

var mensaje = “Mensaje de prueba”;

}

creaMensaje();

alert(mensaje);

El ejemplo anterior define en primer lugar una

función llamada creaMensaje que crea una varia-

ble llamada mensaje. A continuación, se ejecuta

la función mediante la llamada

creaMensaje(); y seguidamente, se muestra me-

diante la función alert() el valor de una variable

llamada mensaje.

Sin embargo, al ejecutar el código anterior no se

muestra ningún mensaje por pantalla. La razón

es que la variable mensaje se ha definido dentro

de la función creaMensaje() y por tanto, es una

variable local que solamente está definida dentro

de la función.

Cualquier instrucción que se encuentre dentro

de la función puede hacer uso de esa variable,

pero todas las instrucciones que se encuentren


69

en otras funciones o fuera de cualquier función

no tendrán definida la variable mensaje. De esta

forma, para mostrar el mensaje en el código an-

terior, la función alert() debe llamarse desde den-

tro de la función creaMensaje():

function creaMensaje() {


alert(mensaje);

}

creaMensaje();

Además de variables locales, también existe el

concepto de variable global, que está definida en

cualquier punto del programa (incluso dentro de

cualquier función).


function muestraMensaje() {

alert(mensaje);

}

El código anterior es el ejemplo inverso al mos-

trado anteriormente. Dentro de la función

muestraMensaje() se quiere hacer uso de una va-

riable llamada mensaje y que no ha sido definida

dentro de la propia función. Sin embargo, si se

ejecuta el código anterior, sí que se muestra el

mensaje definido por la variable mensaje.

Si una variable se declara fuera de cualquier fun-

ción, automáticamente se transforma en variable

global independientemente de si se define utili-

zando la palabra reservada var o no. Sin embar-

go, las variables definidas dentro de una función

pueden ser globales o locales.

Si en el interior de una función, las variables se

declaran mediante var se consideran locales y las

variables que no se han declarado mediante var,

se transforman automáticamente en variables

globales.

Programación avanzada (orientada a

eventos)

Eventos

Las aplicaciones web creadas con el lenguaje Ja-

vaScript pueden utilizar el modelo de programa-

ción basada en eventos.

En este tipo de programación, los scripts se de-

dican a esperar a que el usuario “haga algo” (que

pulse una tecla, que mueva el ratón, que cierre la

ventana del navegador). A continuación, el script

responde a la acción del usuario normalmente

procesando esa información y generando un re-

sultado.

Los eventos hacen posible que los usuarios

transmitan información a los programas. JavaS-

cript define numerosos eventos que permiten

una interacción completa entre el usuario y las

páginas/aplicaciones web. La pulsación de una

tecla constituye un evento, así como pinchar o

mover el ratón, seleccionar un elemento de un

formulario, redimensionar la ventana del nave-

gador, etc.

JavaScript permite asignar una función a cada

uno de los eventos. De esta forma, cuando se

produce cualquier evento, JavaScript ejecuta su

función asociada. Este tipo de funciones se de-

nominan “event handlers” en inglés y suelen tra-

ducirse por “manejadores de eventos”.

Modelo de eventos


70

Modelo básico de eventos

Este modelo simple de eventos se introdujo para

la versión 4 del estándar HTML y se considera

parte del nivel más básico de DOM. Aunque sus

características son limitadas, es el único modelo

que es compatible en todos los navegadores y

por tanto, el único que permite crear aplicacio-

nes que funcionan de la misma manera en todos

los navegadores.

Modelo de eventos estándar

Las versiones más avanzadas del estándar DOM

(DOM nivel 2) definen un modelo de eventos

completamente nuevo y mucho más poderoso

que el original. Todos los navegadores modernos

lo incluyen, salvo Internet Explorer.

Modelo de eventos de Internet Explorer

Internet Explorer utiliza su propio modelo de

eventos, que es similar pero incompatible con

el modelo estándar. Se utilizó por primera vez

en Internet Explorer 4 y Microsoft decidió seguir

utilizándolo en el resto de versiones, a pesar de

que la empresa había participado en la creación

del estándar de DOM que define el modelo de

eventos estándar.

Objeto evento

JavaScript permite obtener información sobre el

ratón y el teclado mediante un objeto especial

llamado event. Desafortunadamente, los dife-

rentes navegadores presentan diferencias muy

notables en el tratamiento de la información so-

bre los eventos.

La principal diferencia reside en la forma en la

que se obtiene el objeto event. Internet Explorer

considera que este objeto forma parte del objeto

window y el resto de navegadores lo consideran

como el único argumento que tienen las funcio-

nes manejadoras de eventos.

En los navegadores tipo Internet Explorer, el ob-

jeto event se obtiene directamente mediante:

var evento = window.event;

Por otra parte, en el resto de navegadores, el ob-

jeto event se obtiene mágicamente a partir del

argumento que el navegador crea automática-

mente:

function manejadorEventos(elEvento) {

var evento = elEvento;

}

Si se quiere programar una aplicación que fun-

cione correctamente en todos los navegadores,

es necesario obtener el objeto event de forma

correcta según cada navegador. El siguiente có-

digo muestra la forma correcta de obtener el ob-

jeto event en cualquier navegador:

function manejadorEventos(elEvento) {

var evento = elEvento || window.event;

}

Una vez obtenido el objeto event, ya se puede

acceder a toda la información relacionada con

el evento, que depende del tipo de evento pro-

ducido.

Tipos de eventos

Un mismo tipo de evento (por ejemplo, pinchar

el botón izquierdo del ratón) puede estar defini-

do para varios elementos XHTML diferentes y un

mismo elemento XHTML puede tener asociados

varios eventos diferentes.


71

El nombre de cada evento se construye median-

te el prefijo on, seguido del nombre en inglés de

la acción asociada al evento.

La siguiente tabla resume los eventos más im-

portantes definidos por JavaScript:

Los eventos más utilizados en las aplicaciones

web tradicionales son onload para esperar a que

se cargue la página por completo, los eventos

onclick, onmouseover, onmouseout para con-

trolar el ratón y onsubmit para controlar el envío

de los formularios.

Validación de formularios

La principal utilidad de JavaScript en el manejo

de los formularios es la validación de los datos

introducidos por los usuarios. Antes de enviar

un formulario al servidor, se recomienda validar

mediante JavaScript los datos insertados por el

usuario. De esta forma, si el usuario ha cometido

algún error al rellenar el formulario, se le puede

notificar de forma instantánea, sin necesidad de

esperar la respuesta del servidor.

Notificar los errores de forma inmediata median-

te JavaScript mejora la satisfacción del usuario

con la aplicación (lo que técnicamente se cono-

ce como “mejorar la experiencia de usuario”) y

ayuda a reducir la carga de procesamiento en el

servidor.

Normalmente, la validación de un formulario

consiste en llamar a una función de validación

cuando el usuario pulsa sobre el botón de envío

del formulario. En esta función, se comprueban

si los valores que ha introducido el usuario cum-

plen las restricciones impuestas por la aplicación.

Aunque existen tantas posibles comprobaciones

como elementos de formulario diferentes, algu-

nas comprobaciones son muy habituales: que se

rellene un campo obligatorio, que se seleccione

el valor de una lista desplegable, que la dirección

de email indicada sea correcta, que la fecha in-

troducida sea lógica, que se haya introducido un

número donde así se requiere, etc.

A continuación se muestra el código JavaScript

básico necesario para incorporar la validación a

un formulario:

<form action=”” method=”” id=”” name=”” on-

submit=”return validacion()”>

...

</form>

Y el esquema de la función validacion() es el si-

guiente:

function validacion() {

if (condicion que debe cumplir el primer campo

del formulario) {

// Si no se cumple la condicion...

alert(‘[ERROR] El campo debe tener un valor

de...’);

return false;

}

else if (condicion que debe cumplir el segundo

campo del formulario) {


72



de...’);

return false;

}

...

else if (condicion que debe cumplir el último

campo del formulario) {



de...’);

return false;

}

// Si el script ha llegado a este punto, todas las

condiciones

// se han cumplido, por lo que se devuelve el va-

lor true

return true;

}

El funcionamiento de esta técnica de validación

se basa en el comportamiento del evento

onsubmit de JavaScript.

Depuración de código (firebug)

Firebug es una extensión del navegador Firefox

que nos permite editar webs y hojas de estilo,

monitorizar tiempos de carga, depurar javascript

y ver los errores y procesos de carga en la pági-

na; además de explorar el DOM.

Firebug dispone de su propia consola donde

igualmente podemos visualizar los mensajes de

error.


73

Métodos jQuery

jQuery ofrece varios métodos utilitarios dentro

del espacio de nombres $. Estos métodos son de

gran ayuda para llevar a cabo tareas rutinarias de

programación.

$.trim Remueve los espacios en blanco del

principio y final.

$.trim(‘ varios espacios en blanco ‘);

// devuelve ‘varios espacios en blanco’

$.each Interactúa en arrays y objetos.

$.each([ ‘foo’, ‘bar’, ‘baz’ ], function(idx, val) {

console.log(‘elemento ‘ + idx + ‘es ‘ + val);

});

$.each({ foo : ‘bar’, baz : ‘bim’ }, function(k, v) {

console.log(k + ‘ : ‘ + v);

});

$.inArray Devuelve el índice de un valor en un

array, o –1 si el valor no se encuentra en el array.

var myArray = [ 1, 2, 3, 5 ];

if ($.inArray(4, myArray) !== -1) {

console.log(‘valor encontrado’);

}

$.extend Cambia la propiedades del primer objeto

utilizando las propiedades de los subsecuentes

objetos.

var firstObject = { foo : ‘bar’, a : ‘b’ };


74

var secondObject = { foo : ‘baz’ };

var newObject = $.extend(firstObject, second-

Object);

console.log(firstObject.foo); // ‘baz’

console.log(newObject.foo); // ‘baz’

Si no se desea cambiar las propiedades de nin-

guno de los objetos que se utilizan en $.extend,

se debe incluir un objeto vacío como primer ar-

gumento.

var firstObject = { foo : ‘bar’, a : ‘b’ };

var secondObject = { foo : ‘baz’ };

var newObject = $.extend({}, firstObject, secon-

dObject);

console.log(firstObject.foo); // ‘bar’

console.log(newObject.foo); // ‘baz’

$.proxy Devuelve una función que siempre

se ejecutará en el alcance (scope) provis-

to — en otras palabras, establece el significado

de this (incluido dentro de la función) como el

segundo argumento.

var myFunction = function() { console.log(this); };

var myObject = { foo : ‘bar’ };

myFunction(); // devuelve el objeto window

var myProxyFunction = $.proxy(myFunction,

myObject);

myProxyFunction(); // devuelve el objeto myOb-

ject

Si se posee un objeto con métodos, es posible

pasar dicho objeto y el nombre de un método

para devolver una función que siempre se ejecu-

ta en el alcance de dicho objeto.

var myObject = {

myFn : function() {

console.log(this);

}

};

$(‘#foo’).click(myObject.myFn); // registra el ele-

mento DOM #foo

$(‘#foo’).click($.proxy(myObject, ‘myFn’)); // re-

gistra myObject

El método data

A menudo encontrará que existe información

acerca de un elemento que necesita guardar. En

JavaScript es posible hacerlo añadiendo propie-

dades al DOM del elemento, pero esta práctica

conlleva enfrentarse a consumos excesivos de

memoria (en inglés memory leaks) en algunos

navegadores. jQuery ofrece una manera sencilla

para poder guardar información relacionada a un

elemento, y la misma biblioteca se ocupa de ma-

nejar los problemas que pueden surgir por falta

de memoria.

Guardar y recuperar información relacionada a

un elemento

$(‘#myDiv’).data(‘keyName’, { foo : ‘bar’ });


75

$(‘#myDiv’).data(‘keyName’); // { foo : ‘bar’ }

A través del método $.fn.data es posible guardar

cualquier tipo de información sobre un elemen-

to, y es difícil exagerar la importancia de este

concepto cuando se está desarrollando una apli-

cación compleja.

Por ejemplo, si desea establecer una relación en-

tre el ítem de una lista y el div que hay dentro

de este ítem, es posible hacerlo cada vez que se

interactúa con el ítem, pero una mejor solución

es hacerlo una sola vez, guardando un puntero al

div utilizando el método $.fn.data:

Establecer una relación entre elementos utilizan-

do el método $.fn.data

$(‘#myList li’).each(function() {

var $li = $(this), $div = $li.find(‘div.content’);

$li.data(‘contentDiv’, $div);

});

// luego, no se debe volver a buscar al div;

// es posible leerlo desde la información asociada

al item de la lista

var $firstLi = $(‘#myList li:first’);

$firstLi.data(‘contentDiv’).html(‘nuevo conteni-

do’);

Además es posible pasarle al método un objeto

conteniendo uno o más pares de conjuntos pa-

labra clave-valor

omo se indicó anteriormente, jQuery posee va-

rios métodos para trabajar con Ajax. Sin embar-

go, todos están basados en el método $.ajax, por

lo tanto, su comprensión es obligatoria. A con-

tinuación se abarcará dicho método y luego se

indicará un breve resumen sobre los demás mé-

todos.

Generalmente, es preferible utilizar el método $.

ajax en lugar de los otros, ya que ofrece más

características y su configuración es muy com-

prensible.

7.3.1. $.ajax

El método $.ajax es configurado a través de un

objeto, el cual contiene todas las instrucciones

que necesita jQuery para completar la petición.

Dicho método es particularmente útil debido a

que ofrece la posibilidad de especificar acciones

en caso que la petición haya fallado o no. Ade-

más, al estar configurado a través de un objeto,

es posible definir sus propiedades de forma sepa-

rada, haciendo que sea más fácil la reutilización

del código. Puede visitar api.jquery.com/jQuery.

ajax para consultar la documentación sobre las

opciones disponibles en el método.

Utilizar el método $.ajax

$.ajax({

// la URL para la petición

url : ‘post.php’,

// la información a enviar

// (también es posible utilizar una cadena de

datos)

data : { id : 123 },

// especifica si será una petición POST o GET


76

type : ‘GET’,

// el tipo de información que se espera de res-

puesta

dataType : ‘json’,

// código a ejecutar si la petición es satisfac-

toria;

// la respuesta es pasada como argumento a

la función

success : function(json) {

$(‘<h1/>’).text(json.title).appendTo(‘body’);

$(‘<div class=”content”/>’)

.html(json.html).appendTo(‘body’);

},

// código a ejecutar si la petición falla;

// son pasados como argumentos a la función

// el objeto de la petición en crudo y código de

estatus de la petición

error : function(xhr, status) {

alert(‘Disculpe, existió un problema’);

},

// código a ejecutar sin importar si la petición

falló o no

complete : function(xhr, status) {

alert(‘Petición realizada’);

}

});

Opciones del método $.ajax

El método $.ajax posee muchas opciones de

configuración, y es justamente esta característi-

ca la que hace que sea un método muy útil. Para

una lista completa de las opciones disponibles,

puede consultar api.jquery.com/jQuery.ajax; a

continuación se muestran las más comunes:

async Establece si la petición será asíncrona o

no. De forma predeterminada el valor es true.

Debe tener en cuenta que si la opción se esta-

blece en false, la petición bloqueará la ejecución

de otros códigos hasta que dicha petición haya

finalizado.

cache Establece si la petición será guardada en

la cache del navegador. De forma predetermi-

nada es true para todos los dataType excepto

para script y jsonp. Cuando posee el valor false,

se agrega una cadena de caracteres anti-cache

al final de la URL de la petición.

complete Establece una función de devolución

de llamada que se ejecuta cuando la petición

esta completa, aunque haya fallado o no. La fun-

ción recibe como argumentos el objeto de la

petición en crudo y el código de estatus de la

misma petición.

context Establece el alcance en que la/las fun-

ciones de devolución de llamada se ejecutaran

(por ejemplo, define el significado de this den-

tro de las funciones). De manera predetermina-

da this hace referencia al objeto originalmente

pasado al método $.ajax.


77

data Establece la información que se enviará al

servidor. Esta puede ser tanto un objeto como

una cadena de datos (por ejemplo foo=bar&ba-

z=bim)

dataType Establece el tipo de información que se

espera recibir como respuesta del servidor. Si no

se especifica ningún valor, de forma predetermi-

nada, jQuery revisa el tipo de MIME que posee la

respuesta.

error Establece una función de devolución de lla-

mada a ejecutar si resulta algún error en la pe-

tición. Dicha función recibe como argumentos

el objeto de la petición en crudo y el código de

estatus de la misma petición.

jsonp Establece el nombre de la función de de-

volución de llamada a enviar cuando se realiza

una petición JSONP. De forma predeterminada

el nombre es callback

success Establece una función a ejecutar si la

petición a sido satisfactoria. Dicha función reci-

be como argumentos la información de la peti-

ción (convertida a objeto JavaScript en el caso

que dataType sea JSON), el estatus de la misma y

el objeto de la petición en crudo.

timeout Establece un tiempo en milisegundos

para considerar a una petición como fallada. tra-

ditional Si su valor es true, se utiliza el estilo de

serialización de datos utilizado antes de jQuery

1.4. Para más detalles puede visitar api.jquery.

com/jQuery.param.

type De forma predeterminada su valor es GET.

Otros tipos de peticiones también pueden ser

utilizadas (como PUT y DELETE), sin embargo

pueden no estar soportados por todos los nave-

gadores.

url Establece la URL en donde se realiza la peti-

ción. La opción url es obligatoria para el méto-

do$.ajax;

Métodos convenientes

En caso que no quiera utilizar el método $.ajax, y

no necesite los controladores de errores, existen

otros métodos más convenientes para realizar

peticiones Ajax (aunque, como se indicó antes,

estos están basados el método $.ajax con valores

pre-establecidos de configuración).

Los métodos que provee la biblioteca son:

$.get Realiza una petición GET a una URL pro-

vista.

$.post Realiza una petición POST a una URL pro-

vista.

$.getScript Añade un script a la página.

$.getJSON Realiza una petición GET a una URL

provista y espera que un dato JSON sea devuelto.

Los métodos deben tener los siguientes argu-

mentos, en orden:

url La URL en donde se realizará la petición. Su

valor es obligatorio.

data La información que se enviará al servidor.

Su valor es opcional y puede ser tanto un objeto

como una cadena de datos (como foo=bar&ba-

z=bim).Nota: esta opción no es valida para el mé-

todo $.getScript.

success callback Una función opcional que se

ejecuta en caso que petición haya sido satisfac-

toria. Dicha función recibe como argumentos la

información de la petición y el objeto en bruto

de dicha petición.


78

data type El tipo de dato que se espera recibir

desde el servidor. Su valor es opcional. Nota: esta

opción es solo aplicable para métodos en que no

está especificado el tipo de dato en el nombre

del mismo método.

Utilizar métodos convenientes para peticiones

Ajax

// obtiene texto plano o html

$.get(‘/users.php’, { userId : 1234 }, function(resp)

{

console.log(resp);

});

// añade un script a la página y luego ejecuta la

función especificada

$.getScript(‘/static/js/myScript.js’, function() {

functionFromMyScript();

});

// obtiene información en formato JSON desde

el servidor

$.getJSON(‘/details.php’, function(resp) {

$.each(resp, function(k, v) {

console.log(k + ‘ : ‘ + v);

}); });

. $.fn.load

El método $.fn.load es el único que se puede lla-

mar desde una selección. Dicho método obtiene

el código HTML de una URL y rellena a los ele-

mentos seleccionados con la información obte-

nida. En conjunto con la URL, es posible especi-

ficar opcionalmente un selector, el cual obtendrá

el código especificado en dicha selección.

Utilizar el método $.fn.load para rellenar un ele-

mento

$(‘#newContent’).load(‘/foo.html’);

Utilizar el método $.fn.load para rellenar un ele-

mento basado en un selector

$(‘#newContent’).load(‘/foo.html #myDiv h1:-

first’, function(html) {

alert(‘Contenido actualizado’);

});

ENVÍO DE PARÁMETROS POR GET VS. POST

Los dos métodos HTTP más comunes para en-

viar una petición a un servidor son GET y POST.

Es importante entender la utilización de cada

uno.

El método GET debe ser utilizado para opera-

ciones no-destructivas — es decir, operaciones

en donde se esta obteniendo datos del servidor,

pero no modificando. Por ejemplo, una con-

sulta a un servicio de búsqueda podría ser una

petición GET. Por otro lado, las solicitudes GET

pueden ser almacenadas en la cache del nave-

gador, pudiendo conducir a un comportamiento

impredecible si no se lo espera. Generalmente,

la información enviada al servidor, es enviada en

una cadena de datos (en inglés query string).

El método POST debe ser utilizado para opera-

ciones destructivas — es decir, operaciones en

donde se está incorporando información al ser-

vidor. Por ejemplo, cuando un usuario guarda un


79

artículo en un blog, esta acción debería utilizar

POST. Por otro lado, este tipo de método no se

guarda en la cache del navegador. Además, una

cadena de consulta puede ser parte de la URL,

pero la información tiende a ser enviada de for-

ma separada.

Plugins

Un plugin jQuery es simplemente un nuevo

método que utilizamos para extender el ob-

jeto prototipo de jQuery. Al ampliar el objeto

prototipo de habilitar todos los objetos jQuery

para heredar cualquiera de los métodos que se

agregan. Según lo establecido, siempre que lla-

me jQuery () va a crear un nuevo objeto jQuery,

con todos los métodos de jQuery heredadas.

La idea de un plugin es hacer algo con una co-

lección de elementos. Usted podría considerar

cada método que viene con el núcleo jQuery

un plugin, como .fadeOut () o .addClass ()

Encontrar y Evaluación de Plugins

Uno de los aspectos más celebrados de jQuery

es su amplio ecosistema de plugins. De la ta-

bla de clasificación para formar validación para

autocompletar - si hay una necesidad de ella,

es muy probable que alguien ha escrito un plu-

gin para ello.

La calidad de plugins jQuery es muy varia-

ble. Muchos módulos han sido ampliamen-

te probados y bien cuidadas, pero otros son

creados a toda prisa y luego ignorados. Más de

uno no siguen las mejores prácticas. Algunos

plugins, principalmente jQuery UI , son man-

tenidos por el equipo de jQuery. La calidad

de estos plugins es tan buena como la propia

jQuery.

La forma más fácil de encontrar plugins es la

búsqueda de Google o el Registro de jQuery

Plugins . Una vez que haya identificado algu-

nas opciones, es posible que desee consultar a

los foros de jQuery o la #jquery canal IRC para

obtener aportaciones de los demás.

Al buscar un plugin para llenar una necesidad,

hacer su tarea. Asegúrese de que el plugin está

bien documentada, y buscar al autor a propor-

cionar un montón de ejemplos de su uso. Ten-

ga cuidado con los plugins que lo hacen mu-

cho más de lo que necesita; pueden terminar

añadiendo sobrecarga sustancial a la pági-

na. Para obtener más consejos sobre cómo

detectar un plugin por debajo del par, leer los

signos de un plugin de jQuery mal escrito por

Remy de Sharp.

Una vez que elija un plugin, que necesitará

para añadirlo a tu página. Descargue el plu-

gin, descomprimirlo si es necesario, colóque-

lo estructura de directorios de la aplicación,

a continuación, incluir el plugin en su página

utilizando una etiqueta de script (después de

incluir jQuery).

Componentes o Plugins más utilizados en una

página WEB

Paginador Tiene únicamente dos opciones de

configuración: cuántas páginas mostrar en la ba-

rra y si mostrar el número total de páginas. Muy,

muy sencillo y con una visualización que escapa a

lo convencional.

Tooltipster

Tooltipster es una versión moderna de la clásica herramienta de punta, lo que


80

le permite presentar la información de herramientas totalmente compatibles con HTML en el marcado semántico con CSS se utiliza para controlar la pan-talla. Hay una amplia gama de opciones de configuración, por lo que es adapta-ble para cualquier escenario.

Sliders de Imágenes

ES la tendencia más fuerte y popular del diseño

Web en los últimos dos años. Es un método

muy eficaz para aumentar la facilidad de uso

del sitio Web y atraer al usuario.

Audio y Video

jPlayer es la totalmente libre y de código abierto ( MIT )

mediateca escrito en JavaScript. A jQueryplugin, (y

ahora un Zepto plugin,) jPlayer le permite tejer rá-

pidamente cruz plataforma de audio y vídeo en sus

páginas web. de jPlayer integral API le permite crear

soluciones de medios innovadores, mientras que el

apoyo y el estímulo es proporcionado por la jPla-

yer comunidad activa y creciente .

Validación de formularios

Carrito de Compras

Grid

El jQuery Grid jQWidgets, llamado jqxGrid,

está diseñado para proporcionar una rica fun-

cionalidad, soporte multi-navegador, fácil de

usar APIs y funciona en PC y dispositivos mó-

viles. Ofrece soporte intuitivo para interactuar

con los datos, incluyendo paginación, agru-

pación y clasificación.jqxGrid ofrece las ca-

racterísticas y flexibilidad para adaptarse a las

demandas finales de las aplicaciones basadas

en la web modernos.Proveedores a los que la

interfaz de usuario moderna y capacidades de

los usuarios finales sin competencia

ProgressBar

Mostrar el estado de un proceso determinado o

indeterminado.

Por defecto la barra de progreso determinada.

Datepicker

El selector de fechas está vinculado a un cam-

po de entrada de forma estándar. Centrarse en

la entrada (haga clic en, o utilizar la tecla de

tabulación) para abrir un calendario interactivo

en una pequeña superposición. Elija una fecha,

haga clic en otra parte de la página (difuminar

la entrada), o pulse la tecla Esc para cerrar. Si se

elige una fecha, la retroalimentación se mues-

tra como el valor de la entrada.

Autocomplete

Permite a los usuarios a encontrar y seleccionar

de una lista previamente poblada de valores a

medida que escribe, el aprovechamiento de bús-

queda y filtrado rápidamente.

Accordion

Muestra plegable paneles de contenido para pre-

sentar la información de una cantidad limitada

de espacio.

Tabs

Una sola área de contenido con múltiples pane-

les, cada uno asociado con una cabecera en una

lista.

Dialog

El contenido abierto en una superposición inte-

ractiva.


81


82


83


84

La ventana de diálogo básico es una superpo-

sición posicionado dentro de la ventana gráfi-

ca y está protegido de contenido de la página

(como seleccionar elementos) que brilla a tra-

vés de un iframe. Cuenta con una barra de tí-

tulo y un área de contenido, y se puede mover,

cambiar de tamaño y se cierra con el icono de

‘x’ por defecto.

Menu

Menú Aspecto configurable con mouse y tecla-

do interacciones para la navegación.


85


86

jQuery es una biblioteca de JavaScript, creada inicialmente

por John Resig, que permite simplificar la manera de inte-

ractuar con los documentos HTML, manipular el árbol DOM,

manejar eventos, desarrollar animaciones y agregar interac-

ción con la técnica AJAX a páginas web. Fue presentada el

14 de enero de 2006 en el BarCamp NYC. jQuery es la bi-

blioteca de JavaScript más utilizada.

jQuery es software libre y de código abierto, posee un do-

ble licenciamiento bajo la Licencia MIT y la Licencia Pública

General de GNU v2, permitiendo su uso en proyectos li-

bres y privados. jQuery, al igual que otras bibliotecas, ofre-

ce una serie de funcionalidades basadas en JavaScript que

de otra manera requerirían de mucho más código, es decir,

con las funciones propias de esta biblioteca se logran gran-

des resultados en menos tiempo y espacio.

SINTAXIS

jQuery es una liviana libreria de JavaScript, pensada para

interactuar con los elementos de una web por medio del

DOM. Lo que la hace tan especial es su sencillez y su redu-

cido tamaño.

¿Por que debería usarlo?

La sencillez de su sintaxis y la poca extension del codigo

que necesitas escribir son las caracteristicas más notables.

Si hicieras lo que hace jQuery con getElementById y win-

dow.onload no solo tendrias que escribir mucho, si no que

podrian haber diversos problemas.

¿Como empiezo a usarlo?

Lo primero que debes hacer, es descargarlo de la web ofi-

cial: jQuery. Una vez descargada la libreria (son más o me-

nos 16k) puedes proceder a tu primer script: <html xml-

ns=”http://www.w3.org/1999/xhtml”>

<head>

<title>Prueba de jQuery</title>

<script src=”jquery.js” type=”text/javascript”></script>

</head>

<body>

</body>

</html>

Lo primero que hacemos es linkear el jQuery a nuestro do-

cumento. Facil, no?

Ejecución y sintaxis básica

jQuery


87

jQuery tiene una sintaxis muy sencilla. Los comandos se re-

conocen por comenzar con el simbolo “$”. Ahora, la forma

de una sentencia es la siguiente:

$(elemento).evento(funcion-o-parametro);

La manera de inicializar jQuery es muy util:

$(document).ready(function(){

//Aqui tu codigo

});

Ready es un método propio de jQuery, que revisa si el DOM

está listo para usarse. Es más util que el window.onload,

pues este debe esperar a que todos los elementos de la pa-

gina esten cargados (como scripts e imagenes) paa ejecutar.

El “ready”, en cambio, espera solo a la estructura.

Incluir JQuery en nuestra página

Alojando la librería en nuestro servidor

Desde la página oficial de jQuery, podemos descargar en

cualquier momento la última versión de la librería. Ésta se

encuentra disponible en dos formatos: la versión para desa-

rrollo y la versión de producción.

Crea una página HTML simple

Ahora, en el mismo directorio donde has colo-

cado el archivo js, coloca un archivo html con el

siguiente código.

<html>

<head>

<script src=”jquery-1.3.2.min.js” type=”text/

javascript”></script>

<script>

</script>

</head>

<body>

<a href=”http://www.desarrolloweb.com/”>De-

sarrolloWeb.com</a>

</body>

</html>

Como podrás ver, es una página bien simple, en

la que tenemos una llamada a un script externo

llamado jquery-1.3.2.min.js. Este es el código de

jQuery que hemos descargado de la página del

framework. Si has descargado una versión distin-

ta, quizás el archivo se llame de otra manera, así

que es posible que tengas que editar ese nombre

de archivo para colocar el que tengas en el di-

rectorio.

Acceso a los elementos HTML

Los selectores sirven para seleccionar elementos

de la página a partir de una cadena de texto que

le pasamos a la función jQuery.

Como la propia palabra indica, los selectores son

un mecanismo, disponible en jQuery, para se-

leccionar determinados elementos de la página.

El selector no es más que una cadena de carac-

teres, creada bajo unas normas que veremos a

continuación, con la que podemos referirnos a

cualquiera o cualesquiera de los elementos que

hay en una página.

Todo en jQuery pasa por utilizar los selectores,

para acceder a los elementos de la página que

deseamos alterar dinámicamente con Javascript.

Para empezar, veamos un selector, para aclarar

las ideas y refrescar la memoria. Cuando utiliza-

mos la función jQuery (o función dólar)lo que

pasamos como parámetro es el selector. La fun-


88

ción jQuery devuelve justamente los elementos

de la página que concuerdan con el selector en-

viado por parámetro.

$(“p”);

En esa llamada a la función jQuery, estamos pa-

sando por parámetro una cadena “p” y como

decía, esa misma cadena es el selector. En este

caso, “p” es un selector que sirve para seleccio-

nar todas las etiquetas P de la página, es decir,

los párrafos.

Cambio de propiedades de elementos HTML

Para Cambiar las propiedades de css con jquery, sin cambiar

la clase entera, lo que tenemos que hacer es acceder como

siempre al objeto al que queremos cambiar la propiedad

con $(“#elemento”) y luego lo modificaremos con .css().

Dentro de parentesis lo que pondremos sera las propieda-

des css que queremos cambiar.

por ejemplo si solo tenemos que cambiar una propiedad

seria: .css(“color”,”#FFFFFF”). Y en el caso de que queremos

poner mas de una propiedad lo que tenemos que hacer es

crear un array, es decir, poner {} al principio y al final y ser-

para por , las propidedades de esta manera propiedades:va-

lor como vemos en el ejempo .css({color:”#FFFFFF”,back-

ground-color:”#000000φ}).

Si no puedes utilizar jquery aqui dejamos el enlace para mo-

dificar propiedades css con javascript

Programación de eventos

Un listado con los distintos manejadores eventos

que podemos definir en jQuery, ordenados por

los tipos eventos de ratón, eventos de teclado o

cualquiera de los dos.

Con jQuery podemos implementar todos los

eventos que existen en Javascript, y alguno un

poco más evolucionado, para los que hay una

función propia para cada uno. Lo cierto es que

la documentación de jQuery, en la sección de

eventos, mantiene una lista de los posibles mé-

todos para crear eventos, aunque están mezcla-

dos con otra serie de propiedades y métodos re-

lacionados con eventos. He aquí un resumen de

los tipos de eventos con sus funciones:

Eventos relacionados con el ratón

click()

Sirve para generar un evento cuando se produce un clic en

un elemento de la página.

dblclick()

Para generar un evento cuando se produce un doble clic

sobre un elemento.

hover()

Esta función en realidad sirve para manejar dos eventos,

cuando el ratón entra y sale de encima de un elemento.

Por tanto espera recibir dos funciones en vez de una que

se envía a la mayoría de los eventos.

mousedown()

Para generar un evento cuando el usuario hace clic, en el

momento que presiona el botón e independientemente de

si lo suelta o no. Sirve tanto para el botón derecho como el

izquierdo del ratón.

mouseup()

Para generar un evento cuando el usuario ha hecho clic

y luego suelta un botón del ratón. El evento mouseup se

produce sólo en el momento de soltar el botón.

mouseenter()

Este evento se produce al situar el ratón encima de un


89

elemento de la página.

Eventos relacionados con el teclado

keydown()

Este evento se produce en el momento que se presiona

una tecla del teclado, independientemente de si se libera

la presión o se mantiene. Se produce una única vez en el

momento exacto de la presión.

keypress()

Este evento ocurre cuando se digita un carácter, o se

presiona otro tipo de tecla. Es como el evento keypress de

Javascript, por lo que se entiende que keypress() se ejecuta

una vez, como respuesta a una pulsación e inmediata

liberación de la tecla, o varias veces si se pulsa una tecla y

se mantiene pulsada.

keyup()

El evento keyup se ejecuta en el momento de liberar una

tecla, es decir, al dejar de presionar una tecla que teníamos

pulsada.

Eventos combinados teclado o ratón

focusin()

Evento que se produce cuando el elemento

gana el foco de la aplicación, que puede pro-

ducirse al hacer clic sobre un elemento o al

presionar el tabulador y situar el foco en ese

elemento.

focusout()

Ocurre cuando el elemento pierde el foco de

la aplicación, que puede ocurrir cuando el foco

está en ese elemento y pulsamos el tabulador, o

nos movemos a otro elemento con el ratón.

focus()

Sirve para definir acciones cuando se produce el

evento focus de Javascript, cuando el elemento

gana el foco de la aplicación.

Expresiones regulares

El buen manejo de expresiones regulares es, posiblemente,

uno de los recursos más

poderosos que tenemos en muchos lenguajes de progra-

mación y Javascript posee un muy buen soporte de las mis-

mas.

Sin embargo existe un gran misticismo en cuanto a su uso.

Javascript posee soporte nativo de expresiones regulares

proveyendo un constructor para crear objetos que las re-

presenten e incluso distintos métodos, normalmente en

objetos del tipo String, para usarlas.

Las expresiones regulares son algoritmos preestablecidos

que nos sirven pare desempeñar ciertas tareas, a continua-

ción se muestra una lista con ejemplos de algunas expresio-

nes aplicables a campos de texto

//para números, útil para filtrar los famosos ids.

numeros = /^[0-9]+$/;

//sólo letras, pero esto no incluye los acentos, así que si in-

troduces á no es correcto.

letras = /^[a-zA-Z]+$/;

//para caracteres latinos(acentos), espacios y guiones bajos.

el espacio se indica con \s.

letras_latinas = /^[0-9a-zA-ZáéíóúàèìòùÀÈÌÒÙÁÉÍÓÚñ-

ÑüÜ_\s]+$/;

//para emails, válidos pueden ser: [email protected],

[email protected], ...

email = /^[a-zA-Z0-9\._-]+@[a-zA-Z0-9-]{2,}[.][a-zA-Z]

{2,4}$/;

//passwords que tienen que contener tanto números como


90

letras

password = /^([a-z]+[0-9]+)|([0-9]+[a-z]+)/i;

//Para urls

url = /^(ht|f)tps?:\/\/\w+([\.\-\w]+)?\.([a-z]

{2,6})?([\.\-\w\/_]+)$/i;

//para localhost

localhost = /^http:\/\/(localhost|127\.0\.0\.1)/;

//Para códigos postales

codigo_postal = /^([1-9]{2}|[0-9][1-9]|[1-9][0-9])[0-9]{3}$/;

//Para el Documento NIF

NIF = /^\d{8}[a-zA-Z]{1}$/;

//Para el Documento CIF

CIF = /^[a-zA-Z]{1}\d{7}[a-zA-Z0-9]{1}$/;

//Para el documento NIE

NIE = /^[XxTtYyZz]{1}[0-9]{7}[a-zA-Z]{1}$/;

//Tarjetas de crédito VISA

VISA = /^4[0-9]{3}-?[0-9]{4}-?[0-9]{4}-?[0-9]{4}$/;

//Tarjetas de crédito MASTERCARD

MASTERCARD = /^5[1-5][0-9]{2}-?[0-9]{4}-?[0-9]{4}-?[0-

9]{4}$/;

TERCER MÓDULO


92

PHPIntroducción a PHPPHP (acrónimo recursivo de PHP: Hypertext Pre-

processor) es un lenguaje de código abierto muy

popular. PHP es el lenguaje de lado servidor más

extendido en la web. Nacido en 1994, se trata de

un lenguaje de creación relativamente recien-

te, aunque con la rapidez con la que evoluciona

Internet parezca que ha existido toda la vida. Es

un lenguaje que ha tenido una gran aceptación

en la comunidad de desarrolladores, debido a la

potencia y simplicidad que lo caracterizan, así

como al soporte generalizado en la mayoría de

los servidores de hosting.

PHP nos permite embeber sus pequeños frag-

mentos de código dentro de la página HTML y

realizar determinadas acciones de una forma fá-

cil y eficaz, combinando lo que ya sabemos del

desarrollo HTML. PHP ofrece un sinfín de funcio-

nes para la explotación de bases de datos de una

manera llana, sin complicaciones.

En lugar de usar muchos comandos para mos-

trar HTML (como en C o en Perl), las páginas de

PHP contienen HTML con código incrustado que

hace “algo”. El código de PHP está encerrado en-

tre las etiquetas especiales de comienzo y final

<?php y ?> que permiten entrar y salir del “modo

PHP”.

Lo que distingue a PHP de algo del lado del

cliente como Javascript, es que el código es

ejecutado en el servidor, generando HTML y en-

viándolo al cliente. El cliente recibirá el resultado

de ejecutar el script, aunque no se sabrá el có-

digo subyacente que era. El servidor web puede

ser configurado incluso para que procese todos

los ficheros HTML con PHP, por lo que no hay

manera de que los usuarios puedan saber qué se

tiene debajo de la manga.

Lo mejor de utilizar PHP es su extrema simpli-

cidad para el principiante, pero a su vez ofrece

muchas características avanzadas para los pro-

gramadores profesionales.

Aunque el desarrollo de PHP está centrado en la

programación de scripts del lado del servidor, se

puede utilizar para muchas otras cosas.

Instalación del ambiente de desarrolloServidor web: Apache

Existen dos formas de configurar PHP para tra-

bajar con Apache, instalar como un módulo o

instalar como un CGI.

En primer lugar, hay que descargarse PHP desde

la página de php.net. Existen dos versiones, una

que tiene un instalador, y otra que es un fichero

ZIP. Hay que descargarse esta última.

Una vez descargado, hay que descomprimirlo

dentro de una carpeta, esta no tiene que estar

bajo el árbol de directorios de Apache. El artí-

culo asumirá que se descomprime dentro de la

carpeta C:PHP. Comprobar que los contenidos

del archivo ZIP no quedan en un subdirectorio

de la carptea C:PHP, sino directamente en dicha

carpeta.

Dentro de la carpeta c:PHP se encuentra un fi-

chero llamado PHP4ts.dll, hay que mover el fi-

chero dentro de la carpeta: c:windowssystem ó

c:winntsystem

En este fichero se encuentra toda la configura-

ción de PHP, y las modificaciones en la configu-


93

ración de PHP (mostrar Errores, variables globa-

les etc...) se encuentra dentro del mismo.

Es muy recomendable cambiar la directiva dis-

play_errors que por defecto esta en OFF, y por-

nerla en ON, para poder ver los errores que se

producen en las páginas durante el desarrollo.

Para un servidor en producción en conveniente

dejarla en OFF.

Una vez se han hecho estos cambios, queda in-

dicarle al Apache, donde se encuentra instalado

el PHP, para ello hay que editar el fichero httpd.

conf que se encuentra dentro de la carpeta conf,

en la carpeta de instalación del apache (por de-

fecto c:archivos de programaapache groupapa-

che2conf)

Abrir el fichero, y situarse al final del mismo, y

escribir las siguientes líneas:

ScriptAlias /php/ “c:/php/”

AddType application/x-httpd-php .php

Action application/x-httpd-php “/php/php.exe”

En ellas se indica donde se encuentra el ejecuta-

ble de php, y lo asocia a los ficheros .php que se

encuentren dentro de apache.

A continuación reiniciar el servidor Apache, y ya

esta!

Por último, indicar que para probar la nueva ins-

talación, es recomendable crear un fichero php

con el siguiente contenido:

<? phpinfo();?>

Luego lo guardamos dentro de la carpeta raíz de

documentos del Apache (por defecto c:archivos

de programaapache groupapache2htdocs ), con

un nombre terminado en .php, por ejemplo info.

php

Para ejecutarlo, a través de un navegador, escri-

bir la dirección http://localhost/info.php.

Si la vemos correctamente es que todo ha ido

bien y que tenemos perfectamente instalado

PHP en nuestro servidor Apache.

Manejador de Base de Datos: MySQLLas aplicaciones en red son cada día más nume-

rosas y versátiles. En muchos casos, el esquema

básico de operación es una serie de scripts que

rigen el comportamiento de una base de datos.

Debido a la diversidad de lenguajes y de bases de

datos existentes, la manera de comunicar entre

unos y otras sería realmente complicada a ges-

tionar de no ser por la existencia de estándares

que nos permiten el realizar las operaciones bá-

sicas de una forma universal.

Es de eso de lo que trata el Structured Query

Language (SQL) que no es más que un lenguaje

estándar de comunicación con bases de datos.

Hablamos por tanto de un lenguaje normalizado

que nos permite trabajar con cualquier tipo de

lenguaje (ASP o PHP) en combinación con cual-

quier tipo de base de datos (MS Access, SQL Ser-

ver, MySQL...).

El hecho de que sea estándar no quiere decir que

sea idéntico para cada base de datos. En efecto,

determinadas bases de datos implementan fun-

ciones específicas que no tienen necesariamen-

te que funcionar en otras.

Aparte de esta universalidad, el SQL posee otras

dos características muy apreciadas. Por una par-

te, presenta una potencia y versatilidad notables

que contrasta, por otra, con su accesibilidad de

aprendizaje.


94

Uno de los puntos fuertes de las páginas en PHP

es la posibilidad de explotar bases de datos me-

diante funciones de una simplicidad y potencia

muy agradecidas. Estas bases de datos pueden

servir a nuestro sitio para almacenar contenidos

de una forma sistemática que nos permita clasi-

ficarlos, buscarlos y editarlos rápida y fácilmente.

Una base de datos es sencillamente un conjunto

de tablas en las que almacenamos distintos re-

gistros (artículos de una tienda virtual, provee-

dores o clientes de una empresa, películas en

cartelera en el cine...). Estos registros son cata-

logados en función de distintos parámetros que

los caracterizan y que presentan una utilidad a

la hora de clasificarlos. Así, por ejemplo, los ar-

tículos de una tienda virtual podrían catalogarse

a partir de distintos campos como puede ser un

número de referencia, nombre del artículo, des-

cripción, precio, proveedor...

La base de datos más difundida con el tandem

UNIX-Apache es sin duda MySQL. Como para el

caso de Apache, una versión para Windows está

disponible y puede ser descargada gratis.

Su puesta a punto no entraña mucha dificultad.

Una vez instalado el programa podemos ejecu-

tar nuestras órdenes en modo MS-DOS. Para ello

abrimos una ventana MS-DOS y nos colocamos

en el directorio bin de mysql. En este directorio

se encuentran los archivos ejecutables. Aquí ha-

brá que encontrar un archivo llamado mysqld. En

el caso de la versión más actual durante la re-

dacción de este artículo este archivo es llamado

mysqld-shareware. Una vez ejecutado este ar-

chivo podemos ejecutar el siguiente: mysql.

Llegados a este punto veremos cómo un men-

saje de bienvenida aparece en nuestra pantalla.

En estos momentos nos encontramos dentro de

la base de datos. A partir de ahí podemos realizar

todo tipo de operaciones por sentencias SQL.

Para evitarnos el tener que editar nuestras tablas

directamente sobre archivos de texto, puede re-

sultar muy práctico usar cualquier otra base de

datos con un editor y exportar a continuación

la tabla en un archivo de texto configurado para

dejar tabulaciones entre cada campo. Esto es

posible en Access por ejemplo pinchando con

el botón derecho sobre la tabla que queremos

convertir y eligiendo la opción exportar. Una

ventana de dialogo aparecerá en la que elegi-

remos guardar el archivo en tipo texto. El paso

siguiente será elegir un formato delimitado por

tabulaciones sin cualificador de texto.

Otra posibilidad que puede resultar muy prác-

tica y que nos evita trabajar continuamente te-

cleando órdenes al estilo de antaño es servirse

de programas en PHP o Perl ya existentes y des-

cargables en la red. El más popular sin duda es

phpMyAdmin. Este tipo de scripts son ejecuta-

dos desde un navegador y pueden ser por tanto

albergados en nuestro servidor o empleados en

local para, a partir de ellos, administrar MySQL de

una forma menos sufrida.

Asimismo, dentro del directorio bin de MySQL,

podemos encontrar una pequeña aplicación lla-

mada MySqlManager. Se trata de una interface

windows, más agradable a la vista y al uso que la

que obtenemos ejecutando el archivo mysql. En

este caso, las sentencias SQL deben realizarse sin

el punto y coma final.

Cliente FTPUn cliente FTP es un programa que se instala en

el ordenador del usuario, y que emplea el pro-


95

tocolo FTP para conectarse a un servidor FTP

y transferir archivos, ya sea para descargarlos o

para subirlos.

Para utilizar un cliente FTP, se necesita conocer

el nombre del archivo, el ordenador en que resi-

de (servidor, en el caso de descarga de archivos),

el ordenador al que se quiere transferir el archivo

(en caso de querer subirlo nosotros al servidor), y

la carpeta en la que se encuentra.

Algunos clientes de FTP básicos en modo con-

sola vienen integrados en los sistemas operati-

vos, incluyendo Microsoft Windows, DOS, GNU/

Linux y Unix. Sin embargo, hay disponibles clien-

tes con opciones añadidas e interfaz gráfica.

Aunque muchos navegadores tienen ya integra-

do FTP, es más confiable a la hora de conectarse

con servidores FTP no anónimos utilizar un pro-

grama cliente.

Uso de variablesClasesUna clase es un conjunto de variables, llamados

atributos, y funciones, llamadas métodos, que

trabajan sobre esas variables. Las clases son, al

fin y al cabo, una definición: una especificación

de propiedades y funcionalidades de elementos

que van a participar en nuestros programas.

Por ejemplo, la clase “Caja” tendría como atribu-

tos características como las dimensiones, color,

contenido y cosas semejantes. Las funciones o

métodos que podríamos incorporar a la clase

“caja” son las funcionalidades que deseamos que

realice la caja, como introduce(), muestra_con-

tenido(), comprueba_si_cabe(), vaciate()...

Las clases en PHP se definen de la siguiente ma-

nera:

<? class Caja{ var $alto; var $ancho; var $largo; var $contenido; var $color; function introduce($cosa){ $this->contenido = $cosa; } function muestra_contenido(){ echo $this->contenido; } } ?>

En este ejemplo se ha creado la clase Caja, indi-

cando como atributos el ancho, alto y largo de

la caja, así como el color y el contenido. Se han

creado, para empezar, un par de métodos, uno

para introducir un elemento en la caja y otro para

mostrar el contenido.

Si nos fijamos, los atributos se definen decla-

rando unas variables al principio de la clase. Los

métodos se definen declarando funciones den-

tro de la clase.

Utilizar la clase

Las clases solamente son definiciones. Si quere-

mos utilizar la clase tenemos que crear un ejem-

plar de dicha clase, lo que corrientemente se le

llama instanciar un objeto de una clase.

$micaja = new Caja;

Con esto hemos creado, o mejor dicho, instan-

ciado, un objeto de la clase Caja llamado $mi-

caja.

$micaja->introduce(“algo”);

$micaja->muestra_contenido();


96

Con estas dos sentencias estamos introduciendo

“algo” en la caja y luego estamos mostrando ese

contendido en el texto de la página. Nos fijamos

que los métodos de un objeto se llaman utilizan-

do el código “->”.

nombre_del_objeto->nombre_de_metodo()

Para acceder a los atributos de una clase tam-

bién se accede con el código “->”. De esta forma:

nombre_del_objeto->nombre_del_atributo

ArreglosUn array es una variable que está compuesta de

varios elementos cada uno de ellos catalogado

dentro de ella misma por medio de una clave.

A continuación se muestra el ejemplo de un

array llamado sentido que contiene los distintos

sentidos del ser humano:

$sentido[1]=”ver”;

$sentido[2]=”tocar”;

$sentido[3]=”oir”;

$sentido[4]=”gustar”;

$sentido[5]=”oler”;

En este caso este array cataloga sus elementos,

comúnmente llamados valores, por números.

Los números del 1 al 5 son por lo tanto las claves

y los sentidos son los valores asociados. Nada

nos impide emplear nombres (cadenas) para cla-

sificarlos. Lo único que deberemos hacer es en-

trecomillarlos:

<?

$moneda[“espana”]=”Peseta”;

$moneda[“francia”]=”Franco”;

$moneda[“usa”]=”Dolar”;

?>

Otra forma de definir idénticamente este mismo

array y que nos puede ayudar para la creación de

arrays más complejos es la siguiente sintaxis:

<?

$moneda=array(“espana”=> “Peseta”,”francia” =>

“Franco”,”usa” => “Dolar”);

?>

Una forma muy práctica de almacenar datos es

mediante la creación de arrays multidimensio-

nales (tablas). Pongamos el ejemplo siguiente:

Queremos almacenar dentro de una misma ta-

bla el nombre, moneda y lengua hablada en cada

país. Para hacerlo podemos emplear un array

llamado país que vendrá definido por estas tres

características (claves). Para crearlo, deberíamos

escribir una expresión del mismo tipo que la vis-

ta anteriormente en la que meteremos una array

dentro del otro. Este proceso de incluir una ins-

truccion dentro de otra se llama anidar y es muy

corriente en programación:

<?

$pais=array

(

“espana” =>array

(

“nombre”=>”España”,

“lengua”=>”Castellano”,

“moneda”=>”Peseta”

),


97

“francia” =>array

(

“nombre”=>”Francia”,

“lengua”=>”Francés”,

“moneda”=>”Franco”

)

);

echo $pais[“espana”][“moneda”] //Saca en panta-

lla: “Peseta”

?>

Como puede verse, en esta secuencia de script,

no hemos introducido punto y coma “;” al final

de cada línea. Esto es simplemente debido a que

lo que hemos escrito puede ser considerado

como una sola instrucción. En realidad, somos

nosotros quienes decidimos cortarla en varias

líneas para, así, facilitar su lectura. La verdadera

instrucción acabaría una vez definido completa-

mente el array y es precisamente ahí donde he-

mos colocado el único punto y coma.

Los arreglos nos permiten almacenar tablas y, a

partir de una simple petición, visualizarlas un de-

terminado valor en pantalla.

Lo que es interesante es que la utilidad de los

arrays no acaba aquí, sino que también podemos

utilizar toda una serie de funciones creadas para

ordenarlos por orden alfabético directo o inver-

so, por claves, contar el número de elementos

que componen el array además de poder mo-

vernos por dentro de él hacia delante o atrás.

Muchas son las funciones propuestas por PHP

para el tratamiento de arrays.

MatricesCookiesLa utilidad principal de las cookies es la de po-

der identificar al navegador una vez éste visita el

sitio por segunda vez y así, en función del perfil

del cliente dado en su primera visita, el sitio pue-

de adaptarse dinámicamente a sus preferencias

(lengua utilizada, colores de pantalla, formularios

rellenados total o parcialmente, redirección a

determinadas páginas...).

Para crear cookies con PHP, modificar o generar

una nueva cookie lo podemos hacer a partir de la

función SetCookie:

setcookie(“nombre_de_la_cookie”,valor,expira-

cion);

Pongamos un ejemplo sencillo. Imaginemos que

queremos introducir en una variable cookie el

nombre del visitante. El nombre ha podido ser

previamente recogido por un formulario tal y

como hemos visto:

s e t c o o k i e ( “ p e r s o n a ” , $ n o m b r e , t i -

me()+86400*365);

De este modo hemos creado una cookie php lla-

mada persona que tiene como valor el conteni-

do de la variable $nombre y tendrá una duración

de 1 año a partir de su creación (el tiempo time()

actual en segundos sumado a un año en segun-

dos).

Es importante que la creación de la cookie sea

previa a la apertura del documento HTML. En

otras palabras, las llamadas a la función setcoo-

kie() deben ser colocadas antes de la etiqueta

HTML.

Por otra parte, es interesante señalar que el he-

cho de que definir una cookie ya existente impli-


98

ca el borrado de la antigua. Del mismo modo, el

crear una primera cookie conlleva la generación

automática del archivo texto.

Para utilizar el valor de la cookie en nuestros

scripts tan sólo tendremos que llamar la variable

que define la cookie.

Hay que tener cuidado sin embargo de no definir

variables en nuestro script con el mismo nom-

bre que las cookies puesto que PHP privilegiará

el contenido de la variable local con respecto a

la cookie y no dará un mensaje de error. Esto nos

puede conducir a errores realmente difíciles de

detectar.

Recordamos que es posible recopilar en una va-

riable tipo array el conjunto de cookies almace-

nadas en el disco duro del internauta mediante la

variable de servidor $HTTP_COOKIE_VARS

Las cookies son una herramienta fantástica para

personalizar nuestra página pero hay que ser

cautos ya que, por una parte, no todos los na-

vegadores las aceptan y por otra, se puede de-

liberadamente impedir al navegador la creación

de cookies. Es por ello que resultan un comple-

mento y no una fuente de variables infalible para

nuestro sitio.

Programación estructuradaCondicionalesIF the else

La programación exige en muchas ocasiones la

repetición de acciones sucesivas o la elección

de una determinada secuencia y no de otra de-

pendiendo de las condiciones específicas de la

ejecución.

Cuando queremos que el programa, llegado a

un cierto punto, tome un camino concreto en

determinados casos y otro diferente si las con-

diciones de ejecución difieren, nos servimos del

conjunto de instrucciones if, else y elseif. La es-

tructura de base de este tipo de instrucciones es

la siguiente:

if (condición)

{

Instrucción 1;

Instrucción 2;

...

}

else

{

Instrucción A;

Instrucción B;

...

}

Llegados a este punto, el programa verificará el

cumplimiento o no de la condición. Si la condi-

ción es cierta las instrucciones 1 y 2 serán ejecu-

tadas. De lo contrario (else), las instrucciones A y

B serán llevadas a cabo.

Esta estructura de base puede complicarse un

poco más si tenemos cuenta que no necesa-

riamente todo es blanco o negro y que muchas

posibilidades pueden darse. Es por ello que otras

condiciones pueden plantearse dentro de la


99

condición principal. Hablamos por lo tanto de

condiciones anidadas que tendrían una estruc-

tura del siguiente tipo:

if (condición1)

{

Instrucción 1;

Instrucción 2;

...

}

else

{

if (condición2)

{

Instrucción A;

Instrucción B;

...

}

else

{

Instrucción X

...

}

}

De este modo podríamos introducir tantas con-

diciones como queramos dentro de una condi-

ción principal.

De gran ayuda es la instrucción elseif que per-

mite en una sola línea introducir una condición

adicional. Este tipo de instrucción simpifica lige-

ramente la sintaxis que acabamos de ver:

if (condición1)

{

Instrucción 1;

Instrucción 2;

...

}

elseif (condición2)

{

Instrucción A;

Instrucción B;

...

}

else

{

Instrucción X

...

}

Switch

La sentencia switch es similar a una serie de sen-

tencias IF en la misma expresión. En muchas

ocasiones, es posible que se quiera comparar

la misma variable (o expresión) con muchos va-

lores diferentes, y ejecutar una parte de código

distinta dependiendo de a qué valor es igual. Para

esto es exactamente la expresión switch.


100

Los dos ejemplos siguientes son dos formas di-

ferentes de escribir lo mismo, uno con una serie

de sentencias if y elseif, y el otro usando la sen-

tencia switch:

Ejemplo #1 Estructura switch

<?php

if ($i == 0) {

echo “i es igual a 0”;

} elseif ($i == 1) {


} elseif ($i == 2) {


}

switch ($i) {

case 0:


break;

case 1:


break;

case 2:


break;

}

?>

Ejemplo #2 Estrutura switch permite el uso de

strings

<?php

switch ($i) {

case “manzana”:

echo “i es una manzana”;

break;

case “barra”:

echo “i es una barra”;

break;

case “pastel”:

echo “i es un pastel”;

break;

}

?>

Es importante entender cómo la sentencia

switch es ejecutada con el fin de evitar errores.

La sentencia switch ejecuta línea por línea (en

realidad, sentencia por sentencia). Al principio,

ningún código es ejecutado. Sólo cuando una

sentencia case es encontrada con un valor que

coincide con el valor de la sentencia switch, PHP

comienza a ejecutar la sentencias. PHP continúa

ejecutando las sentencias hasta el final del blo-

que switch, o hasta la primera vez que vea una

sentencia break. Si no se escribe una sentencia

break al final de la lista de sentencias de un caso,

PHP seguirá ejecutando las sentencias del caso

siguiente.

Exit

Break


101

Break termina la ejecución de la estructura actual

for, foreach, while, do-while o switch.

Break acepta un argumento numérico opcional

el cual indica de cuantas estructuras anidadas

encerradas se debe salir. Ejemplo:

<?php

$arr = array(‘uno’, ‘dos’, ‘tres’, ‘cuatro’, ‘pare’, ‘cin-

co’);

while (list(, $val) = each($arr)) {

if ($val == ‘pare’) {

break; /* Se puede también escribir ‘break

1;’ aquí. */

}

echo “$val<br />\n”;

}

/* Usando el argumento opcional. */

$i = 0;

while (++$i) {

switch ($i) {

case 5:

echo “En 5<br />\n”;

break 1; /* Sólo sale del switch. */

case 10:

echo “En 10; saliendo<br />\n”;

break 2; /* Sale del switch y del while. */

default:

break;

}}?>Ciclos

ForLos bucles for son los más complejos en PHP. La

sintaxis de un bucle for es:

for (expr1; expr2; expr3)

sentencia

La primera expresión (expr1) es evaluada (ejecu-

tada) una vez incondicionalmente al comienzo

del bucle.

En el comienzo de cada iteración, se evalúa

expr2. Si se evalúa como TRUE, el bucle conti-

núa y se ejecutan la/sy sentencia/s anidada/s. Si

se evalúa como FALSE, finaliza la ejecución del

bucle.

Al final de cada iteración, se evalúa (ejecuta)

expr3.

Cada una de las expresiones puede estar vacía

o contener múltiples expresiones separadas por

comas. En expr2, todas las expresiones separa-

das por una coma son evaluadas, pero el resul-

tado se toma de la última Wbería ser corrido in-

definidamente (PHP implícitamente lo considera

como TRUE, como en C). Esto puede no ser tan

inútil como se pudiera pensar, ya que muchas

veces se debe terminar el bucle usando una sen-

tencia condicional break en lugar de utilizar la

expresión verdadera del for.

Ejemplo:

<?php

/* ejemplo 1 */

for ($i = 1; $i <= 10; $i++) {


102

echo $i;

}

/* ejemplo 2 */

for ($i = 1; ; $i++) {

if ($i > 10) {

break;

}

echo $i;

}

/* ejemplo 3 */

$i = 1;

for (; ; ) {

if ($i > 10) {

break;

}

echo $i;

$i++;

}

/* ejemplo 4 */

for ($i = 1, $j = 0; $i <= 10; $j += $i, print $i, $i++);

?>

Por supuesto, el primer ejemplo parece ser el

mejor (o quizás el cuarto), pero se puede obser-

var que la posibilidad de usar expresiones vacías

en los bucles for resulta útil en muchas ocasio-

nes.

PHP también admite la sintaxis alternativa de los

dos puntos para bucles for.

for (expr1; expr2; expr3):

sentencia

...

endfor;

While

Los bucles while son el tipo más sencillo de bu-

cle en PHP. La forma básica de una sentencia

while es:

while (expr)

sentencia

El significado de una sentencia while es simple.

Le dice a PHP que ejecute las sentencias ani-

dadas, tanto como la expresión while se evalúe

como TRUE. El valor de la expresión es verificado

cada vez al inicio del bucle, por lo que incluso

si este valor cambia durante la ejecución de las

sentencias anidadas, la ejecución no se detendrá

hasta el final de la iteración (cada vez que PHP

ejecuta las sentencias contenidas en el bucle es

una iteración). A veces, si la expresión while se

evalúa como FALSE desde el principio, las sen-

tencias anidadas no se ejecutarán ni siquiera una

vez.

Al igual que con la sentencia if, se pueden agru-

par varias instrucciones dentro del mismo bucle

while rodeando un grupo de sentencias con cor-

chetes, o utilizando la sintaxis alternativa:

while (expr):

sentencias

...

endwhile;


103

Ejemplo:

<?php

/* ejemplo 1 */

$i = 1;

while ($i <= 10) {

echo $i++; /* el valor presentado sería

$i antes del incremento

(post-incremento) */

}/* ejemplo 2 */$i = 1;while ($i <= 10): echo $i; $i++;endwhile;?>

Do whileLos bucles do-while son muy similares a los bucles while, excepto que la expresión ver-dadera es verificada al final de cada iteración en lugar que al principio. La diferencia prin-cipal con los bucles while es que está garan-tizado que corra la primera iteración de un bucle do-while (la expresión verdadera sólo es verificada al final de la iteración), mientras que no necesariamente va a correr con un bucle while regular (la expresión verdadera es verificada al principio de cada iteración, si se evalúa como FALSE justo desde el co-mienzo, la ejecución del bucle terminaría in-mediatamente).Hay una sola sintaxis para bucles do-while:<?php$i = 0;do { echo $i;} while ($i > 0);?>El bucle de arriba se ejecutaría exactamente

una sola vez, ya que después de la primera iteración, cuando la expresión verdadera es verificada, se evalúa como FALSE ($i no es mayor que 0) y termina la ejecución del bu-cle.

For eachEl constructor foreach proporciona un modo sencillo de iterar sobre arrays; foreach fun-ciona sólo sobre arrays y objetos, y emitirá un error al intentar usarlo con una variable de un tipo diferente de datos o una variable no inicializada. Existen dos sintaxis:foreach (expresión_array as $valor) sentenciasforeach (expresión_array as $clave => $va-lor) sentenciasLa primera forma recorre el array dado por expresión_array. En cada iteración, el valor del elemento actual se asigna a $valor y el puntero interno del array avanza una posi-ción (así en la próxima iteración se estará ob-servando el siguiente elemento).La segunda forma además asigna la clave del elemento actual a la variable $clave en cada iteración.Cuando foreach inicia su ejecución, el pun-tero interno del array se pone automática-mente en el primer elemento del array. Esto significa que no es necesario llamar la fun-ción reset() antes de un bucle foreach.Ya que foreach depende el puntero de array interno, cambiar éste dentro del bucle puede conducir a un comportamiento inesperado.Para poder modificar directamente los ele-mentos del array dentro de bucle, se ha de anteponer & a $valor. En este caso el valor será asignado por referencia. Ejemplo:<?php$array = array(1, 2, 3, 4);foreach ($array as &$valor) { $valor = $valor * 2;}// $array ahora es array(2, 4, 6, 8)unset($valor); // rompe la referencia con el


104

último elemento?>Referenciar $valor sólo es posible si el array iterado puede ser referenciado (es decir, si es una variable).Interacción de PHP con MySQL

Implementación de mecanismos de autenticación a través de usuario y passwordUn sistema de autentificación es un módu-lo de seguridad para asegurarnos de que el usuario que visita las páginas es quien dice ser. Por supuesto, sabiendo que ese usuario es conocido, podremos darle acceso a más aspectos de la página que si fuese un usuario desconocido.Esquema de un sistema de autentificación Vamos a empezar por definir un diagrama para realizar la autentificación de usuario en unas páginas web, que nos servirá para pro-gramar luego las páginas ajustándose al dia-grama.

En la imagen anterior podemos ver el dia-grama, que empieza por la página donde se pide un usuario y contraseña para acceder a la aplicación de acceso restringido. Los datos de autentificación (usuario y con-traseña escritos en la página inicial) se envían

a la página dibujada con línea de puntos, que se encarga de hacer una comprobación de dichos datos del usuario. Según los datos de autentificación, se redirecciona al navega-dor a la página de la aplicación restringida, en caso de que sean correctos, o a la pági-na donde volver a escribir el usuario/contra-seña, en caso de que sean incorrectos. Esta página la he dibujado con línea de puntos porque no es una página donde se pare el navegador para nada, sino que sólo es una página de paso que redirecciona a un sitio u otro dependiendo de los datos que reciba. La aplicación de acceso restringido, aparte de mostrar las funcionalidades que quería-mos proteger con usuario contraseña, debe de realizar unas comprobaciones de seguri-dad para saber si se ha pasado con éxito el proceso de autentificación o si se está inten-tando acceder de manera no permitida a esa página. Esta comprobación la he dibujado como una capa con color verde más oscuro sobre la página de la aplicación. Si no se sa-tisface dicha comprobación (el usuario no se ha autentificado correctamente) se vuelve a la página donde escribir el usuario y la con-traseña.


105

PROCESAMIENTO DE FORMULARIOS EN BASE DE DATOS

Métodos de petición GET y POST

GET y POST son métodos que indica la

acción que desea que se efectúe sobre el re-

curso identificado.

• GET pide una representación del r e -

curso especificado.

• POST envía datos para que sean p r o -

cesados por el recurso identificado. Los datos

se incluirán en el cuerpo de la peti-

ción.

Método GET

Las peticiones al servidor suelen realizarse me-

diante HTTP utilizando el método de petición

GET, el cual solicita al servidor una copia del

recurso indicado a través de la url.

www.host.com/index.html

GET /index.html HTTP/1.1 HOST: www.host.com

Añade los datos a la URL, lo cual expone a ser

vistos de forma directa. url

www.host.com/autenticar.php?usr=jcrome-

ros&pw=qwerty

Paso de los parámetros usr y pw

usr=jcromeros

pw=qwerty

www.host.com/index.html

GET /index.html HTTP/1.1 HOST: www.host.com

Asignación: Por GET.

url

www.host.com/index.html?uid=678798

get.php

<?php

$usuario_id = $_GET[“uid”];

echo $usuario_id;

?>

Método POST

Los datos a enviar al servidor

se incluyen en el

cuerpo de la misma pe^ción

con las cabeceras

HTTP asignadas correspondientemente

respecto

al ^po de pe^ción..

Generalmente se asocia con los f o r -

mularios web

en el que los datos suelen ser

cifrados para

enviarlos de manera segura al

servidor.

Asignación: Por POST.

contacto.php

<form action=”contacto_procesar.php”

method=”POST” >

<label>Nombre:</label>

<input name=”nombre” />


106

<input type=”submit” value=”Enviar” />

</form>

contacto_procesar.php

<?php

$nombre_alumno = $_POST[“nombre”];

echo $nombre;

Asignación: Por POST.

contacto.php

<form action=”contacto_procesar.php”

method=”POST” >


<input name=”nombre” />


</form>

contacto_procesar.php

<?php


echo $nombre;

?>

Cuando se envía un formulario a un script PHP,

las variables de dicho formulario pasan a estar

automáticamente disponibles en el script gracias

a PHP.

Por ejemplo,

Variables de formulario simples

Entrada de text/hidden

form_text.php

<form action=”procesar_text.php”

method=”POST” >


<input type=”text” name=”nombre” />


</form>

Cuando es enviado, PHP creará la variable $name,

que contendrá lo que sea que se introdujo en el

campo

Name: del formulario.

<?php


echo $nombre_alumno;

?>

RADIO BOTONES

form_radio.php

<form action=”procesar_radio.php”

method=”POST” >

<label>Especialidad:</label>

<br />

<input type=”radio” name=”especialidad” val-

ue=”A” />

Audivisual y Multimedia

<br />


ue=”S” />

Soportes tridimensionales


107

<br />


ue=”E” />

Editorial

<br />


ue=”I” />

Ilustración

<br />

<input type=”radio” name=”especialidad” va-

lue=”F” />

Fotografía

<br />


</form>

RADIO BOTONES

procesar_radio.php

<?php

$especialidad = $_POST[“especialidad”];

echo “Especialidad <b>” . $especialidad . “</b>”;

?>

LISTAS DESCOLGABLES

form_select.php

<form action=”procesar_select.php”

method=”POST” >

<label>Mes:</label>

<select name=”mes”>

<option value=”1”>Enero</option>

...

<option value=”12”>Diciembre</option>

<select>


</form>

LISTAS DESCOLGABLES

procesar_select.php

<?php

$mes = $_POST[“mes”];

echo $mes;

?>

CHECKBOX

form_select.php

<form action=”procesar_check.php”

method=”POST” >

<label>Intereses:</label><br />

<input type=”checkbox” name=”interes[]” val-

ue=”Ciencia” />

Ciencia <br />

<input type=”checkbox” name=”interes[]” val-

ue=”Musica” />

Música <br />


</form>

CHECKBOX

procesar_check.php


108

<?php

$interes = $_POST[“interes”];

for($i=0;$i<count($interes);$i++){

echo $interes[$i] . ‘<br />’;

}

?>

OPERADORES

Permiten:

• Manipular el valor de v a r i a -

bles.

• Realizar operaciones matemáticas con

sus valores.

• Comparar diferentes variables.

Operadores Aritméticos

<?php

$op1 = 20;

$resultado = 3 * $op1 +

32;

echo $resultado;

?>.

operador asignación

El operador básico de asignación es “=”.significa

que el operando de la izquierda toma el valor de

la expresión a la derecha, (esto es, “toma el valor

de”).

El valor de una expresión de asignación es el

propio valor asignado. Esto es, el valor de “$a =

3” es 3.

Esto permite hacer cosas curiosas como

$a = ($b = 4) + 5; // ahora $a es igual a 9, y $b

vale 4.

Operadores Bit a bit

Los operadores bit a bit te permiten activar o

desactivar bits individuales de un entero.

Operadores de Comparación

Los operadores de comparación, como su nom-

bre indica, permiten comparar dos valores.

.

<?php

$edad_mario = 25;

$edad_pedro = 30;

if($edad_mario>$edad_pedro){

echo “Mario es mayor que Pedro”;

}else if($edad_mario==$edad_pedro){

echo “Mario y Pedro tienen la misma edad”;

}else{

echo “Mario es menor que pedro”;

}

?>

Operador de ejecución

PHP soporta un operador de ejecución: el após-

trofe invertido (“).

PHP intentará ejecutar la instrucción contenida

dentro de los apóstrofes invertidos como si fuera

un comando del shell; y su salida devuelta como


109

el valor de esta expresión (i.e., no tiene por qué

ser simplemente volcada como salida; puede

asignarse a una variable).

$output = ‘ls -al‘;

echo “<pre>$output</pre>”;

Operadores de Incremento/decremento

PHP soporta los operadores de predecremento y

post incremento al estilo de C.

Incremento

Permite incrementar en una unidad una variable

con valor numérico.

<?php

$x = 10;

echo ++$x;

?>

Decremento

• Permite decrementar en una u n i -

dad una variable con valor numérico.

<?php

$x = 10;

echo --$x;

?>

Operadores Lógicos

Como operadores lógicos permiten

“conectar’’ comparaciones que usan ope-

radores relacionales. <form action=”procesar_

operadores.php” method=”POST” >

<label>Especialidad:</label>

<br />


ue=”A” />

Audivisual y Multimedia

<br />

...


ue=”F” />

Fotografía

<br />

<label>Tiempo de experiencia realizando pági-

nas web:</label>

<br />

<select name=”experiencia”>

<option value=”1”>1</option>

...

<option value=”4”>4</option>

</select>

<br />


</form>

<?php

$especialidad = $_POST[“especialidad”];

$experiencia = $_POST[“experiencia”];


110

if($especialidad==’A’ || $experiencia >= 2){

echo “Contratado”;

}else{

echo “Te llamamos después”;

}

?>

Almacenamiento de información en el SMBD

SISTEMA MANEJADOR DE BASE DE DA-TOS(SMBD) (DBMS):

Es un software que tiene como propósito gene-

ral facilitar el proceso de

definir, construir y manipular bases de datos que

se utilizan para diferentes tipos de aplicaciones

Componentes de software principales asociados a un SMDB :

•Generadores de aplicación.

•Lenguajes de cuarta generación (4GL).

•Software de consulta a la base de datos.

•Generadores de reportes y pantallas.

Ejemplos de software: postgresql, Mysql, Infor-

mix 4GL, Oracle, SQL server

PROCESOS RELACIONADOS CON LOS SMBD:

*Definir la base de datos significa la declaración

de:

•Los tipos de datos

•La estructura

•Las restricciones de los datos a ser almacenados

en la base de datos.

* Crear o construir la base de datos: es el proce-

so de almacenar los datos en algún medio de al-

macenamiento, esto es controlado por el SMBD.

* Manipular una base de datos incluye funciones

como:

•Consultar la base de datos para obtener algunos

datos específicos.

•Actualizar la base de datos para reflejar cambios

en el minimundo.

•Generar reportes de los datos.

•Eliminar algunos datos

UN SMBD QUE OFRECE :

•Control de redundancias.

•Restricción de accesos no autorizados

•Proporcionar múltiples interfaces de usuario.

•Representar relaciones complejas entre datos.

•Forzar el uso de restricciones de integridad.

•Proporcionar métodos de respaldos y recupe-

ración.

Los tres niveles de arquitectura de un SMBD

Nivel Interno: Definido por el DBA para su opti-

mización.

Vista Externa: Nivel mas alto, visto por el progra-


111

mador de aplicaciones o el usuario, en esta vista

solo porciones de la base de datos son de interés

para el usuario o programador de aplicaciones,

se representa por el esquema externo.

Vista Conceptual o global : En esta vista se inclu-

yen todas las entidades de la base de datos y las

relaciones entre ellas.

Vista Interna: Nivel mas bajo de abstracción de la

base de datos, contiene la definición del almace-

namiento de registros, el método de represen-

tación de datos y el acceso utilizado, expresado

por el esquema interno.

PHPMYADMIN

phpMyAdmin es una herramienta de software

libre escrito en PHP , la intención de manejar

la administración de MySQLa través de Inter-

net. phpMyAdmin es compatible con una am-

plia gama de operaciones en MySQL, MariaDB

y llovizna.Utilizado con frecuencia operaciones

(gestión de bases de datos, tablas, columnas,

relaciones, índices, usuarios, permisos, etc) se

puede realizar a través de la interfaz de usuario,

mientras que usted todavía tiene la capacidad de

ejecutar directamente cualquier sentencia SQL

Características

Interfaz web intuitiva

Apoyo a la mayoría de las características de MyS-

QL:

buscar y borrar bases de datos, tablas, vistas,

campos e índices

crear, copiar, bajar, cambiar el nombre y modifi-

car bases de datos, tablas, campos e índices

servidor de mantenimiento, bases de datos y ta-

blas, con propuestas sobre la configuración del

servidor

ejecutar, editar y marcar cualquier SQL -state-

ment, incluso por lotes-consultas

administrar usuarios y privilegios de MySQL

gestionar los procedimientos almacenados y

disparadores

Que es el hosting

Web Hosting es el servicio que provee el espacio

en Internet para los sitios web.

¿Qué es el hosting? Si quieres crear tu página

web y que otros puedan visitarla, vas a necesitar

publicar o subir los archivos a un servicio de web

hosting.

Estos servicios funcionan ofreciéndote com-

putadoras de grandes prestaciones (servidores

web), utilizando conexiones de alta velocidad

además de muchas otras prestaciones. Cuando

alguien escribe tu dirección web ellos se conec-

taran al servidor web donde esté alojado tu pagi-

na y descargarán los archivos de tu sitio.

Cuando te ofrecen una cuenta de hosting, te es-

tán ofreciendo una pequeña parte del disco duro

que tiene el servidor, con el fin de poder publicar

ahí las páginas web, y otros aspectos que varían

en función del panel de control que te ofrezca.

Cada uno aporta interfaz distinta y funcionalida-

des que pueden adaptarse mejor o peor. En po-

pularidad, cPanel se lleva la máxima popularidad,


112


113

aunque no muy por encima de otros.

CPANEL

cPanel para propietarios de sitios web brinda las in-

terfaces de usuario para administrar un sitio web

más familiares del mundo. Con cPanel, los propie-

tarios de sitios web pueden administrar fácilmente

sus cuentas de correo electrónico, bases de datos,

aplicaciones, seguridad, FTP y controlar cada as-

pecto de sus sitios web……

PONEMOS LO DEL CORREO DEL PROFESOR

Conexión al cPanel del servidor

Crear Base de datos

Crear usuario de base de datos

Agregar permisos del usuario creado sobre una

base de datos

Carga de Base de Datos

Creación de un subdominio

Conexión por FTP

Configuración del editor de texto

Cambio del archivo configuracion.php

keywords

Palabra clave es un conjunto de palabras (o una

palabra a secas) relacionada con una posible bús-

queda. Para aclararnos, cada palabra clave es una

posible búsqueda que los usuarios pueden hacer

en un buscador. El concepto técnico que se usa

habitualmente proviene de su traducción al inglés:

“Keyword”.

Dónde colocar keywords

Las señales que debemos aportar al buscador las

debemos situar en el contenido que exponemos

en la página . De este modo, al rastrear nuestro

site Google o cualquier otro motor de búsque-

da, pueda deducir estamos hablando de ciertos

conceptos asociados a palabras clave. Si te quie-

res posicionar por “manual de posicionamiento”

tendrás que situar esa palabra en varios sitios: tí-

tulo del documento, encabezamientos, URL, etc.

Título del documento: La etiqueta TITLE es uno

de los sitios más importantes. Encabezados: H1,

H2... los entiende Google como marcas impor-

tantes del contenido que se expone.

Texto en el cuerpo: con varias repeticiones, inclu-

so se puede resaltar en negrita en algún punto.

Atributos ALT de las imágenes: cuando le colo-

cas el alt a las imágenes también puedes indicar

keywords en el texto de los ALT de las imágenes.

Google lo tiene en cuenta, puede servir para posi-

cionamiento, pero lógicamente, para que tengan

peso las palabras clave que sitúes allí, deberán

confirmarse con otras apariciones de éstas en el

texto de la página. En resumen, Google podrá no

fiarse tanto de este campo si no encuentra esas

mismas palabras escritas como contenido visible

en la página.


114

ULR AMIGABLE

· Tiene sentido – La URL amigable es fácil de

entender. Un usuario no necesita visitar la página

para saber qué contiene porque ya lo describe

claramente.

· Es relevante – Con una URL legible tienes más

posibilidades de atraer tráfico en los buscadores,

dado que las palabras que contiene son usadas

para calcular la relevancia .

· Proporciona mejores enlaces – Una buena

URL tiene el beneficio adicional de servir de tex-

to de enlace o anchor text cuando son copiadas

y pegadas en otro sitios, como foros, blogs, etc.

opciones:

http://example.com/nombre-de-la-pagina/

h t t p : / / e x a m p l e . c o m / c a t e g o r í a / n o m -

bre-de-la-pagina/

h t tp : / /example .com/2013/04/18/nom-

bre-de-la-pagina/

http://example.com/nombre-de-la-pagina-ID

SiteMap

Los archivos sitemap como su nombre indica, contienen una relación de to-das las páginas de un sitio web determi-nado, con las direcciones URL de cada una, es una especie de guía o referen-cia de dicho sitio para quien la solicite. Existen dos tipos de archivos sitemap con objetivos y funciones diferentes. El primero de ellos es hecho dirigi-do a los robots, arañas o bots de los buscadores para suministrarles la in-

formación necesaria del sitio y que pueda ser indexado correctamente. El otro va dirigido a los usuarios para fa-cilitarles la exploración y navegación

Indexación a través de google

Indexación

El robot de Google procesa todas las páginas que ras-

trea para compilar un índice masivo de todas las pa-

labras que ve junto con su ubicación en cada página.

Además, también procesa la información incluida en

las etiquetas y los atributos de contenido clave, como

las etiquetas “title” y los atributos “alt”. El robot de

Google puede procesar muchos tipos de contenido,

pero hay ciertos tipos que no puede procesar, como

el contenido de algunos archivos de soportes interac-

tivos y páginas dinámicas.

Contenido del informe del estado de indexación

En el informe del estado de indexación solo aparece-

rán los datos del sitio que selecciones y que verifiques

en Herramientas para webmasters de Google.

Datos solo para un sitio en concreto

No mostramos los datos totales de todas las ver-

siones del sitio. Aunque Google rastrea e indexa

el contenido del sitio sin tener en cuenta si lo has

verificado en Herramientas para webmasters de

Google o no, el número de URL que se muestra

en el informe del estado de indexación corres-

ponde solo a las URL asociadas con tu versión

del sitio.

Cómo se utiliza el informe del estado de indexa-

ción

Comprueba si el gráfico presenta un aumen-

to constante. Un aumento constante del nú-

mero de páginas rastreadas e indexadas indi-


115

ca que Google puede acceder regularmente

al contenido y que el sitio se está indexando.

Verifica los descensos repentinos. Si observas

un descenso repentino del número de páginas

indexadas, esto puede indicar que el servidor no

funciona, que está sobrecargado o que Google

tiene problemas para acceder al contenido.

Toma nota de los volúmenes de indexación de-

masiado elevados para tu sitio. Un número muy

elevado de URLs podría indicar que el sitio tiene

problemas con la canonicalización, el contenido

duplicado o las páginas generadas automática-

mente; también podría significar que lo han pi-

rateado.

El estado de indexación del sitio y los resultados

de la búsqueda de Google

A veces, los datos que mostramos en el infor-

me del estado de indexación no se reflejan com-

pletamente en los resultados de búsqueda de

Google. En algunos casos, Google puede aplicar

filtros al confeccionar los resultados de la bús-

queda y estos filtros pueden determinar qué re-

sultados se muestran en la búsqueda. Los filtros

incluyen la retirada de páginas por motivos lega-

les o tras una solicitud del webmaster, los resul-

tados de sitios web que creemos que no están

disponibles actualmente y los resultados que se

han retirado a causa de una acción contra spam

manual.

Dado que estos filtros se aplican generalmente a cau-

sa de problemas urgentes temporales, o se solicitan

por error, en algunos casos Google puede conservar

las páginas en nuestro índice durante un período de

tiempo para contribuir a recuperar rápidamente los

sitios web una vez solucionado el problema.

Validación de sitios web con W3

Este validador comprueba la validez de marca-

do de documentos Web en HTML, XHTML, SMIL,

MathML, etc

Servicio premium que comprueba todo su sitio

web y evalúa su conformidad con los estánda-

res del W3C abierta para identificar rápidamente

aquellas partes de su sitio web que requieren su

atención.

Los validadores del W3C se desarrollan con la

colaboración de la Fundación Mozilla, y con el

apoyo de donaciones de la comunidad.


116

Validación de sitios web con W3

La problemas derivados de la heteregenoidad de la

web desde sus inicios ha dejado de manifiesto la ne-

cesidad de tener un estandar que permita una pro-

gramación e intepretación de aplicable a cualquier

plataforma, navegador y usuario.

De esto modo, el Consorcio World Wide Web (W3C

por sus siglas en ingles) fundador de la WWW ha veni-

do sacando una serie de estandares para la estrucción

correcta de una página web en HTML.

Después de crear un página web, utilizaremos el ser-

vicio de validación (http://validator.w3.org) para com-

probar si el código HTML cumple con el estádar del

W3C para su tipo de documento. Para utilizar el ser-

vicio de validación, seguiremos los siguientes pasos:

- Iniciamos un navegador e intruducimos la dirección

http://validator.w3.org

- Si queremos validar un página qeu aún no hayamos

publicado en el servidor web, hacemos clic en

Examinar dentro de Validate by file upload. Esto nos

permite cargar un archivo de nuestra máquina local.

- Hacemos clic en Check Una vez hayamos comple-

tado estos pasos el explorador web nos enviará la pá-

gina web que hayamos introducido o seleccionado al

sitio web del w3c. El programa de validación del sitio

examinará el documento XHTML y enviará al explora-

dor web una página de resultados.

Debemos de tener en cuenta que el documento HTML

o XHTML es válido (es decir, cumple el estándar) sólo

cuando no hay errores. Por lo tanto, si vemos errores,

los corregimos en el documento web y repetimos el

procedimiento de validación. (El programa de valida-

ción no sólo ofrece una lista de errores, también ofre-

ce sugerencias de corrección que tiene que realizar

para que el código cumpla el estándar.)

Además de validar los documentos web almacenados

en los archivos de las unidades local o de red, también

podemos validar cualquier página web que ya esté

publicada en un servidor web.

Las ventajas más importante de tener una web valida-

da son las siguientes:

-Carga más rápida ante menos

código extraño.

-Adaptación a múltiples platafor-

mas y navegadores.

-Preprera a tu web ante cualquier

cambio en los navegadores.

-Homogeinisa la visibilidad de tu

web.

-Permite un mejor acceso de los buscadores y

por tanto, mayor trafico.

Google Analytics- http://proyec-tosbds.com/blog/tutorial-analytics-al-grano-y-en-espanol-1-de-20/


117

Google Analytics nos ofrece información sobre

los resultados de nuestro sitio web, con la ayuda

de los datos proporcionados, la empresa toma

decisiones sobre las estrategias a seguir, pero to-

davía podemos ir un paso más hacia adelante y

conocer las personas que nos compran, se sus-

criben a una newsletter, el producto más eficien-

te… a través de la configuración de los objetivos.

Si la empresa no dispone de los datos necesarios para

la toma de decisiones, posee grandes posibilidades de

dirigirse hacia el fracaso, en cambio, si dispone de in-

formes fundamentales, conducirá a la compañía a te-

ner mayores probabilidades de tener éxito en el mer-

cado, en consecuencia existe Google Analytics, una

herramienta gratuita que ofrece estadísticas sobre pá-

ginas web. Suministra información específica según el

perfil (ejecutivo, técnico de marketing o webmaster).

Podemos observar las palabras claves más populares,

las páginas que están viendo los visitantes en tiempo

real, de donde son los usuarios, el dispositivo que uti-

lizan para buscar en internet…

Y por supuesto tiene sus virtudes y limitaciones, vea-

mos algunas:

Virtudes:

-Favorece a tener una mayor visión del usuario

para saber hacia dónde dirigir la publicidad y su

optimización.

-Ayuda a la decisión de abrir nuevos mercados

en diferentes ubicaciones viendo donde se con-

centra el público o decretar el cierre en un lugar

concreto el producto/servicio por no ser renta-

ble.

-Facilita el conocimiento de la eficacia al realizar

la página web en otros formatos.

-Sirve para comprobar si la publicidad SEM es

rentable en el motor de búsqueda.

-Permite saber las páginas primordiales y las que

son imprescindibles modificar tanto su diseño

como el contenido para ser más atractivas y evi-

tar su abandono.

-Aporta conocimientos para saber el impacto de

una acción novedosa en una red social o saber

si un anuncio en televisión/radio tiene reacción

inmediata en nuestra web.

-Posibilita la realización de alertas personaliza-

das para avisar sobre los cambios tanto buenos

como malos en las cifras del sitio web, olvidán-

dote de realizar estudios exhaustivos diariamen-

te.

-Habilita un espacio para crear informes propios

con las métricas particulares que requiere cada

usuario.

Limitaciones:

Complicado el uso en principiantes, es muy in-

tuitiva pero con muchas funciones.

Proporciona información equivocada si el usua-

rio borra las cookies de su navegador, (ejemplo:

Analytics cree que es un visitante nuevo cuando

puede ser recurrente).

Los cortafuegos imposibilitan la investigación de

los datos, ya que estos no se reflejan en la herra-

mienta.

Ocasiona confusión en los datos si utilizan un

ordenador dos o más usuarios. Lo mismo ocurre

si un usuario emplea varios ordenadores.


118

Dificultad para las personas que desconocen

el inglés, los videos explicativos sobre la herra-

mienta solo constan en inglés.

Crear cuenta en google analytics

Crear una cuenta en Google Analytics para tu página

web es muy sencillo, además una vez estemos traba-

jando más a fondo con la herramienta, comprobare-

mos lo útil, intuitiva y sencilla que es.

Veamos los pasos a seguir.:

1. Acceso a la cuenta.

Entra en la página oficial de Google Analytics, si

ya dispones de gmail o google apps significa que

posees cuenta en Google, por lo tanto no hace

falta establecer una nueva, pulsa en “inicie se-

sión” e introduce mail y contraseña.

Si por el contrario nunca has accedido a ningu-

na aplicación de Google, pulsa sobre “crear una

cuenta” y completa la información solicitada.

2. Registro

Debes Introduce los datos requeridos.

3. Implantación de Google Analytics en

tu web

La impantación de Google Analytics es el último

paso, consiste en añadir el código de seguimien-

to adjudicado a la página web.

Introducción a los formularios

Un formulario HTML es una sección de un documento que contiene conteni-do normal, código, elementos espe-ciales llamados controles (casillas de verificación (checkboxes), radiobotones (radio buttons), menúes, etc.), y rótulos (labels) en esos controles. Los usuarios normalmente “completan” un formula-rio modificando sus controles (introdu-ciendo texto, seleccionando objetos de un menú, etc.), antes de enviar el for-mulario a un agente para que lo proce-se (p.ej., a un servidor web, a un servidor de correo, etc.)

Aquí se muestra un ejemplo de un for-mulario simple que incluye rótulos, ra-diobotones y botones para reinicializar el formulario o para enviarlo:

<FORM action=”http://algunsitio.com/prog/

usuarionuevo” method=”post”> <P> <LABEL

for=”nombre”>Nombre: </LABEL> <INPUT

type=”text” id=”nombre”><BR> <LABEL

for=”apellido”>Apellido: </LABEL> <INPUT

type=”text” id=”apellido”><BR> <LABEL for=”e-

mail”>email: </LABEL> <INPUT type=”-

text” id=”email”><BR> <INPUT type=”radio” na-

me=”sexo” value=”Varón”> Varón<BR> <INPUT

type=”radio” name=”sexo” value=”Mujer”> Mu-

jer<BR> <INPUT type=”submit” value=”Enviar”>

<INPUT type=”reset”> </P> </FORM>

Los usuarios interaccionan con los formularios a


119

través de los llamados controles.

El “nombre de control” de un control viene dado

por su atributo name. El “campo de acción” o al-

cance del atributo name de un control conteni-

do en un elemento FORM es el elemento FORM.

Cada control tiene tanto un valor inicial como

un valor actual, que son ambos cadenas de ca-

racteres. Consulte la definición de cada control

para obtener información sobre los valores ini-

ciales y las posibles restricciones que puede im-

poner cada control sobre sus valores. En general,

el “valor inicial” de un control puede especificar-

se con el atributo value del elemento de control.

Sin embargo, el valor inicial de un elemento TEX-

TAREA viene dado por sus contenidos, y el valor

inicial de un elementoOBJECT de un formulario

está determinado por la implementación del ob-

jeto (es decir, se sale fuera del alcance de esta

especificación).

El “valor actual” del control se hace en primer lu-

gar igual al valor inicial. A partir de ese momento,

el valor actual del control puede ser modificado

a través de la interacción con el usuario y me-

diante scripts.

El valor inicial de un control no cambia. Así, cuan-

do se reinicializa el formulario, el valor actual de

cada control se reinicializa a su valor inicial. Si el

control no tiene un valor inicial, el efecto de una

reinicialización del formulario sobre ese control

es indefinido.

Cuando se envía un formulario para su proce-

samiento, para algunos controles se empareja

su nombre con su valor actual, y estas parejas

se envían con el formulario. Aquellos controles

cuyas parejas nombre/valor se envían se lla-

man controles con éxito.

Sistemas de contabilidad web

La contabilidad es la base sobre la cual se

fundamentan las decisiones gerenciales y por

tanto, las decisiones financieras. La contabilidad

es un sistema adaptado para clasificar los

hechos económicos que ocurren en un

negocio. De tal manera que se convierte en el

eje central para llevar a cabo diversos proce-

dimientos que conducirán a la obtención del

máximo rendimiento económico que implica el

constituir una empresadeterminada.

En la primera época de la informática, los siste-

mas informatizados se limitaban a reproducir los

sistemas de contabilidad manuales. Mantenían

controles e informes similares, es decir, repetían

el mismo procedimiento pero con ordenador.

Se recogía la misma información, se generaban

los mismos informes, que se enviaban al mismo

destinatario y se mantenía la misma organiza-

ción departamental. El entorno de trabajo era

poco amigable y la aplicación poco flexible

pero, aún así, supuso un avance espectacular la

posibilidad de obtener los estados contables a

partir de los datos del diario.

El siguiente paso en la evolución del ordenador

se corresponde con el desarrollo de la computa-

ción personal descentralizada, caracterizada por

un ratio de una persona para un ordenador.

A partir de 1980, la tecnología de la informa-

ción progresó hasta el punto en el que cada in-

dividuo podía tener un ordenador. Esto generó el

efecto de descentralizar el uso del ordenador y la


120

creación de un mercado para el desarrollo de una

cantidad asombrosa de equipos y programas de

contabilidad a precios asequibles. Aunque el

entorno de trabajo, marcado por el sistema ope-

rativo MSDOS era más amigable, los programas

carecían de la flexibilidad necesaria.

Muchos de los productos antiguos low end, prin-

cipalmente realizados en DOS, o programas de

desarrollo obsoletos son caracterizados por ser

productos de “entrada única”, como oposición

de los sistemas modernos en windows, macin-

tosh, linux que son programas de doble entrada

los cuales son usados por la gran mayoría de ne-

gocios.

En las organizaciones modernas, tanto públicas

como privadas, la misión de las tecnologías de

la información es facilitar la consecución de

sus objetivos estratégicos. En la actualidad se han

automatizado tanto procesos como sistemas

dentro de los cuales se integra, se ordena y se

presenta la información contable. Esta integra-

ción se hace de forma global dentro de la em-

presa, en este sistema se alimentan diferentes

factores tales como la producción, los inven-

tarios de almacenaje, etc. Los cuales proveen

información contable necesaria no solo para

tomar decisiones, sino también para la forma de

operación diaria de la empresa.

http://www.monografias.com/trabajos83/

sistemas-contables-operados-on-line/siste-

mas-contables-operados-on-line.shtml#ixz-

z3PERCP5xD

Foro en línea

Foro de discusión

Un foro de discusión o tablón de anuncios es

un área web dinámica que permite que distintas

personas se comuniquen. Por lo general, el foro

de discusión se compone de diferentes “hilos”

de discusión (llamados a vecesasuntos o temas),

cada uno relacionado con un área de debate di-

ferente. El primer mensaje en un proceso esta-

blece el tema de discusión y los mensajes que

siguen (casi siempre debajo del primero) lo con-

tinúan.

No se recomienda poner artículos en un foro con

el nombre real porque las discusiones no son “si-

multáneas”; es decir, un mensaje que se deja en

un foro puede permanecer allí para siempre. Por

lo tanto, si pone un artículo con su nombre real,

podría rastrearse en todos los debates en los que

haya participado en cada uno de los foros que

haya visitado. En función del lugar donde viva,

existen algunas leyes que pueden proteger su

derecho al acceso y regulación sus datos per-

sonales. No obstante, puede ser muy difícil co-

municarse con el administrador de cada sitio en

los que haya puesto un artículo y además puede

ser extremadamente eliminar los huellas de sus

mensajes.

Por tal motivo, se recomienda elegir un seudóni-

mo (que también se llama seudoo nick) que per-

mite a otras personas reconocerlo en las discu-

siones, y le confiere anonimato y un cierto grado

de protección.

Tienda en línea


121

Una tienda en línea (también conocida

como tienda online, tienda virtual o tienda elec-

trónica) se refiere a un comercio convencional

que usa como medio principal para realizar sus

transacciones un sitio web de Internet.

Los vendedores de productos y servicios ponen

a disposición de sus clientes un sitio web en el

cual pueden observar imágenes de los produc-

tos, leer sus especificaciones y finalmente ad-

quirirlos. Este servicio le da al cliente rapidez en

la compra, la posibilidad de hacerlo desde cual-

quier lugar y a cualquier hora. Algunas tiendas en

línea incluyen dentro de la propia página del pro-

ducto los manuales de usuario de manera que el

cliente puede darse una idea de antemano de lo

que está adquiriendo; igualmente incluyen la fa-

cilidad para que compradores previos califiquen

y evalúen el producto.

Típicamente estos productos se pagan median-

te tarjeta de crédito y se le envían al cliente por

correo o agencia de transporte, aunque según

el país y la tienda pueden haber otras opciones,

como Paypal.

La inmensa mayoría de tiendas en línea requieren

la creación de un usuario en el sitio web a partir

de datos como nombre, dirección y correo elec-

trónico. Este último a veces es utilizado como

medio de validación.

Pagina Corporativa

Definimos una web corporativa como aquella

que centra su estrategia de comunicación en

trasmitir como valor principal de la empresa su

trayectoria (historia), su experiencia (trabajos),

su potencial humano (equipo directivo y perso-

nal), su capacidad logística (maquinaria, insta-

laciones), sus certificaciones, etc. Se trata, bá-

sicamente, de generar confianza en el cliente a

través de la puesta en valor de la marca de em-

presa, presentando su estructura y su experien-

cia como una garantía de éxito y resultados.

La web de producto, en cambio, tiene como

objetivo principal generar confianza en el con-

sumidor basándose en la calidad del producto/

servicio más destacado o valorado, centrando la

estrategia de marketing en comprometer al con-

sumidor con la marca poniendo en valor dicho

producto estrella.

El mensaje se centra en lo esencial, en lo que

realmente interesa al usuario.

El cliente se identifica y se compromete con el

producto que le gusta.

Maximiza el valor de las experiencias de los con-

sumidores, sin dispersarlas.

Genera comunidad e invita a una mayor interac-

ción de los usuarios.

Permite compartir de manera sencilla contenido

que nos interesa.

En cambio, una web corporativa tiende a prio-

rizar y destacar aspectos que motivan más a la

dirección de la empresa que a los clientes o con-

sumidores, que visitan la página web para en-

contrar de forma rápida información concreta

sobre aquello que buscan, necesitan o desean, y

no para conocer la historia o los recursos huma-


122

nos y materiales de la empresa.

Para satisfacer los intereses de ambos -dirección

y clientes- se puede disponer de una web de

producto ligada a una web corporativa, el incon-

veniente principal está en el importante incre-

mento de costes que supone, pues el diseño, la

usabilidad, el enfoque, el dominio, etc. deben ser

diferentes para cada una de ellas.

Lógicamente, no todas las empresas y profesio-

nales disponen de un producto o servicio con

suficiente valor para crear una web, el problema

reside muchas veces en que estas distintas posi-

bilidades no son analizadas antes de implemen-

tarla. Responder adecuadamente a la pregunta,

¿para qué quiero estar en Internet? es esencial

antes de iniciar cualquier proyecto en la Red.

Tipografías

Tradicionalmente, el uso de tipografías en el di-

seño web ha sido un problema. Por defecto, los

navegadores web solo podían presentar el texto

con las tipografías que el usuario tenga instaladas

en su sistema operativo (Windows, Mac, Linux,…).

Actualmente esta limitación se ha solucionado,

pero los efectos web que se pueden realizar a

las tipografías (negrita, subrayado, alienación…)

continúan siendo muy limitados.

Imágenes con texto

Una posible solución a este problema con las ti-

pografías es utilizar imágenes, lo cual nos per-

mitirá crear cualquier efecto que queramos a las

tipografías.

Pero, aunque la utilización de imágenes sea muy

útil y utilizada para los títulos, menús, y otras par-

tes del web, existen diversas limitaciones que te-

nemos que tener en cuenta. Básicamente, nunca

se recomienda utilizar imágenes para presentar

textos largos, porque:

La página web tardaría mucho a cargarse.

Los buscadores no podrían indexar el texto. Si el

texto a presentar es corto (por ejemplo un menú)

se puede poner un texto alternativo “detrás” la

imagen, sin penalizar en los buscadores.

El texto no se podría utilizar en bloques fluidos (Si

el texto no es imagen automáticamente se adap-

ta al espacio disponible).

El usuario no puede aumentar el texto y algunos

pueden tener problemas de legibilidad.

El texto sería complicado de actualizar.

Además, si la página web es generada por un

programa y se toma el texto de una base de da-

tos, es complicado utilizar imágenes para pre-

sentar el texto.

Tipografías web

Con las nuevas tecnologías web, los nuevos navegadores

pueden presentar cualquier fuente que queramos utilizar,

como si se enviara la fuente junto al web. La ventaja, res-

pecto la utilización de imágenes es que el texto es encon-

trado mejor por los buscadores, además se puede utilizar

para presentar textos desde bases de datos (Por ejem-

plo, los titulares superiores de esta guía tienen la tipogra-

fía Ubuntu y están generados con esta solución jquery).

De todos modos, la mayoría de programadores web siguen

utilizando las llamadas “tipografías seguras”, definiendo un

listado de tipografías que se van a intentar utilizar en orden

establecido (Si la primera fuente no está disponible en el


123

ordenador del usuario, la segunda fuente será utilizada y así

sucesivamente). Los grupos de fuentes más utilizados son

los siguientes:

Verdana, Geneva, sans-serif

Georgia, Times New Roman, Times, serif

Courier New, Courier, monospace

Arial, Helvetica, sans-serif

Tahoma, Geneva, sans-serif

Trebuchet MS, Arial, Helvetica, sans-serif

Arial Black, Gadget, sans-serif

Times New Roman, Times, serif

Palatino Linotype, Book Antiqua, Palatino, serif

Lucida Sans Unicode, Lucida Grande, sans-serif

MS Serif, New York, serif

Lucida Console, Monaco, monospace

Comic Sans MS, cursive

Ventanas de diálogo

Una pestaña, solapa o lengüeta (inglés: tab) es un

elemento de la interfaz de un programa que per-

mite cambiar rápidamente lo que se está viendo sin

cambiar de ventana que se usa en un programa o

menú.

Desempeñar una tarea a través de pestañas per-

mite cargar varios elementos separados dentro de

una misma ventana y así es posible alternar entre

ellos con una mayor comodidad. Con las pestañas,

además, es posible evitar tener multitud de venta-

nas abiertas en el escritorio, facilitando el uso del

ordenador al usuario para trabajar en distintos as-

pectos de un mismo programa.

Tool Tip

Un tooltip (también llamada descripción emergen-

te) es una herramienta de ayuda visual, que funcio-

na al situar el cursor sobre algún elemento gráfico,

mostrando una ayuda adicional para informar al

usuario de la finalidad del elemento sobre el que

se encuentra.

Los tooltip son una variación de los globos de ayu-

da y es un complemento muy usado en programa-

ción y diseño, dado que proporcionan información

adicional sin necesidad de que el usuario la solicite

de forma activa.

Iconos

Los iconos de un teléfono celular proporcionan

información vital sobre tu dispositivo y su funcio-

namiento. Todos los teléfonos celulares tienen un

conjunto de iconos similares que representan ca-

racterísticas estándar. El manual de usuario de tu

teléfono celular contiene las definiciones de iconos

específicas de tu dispositivo.

Utilizar íconos vectoriales para desarrollar aplica-

ciones móviles es una tarea imprescindible. El tema

es que la tarea no es fácil y te puede llevar mucho

tiempo armar una librería de íconos propia. Por

eso dejamos a continuación una serie de webs con

recursos de este tipo para utilizar en tu apliación

mobile ya sea para Android, Iphone, Blackberry o

Tablets.

Página web con fuentes escalables, vectoriales y

listas para utilizar simplemente mediante CSS. Son

tratadas como si fuera una fuente por lo que se les

puede cambiar color, tamaño o incluso ponerle

sombras con CSS3:

Font Awesome


124

Una librería llena de íconos pensada para IOS, pero

utilizable en cualquier plataforma como Android o

Windows Mobile. Trae íconos para barras de nave-

gación, tablas, etc:

Glyphish

200 íconos para utilizar en aplicaciones móviles

pensado para Android pero utilizable en otras pla-

taformas. Vienen 14 colores y son perfectos para

cualquiera de las distribuciones de Android como

Honeycomb, Ice Cream Sandwich (ICS) y Jelly

Bean:

Android developers icons

Componentes de Interfaz

Los teléfonos actuales están repletos de aplicacio-

nes móviles. Nunca había sido tan fácil encontrar una

aplicación y descargarla en tu dispositivo, y las opcio-

nes disponibles son para todos los gustos, pues hay

apps para casi todo. En este sentido, diseñar tu propia

aplicación también es más fácil que hace unos años,

pues además de las opciones propias de cada plata-

forma, hay disponibles incluso espacios online desde

los que diseñar aplicaciones desde el navegador. Para

facilitarte la tarea de diseñar aplicaciones móviles, te

proponemos una selección de páginas en las que en-

contrar inspiración, ideas y recursos gráficos para que

tu aplicación destaque sobre las demás.

iOS Patterns: Empezamos por una página en la que

encontrarás más de 500 patrones para comparar y

encontrar la mejor solución a tu aplicación. ¿Cómo

diseñar un cuadro de búsqueda? ¿Cómo crear una

página de inicio impactante? ¿Cuál es la manera más

práctica de pedir al usuario que se registre? Estas pre-

guntas y muchas otras las podrás responder por tu

cuenta mirando las capturas de pantalla que encon-

trarás en iOS Patterns. Puedes navegar por aplicación

o por categoría y compartir un patrón a través de Twi-

tter, Facebook, Linkedin o Google+.

Mobile Patterns: Como en el caso anterior, con esta

página encontrarás ejemplos de aplicaciones para re-

solver tus dudas de diseño para tu aplicación móvil.

Encontrarás categorías de tipo de elemento, como

listas, configuración o pantalla de inicio, y haciendo

clic en el nombre de la aplicación verás todas las cap-

turas relacionadas.

Pttrns: Esta página de nombre impronunciable ofre-

ce más de 1.500 patrones para hacerte una idea de

cómo organizan su interfaz las aplicaciones más po-

pulares. Como en los dos casos anteriores, tienes dos

opciones: ver las capturas de una única aplicación

o ver capturas de varias aplicaciones sobre un tema

concreto, como la página de About, los widgets o los

calendarios. Como curiosidad, Pttrns tiene un zoom

que se activa automáticamente al colocar el cursor

encima de una imagen.

Codiqa: Esta página ofrece la posibilidad de diseñar

tu propia aplicación. Para ello, vía web tendrás acce-

so a un editor con todos los elementos propios de

una app, como menús, botones o cuadros de texto. El

servicio es de pago, con distintos planos disponibles,

pero si buscas una herramienta profesional satisfará

tus necesidades.

Fluid UI: Como en el caso anterior, Fluid UI ofrece bo-

tones, controles y demás elementos propios de la in-

terfaz de una aplicación. A partir de un lienzo en blan-

co, cuyo tamaño puedes delimitar a mano o usando

las plantillas para iOS, Android y Windows 8. Entre

otras cosas, podrás diseñar el aspecto de tu app móvil

cómodamente y arrastrando y soltando elementos.


125

Para guardar tu diseño tendrás que registrarte.

GUIToolkits: Esta página ofrece paquetes de diseño

que no sólo sirve para diseñar aplicaciones móviles,

también para aplicaciones Web en general, apps de

Facebook y programas para Windows y OS X. Pue-

des elegir el paquete completo de recursos gráficos

o decantarte por uno de los muchos disponibles, que

cuenta con iconos y otros componentes gráficos im-

prescindibles para conseguir una interfaz profesional.

proto.io: Otro servicio online para crear prototi-

pos de interfaces, muy práctico y que sirve para

aplicaciones de escritorio, aplicaciones móviles

y páginas web. Tiene una versión gratuita para

probar, pero si quieres publicar tu app necesita-

rás una versión de pago, que bien merece la pena

por la variedad y calidad de los recursos gráficos

que ofrece la página.

House of Buttons: Para terminar, un interesante

tumblr con una selección muy cuidada de boto-

nes para páginas web y aplicaciones móviles y de

escritorio. Carece de buscador, pero buceando

por sus páginas seguramente encuentres algo de

tu interés.

Gráficos

A través de los avances producidos en la última

década, los dispositivos móviles se

han transformado en especie de computadores

personales, experimentando un

crecimiento exponencial. Este crecimiento se ha

potenciado en la capacidad y

funcionalidad de los aparatos, en el desarrollo de

middleware, estándares e

implementaciones, así como también en la gran

aceptación de los usuarios.

Estos dispositivos se han desarrollado de tal for-

ma que han pasado de ser simples

emisores-receptores de llamadas para ser meca-

nismos electrónicos capaces de

producir comunicación y transmisión de datos a

través de Internet. Este intercambio

de datos con cualquier sistema digital permite

llevar a cabo diversas tareas, como por

ejemplo: consultar el catálogo de libros de una

biblioteca, leer el diario, informarse

sobre las condiciones meteorológicas, enviar

correo o realizar transacciones

comerciales (e-commerce); convirtiéndose en

asistentes personales digitales o

también conocidos como “Smart Phones” (telé-

fonos inteligentes).

Así como las interfaces de usuario de los sistemas

operativos para computador han

evolucionado ante el surgimiento de los hardwares

interactivos como el mouse,

monitor con “Touch Screen” o lápiz óptico; la apari-

ción de estos dispositivos

móviles, como nuevos medios de interacción de la

Web, también producen cambios

El diseñador Web debe afrontar una gran diversidad

problemas que presentan estos


126

dispositivos; y desafíos en el diseño de la interfaz

como, pantallas pequeñas,

operaciones que requieren el uso de una sola mano,

un control de cuatro direcciones

y la atención e interacción del usuario con el dispo-

sitivo.

El diseñador necesita una mirada desde el punto de

vista del usuario: analizar sus

nuevos hábitos, su contexto y las estrategias que

adoptan al acceder a Internet móvil,

aspectos que condicionan y complican el proceso de

diseño.


127

Conclusión

En conclusión, al terminar el diplomado, hemos aprendido diferentes lenguajes de programación

aque ayudan a los diseñadores a crear un binomio entre lo visual y también el códio.

Llevar un proyecto maquetado en un programa de diseño a su aplicación en web, requiere de con-

sideraciones específicas, como resolución, perfiles de color, adaptación de gráficos, diseño respon-

sivo y demás.

Al adquirir estos conocimientos, hemos aprendido a tomar en cuenta aspectos importantes para

hacer funcionar una página web, y también hemos aprendido las posibilidades que tiene una página

utilizada como tienda en línea.

Por último puedo decir que después de tener conocimientos de programación aplicados al diseño,

puedo tener esa visión necesaria para trabajar en proyectos multidsciplinarios que requieran no solo

de medios impresos, sino también digitales.

Bibliografia

El gran libro de HTML5, CSS3 y Javascript

Primera edición en libro electrónico: Enero de 2012

© Juan Diego Gauchat, 2012

© MARCOMBO, S.A. 2012

Gran Via de les Corts Catalanes, 594

08007 Barcelona (España)

Aplicaciones web Un enfoque práctico. David Roldán Martínez.

Ed. Alfaomega grupo editor, 2010

Dreamweaver + Fireworks: Diseñe, construya y publique. Christian Demian Doyle.

Manuales USERS

Adobe Photoshop CS6:Classroom in a Book

Ed. Adobe. 2010

Ciberografía

http://cavirtual.ing.ula.ve/Teleclases/Edumatica/Semanas/Semana10/SitioWeb/marcosSitioWeb.htm

http://www.monografias.com/trabajos83/sistemas-contables-operados-on-line/sistemas-contables-operados-on-line.shtml

http://html.conclase.net/w3c/html401-es/interact/forms.html

http://es.kioskea.net/contents/828-foro-de-discusion

http://es.wikipedia.org/wiki/Tienda_en_l%C3%ADnea

http://www.afcontext.com/web-corporativa-vs-web-de-producto/

http://blog.potencialdigital.com/disenoweb-paginaweb-desarrolloweb/mejor-pagina-con-iconos-para-celulares-an-droid-y-iphone-vectoriales-para-desarrolladores-y-programadores.html

http://www.palermo.edu/dyc/maestria_diseno/pdf/tesis.completas/43.luzardo.pdf

http://www.phpmyadmin.net/home_page/index.php

http://translate.cpanel.net/es/propietarios-de-sitios-web/

https://adanielf.wordpress.com/base-de-datos/

https://support.google.com/webmasters/answer/2642366?hl=es

http://validator.w3.org/


129

GLOSARIO TÉRMINOS


130

Programación

Abstraction (abstracción) Propiedad y/o técnica de software que oculta los detalles de

la implementación. Java soporta abstracción de clases y

abstracción de métodos. La abstracción de mé-todos se

define separando el uso de un método sin co-nocer como

está implementado ese método. Si decide com-binar la

implementación, el programa cliente será afec-tado. De

modo similar la abstracción de clases oculta la

implementación de la clase del cliente.

Acoplamiento (coupling) Medida del grado en el que un objeto o componente

depende de otro. Bajo acoplamiento minimiza las

dependencias y es una indicación de un buen diseño

Agregación (aggregation) Relación en la que un objeto se compone o está construido

de uno o más objetos, de modo que la colec-ción completa

representa un todo. Las relaciones de agrega-ción se

especifican entre clases y se reflejan en instan-cias de

objetos

Algoritmo (algorithm) Método que describe cómo se resuelve un problema en

término de las acciones que se ejecutan y espe-cifica el

orden en que se ejecutan estas acciones. Los algoritmos

ayudan al programador a planificar un programa

antes de

su escritura en un lenguaje de programación.

Ámbito de clase (scope

class)

Las variables privadas definidas fuera de los métodos

internos a la clase tienen ámbito de clase. Son accesibles

desde todos los métodos del interior de la clase, con

independencia del rden en que están definidas. Los

métodos privados también tiene ámbito de clase.

Análisis (análysis) Proceso de identificación, mo-delado y descripción de lo

que hace un sistema y de cómo trabaja

Aplicación (application) Programa autónomo Java tal como cualquier programa

escrito utilizando un lenguaje de alto nivel. Las

aplicaciones se pueden ejecutar desde cualquier

computadora con un interprete Java. Las apli-caciones no

están sometidas a las restricciones impuestas los applets deLibro Java 2

Java. Una clase aplicación debe contener un método

main. Se utiliza como sinónimo de programa.

Applet Tipo especial de programa Java que se puede ejecutar

(correr) directamente en un navegador Web o en un

visualizador applet. A un applet se le imponen diversas

restricciones de seguridad. Por ejemplo, un applet no se


131

puede ejecutar operaciones de entrada/salida en un sistema

de usuario y por consiguiente no puede leer o escribir

archivos o transmitir virus de computadora.

Argumento (argument) Información pasada a un método. Los argumentos se

suelen llamar también parámetros. Unmétodo que espera

recibir argumentos debe contener una declara-ción de

argumentos formales por cada argumento ac-tual como

parte de la cabecera del mismo. Cuando se invoca a un

método, los valores de los argumentos actuales 8reales) se

copia en los correspondientes argumentos for-males. Vease

parámetro actual (actual parameter).

Array (array, vector, lista) Objeto contenedor que almacena una secuencia indexada

de los mismos tipos de datos. Normalmente los elementos

individuales se referencian por el valor de un índice. El

índice es un valor entero que , suele comenzar, en 0 para el

primer elementos, 1 para el segundo y así suce-sivamente.

Asignación (assignment) Almacenamiento de un valor en una variable. La sentencia

de asignación es aquella que implementa la asignación y

utiliza un operador de asignación

Asociación (association) Una relación entre dos clases tales como una instancia de

una clase referencia a una instancia de otra clase.

Asociatividad

(associativity)

Orden en que se envalúan operadores de igual precedencia

o prioridad dentro de una expresión. La asocia-tividad por la

izquierda produce una evaluación de izquierda a derecha y

la asociatividad por la derecha conduce a una evaluación

de derecha a izquierda.

AWT (ABSTRACT WINDOW

TOOLKIT)

Colección de clases (java.awt.*) que se utiliza para

implementar interfaces gráficas de usuario. Contiene

componentes tales como botones, etiquetas, campos de

texto, áreas de texto, barras de desplazamiento, cajas de

verificación y menús. Las clases de AWT propor-cionan

una interfaz independiente de la plataforma para desarrollo

de programas visuales e interfaces gráficas de usuario.

Biblioteca de clases (class

library)

Colección organizada de clases que proporcio-na un

conjunto de componentes y abstracciones reu-tilizables

Binario (binary) Representación numérica en


132

base 2. En esta base sólo se

utilizan los dígitos 0 y 1. Las posiciones de los d´digitos

representan potencias sucesivas de 2. Véase bit.

Binding (ligadura)

Bit Dígito binario que puede tomar dos valores posibles: 0 y 1.

Los bits son elementos básicos de construcción de

programas y datos

Bloque (block) Sentencias y declaraciones ence-rradas entre una pareja de

llaves (apertura y cierre, ´{´ y ´}´. Por ejemplo, un

de una clase, es un bloque, al igual que el cuer-po de un

método, Un bloque delimita un nivel de ámbito.

Bolean (bolean, lógico) Tipos primitivos de datos en Java. El tipo bolean puede

tomar sólo dos valores: true (verdadero) y

false (falso).

Bytecode (códigos de byte) Resultado de la compilación del código fuente Java. La

JVM (Java Virtual Machine) interpreta los byte-codes con la

finalidad de ejecutar un programa Java. El byte-code es

independiente de la máquina y se puede ejecu-tar en

cualquier máquina que tenga un entorno de ejecución. Los

bytecodes se almacenan en archivos class

Cabecera de la clase

(class header)

Cabecera de la definición de la clase. La cabe-

cera

proporciona un nombre a la clase y define sus accesos.

También describe si es una clase ampliada (ex-tends) de

una superclase o implementa interfaces (imple-ments)

Clase (clase) Colección encapsulada de datos y operaciones que actúan

sobre los datos. El concepto de clase es funda-mental en

programación orientada a objetos. Una clase consta

demétodos y datos. Los métodos de una clase definen el

conjunto de operaciones permitidas sobre los datos de una

clase (sus atributos). Una clase puede tener muchas

instancia de la clase u objetos.

Clase abstracta (abstract

class)

Superclase que contiene características comu-nes

compartidas por las subclases. Se declaran utili-zando la

palabra reservada abstract. Las clases abstractas

pueden contener datos y métodos, pero no se pueden

instanciar (crear objetos); es decir, no se pueden crear

objetos de esta clase.

Clase cliente (client class) Clase que hace uso de otra clase.

Clase concreta (concrete

class)

revision 4 memoria graf i ca

Documents