Nuevas Tecnologias

Uso de Nuevas
Tecnologas
Captulo I REDES SOCIALES
Captulo II BLOG
Captulo III HTML - Dreamweaver
Captulo I
Redes Sociales
Redes Sociales en Internet
Definiendo a las redes sociales
Herramientas de las redes sociales
El poder de los usuarios de las redes sociales en internet
El efecto Twitter para recuperar los dominios
Facebook cede ante el descontento de sus usuarios
El poder de los usuarios de las redes sociales
Historia de Facebook
Como crear una cuenta en Facebook
uso de nuevas 1ecnologlas - PlnlC
lng. Mlguel Angel Chalco llores paglna 3
Redes Sociales en Internet
Las redes sociales en Internet han ganado su lugar de una manera vertiginosa
convirtindose en promisorios negocios para empresas, artistas, marcas,
freelance y sobretodo en lugares para encuentros humanos.
Para comprender un poco este fenmeno en crecimiento presuroso cabe citar
en principio alguna definicin bsica que nos permita comprender que es una
red social, cmo funcionan en Internet y algunas nociones sobre su historia.
Me pareci por dems interesante el trabajo del Dr. Gustavo Aruguete acerca
de Redes Sociales. Le recomiendo a quienes deseen trascender la informacin
elemental, cruda y repetitiva que suele difundirse sobre redes sociales en
mbitos informticos bajarse los archivos que estn disponibles en el sitio de
Prcticas Grupales.
Definiendo a las redes sociales
Me permitir extractarles de la ponencia en
las Jornadas sobre Gestin en
Organizaciones del Tercer Sector en la
Universidad Di Tella de Buenos Aires,
Argentina, en noviembre de 2001:
Las Redes son formas de interaccin social,
definida como un intercambio dinmico entre
personas, grupos e instituciones en
contextos de complejidad. Un sistema abierto y en construccin permanente
que involucra a conjuntos que se identifican en las mismas necesidades y
problemticas y que se organizan para potenciar sus recursos. Una sociedad
fragmentada en minoras aisladas, discriminadas, que ha desvitalizado sus
redes vinculares, con ciudadanos carentes de protagonismo en procesos
transformadores, se condena a una democracia restringida. La intervencin en
red es un intento reflexivo y organizador de esas interacciones e intercambios,
donde el sujeto se funda a s mismo diferencindose de otros.
No difiere lo dicho sobre una red grupal y lo que sucede a nivel subjetivo en
Internet, al menos en las que se dedican a propiciar contactos afectivos nuevos
como lo son las redes de bsqueda de pareja, amistad o compartir intereses
sin fines de lucro.
En las redes sociales en Internet tenemos la posibilidad de interactuar con
otras personas aunque no las conozcamos, el sistema es abierto y se va
construyendo obviamente con lo que cada suscripto a la red aporta, cada
nuevo miembro que ingresa transforma al grupo en otro nuevo. La red no es lo
mismo si uno de sus miembros deja de ser parte.
Intervenir en una red social empieza por hallar all otros con quienes compartir
nuestros intereses, preocupaciones o necesidades y aunque no sucediera ms
que eso, eso mismo ya es mucho porque
rompe el aislamiento que suele aquejar a la
gran mayora de las personas, lo cual suele
manifestarse en retraimiento y otras veces en
excesiva vida social sin afectos
comprometidos. Las redes sociales en Internet
suelen posibilitar que pluralidad y comunidad
se conjuguen y all quizs est gran parte de
toda la energa que le da vida a los grupos humanos que conforman esas
redes. Las redes sociales dan al annimo popularidad, al discriminado
integracin, al indiferente igualdad, al mal humorado educacin y as muchas
cosas ms.
La fuerza del grupo permite sobre el individuo cambios que de otra manera
podran ser difciles y genera nuevos vnculos afectivos y de negocios.
Slo con estas incompletas reflexiones sobre los beneficios psicosociales que
brindan las redes a los individuos Queda alguna duda acerca de cul es la
causa del xito y popularidad que ganan a gran velocidad las redes sociales en
Internet?
Historia
Un poco de historia
Alrededor de 2001 y 2002 surgen los primeros sitios que fomentan redes de
amigos. Hacia 2003 se hacen populares con la aparicin de sitios tales como
Friendster, Tribe y Myspace.
Rpidamente algunas empresas ingresan a las redes sociales. Google lanza en
enero de 2004 Orkut apoyando un experimento que uno de sus empleados
realizaba en su tiempo libre. En 2005 ingresan Yahoo 360 y otros.
Bsicamente el funcionamiento comienza cuando una vez montado el soporte
tcnico, un grupo de iniciadores invitan a amigos y conocidos a formar parte de
la red social, cada miembro nuevo puede traer consigo muchos nuevos
miembros y el crecimiento de esa red social puede ser geomtrico.
Y he aqu que se transforma en un interesante negocio. Creo que un buen
ejemplo de esto es Facebook, una red social enfocada a estudiantes, muy
similar a myspace, con millones de usuarios registrados y donde ha habido una
importante inversin publicitaria de parte de Microsoft.
Se corra el rumor que esta red social podra ser adquirida por Yahoo en un
valor de nada menos que mil millones de dlares. Ms ejemplos? Bien. Otro
es del.icio.us que ha alcanzado ya la cifra del milln de usuarios, cifra que
supera en tres la cantidad de hace slo nueve meses atrs.
Y ya que hablbamos de mysapce.com esta red social tiene ms de cien
millones de usuarios, pertenece a News Corp (la transaccin rond lod $580
millones al previo dueo) posicionndose como la mayor en su tipo e incluye
temticas tan diversas como bsqueda de personas desaparecidas.
Claro est que no todo es buenaventura para las redes sociales, conforme se
fue convirtiendo en buen negocio, surgieron intereses y por lo tanto, corre
cierto peligro, al menos en su filosofa de funcionamiento libre ya que la
empresa Friendster.com logr que la Oficina de Patentes de los Estados
Unidos le acepte una patente sobre redes sociales la cul cubre:
todo sistema, mtodo y aparato para conectar usuarios en sistemas
computarizados en lnea basndose en sus relaciones en redes sociales. Si
alguno est interesado en profundizar esta informacin puede ver el
documento.
Herramientas de las redes sociales
Las herramientas que proporcionan en general las redes sociales en Internet
son:
Actualizacin automtica de la libreta de direcciones
Perfiles visibles
Capacidad de crear nuevos enlaces mediante servicios de presentacin
y otras maneras de conexin social en lnea.
En cuanto a habla hispana podemos destacar las siguientes redes sociales:
Networking Activo: Agrupa a una serie de
empresarios y emprendedores
complementndose con una revista impresa y
distintos eventos presenciales.
Neurona: proclama que su objetivo es para
ampliar y mejorar la red profesional de
contactos, un espacio virtual en el que
interactan diariamente ms de medio milln
de profesionales presentes en ms 50 sectores
productivos y ms de 100 de comunidades
profesionales. Fue adquirida por Xing, aunque
an no ha sido fusionada.
Tuenti: De reciente creacin y accesible solo
por invitacin, ha despertado gran inters y un
crecimiento muy acelerado para conectar a jvenes universitarios y de
nivel secundario.
eConozco: se presenta como una herramienta que te permite contactar
con miles de profesionales a travs de tus conocidos de confianza y
donde puedes accede a nuevas oportunidades para desarrollar tu
carrera profesional. Fue tambin adquirida por Xing, fusionandose
recientemente con dicha red.
Cielo: parece la red ms completa, combina contactos en lnea con una
comunidad cara a cara donde estos medios se complementan el uno al
otro.
Dejaboo.net: que es una red social orientada a la cultura, en la que los
usuarios pueden compartir sus reseas y gustos literarios, musicales o
de cine, la cual anuncian que sigue en fase de pruebas.
Qdamos: se anuncia como el nuevo portal para buscar pareja y amigos
en Espaol. El registro y todos los servicios son gratuitos.
Festuc.com: esta es una red social basada en mviles. Festuc te
promete que conocers gente nueva a travs de amigos o por cercana
geogrfica a travs de servicio en el telfono mvil.
Spaniards: se presenta como la Comunidad de Espaoles en el Mundo.
Indican que la misin de esta red es ayudar y poner en contacto a todos
los espaoles que viven en el extranjero, bien sea por motivo de
estudios, trabajo o placer, adems de a todos aquellos que buscan salir
de Espaa, temporal o permanentemente.
Linkara: enfocado hacia las relaciones de amistad, se presenta como la
primera red social para conocer gente a travs de aficiones y opiniones.
Y en cuanto al funcionamiento lo explican de manera muy simple,
diciendo. Expresa tu opinin, conctate con tus amigos, conoce gente
nueva.
Gazzag: es una mixtura entre red social profesional y red social de
contactos personales. La apariencia y la usabilidad son bastante buenas
y permite la creacin de galeras de fotos y blogs, a diferencia de otras
redes sociales en espaol que no lo permiten.
Gentenotable: Otra red de encuentros.
El poder de los usuarios de las redes sociales en
internet
Una de las lecciones ms grandes que aprend por el
reciente incidente que nos toc enfrentar, el hackeo a
la cuenta de administracin de dominios y el robo de
identidad a nuestro fundador es el poder de los
nivel secundario.
otro.
nueva.
internet
nivel secundario.
otro.
nueva.
internet
usuarios en la web y las redes sociales como sociedades virtuales con opinin
pblica.
Las redes sociales se han convertido en un aparato de comunicacin masiva
que trasciende las fronteras y son sumamente efectivas. Las diferentes redes
sociales aglutinan millones de personas de todas partes del mundo. Pero
aparte de ser servicios de entretenimiento y comunicacin tambin se han
convertido en todo un aparato para movilizar personas hacia un hecho
especfico. A continuacin les menciono algunos ejemplos recientes.
El efecto Twitter para recuperar los dominios
Cuando nos enteramos del robo de dominios lo primero que se nos ocurri fue
acudir a nuestra comunidad, buenos amigos, seguidores, contactos de redes y
referentes que hayan experimentado un caso similar. La respuesta fue
inmediata a travs de Twitter en donde se realiz una campaa para que la
gente de Godaddy se diera cuenta que @cvander era el dueo de los
dominios.
Utilizamos todas las formas posibles para hacer llegar nuestro mensaje, se
publicaron notas en blogs, en peridicos digitales, pero el que ms nos
sorprendi fue la red social de Twitter que en menos de 140 caracteres la gente
se uni enviando mensajes a Godaddy quien al final cedi ante los miles de
mensajes. Hoy gracias a esos mensajes hemos recuperado el control de los
dominios Maestrosdelweb.com y Forosdelweb.com.
Facebook cede ante el descontento de sus usuarios
Una de las redes sociales ms populares es Facebook que recientemente
anunci un cambio en su poltica la cual pretenda que todo lo publicado por los
usuarios pasara a ser propiedad de la red y que aunque el usuario cancelara
su cuenta los datos seguiran all en propiedad de Facebook.
Ante esta postura, los usuarios del servicio expresaron sus quejas de la nueva
poltica con la intencin de anular la norma que permita a Facebook tener el
control de los datos de los usuarios que se dieran de baja y que esto podra
incluso permitir un uso comercial de los datos. Un error por parte de Facebook
porque uno de los mayores temores del usuario en la web es la manipulacin
de sus datos personales.
La posicin de Facebook ahora es solicitar la colaboracin de sus 175 millones
de usuarios alrededor del mundo para redactar nuevos trminos que sean de
beneficio y satisfaccin de la comunidad. As es, Zuckerberg tuvo que ceder
ante la presin de los usuarios y este es otro ejemplo del poder de los usuarios
detrs de las redes sociales.
El poder de los usuarios de las redes sociales
Estas situaciones me permiten reflexionar en el poder que han adquirido los
usuarios a travs del uso de redes sociales. La opinin pblica est siendo
influenciada, por lo que masivamente se mueve en la web en los diferentes
medios temticos y se asemeja a cuando antes se colectaban firmas para un
mismo fin, ahora podemos obtener comentarios a travs de las redes sociales
para lograrlo.
No est de ms recordar que tambin en poltica se hizo uso de Facebook y
otras redes para impactar en la opinin pblica, me refiero a la pasada eleccin
del presidente de Estados Unidos, Barack Obama quien ocupa el primer lugar
de los usuarios con mayores seguidores en Twitter y no titube en el uso de
redes sociales para ganar seguidores. Qu otro fenmeno social les ha
impactado recientemente?
Historia de Facebook
Facebook es un sitio web gratuito de redes sociales.
Facebook se cre como una versin en lnea de
los "facebooks" de las universidades
americanas. Los "facebooks" son publicaciones
que hacen las universidades al comienzo del ao
acadmico, que contienen las fotografas y nombres de todos los estudiantes y
que tienen como objetivo ayudar a los estudiantes a conocerse mutuamente.
Facebook llev esta idea a Internet, primero para los estudiantes americanos y
abri sus puertas a cualquier persona que cuente con una cuenta de correo
electrnico.
Facebook naci en 2004 como un hobby de Mark Zuckerberg, en aqul
momento estudiante de Harvard, y como un servicio para los estudiantes de su
universidad.
En su primer mes de funcionamiento Facebook contaba con la suscripcin de
ms de la mitad de los estudiantes de Harvard, y se expandi luego a las
universidades MIT, Boston University y Boston College y las ms prestigiosas
instituciones de Estados Unidos.
Un ao despus, Facebook tena ms de un milln de usuarios, una oficina en
Palo Alto, California y haba recibido el apoyo financiero de Peter Thiel primero
(co-fundador de Pay-Pal e inversor ngel) (500 mil U$D) y el Accel Partners
despus ($12.7 millones). Ese mismo ao incorpor, a los alumnos de ms de
25 mil escuelas secundarias y dos mil universidades de estados unidos y el
extranjero, logrando un total de 11 millones de usuarios.
En 2006, Facebook introdujo ms universidades extranjeras y desarrollo
nuevos servicios en su plataforma, tales como Facebook Notes (una
herramienta de bloggin con tagging, imgenes y otras utilidades) o la
importacin de blogs de servicios como Xanga, LiveJournal o Blogger, y ya en
2007 Facebook Marketplace, que compite con Craigslist. Tambin implement
acuerdos comerciales con iTunes y recibi una inversin de capital adicional de
25 millones de dlares por parte de Peter Thiel, Greylock Partners y Meritech
Capital Partners.
En marzo de 2006, BusinessWeek divulg que una adquisicin potencial del
sitio estaba bajo negociacin. Facebook declin una oferta de $750 millones.
En 2006 Facebook se "hizo pblico" permitiendo que no slo los estudiantes de
determinadas universidades o escuelas americanas participaran en l, sino que
todas las personas que tengan correo electrnico puedan formar parte de su
comunidad. Facebook se convirti entonces en una comunidad de
comunidades, en l se conectan estudiantes, empresas y gente que puede
elegir participar en una o ms redes. Es una comunidad creada por y en
funcin de sus miembros.
En febrero de 2007 lleg a tener la mayor cantidad de usuarios registrados en
comparacin con otros sitios web orientados a estudiantes de nivel superior,
teniendo ms de 19 millones de miembros en todo el mundo, debido a que
originalmente slo fue publicado en ingls.
En julio de 2007, Facebook anunci su primera adquisicin, Parekey, Inc. De
Blake Ross y Joe Hewitt. En agosto del mismo ao, se le dedic la portada de
la prestigiosa revista Newsweek; adems de una integracin con YouTube.
A fines de octubre de 2007 la red de redes vendi una parte, el 1.6%, a
Microsoft a cambio de $240 millones de dlares, con la condicin de que
Facebook se convirtiera en un modelo de negocio para marcas de fbrica en
donde se ofrezcan sus productos y servicios.
La ms reciente inyeccin de capital a Facebook -27,5 millones de dlares-fue
liderada por Greylock Venture Capital (fondo de inversin con fuerte vnculo
con la CIA). Uno de los socios de Greylock es Howard Cox, -segn el diario
The Guardian-, pertenece al fondo de inversin en capital de riesgo de la CIA.
En 2008 lanz su versin en francs, alemn y espaol para impulsar su
expansin fuera de Estados Unidos, ya que sus usuarios se concentran en
Estados Unidos, Canad y Gran Bretaa. La mayor cantidad de usuarios de
Iberoamrica, proviene de Colombia, superando a pases con mayor poblacin
como Mxico, Brasil y Argentina.
Facebook compite por abrirse espacio entre empresas de xito como Google y
MySpace, por lo que se enfrenta a grandes desafos para lograr crecer y
desarrollarse. Una de las estrategias de Zuckerberg ha sido abrir la plataforma
Facebook a otros desarrolladores.
La propuesta econmica es quienes construyan algo sobre Facebook se
quedarn con el dinero generado por la publicidad o por las transacciones. Lo
ms importante, es la dimensin virtual del sistema: "cuando un amigo agrega
una aplicacin aparece en su pgina y en su perfil. Cliquear lleva a la
aplicacin y permite interactuar directamente con ella". Todos los amigos ven la
eleccin y la consideran como un voto a favor lo cual los alienta a probarla ellos
tambin. As lo demuestran, adems, los hechos. A los 10 das de lanzamiento,
el nmero de aplicaciones disponibles haban pasado de 85 a ms de 300.
ilike, la ms popular, comenz con mil abonados a la maana siguiente del
lanzamiento. A los dos das eran 300,000. Gana ahora 200,000 abonados por
da y su presencia en Facebook super al sitio original.
Facebook pretende volverse algo como un sistema operativo. El "sistema
operativo social de la Web", segn lleg a declarar Mark Zuckerberg el
fundador del sitio.
Haidi Partovi, presidente de iLike (sitio de intercambio de msica) afirma que
"en la historia de la computacin, se cre la computadora personal, luego
Windows, luego la Web y ahora la plataforma Facebook".
En Facebook la informacin es filtrada por los amigos y las redes. El modelo no
descansa sobre un motor de bsqueda, sino sobre las redes sociales.
Casi cualquier persona con conocimientos informticos bsicos puede tener
acceso a todo este mundo de comunidades virtuales.
Facebook est prohibido en Irn, Birmania y Butn.
En julio del 2009 Mark Zuckerberg, fundador de la empresa hizo pblico que
haba alcanzado los 250 millones de usuarios.
Segn la revista Forbes, Mark Zuckerberg de 25 aos, est en el segundo lugar
en los jvenes ms ricos del mundo, con una fortuna estimada en 1,000
millones de euros.
La pelcula basada en la historia de Facebook: The Social Network
Columbias Pictures realizo la pelcula basada en la historia de la popular red
social Facebook.
La pelcula gira en la historia de Mark Zuckerberg, desde sus comienzos en
Harvard hasta la creacin y la popularidad de Facebook.
El ttulo de la pelcula es "The Social Network".
The Social Network relata la evolucin de esta plataforma de relaciones
sociales creada en el seno del campus de la Universidad de Harvard y que en
tan solo cinco aos pas de ser un programa de uso privado a un fenmeno
mundial.
El 6 de Agosto de 2009, Twitter y Facebook sufrieron problemas con el servicio
causados por ataques de ciberpiratas, lo que llev a especular una campaa
coordinada contra las redes sociales ms populares en Internet.
Miembros de Facebook, sufrieron retrasos al conectarse para actualizar sus
perfiles. Los problemas parecieron derivarse de lo que se califica como una
"denegacin de servicio", una tcnica en la que los piratas informticos
sobrecargan los servidores de una pgina con solicitudes de comunicacin.
El creador de la red social Facebook Mark Elliot Zuckerberg, fue elegido el 15
de diciembre del 2010, "persona del ao" por la revista Time por "haber
conectado a ms de 500 millones de personas en todo el mundo". En 2009 la
distincin de la revista Time fue para el presidente de la Reserva Federal, Ben
Bernanke, mientras que en 2008 el galardonado fue el entonces presidente
Barack Obama y en el 2007 el primer ministro de Rusia, Vladimir Putin.
El fundador de Facebook se ha convertido en uno de los multimillonarios y
filntropos ms prominentes del mundo. Hace unos meses prometi una
donacin de 72 millones de euros, a lo largo de los prximos cinco aos, para
el sistema de escuelas pblicas de Newark (Nueva Jersey).
Como crear una cuenta en Facebook
Ingresar a Facebook
Es recomendable que para crear una cuenta facebook sigas estos pasos con
Internet Explorer o Mozilla Firefox ya que cualquier otro explorador de internet
te podria traer problema con la ejecucin HTML de Facebook.
Para los que no lo sepan, deben ingresar a www.facebook.com para
registrarte, ingresa tu nombre completo, tu email, tu contrasea, tambin
selecciona tu sexo y fecha de nacimiento luego dale clic a Regstrate
Ingresa el cdigo de seguridad
Solo escribe lo que lees y le das clic de nuevo a Sign Up.
Envio de confirmacin de Facebook
Automticamente Facebook te pedir que ingreses a tu cuenta de mail, en
donde te ha enviado mensaje, en el que debers hacer clic para confirmar tu
direccin de correo. Dale clic a Go to Hotmail now.
Confirmar registro en Facebook
Ingresa a tu cuenta y en tu bandeja de entrada observaras un correo de
Facebook, brelo y dale clic en la URL para confirmar tu cuenta de correo.
Invitar amigos a Facebook
Regresaras automticamente a la pgina de Facebook, que mostrara la lista de
los amigos que tienes en tu cuenta de correo y te han hecho invitaciones para
que te unas a Facebook, si los aceptas dale clic en coof|tm y si no en lqoote y
seguir al siguiente paso.
Listado de amigos registrados Facebook
Luego aparecern todos tus amigos de tu cuenta de correo, que ya estn
usando Facebook, saldr su fotografa, nombre y correo electrnico. Si quieres
agregarlos tambin a tu lista de amigos entonces seleccinalos y luego da clic
a Confirm.
Disfruta de tu nueva cuenta de Facebook
Listo! Ahora tienes tu cuenta en Facebook, con ms amigos de los que te
imaginas, puedes conversar con ellos, poner en tu perfil tu foto, compartir
videos, fotos, escribir notas, decir tu estado de nimo, personalmente lo
considero como un diario online pero en el que mis amigos pueden saber todo
sobre m.
Buscar amigos en Facebook
Con Facebook tienes la opcin de encontrar a tus antiguos compaeros del
colegio, academia, etc.; solo debes marcar las casilla adecuadas y suerte!
Captulo II
Blog
Definicin
Tipos de blog
Tecnologas
Herramientas para hacer un blog
Captulo II
Blog
Definicin
Tipos de blog
Tecnologas
Captulo II
Blog
Definicin
Tipos de blog
Tecnologas
DEFINICIN
Un Blog es una publicacin en la Web compuesta de varios artculos,
normalmente breves y a veces de carcter personal. Se comenzaron a
masificar aproximadamente en el 2001, pero ya existan desde el 1999 y antes,
aunque no con este nombre. Originalmente eran simplemente una especie de
"diario de vida pblico" pero ahora toman distinto carcter, y si bien la mayora
mantiene una lnea bastante personal, tambin los hay de servicio pblico, tipo
revista, etc.
La diferencia ms importante entre un blog y un sitio Web es que el blog est
pensado para varios "postings" o artculos breves que se presentan en orden
cronolgico inverso (del ms nuevo al ms antiguo), y que se van agregando
sin una agenda predeterminada. Adems los blogs son un espacio
predominantemente de aficionados, de forma que los blogs permiten a sus
autores o "bloggers" pasar de ser consumidores y observadores pasivos a ser
entidades activas en la creacin de contenidos y culturas.
Un blog, (tambin se conocen como weblog o bitcora), es un sitio web que
recopila cronolgicamente textos o artculos de uno o varios autores,
apareciendo primero el ms reciente.
Este trmino ingls blog o weblog proviene de las palabras web y log (log en
ingls = diario). El trmino bitcora, en referencia a los antiguos cuadernos de
bitcora de los barcos, se utiliza preferentemente cuando el autor escribe sobre
su vida propia como si fuese un diario.
Habitualmente, en cada artculo de un blog, los lectores pueden escribir sus
comentarios y el autor darles respuesta, de forma que es posible establecer un
dilogo. No obstante es necesario precisar que sta es una opcin que
depende de la decisin que tome al respecto el autor del blog, pues las
herramientas permiten disear blogs en los cuales no todos los internautas -o
incluso ninguno- puedan participar agregando comentarios. El uso o tema de
cada blog es particular, los hay de tipo: periodstico, empresarial o corporativo,
tecnolgico, educativo (edublogs), polticos, personales (Contenidos de todo
tipo), etc.
Tipos de blog
Existen muchos tipos de blogs; una posible clasificacin es la siguiente:
a) Segn su formato
Temtico
Personal
Informativo
Educativo
Colaborativo
b) Segn su uso
Weblog Blog
FotoBlog
AudioBlog
VideoBlog
MoVBlog
Segn su formato
Blog Temtico: Como su nombre lo indica, tratan de un tema en
particular y buscan relacionar la mayor cantidad de informacin sobre el
mismo, exponiendo puntos de vista de un autor o varios autores.
Blog Personal: Este tipo de blog es el ms comn en la blogosfera,
puesto que en l, las personas pueden expresar libremente sus
pensamientos y/o opiniones, responsabilizndose por el sentido de lo
que ellos mismos publican.
Blog Informativo: Este tipo de blog tambin puede ser conocido como
blog Noticiosos, porque en l, lo importante es mostrar contenido ms
actuales en forma de informacin noticiosa. Es el modelo preferido para
portales que no cuentan con los recursos econmicos para crear sitios
web ms sofisticados.
Blog Educativo: Es utilizado comnmente en las escuelas y centros
educativos para desarrollar proyectos acadmicos que buscan la
participacin tanto de estudiantes como de docentes para dar a conocer
las iniciativas escolares y nuevas formas de aproximarse a la
enseanza.
Blog Colaborativo: Este tipo de blog se utiliza en muchos ambientes, lo
esencial es que no es un solo autor el que publica, sino que una reunin
de autores / editores contribuyen en el desarrollo de los tpicos.
Segn se formato
Weblog - Blog: Este es el tipo de blog ms comn en la blogosfera.
Puede contener solamente texto o una combinacin de todos los
formatos presentes en la web.
FotoBlog: Este tipo de blog se utiliza para crear colecciones o catlogos
o bajo o ningn costo, el formato principal que se utiliza consiste en
fotografas o imgenes que hablan por el texto.
AudioBlog: En este tipo de blog, las entradas consisten en archivos de
audio pregrabado, audiocasts, o audiostreaming. Es el tipo de blog
preferido por las emisoras en lnea o programas educativos que
requieren gran cantidad de informacin personalizada.
VideoBlog: Este tipo de blog consiste en la presentacin de videos que
actualicen la informacin pertinente del blog. Es bastante utilizado por
programadores y diseadores web para la creacin de tutoriales how to
en lnea.
MoVBlog: Este tipo de blog utiliza las modernas tecnologas de
integracin mvil al permitir que sus usuarios sean alimentados en sus
dispositivos mviles. Es bastante utilizado en la industria mdica y en la
educacin con fines virtuales.
Tecnologas
En el aspecto tcnico, la mayora de los blogs incluye alguna forma de
participacin de los lectores a travs de un foro de comentarios que
normalmente est asociado a cada artculo. En los blogs ms pequeos la falta
de comentarios es un indicio de que no hay muchos visitantes, mientras que en
los blogs ms grandes es necesario usar algn sistema de moderacin editorial
o con puntajes que permita filtrar los comentarios.
Adems de la herramienta base que se usa para hacer el blog, cinco
tecnologas son clave en la forma en que los blogs se comunican y expanden:
la posibilidad de clasificar contenido, la posibilidad de suscribirse (feeds), la
posibilidad de notificar a otro blog que estoy escribiendo sobre su artculo, la
posibilidad de notificar a un servidor central que mi blog tiene contenido nuevo,
y la posibilidad de tener una URL estable para cada artculo.
Tags (etiquetas): son la forma de clasificar la informacin, normalmente
son 1 o 2 palabras que se agregan a cada artculo y que permiten
agruparlos despus por temas como "arte", "cultura", "tecnologa", etc.
Sindicacin (feeds): lo ms usual en este caso es que en tu blog dejas
un archivo en formato XML que contiene las ltimas cosas que ha
publicado en un formato que es legible por un ordenador, y que incluye
el ttulo del artculo, la fecha y un breve resumen. Esta informacin
puede ser usada por los visitantes de tu sitio en usando un agregador de
noticias. Un agregador de noticias es un programa para poder ver en un
solo lugar todos lo nuevo que ha aparecido en los blogs a los que t
ests subscrito. Va Web, algunos agregadores de noticias usados son:
My Yahoo, Bloglines y Newsgator. Si quieres un programa para usar en
tu computador, mira la comparacin de lectores de noticias RSS.
Trackbacks: es normal en los blogs ir propagando la informacin, y por
lo tanto si tu blog se hace medianamente famoso ser comn que otros
blogs hablen sobre artculos en tu blog. Y para t ser interesante poder
saber quines estn hablando de tu blog en otros blogs. Para eso
existen los trackbacks, que son un servicio que proveen los programas
para crear blogs. Cuando escribes un artculo, normalmente aparece una
direccin "Trackback URL" que las personas que escriban sobre tu
artculo en otros blogs deben ingresar en sus sistemas para poder
enviarte estas notificaciones.
Un anlisis cientfico de la propagacin de las noticias en los blogs es el
artculo del 2005 de Adar y Adamic: "Tracking information epidemics in
the Blogspace".
Pings: los programas para hacer blogs normalmente incluyen una forma
de notificar a otros sitios como Technorati que haz publicado algo nuevo,
esto normalmente viene configurado "de fbrica" para apuntar a varios
sitios que indexan blogs.
Permalinks: este es el nombre que recibe la direccin con que queda tu
artculo cuando est publicado. Normalmente termina en .html y es una
direccin permanente, invariante y segura en el sentido de que otras
personas pueden linkear a tu artculo y no importa si lo editas o lo
cambias la direccin seguir siendo la misma.
Para hacer un Blog, si no quieres instalar ningn programa puedes usar un
servicio de creacin de Blogs en lnea, los ms comunes son Blogger y
LiveJournal, tambin hay proveedores especializados en Blogs en castellano
como Vivito.
Si puedes instalar programas en un servidor, puedes usar otros software para
crear blogs como Drupal o Movable Type.
Captulo III
HTML Dreamweaver
Lenguaje HTML
o Conceptos bsicos - Estructura general de un fichero HTML
Dreamweaver CS 4
o Conceptos bsicos - Editar pginas web
o El texto: propiedades y formato
o Estilos
o Imgenes
o Hipervnculos
Apndice
Conceptos bsicos - Estructura general de un fichero HTML
HTML (HyperText Markup Language) es el lenguaje utilizado en la Internet para
definir las pginas del WORLD WIDE WEB. Los ficheros HTML son ficheros
puramente ASCII, que pueden ser escritos con cualquier editor bsico, tal como
Motead en Windows o vi en Unix. Tambin se pueden utilizar procesadores de
texto ms complicados como Microsoft Word, pero en este caso hay que
asegurarse que el fichero es guardado en disco como "text only". En este
fichero de texto se introducen unas marcas o caracteres de control llamadas
TAGs, que son interpretadas por el browser. Cuando ste lee un fichero ASCII
con extensin *.htm o *.html interpreta estas TAGs y formatea el texto de
acuerdo con ellas.
Todas las TAGs de HTML van encerradas entre los caracteres menor que ( <) y
mayor que ( >), como por ejemplo <HTML>. Adems, la mayor parte de ellas
son dobles, en el sentido de que hay una TAG de comienzo y otra de final;
entre ambas est el texto afectado por dichas TAGs. La marca de final es como
la de comienzo, pero incluyendo una barrra (/). Por ejemplo, la marca de final
de <HTML> es </HTML>. De la misma forma, la TAG de final de <P> es </P>,
y as con otras TAGs.
Ejemplo
<HTML>
<HEAD>
<TITLE>Ttulo de la pgina</TITLE>
...
</HEAD>
<BODY>
...
</BODY>
</HTML>
Las etiquetas disponen de atributos que permiten definir caractersticas del
elemento sobre el que actan. Por ejemplo, <table border="1"> indica que la
que se trata de una tabla, y que tendr un borde de grosor 1.
Una pgina HTML bsica tendra el siguiente aspecto:
<html>
<head>
<title> Mi primera pgina web </title>
</head>
<body>
<p><a href="http://www.unmsm.edu.pe/"> Haz clic aqu para ir a
UNMSM</a>
y aprender ms sobre pginas web en el curso de Herramientas
Informticas.</p>
</body>
</html>
El ejemplo anterior mostrara una pgina con un slo prrafo en el que parte
del texto enlaza con la web de UNMSM. Puedes probarlo escribiendo el cdigo
en un archivo de texto (bloc de notas), que debes guardar con la extensin
.htm.
Observa que cada etiqueta tiene una apertura y un cierre, y que estn anidadas
unas dentro de otras.
Las etiquetas que se introducen en un documento HTML no son visibles
cuando el documento se muestra en un navegador (IExplorer, GoogleChrome,
Firefox, Opera, etc.). Cuando un usuario desde Internet solicita ver una pgina
el servidor Web enva la pgina al navegador y este interpreta las etiquetas
para dar la pgina correctamente formateada.
Cuando utilizamos Dreamweaver para crear una pgina Web no tenemos que
preocuparnos de todo esto. Dreamweaver inserta automticamente las
etiquetas necesarias para construir la pgina con la apariencia y contenido
definidos en el editor grfico. Esto nos facilita muchsimo el trabajo.
Dreamweaver CS 4
Dreamweaver CS4 es un software fcil de usar que permite
crear pginas web profesionales.
Las funciones de edicin visual de Dreamweaver CS4
permiten agregar rpidamente diseo y funcionalidad a las
pginas, sin la necesidad de programar manualmente el
cdigo HTML.
Se puede crear tablas, editar marcos, trabajar con capas, insertar
comportamientos JavaScript, etc.., de una forma muy sencilla y visual.
Adems incluye un software de cliente FTP completo, permitiendo entre otras
cosas trabajar con mapas visuales de los sitios web, actualizando el sitio web
en el servidor sin salir del programa.
Para seguir este curso te puedes descargar la versin gratuita de
Dreamweaver desde la pgina de Adobe, la versin caduca al cabo de 30 das,
pero seguro que te dar tiempo a entenderlo y decidir si quieres adquirir la
versin completa de este fantstico programa.
Los logotipos de Dreamweaver son propiedad de Adobe, as como las marcas
registradas Dreamweaver y Adobe.
Novedades de Dreamweaver CS4
Nueva interfaz de usuario. Dreamweaver CS4
presenta una nueva interfaz que permite cambiar
fcilmente de espacio de trabajo y adaptar los paneles
de forma rpida y cmoda. Esta nueva interfaz es muy
parecida a los dems programas de Adobe, como
Photoshop, Illustrator, etc. Existen distintos espacios de
trabajo adecuados para cada ocasin (clsico,
programador, diseador, etc. ) pero tambin tenemos la
posibilidad de crear el nuestro propio de forma muy sencilla.
Vista en vivo. La Vista en vivo nos
permite trabajar con una vista real, tal
y como veramos la pgina en un navegador. Si hemos incluido
elementos interactivos en nuestra pgina, como mens desplegables,
mens tipo acorden,
widgets, etc, podremos
interactuar con ellos en la
vista en vivo, de la misma
forma que lo haramos en un
navegador.
Navegador de cdigo. La
funcin de Navegador de
cdigo muestra las fuentes de cdigo que afectan a la seleccin que
tengamos activa, pueden ser CSS (hojas de estilos en cascada),
funciones JavaScript externas, plantillas de Dreamweaver, archivos de
origen de iFrame, etc.
La nueva barra de Archivos relacionados muestra todos los archivos
que de una forma u otra contribuyen al diseo final de nuestra pgina,
como hojas de estilo css, archivos javascript, etc. Mediante esta nueva
utilidad podemos pasar de un archivo a otro cmodamente y tener una
visin mucho ms clara de todos los archivos con los que estamos
trabajando en nuestro sitio web.
Inspector de propiedades CSS. El hasta ahora Inspector de
propiedades, queda dividido en propiedades HTML (el que conocamos
de otras versiones) y CSS. ste ltimo nos permite crear y editar
nuestros estilos de forma cmoda y sencilla.
Objetos inteligentes de imagen. Dreamweaver CS4
incluye la posibilidad de crear objetos inteligentes de
imagen. Ahora podemos incluir un archivo psd en las
pginas web, de forma que el archivo original de
Photoshop y la imagen optimizada en Dreamweaver se
mantienen vinculados. Podemos redimensionar o cambiar
caractersticas de los objetos inteligentes de imagen directamente desde
Dreamweaver.
Adobe InContext Editing. Mediante Adobe InContext Editing creamos
regiones editables. De esta forma los usuarios previamente habilitados
podrn actualizar el contenido de estas regiones de la pgina web
directamente desde el navegador, sin necesidad de tener un editor de
pginas web instalado.
Software Subversion. Subversion es uno de los ms usados sistemas
de control de versiones para equipos de desarrollo. Dreamweaver CS4
es capaz de sincronizarse con el repositorio de versiones, facilitando el
trabajo a los profesionales que empleen este sistema.
Conjuntos de datos. Dreamweaver CS4 permite la creacin de pginas
dinmicas de forma sencilla, pudiendo utilizar tanto bases de datos
como archivos XML, sin necesidad de conocer en profundidad su
funcionamiento. Resulta muy sencillo crear regiones dinmicas con la
tecnologa Spry.
Conceptos bsicos
Editar pginas web
Cualquier editor de texto permite crear pginas web. Para ello slo es
necesario crear los
documentos con la
extensin HTML o
HTM, e incluir
como contenido
del documento el
cdigo HTML
deseado. Puede
utilizarse incluso el
Bloc de notas
incluido en
Windows para
hacerlo.
Pero crear pginas web mediante el cdigo HTML es ms costoso que hacerlo
utilizando un editor grfico. Al no utilizar un editor grfico cuesta mucho ms
insertar cada uno de los elementos de la pgina, al mismo tiempo que es ms
complicado crear una apariencia profesional para la pgina, sobre todo si no
estamos demasiado familiarizados con el HTML. Aunque tambin es cierto que
escribir el cdigo nos da ms control sobre l, y sobre todo al principio, nos
ayudar a aprenderlo rpidamente.
Hoy en da existe una amplia gama de editores de pginas web. Uno de los
ms utilizados, y que destaca por su sencillez y por las numerosas funciones
que incluye, es Adobe Dreamweaver.
Adems de Dreamweaver, existen otra serie de buenos editores de pginas
web, como pueden ser Microsoft Expresion Web, Amaya, Bluefish, NVU,
KompoZer o Quanta Plus. Algunos de los cuales tienen la ventaja de ser
gratuitos.
Cmo tener una pgina en Internet
Para poder poner una pgina web en Internet, es necesario contratar a alguna
empresa con servidores que pueda alojarla y hacerla accesible desde Internet
las 24 horas del da. El precio por disponer de espacio propio en el servidor
depender de la empresa, del espacio en disco, volumen de transferencia y
otras opciones que podamos contratar.
Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas
limitaciones: poco espacio de disco, lentitud y nombre de nuestra pgina
precedido por el de la suya. Hay que tener tambin en cuenta que estas
empresas deben generar ingresos de alguna forma, por lo que se dedican a
vender espacios publicitarios dentro de nuestras pginas, publicidad que no
podremos negarnos a incluir en ellas.
Por estos motivos, no se recomienda utilizar hospedaje gratuito para la pgina
de una empresa, aunque s es aceptable para una pgina personal, sobre todo
al comienzo.
Cuando se va a contratar un servicio de hospedaje es necesario contratar
tambin un dominio, tarea de la que se suele encargar la propia empresa de
hospedaje. Registrar un dominio consiste en registrar un nombre para nuestra
pgina. Este nombre no puede estar repetido en Internet, ha de ser nico, al
igual que ocurre con los nombres de las empresas. Es posible registrar un
mismo nombre con distintas terminaciones, como por ejemplo, .net, .org, .es o
.com.
En el caso de los hospedajes gratuitos no es necesario registrar ningn
dominio, ya que nuestra pgina no ser ms que un archivo dentro de la de la
empresa contratada.
A la hora de contratar un servicio de hospedaje tambin hay que tener en
cuenta el nmero de cuentas de correo electrnico propias que pueden
habilitarse y si disponemos de una base de datos para poder acceder a ella a
travs de programacin va Web, aunque esto ltimo ser til slo para
usuarios avanzados.
En cualquier caso, una vez tengas posponemos espacio en Internet, darle
contenido es muy sencillo.
Dreamweaver te permite crear una copia local (en nuestro microcomputador)
del sitio web que luego pondremos a disposicin de todo el mundo en Internet.
Por tanto, una vez hayas terminado de disearla en modo local slo tendrs
que subirla a tu servidor manteniendo la estructura del local. Es decir, debers
subir todos los archivos tal y como aparecen en tu disco duro,
respetando el nombre de los archivos y la organizacin de las carpetas. Si
no lo haces de este modo, tu sitio experimentar fallos y enlaces que no
funcionarn.
Recuerda que ser mejor que no utilices caracteres especiales como
acentos o ees, ni espacios en blanco en los nombres de archivos o
carpetas. De esta forma te asegurars de que el servidor puede reconocer sin
ningn tipo de problemas los nombres de los archivos que alojes en l.
Para evitar errores de enlaces rotos o imgenes que no se muestran intenta
escribir, tambin, los nombres en minscula. Algunos servidores (los que
utilizan linux) distinguen entre maysculas y minsculas, por lo que si en tu
pgina quieres mostrar la imagen foto1.jpg debers guardarla con ese nombre
y no como Foto1.jpg. Evitars horas perdidas buscando fallos.
Creacion de un documento usando Dreamweaver CS4
Para ir teniendo una idea de cmo funciona Dreamweaver, vamos a crear una
pgina web sencilla, con varios estilos de texto, una imagen y un enlace a
otra pgina. Crear esta pgina solo te llevar unos pocos minutos, y sabremos
cmo trabajar con los elementos bsicos con los que estn hechas la mayora
de las pginas web. Si nunca has hecho una pgina web, este es el momento
para descubrir lo fcil que es.
Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la
pgina anterior como
puede hacerse. Abre
un documento nuevo y
selecciona la
Categora Pgina
bsica, HTML, en la
columna Diseo
dejamos la opcin por
defecto: <ninguno>.
Seguidamente, haz clic
sobre la zona blanca
del documento y
escribe lo siguiente:
Una vez introducido el texto, vamos a modificar el ttulo y el color de fondo del
documento.
Para ello podemos hacer clic sobre el men Modificar y elegir la opcin
Propiedades de la pgina.
Entonces se abrir una ventana como la que aparece a continuacin:
En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento
pasar a ser de color azul.
Haz clic en Ttulo/Codificacin a la izquierda, y en el Ttulo escribe Mi primera
pgina.
Para aplicar los cambios, damos clic sobre el botn Aceptar.
El texto: propiedades y formato
Caractersticas del texto
Las caractersticas del texto seleccionado pueden ser definidas a travs del men
Formato, y a travs del inspector de propiedades. Vamos a ver las posibilidades que
se nos ofrecen a travs del inspector de propiedades, que estn clasificadas en dos
categoras HTML y CSS.
Comenzamos viendo las propiedades HTML
Todas estas propiedades generan etiquetas HTML, que tienen un estilo por defecto en
el navegador. Pero al final, podremos personalizarlas con CSS para que se vean
exactamente como queramos.
Formato:
Permite seleccionar un formato de prrafo ya definido para HTML, que puede ser
encabezado, prrafo o formato predeterminado. Los encabezados se utilizan para
establecer ttulos dentro de un documento. El formato predeterminado sirve para que
el texto aparezca tal cual ha sido escrito, por ejemplo, si entre dos palabras se
introducen varios espacios solo se considera uno, pero al establecer el formato
predeterminado se respetar que hayan varios espacios en lugar de solo uno. El texto
normal, debera ir siempre en prrafos, salvo que est en otros elementos, como
tablas o listas.
Es importante emplear correctamente los encabezados, ya que se organizar mejor el
contenido de nuestra web, y es importante de cara a buscadores y visitantes. No te
preocupes por cmo se muestran esos encabezados, recuerda que siempre podremos
personalizarlo.
Estilo:
El botn B encierra el texto en una etiqueta <strong></strong>, que por defecto se
muestra en negrita. El botn I, lo encierra entre <em></em>, que por defecto se ve en
cursiva.
Estas son las etiquetas de resaltado ms habituales, pero existen otras que
encontramos a travs del men Texto. Por ejemplo, subrayar el texto. Esta opcin no
aparece en el panel de Propiedades ya que de normal no suele utilizarse, debido a
que los vnculos aparecen subrayados y el subrayar texto normal podra hacer que el
usuario pensara que se trata de un vnculo. Adems, emplea etiquetas que estn en
desuso.
Lista:
Estos botones permiten crear listas con vietas o listas numeradas.
Sangra:
Estos dos botones permiten sangrar el texto y anular la sangra. La sangra es una
especie de margen que se establece a ambos lados del texto. En este caso los
botones se refieren a sangra a la izquierda del texto.
Si lo aplicamos sobre texto normal, lo encerrar en una etiqueta <blockquote>
</blockquote>, que por defecto se muestra indentada hacia la derecha. En cambio, al
aplicarlo sobre una lista, crear una sublista dentro de sta.
Accediendo a las propiedades CSS.
Las hojas de estilo en cascada (CSS, Cascading Style Sheets) nos permiten formatear
nuestra pgina y darle el diseo que queramos. Podemos cambiar desde propiedades
simples, como el color de fondo, hasta cosas ms vistosas, como hacer que un bloque
se muestre en una posicin determinada o que un elemento cambie al pasar el cursor
sobre l. Profundizaremos en esto ms adelante, por ser una parte fundamental en la
creacin de pginas web.
Tenemos ms posibilidades a la hora de aplicar formatos. Dreamweaver CS4 nos
proporciona numerosas funciones para la creacin de estilos mediante hojas de estilos
en cascada.
Regla de destino:
Las reglas CSS sirven para definir a qu elemento aplicamos el estilo, y cmo lo
hacemos.
Podemos definir una Nueva Regla, eliminarla o aplicar una clase. Veremos esto antes
de acabar el tema.
Editar regla:
Mediante este botn accedemos a las opciones para la creacin o modificacin de
estilos CSS, de la regla seleccionada.
Panel CSS:
Este botn abre el panel CSS si no lo tuviramos abierto.
Fuente: Permite seleccionar un
conjunto de fuentes. Aparecen
conjuntos de fuentes en lugar de
una sola, ya que es posible que al
establecer una nica fuente el
usuario no la tenga en su
ordenador. El seleccionar un
conjunto de fuentes posibilita que en el caso de que el usuario no tenga una fuente se
aplique otra del conjunto. Por ejemplo, si seleccionamos Arial, Helvetica, sans-serif, el
texto se ver con la fuente Arial, pero si esta no existe se ver en Helvetica.
Estilo:
Estos botones ponene el texto en negrita y cursiva respectivamente.
Alineacin:
A travs de estos botones es posible establecer la alineacin del texto de una de estas
cuatro formas distintas: izquierda, centrada, derecha y justificada.
Hemos de aplicarlo sobre el elemento que contiene el texto que queremos alinear, por
ejemplo sobre un prrafo.
Tamao:
Permite cambiar el tamao del texto. El tamao lo podemos indicar en diversas
unidades, en pxeles, porcentajes del tamao base, etc..
Color:
Permite seleccionar el color de la fuente, ignorando el color que se haya definido en
las propiedades de la pgina. Si no se ha establecido ningn color en las propiedades
de la pgina ni aqu, el color del texto por defecto ser el negro.
Listas
Es posible insertar texto a modo de lista. A su vez, la lista puede ser numerada
o con vietas.
Para que un texto que ya ha sido introducido en el documento se convierta en
una lista, simplemente hay que seleccionarlo y damos clic sobre la opcin de
lista correspondiente, ya sea a travs del inspector de propiedades, o a
travs del men Formato.
La lista con vietas (sin ordenar) se selecciona a travs del botn , mientras
que la lista numerada (ordenada) se selecciona a travs del botn .
Ejemplo de lista numerada (ordenada):
1. Preparar la mochila
1. Sacar los libros de ese da
2. Introducir los libros del da siguiente
2. Ponerme el pijama
3. Lavarme los dientes
4. Poner el despertador
Ejemplo de lista con vietas (sin ordenar):
o Perro
o Gato
o Aves
Canario
Loro
o Hmster
Para establecer listas anidadas dentro de otras como en los ejemplos
anteriores, es necesario aadir una sangra en los elementos de la lista que se
desee que pasen a formar parte de la lista anidada.
A travs del men Formato, opcin Lista, es posible acceder a las
propiedades de la lista seleccionada. Se debe seleccionar el texto de la lista
previamente o tener el cursor en algn lugar de la lista para que se active este
submen.
En la ventana Propiedades de lista se puede especificar el tipo de lista (con
nmeros o con vietas), el tipo de nmeros o vietas que se utilizarn (en la
propiedad Estilo:), y en el caso de las listas ordenadas, el nmero por el que
comenzar el recuento.
Caracteres especiales
A veces necesitars introducir caracteres especiales en tus pginas. Debido al
modo editor de Diseo de Dreamweaver esta tarea es muy sencilla utilizando
el teclado, podemos incluir caracteres como , , , , .. de forma rpida. Pero
si quieres poner dos espacios en blanco y los introduces por teclado,
Dreamweaver no los crear, debers introducirlo dos veces utilizando la opcin
que vamos a ver a continuacin. Lo mismo ocurrir con los caracteres que no
tenemos en el teclado.
Haz clic en el men Insertar y selecciona la opcin HTML vers el desplegable
de la imagen inferior.
Slo coloca el cursor del ratn sobre Caracteres especiales y vers una lista
rpida de los caracteres ms utilizados que no pueden ser introducidos
mediante teclado.
Para introducir alguno de estos caracteres en tus textos slo seleccinalo en la
lista y aparecer en la vista de Diseo.
Si el carcter que buscas no se encontrase all, haz clic en Otro... y se abrir
una ventana desde donde podrs seleccionar caracteres entre una lista
bastante ms amplia:
Estilos CSS.
Los estilos CSS se utilizan para combinar una serie de atributos del texto, como
pueden ser el color o el tamao, de modo que no sea necesario asignar estos
atributos uno a uno cada vez que se desee repetir la asignacin de esos
mismos valores a otras partes del texto.
Tambin permiten, como veremos ms adelante, definir prcticamente
cualquier propiedad de los elementos que contendrn nuestra web.
Podemos definir los estilos para determinadas etiquetas, como encabezados
(<h1>, <h2>...), prrafos (<p>), enlaces (<a>), etc... lo que formatear todas las
apariciones de esta etiqueta en el mbito del estilo.
Tambin podemos crear clases. Algo as como definir un estilo y darle un alias.
El estilo afectar a todos los elementos a los que apliquemos esa clase.
Por otro lado, al crear el estilo, podemos definirlo como un estilo en lnea
(afectar slo al elemento seleccionado) o crear una regla, que puede afectar a
toda la pgina, o a todo el sitio si la guardamos en un archivo CSS.
Un estilo CSS no es ms que un conjunto de reglas de formato que controlan el
aspecto del contenido de una pgina Web. Los estilos CSS aportan gran
flexibilidad y control al aspecto exacto que se busca en una pgina, desde la
posicin precisa de elementos hasta el diseo de fuentes y estilos concretos.
Una de las grandes ventajas de los estilos CSS reside en que cuentan con una
capacidad simple de actualizacin; cuando actualiza un estilo CSS, el formato
de todos los documentos que usan ese estilo se actualiza automticamente.
Imgenes
Insertar una imagen
Para insertar una imagen hay que dirigirse al men Insertar, a la opcin
Imagen. Despus de
esto, ya es posible
seleccionar una imagen
a travs de la nueva
ventana. Cuando te
acostumbres, te ser
ms cmodo acceder
con la combinacin de
teclas Ctrl + Alt + I.
En Relativa a es posible especificar si la imagen ser relativa al documento o a
la carpeta raz del sitio. Es preferible que sea relativa al Documento, ya que si
cambiamos la pgina de carpeta, lo habitual es cambiar tambin sus imgenes.
Lo mismo ocurre cuando se selecciona un documento para crear un vnculo.
La ruta en la que se encuentra la imagen aparecer representada de una u otra
forma en el campo URL de la ventana y en el campo Origen del inspector de
propiedades, dependiendo de si ha sido insertada como relativa a la carpeta
raz del sitio o relativa al documento.
Por ejemplo, imagina que dentro de la carpeta raz del sitio (la carpeta del sitio)
se encuentran la carpeta imagenes y el documento en el que deseamos
insertar la imagen. Dicha imagen, llamada unmsm.jpg, se encuentra dentro de
la carpeta imagenes.
Hipervinculos
Un hiperenlace, hipervnculo, o vnculo, no es ms que un enlace, que al dar
clic lleva de una pgina o archivo a otra pgina o archivo.
Es posible asignar un vnculo a un texto, a una imagen, o a parte de una
imagen.
Cuando creemos un enlace, lo que realmente haremos ser crear una etiqueta
<a></a> que es la que en HTML se encarga de definir los enlaces. Esto podr
observar en la barra de estado:
Tipos de referencia
Existen diferentes clases de rutas de acceso a la hora de definir los vnculos.
Estas referencias no se limitan a los enlaces, se comportarn igual cuando
indiquemos la ubicacin de una imagen, de un archivo Flash, de la hoja de
estilo, etc.
Referencia absoluta:
Conduce al sitio en el que se encuentra el documento utilizando la ruta
completa del archivo, incluyendo el protocolo http://.
Por ejemplo, http://www.unmsm.edu.pe, o
http://www.hinfo.edu.pe/pagina/pagina1.html.
La referencia absoluta es independiente de la ubicacin de la pgina que
contiene el enlace, y ser vlida siempre que no cambie la ubicacin del
archivo enlazado. Es la opcin obligatoria si pretendemos enlazar a archivos
fuera de nuestro sitio (enlaces externos).
Referencia relativa al documento (por defecto):
La ubicacin del archivo enlazado se toma en relacin con la ubicacin del la
pgina. Es decir, partimos de la carpeta en la que se encuentra el documento.
Si queremos enlazar con una pgina o archivo dentro de la misma carpeta, no
tenemos ms que utilizar su nombre. Por ejemplo, pagina2.htm.
Si est en una subcarpeta de la pgina actual, no tenemos ms que indicar el
nombre de la carpeta antes del archivo, y separarlos por una barra (/). Por
ejemplo imagenes/miimagen.gif.
Si queremos referirnos a carpetas que estn por encima del nivel donde nos
encontramos deberemos utilizar ../
Por ejemplo, imagina que estamos en la siguiente direccin
http://www.hinfo.edu.pe/pagina/informacion/index.html. En esta pgina
queremos mostrar una imagen que se encuentra en la carpeta
http://www.hinfo.edu.pe/pagina/secciones/seccion1.html, cmo podemos
hacerlo? Fcil. Deberemos llamarla haciendo referencia al nivel superior
(http://www.hinfo.edu.pe/pagina/) para poder ir luego a la carpeta secciones.
El resultado de la ruta sera el siguiente: ../secciones/seccion1.html.
De esta forma, mientras nos encontramos en la carpeta informacion, subimos
un nivel y luego nos movemos dentro de la carpeta secciones para mostrar el
archivo seccion1.html.
Esta opcin depende de la ubicacin del archivo, y pueden no funcionar
correctamente si alteramos la estructura de carpetas.
Esta es la opcin por defecto de Dreamweaver, y es la forma ms habitual.
Apndice
Formato de prrafos
As se escribe: As se ve:
<P>Este es un ejemplo de cmo se
formatean los prrafos en lenguaje HTML.
En esta celda de la Tabla se incluyen dos
prrafos</P>
<P>El resultado puede verse en la
celda vecina incluida en la columna de la
derecha</P>
Este es un ejemplo de cmo se
formatean los prrafos en lenguaje
HTML. En esta celda de la Tabla se
incluyen dos prrafos
El resultado puede verse en la celda
vecina incluida en la columna de la
derecha
<P>Los prrafos se separan con un espaciado
superior al correspondiente
a una nueva lnea. <BR>
Para tener un espaciado ms compacto
puede utilizarse el Line Break,
como en este ejemplo.</P>
Los prrafos se separan con un
espaciado superior al correspondiente
a una nueva lnea.
Para tener un espaciado ms
compacto puede utilizarse el Line
Break, como en este ejemplo.
<P>Lneas horizontales:</P>
<HR><HR WIDTH=80%><HR SIZE=4><HR
NOSHADE>
Lneas horizontales:
<P>Los prrafos pueden indentarse.
<BLOCKQUOTE>Block quote indenta un
prrafo. Se
deshace esta indentacin con el fin de la
TAG Block quote,</BLOCKQUOTE>
como se ve en el ejemplo.</P>
Los prrafos pueden indentarse.
Block quote indenta un prrafo.
Se deshace esta indentacin
con el fin de la TAG Block
quote,
como se ve en el ejemplo.
<PRE>La TAG Preformatted permite
respetar la forma
original
en que se ha
escrito el
texto.</PRE>
La TAG Preformatted permite
respetar la forma
original
en que se ha
escrito el texto.
<ADRESS>
<P>Escuela Superior de Ingenieros
Industriales
Escuela Superior de Ingenieros
Industriales
P Manuel de Lardizbal, 13
<P>P Manuel de Lardizbal, 13
<P>E-20009 San Sebastin
</ADRESS>
E-20009 San Sebastin
(Esto aparece al principio del documento, a
la izquierda)
Formato de texto
Una idea importante de HTML es la de definir lo que se desea hacer (resaltar una
palabra o un prrafo, utilizar un espaciado constante, etc.), pero no decir cmo se
desea hacerlo, dejando que esta funcin la realice el browser de acuerdo con sus
posibilidades. Por ejemplo, se le puede decir al browser que se quiere remarcar una
palabra sin decirle que la ponga en bold; de ordinario la remarcar ponindola en bold,
pero si el browser se est ejecutando en un microcomputador que no permite texto en
bold, el propio browser buscar una forma alternativa de remarcar esa palabra.
De todas formas, los autores quieren muchas veces determinar ms en concreto cmo
va a aparecer su texto en la pantalla del browser. Adems, cada vez es ms
infrecuente ejecutar un browser que no tenga las amplias posibilidades de formatear
texto de Mac o Windows. La consecuencia es que HTML se ha extendido y permite
tanto definir de modo general la funcin del texto como determinar en concreto el
formato con que se debe representar. A continuacin se muestran algunos ejemplos
de ambas formas de definir los formatos.
<FONT SIZE="+1" COLOR="red"
FACE="Arial">
Define tipo de letra, tamao y color a tu gusto
</FONT>
Define tipo de letra,
tamao y color a tu
gusto
<P>Una palabra o un fragmento de texto se
puede resaltar con el tag STRONG
o con el tag EM, que en la mayor
parte de los browsers se corresponden
con <STRONG>bold</STRONG> e
<EM>italic</EM></P>
Una palabra o un fragmento de texto
se puede resaltar con el tag STRONG
o con el tag EM, que en la mayor parte
de los browsers se corresponden
conbold e italic.
<P>En cualquier caso, tambin se
pueden utilizar los tags
<B>bold</B> (B) e <I>italic</I> (I).</P>
En cualquier caso, tambin se pueden
utilizar los tags bold (B) e italic (I).
<P>Para escribir con una <TT>letra de paso
constante (estilo teletipo)</TT> se emplea la
Tag TeleType</P>
Para escribir con una letra de paso
constante (estilo teletipo)se emplea la Tag
TeleType.
<P>Para que el texto
<BLINK>parpadee</BLINK>
se emplea la TAG Blink.</P>
Para que el texto parpadee se emplea
la Tag Blink.
<P>Ttulos:
<H1>1</H1><H2>2</H2><H3>3</H3>
<H4>4</H4><H5>5</H5><H6>6</H6></P>
Ttulos: 123456
<P>Alineados:</P>
<P ALIGN="LEFT">Izquierda</P>
<P ALIGN="RIGHT">Derecha</P>
<P ALIGN="CENTER">Centrado</P>
</P>
Alineados:
Izquierda
Derecha
Centrado
Otros efectos:
<P><U>subrayado</U>
<P><STRIKE>tachado</STRIKE>
<P><BIG>letra ms grande que el
estndar</BIG>
<P><SMALL>letra ms pequea que el
estndar</SMALL>
<P>Texto tipo<SUB>subndice</SUB>
<P>Texto tipo<SUP>superndice</SUP>
Otros efectos:
subrayado
tachado
letra ms grande que el estndar
letra ms pequea que el estndar
Texto tipo
subndice
Texto tipo
superndice
Tablas
Las tablas son uno de los elementos ms interesantes de HTML. Permiten, por
ejemplo, escribir texto en varias columnas, hacer listas de equivalencias, tablas
propiamente dichas, etc. Este documento es un ejemplo de las posibilidades ofrecidas
por las tablas.
<TABLE BORDER=1>
<TR><TD>celda (1,1)</TD><TD>celda
(1,2)</TD></TR>
(2,2)</TD></TR>
</TABLE>
celda (1,1) celda (1,2)
<CENTER><TABLE BORDER=1>
(1,2)</TD></TR>
(2,2)</TD></TR>
</TABLE></CENTER>
Listas con vietas
<P>Las listas no ordenadas:
<UL>
Las listas no ordenadas:
Van precedidas por "bullets"
<LI>Van precedidas por "bullets"
<LI>Se entiende que no importa el orden
<LI>Se utilizan con mucha frecuencia
</UL>
Se entiende que no importa el
orden
Se utilizan con mucha
frecuencia
Listas numeradas:
Las listas ordenadas:
<P>Las listas ordenadas:
<OL>
<LI>Van precedidas por nmeros
<LI>La numeracin es automtica
<LI>Son tambin muy utilizadas
</OL>
Las listas ordenadas:
1. Van precedidas por nmeros
2. La numeracin es automtica
3. Son tambin muy utilizadas
CARACTERES ESPECIALES
Durante todo este manual hemos hecho una pequea trampa a la hora de explicar las
directivas y poner ejemplos, para facilitar la comprensin de las ideas fundamentales
sobre HTML. Dicha trampa ha consistido en ocultar ciertas exigencias de HTML
respecto al uso de caracteres especiales, denominacin que, para nuestra desgracia
como hispanohablantes, incluye a las vocales acentuadas y a la letra ee. Existen
tambin ciertas limitaciones relativas al uso de ciertos smbolos que significan algo en
HTML, como el de menor que (<) o el signo ingls de and (llamado ampersand: &).
Trataremos primero el caso ms sencillo. Existe una razn evidente que impide que
podamos escribir ciertos smbolos directamente en un texto HTML, como por ejemplo
el <: dichos smbolos tienen un significado en HTML, y es necesario diferenciar
claramente cundo poseen ese significado y cundo queremos que aparezcan
literalmente en el documento final. Por ejemplo, como ya sabemos, < indica el
comienzo de una directiva, y, por ello, si queremos que aparezca en el texto como tal
tendremos que dar un rodeo escribiendo algo que no de lugar a confusin, en este
caso <. Los smbolos afectados por esta limitacin, y la forma de escribirlos, se
detallan a continuacin:
< (Menor que): <
> (Mayor que): >
& (smbolo de and, o ampersand): &
" (comillas dobles): "
Es decir, que para escribir <"> en nuestro texto HTML original debemos
poner <">.
El otro caso especial se da cuando en un texto HTML se quiere escribir una ee, por
ejemplo. Existen dos formas de hacerlo. La primera, que es a la que obliga el estndar
de HTML, consiste en utilizar entidades, es decir, palabrejas como las que antes se
presentaron para escribir ciertos smbolos. Las entidades comienzan siempre con el
smbolo &, y terminan con un punto y coma (;). Entre medias va un identificador del
carcter que queremos que se escriba. Las entidades necesarias en nuestro idioma
son:
: á
: é
: í
: ó
: ú
: Á
: É
: Í
: Ó
: Ú
: ü
: Ü
: ñ
: Ñ
: ¿
: ¡
Como puede verse, las vocales acentuadas se identifican aadiendo el sufijo acute a
la vocal sin acentuar (puesto que se trata de un acento agudo). Para la u con diresis
y la ee se usan uml tras una u y tilde detrs una ene, respectivamente. La
equivalencia de los signos de abrir interrogacin y exclamacin es algo ms oscura: a
falta de una denominacin ms evidente, tenemos que usar el valor numrico de
dichos caracteres en el cdigo estndar latin1 (ISO-8859-1). Esto se puede hacer con
cualquier otro carcter del cdigo latin1, que es el cdigo de caracteres bsico en
HTML, escribiendo &#numero;

Nuevas Tecnologias

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Nuevas Tecnologias

Hochgeladen von

Copyright:

Verfügbare Formate

Uso de Nuevas

Das könnte Ihnen auch gefallen