MEMORIA GRÁFICA
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
01 Contenido05 Contenido
01 Contenido05 Contenido
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
SONNY G. RANGELMEMORIA GRÁFICA
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-
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
8
SONNY G. RANGELMEMORIA GRÁFICA
9
SONNY G. RANGELMEMORIA GRÁFICA
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).
SONNY G. RANGELMEMORIA GRÁFICA
11
SONNY G. RANGELMEMORIA GRÁFICA
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:
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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-
SONNY G. RANGELMEMORIA GRÁFICA
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,
SONNY G. RANGELMEMORIA GRÁFICA
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 )
SONNY G. RANGELMEMORIA GRÁFICA
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.
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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.
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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.
SONNY G. RANGELMEMORIA GRÁFICA
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-
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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).
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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-
SONNY G. RANGELMEMORIA GRÁFICA
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.
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
35
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
37
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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-
SONNY G. RANGELMEMORIA GRÁFICA
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-
SONNY G. RANGELMEMORIA GRÁFICA
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.
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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.
SONNY G. RANGELMEMORIA GRÁFICA
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”>
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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-
SONNY G. RANGELMEMORIA GRÁFICA
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.
SONNY G. RANGELMEMORIA GRÁFICA
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:
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
SONNY G. RANGELMEMORIA GRÁFICA
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”>
SONNY G. RANGELMEMORIA GRÁFICA
51
<!--
Aquí iría el código
// -->
</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
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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,
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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
<!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=”-
SONNY G. RANGELMEMORIA GRÁFICA
60
text/html; charset=iso-8859-1” />
<title>Ejemplo de código JavaScript en el propio
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:
<!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>
</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.
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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,
SONNY G. RANGELMEMORIA GRÁFICA
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():
SONNY G. RANGELMEMORIA GRÁFICA
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-
SONNY G. RANGELMEMORIA GRÁFICA
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 mensaje1 = “Hola”;
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 mensaje1 = “Hola”;
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
A continuación se muestran algunas de las fun-
ciones más útiles para el manejo de arrays:
SONNY G. RANGELMEMORIA GRÁFICA
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
A continuación se muestran algunas de las fun-
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).
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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() {
var mensaje = “Mensaje de prueba”;
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).
var mensaje = “Mensaje de prueba”;
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
SONNY G. RANGELMEMORIA GRÁFICA
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.
SONNY G. RANGELMEMORIA GRÁFICA
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) {
SONNY G. RANGELMEMORIA GRÁFICA
72
// Si no se cumple la condicion...
alert(‘[ERROR] El campo debe tener un valor
de...’);
return false;
}
...
else if (condicion que debe cumplir el último
campo del formulario) {
// Si no se cumple la condicion...
alert(‘[ERROR] El campo debe tener un valor
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.
SONNY G. RANGELMEMORIA GRÁFICA
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’ };
SONNY G. RANGELMEMORIA GRÁFICA
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’ });
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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.
SONNY G. RANGELMEMORIA GRÁFICA
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.
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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.
SONNY G. RANGELMEMORIA GRÁFICA
81
SONNY G. RANGELMEMORIA GRÁFICA
82
SONNY G. RANGELMEMORIA GRÁFICA
83
SONNY G. RANGELMEMORIA GRÁFICA
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.
SONNY G. RANGELMEMORIA GRÁFICA
85
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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-
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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-
SONNY G. RANGELMEMORIA GRÁFICA
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.
SONNY G. RANGELMEMORIA GRÁFICA
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-
SONNY G. RANGELMEMORIA GRÁFICA
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();
SONNY G. RANGELMEMORIA GRÁFICA
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”
),
SONNY G. RANGELMEMORIA GRÁFICA
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-
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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.
SONNY G. RANGELMEMORIA GRÁFICA
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) {
echo “i es igual a 1”;
} elseif ($i == 2) {
echo “i es igual a 2”;
}
switch ($i) {
case 0:
echo “i es igual a 0”;
break;
case 1:
echo “i es igual a 1”;
break;
case 2:
echo “i es igual a 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
SONNY G. RANGELMEMORIA GRÁFICA
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++) {
SONNY G. RANGELMEMORIA GRÁFICA
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;
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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.
SONNY G. RANGELMEMORIA GRÁFICA
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” />
SONNY G. RANGELMEMORIA GRÁFICA
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” >
<label>Nombre:</label>
<input name=”nombre” />
<input type=”submit” value=”Enviar” />
</form>
contacto_procesar.php
<?php
$nombre_alumno = $_POST[“nombre”];
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” >
<label>Nombre:</label>
<input type=”text” name=”nombre” />
<input type=”submit” value=”Enviar” />
</form>
Cuando es enviado, PHP creará la variable $name,
que contendrá lo que sea que se introdujo en el
campo
Name: del formulario.
<?php
$nombre_alumno = $_POST[“nombre”];
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 />
<input type=”radio” name=”especialidad” val-
ue=”S” />
Soportes tridimensionales
SONNY G. RANGELMEMORIA GRÁFICA
107
<br />
<input type=”radio” name=”especialidad” val-
ue=”E” />
Editorial
<br />
<input type=”radio” name=”especialidad” val-
ue=”I” />
Ilustración
<br />
<input type=”radio” name=”especialidad” va-
lue=”F” />
Fotografía
<br />
<input type=”submit” value=”Enviar” />
</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>
<input type=”submit” value=”Enviar” />
</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 />
<input type=”submit” value=”Enviar” />
</form>
CHECKBOX
procesar_check.php
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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 />
<input type=”radio” name=”especialidad” val-
ue=”A” />
Audivisual y Multimedia
<br />
...
<input type=”radio” name=”especialidad” val-
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 />
<input type=”submit” value=”Enviar” />
</form>
<?php
$especialidad = $_POST[“especialidad”];
$experiencia = $_POST[“experiencia”];
SONNY G. RANGELMEMORIA GRÁFICA
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-
SONNY G. RANGELMEMORIA GRÁFICA
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,
SONNY G. RANGELMEMORIA GRÁFICA
112
SONNY G. RANGELMEMORIA GRÁFICA
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.
SONNY G. RANGELMEMORIA GRÁFICA
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-
SONNY G. RANGELMEMORIA GRÁFICA
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.
SONNY G. RANGELMEMORIA GRÁFICA
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/
SONNY G. RANGELMEMORIA GRÁFICA
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.
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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-
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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.
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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.
SONNY G. RANGELMEMORIA GRÁFICA
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/
SONNY G. RANGELMEMORIA GRÁFICA
129
GLOSARIO TÉRMINOS
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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
SONNY G. RANGELMEMORIA GRÁFICA
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)