chamba_

ENSAYO
Diseño de páginas web
29/04/2014
Humberto Curiel Ramos, Fernando Ramos Salinas, Giovanni Calva Fernández, Ernesto Corella
López
Conalep Pachuca 2
Introducción
En el siguiente trabajo se mostrara que herramientas y conocimientos se
necesitan para poder realizar una página web, utilizando diversos software como:

Dream weaver

Photo shop

Google chrome

Bloc de notas
Así como distintas habilidades como lo es:
 Programar
 Diseñar
 Editar
Y el conocimiento del lenguaje HTML para poder facilitar el diseño de la página
web deseada. También se podrá diseñar la página en bloc de notas por medio del
lenguaje de HTML y después podrás exportarlo a Dream Weaver.
¿Qué es el lenguaje HTML?
Hace referencia al lenguaje de marcado para la elaboración de páginas web. Es
un estándar que sirve de referencia para la elaboración de páginas web en sus
diferentes versiones, define una estructura básica y un código (denominado código
HTML) para la definición de contenido de una página web, como texto, imágenes,
etc. Es un estándar a cargo de la W3C, organización dedicada a la
estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo
referente a su escritura e interpretación. Es el lenguaje con el que se definen las
páginas web.
El uso de servidores libres se mostrara como:

Buscar un servidor libre

Como usarlo

Configuración

Subir tu página a la web
Se mostraran diversas páginas que proporcionan servidores libres para poder
subir la página creada a la web.
Y por último la finalidad es crear un video tutorial sobre lo aprendido sobre el
diseño de páginas web el cual se necesitará el software y hardware siguiente:

Webcam

Micrófono

Camtasia studio / Sony vegas
Objetivos Generales
Nuestro Objetivo es la creación de páginas web en lenguaje HTML con distintos
Software y Complementos como

Java

Flash
Y la compresión absoluta sobre cómo manejar el lenguaje HTML con los distintos
Software Mencionados

Dream Weaver

Java

Flash

Bloc de notas
Tal explicación ira de la mano con los siguientes elementos:
En Dream Weaver se pueden utilizar los siguientes lenguajes de programación
para la elaboración de una página web
HTML
Es el lenguaje de marcas de texto utilizado normalmente en la www (World Wide
Web). Fue creado en 1986 por el físico nuclear Tim Berners-Lee; el cual tomo
dos herramientas preexistentes: El concepto de Hipertexto (Conocido también
como link o ancla) el cual permite conectar dos elementos entre si y el SGML
(Lenguaje Estándar de Marcación General) el cual sirve para colocar etiquetas o
marcas en un texto que indique como debe verse. HTML no es propiamente un
lenguaje de programación como C++, Visual Basic, etc., sino un sistema de
etiquetas. HTML no presenta ningún compilador, por lo tanto algún error de
sintaxis que se presente éste no lo detectará y se visualizara en la forma como
éste lo entienda.
El entorno para trabajar HTML es simplemente un procesador de texto, como el
que ofrecen los sistemas operativos Windows (Bloc de notas), UNIX (el editor vi o
ed) o el que ofrece MS Office (Word). El conjunto de etiquetas que se creen, se
deben guardar con la extensión .htm o .HTML Estos documentos pueden ser
mostrados por los visores o "browsers" de páginas Web en Internet, como
Netscape Navegador, Mosaico, Opera y Microsoft Internet Explorer. También
existe el HTML Dinámico (DHTML), que es una mejora de Microsoft de la versión
4.0 de HTML que le permite crear efectos especiales como, por ejemplo, texto que
vuela desde la página palabra por palabra o efectos de transición al estilo de
anuncio publicitario giratorio entre página y página. A continuación vamos a hablar
un poco de historia:
PHP
(Hypertext Preprocesador PHP es un lenguaje de programación de uso
general de código
del
lado
del
servidor
originalmente
diseñado
para
el desarrollo web de contenido dinámico. Fue uno de los primeros lenguajes de
programación del lado del servidor que se podían incorporar directamente en el
documento HTML en lugar de llamar a un archivo externo que procese los
datos. El código es interpretado por un servidor web con un módulo de
procesador de PHP que genera la página Web resultante. PHP ha
evolucionado por lo que ahora incluye también una interfaz de línea de
comandos que puede ser usada en aplicaciones gráficas independientes.
Puede ser usado en la mayoría de los servidores web al igual que en casi
todos los sistemas operativos y plataformas sin ningún costo.
PHP también tiene la capacidad de ser ejecutado en la mayoría de
los sistemas operativos, tales como Unix (y de ese tipo, como Linux o Mac OS
X) y Microsoft Windows, y puede interactuar con los servidores de web más
populares ya que existe en versión CGI, módulo para Apache, e ISAPI.
Cold fussion
Es un servidor de aplicaciones y un lenguaje de programación usado para
desarrollar
aplicaciones
generados dinámicamente.
de Internet,
En
este
generalmente
aspecto,
es
un
sitios
web
producto
similar
a ASP, JSP o PHP. ColdFusion es una herramienta que corre en forma
concurrente con la mayoría de los servidores web de Windows, Mac OS
X, Linux y Solaris (también en servidores web personales en Windows 98 y puede
ser usado para intranets). El servidor de aplicaciones web de ColdFusion trabaja
con el servidor HTTP para procesar peticiones de páginas web. Cada vez que se
solicita una página de ColdFusion, el servidor de aplicaciones ColdFusion ejecuta
el guion o programa contenido en la página. Es un lenguaje de programación,
puede crear y modificar variables igual que en otros lenguajes de programación
que nos son familiares. Posee control de flujo de programas, como IF, Case, ciclo,
etc. Tiene muchas funciones built-in para realizar tareas más complicadas, por
ejemplo: para averiguar qué día de la semana
Java script
Es un lenguaje de programación interpretado, dialecto del estándar ECMAScript.
Se define como orientado a objetos,3 prototipos, imperativo, débilmente
y
dinámico.
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 páginas web dinámicas4aunque existe una forma de JavaScript
del lado
del
servidor (Server-si
de
JavaScript o SSJS).
Su
uso
en aplicaciones externas a la web, por ejemplo en documentos PDF, aplicaciones
de escritorio (mayoritariamente widgets) es también significativo.
JavaScript se diseñó con una sintaxis similar al C, aunque adopta nombres y
convenciones del lenguaje de programación Java. Sin embargo Java y JavaScript
no están relacionados y tienen semánticas y propósitos diferentes.
Todos los navegadores modernos interpretan el código JavaScript integrado en las
páginas web. Para interactuar con una página web se provee al lenguaje
JavaScript de una implementación del Documento Objeto Model (DOM).
Tradicionalmente se venía utilizando en páginas web HTML para realizar
operaciones y únicamente en el marco de la aplicación cliente, sin acceso a
funciones del servidor. JavaScript se interpreta en el agente de usuario, al mismo
tiempo que las sentencias van descargándose junto con el código HTML.
Una cuarta edición está en desarrollo e incluirá nuevas características tales como
paquetes, espacio de nombres y definición explícita de clases
Una página web dinámica es aquella que incorpora efectos como texto que
aparece y desaparece, animaciones, acciones que se activan al pulsar botones y
ventanas con mensajes de aviso al usuario.
XML
Es un lenguaje de marcas desarrollado por el Word (W3C) utilizado para
almacenar datos en forma legible. Deriva del lenguaje SGML y permite definir la
gramática de lenguajes específicos (de la misma manera que HTML es a su vez
un lenguaje definido por SGML) para estructurar documentos grandes. A
diferencia de otros lenguajes, XML da soporte a bases de datos, siendo útil
cuando varias aplicaciones se deben comunicar entre sí o integrar información.
(Bases de datos Silberschatz).
XML no ha nacido sólo para su aplicación para Internet, sino que se propone como
un estándar para el intercambio de información estructurada entre diferentes
plataformas. Se puede usar en bases de datos, editores de texto, hojas de cálculo
y casi cualquier cosa imaginable.
XML es una tecnología sencilla que tiene a su alrededor otras que la
complementan y la hacen mucho más grande y con unas posibilidades mucho
mayores. Tiene un papel muy importante en la actualidad ya que permite la
compatibilidad entre sistemas para compartir la información de una manera
segura, fiable y fácil.
Es una tecnología sencilla que tiene a su alrededor otras que la complementan y
la hacen mucho más grande y con unas posibilidades mucho mayores. Tiene un
papel muy importante en la actualidad ya que permite la compatibilidad entre
sistemas para compartir la información de una manera segura, fiable y fácil.
Asp VBScript
VBScript (abreviatura de Visual Basic Script Edition) es un lenguaje
interpretado por el Windows Scripting Host de Microsoft. Su sintaxis refleja su
origen como variación del lenguaje de programación Visual Basic. Ha logrado
un apoyo significativo por parte de los administradores de Windows como
herramienta de automatización, ya que, conjunta y paralelamente a las mejoras
introducidas
en
los
sistemas
operativos
Windows
donde
opera
fundamentalmente, permite más margen de actuación y flexibilidad que el
lenguaje batch (o de proceso por lotes) desarrollado a finales de los años 1970
para el MS-DOS
Css
Hojas de Estilo en Cascada (Cascading Style Sheets) es el lenguaje de hojas
de estilo utilizado para describir el aspecto y el formato de un documento
escrito en un lenguaje de marcas, esto incluye varios lenguajes basados en
XML como son XHTML o SVG.
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
generales en la cabecera del documento o en cada etiqueta particular
mediante el atributo "<style>".
Las especificaciones de CSS son mantenidos por el Consorcio World Wide
Web (W3C). Tipo de medio de Internet (tipo MIME) text/css está registrado
para su uso con CSS por RFC 2318 (marzo de 1998), y también opera un libre
servicio de validación de CSS .
A continuación se explica el motivo principal de Dream Weaver:
Adobe Dream Weaver es una aplicación en forma de estudio (basada en la forma
de estudio de adobe flash) que está destinada a la construcción, diseño y edición
de sitios, vídeos y aplicaciones web basados en estándares. Creado inicialmente
por Macromedia (actualmente producido)
Dream Weaver será nuestro principal programa que se utilizara en dicha
explicación de cómo elaborar una página web ya que tanto sus elementos como
sus componentes son muy fáciles de utilizar para aquellos usuarios que sea su
primer contacto con el tema de elaboración de páginas web.
En general este objetivo que nos hemos propuesto ira de la mano con los
objetivos específicos ya que dichos objetivos irán más explicados con los detalles
necesarios para la perfecta obtención de un manual para el desarrollo de páginas
web
OBJETIVOS ESPECIFICOS

Obtener el software ya sea original o craqueado

instalar complementos para el mejor rendimiento de los software

tener una pc

acceso a internet

promover tutoriales o manuales
promoverlos en diversas páginas y redes sociales
Para esto necesitamos saber cómo funcionan nuestros softwares:

Dream_Weaver:
Las funciones de edición visual de Dreamweaver permiten crear páginas
Web de forma rápida, sin escribir una sola línea de código. Puede ver todos
los elementos o activos del sitio y arrastrarlos desde un panel fácil de usar
directamente hasta un documento. Dreamweaver también contiene
herramientas que facilitan la adición de activos de Flash a las páginas web.
Además de las funciones de arrastrar y soltar que le ayudan a crear
páginas web, Dreamweaver le ofrece un entorno de codificación con todas
las funciones, que incluye herramientas para la edición de código (tales
como coloreado de código, terminación automática de etiquetas, barra de
herramientas para codificación y contracción de código) y material de
referencia para lenguajes sobre hojas de estilos en cascada (CSS),
JavaScript y ColdFusion Markup Language (CFML) entre otros. La
tecnología Roundtrip HTML de Macromedia importa los documentos con
código manual HTML sin modificar el formato del código. Posteriormente, si
lo desea, puede formatear el código con el estilo que prefiera.
Además, Dreamweaver le permite crear aplicaciones Web dinámicas
basadas en bases de datos empleando tecnologías de servidor como
CFML, ASP.NET, ASP, JSP y PHP. Si prefiere trabajar con datos en XML,
Dreamweaver incorpora herramientas que le permiten crear fácilmente
páginas XSLT, adjuntar archivos XML y mostrar datos XML en sus
páginas.
Dreamweaver se puede personalizar totalmente. Puede crear sus propios
objetos y comandos, modificar métodos abreviados de teclado e incluso
escribir código JavaScript para ampliar las posibilidades que ofrece
Dreamweaver con nuevos comportamientos, inspectores de propiedades e
informes de sitios.
CONTENIDO
La herramienta de diseño de páginas web es Dream Weaver el cual es aplicación
en forma de estudio (basada en la forma de Adobe Flash) enfocada a la
construcción y edición de sitios (páginas de internet página web es un
documento HTML/XHTML que
es
accesible
generalmente
mediante
el
protocoló HTTP de Internet.
Todos los sitios web públicamente accesibles constituyen una gigantesca World
Wide Web de información (un gigantesco entramado de recursos de alcance
mundial).
A las páginas de un sitio web se accede frecuentemente a través de un URL raíz
común llamado portada, que normalmente reside en el mismo servidor físico. Los
URL organizan las páginas en una jerarquía, aunque los hiperenlaces entre ellas
controlan más particularmente cómo el lector percibe la estructura general y cómo
el tráfico web fluye entre las diferentes partes de los sitios.
Algunos sitios web requieren una subscripción para acceder a algunos o todos sus
contenidos. Ejemplos de sitios con subscripción incluyen algunos sitios de noticias,
sitios de juegos, foros, servicios de correo electrónico basados en web, sitios que
proporcionan datos de bolsa de valores e información económica en tiempo real,
etc.y aplicaciones Web basados en estándares. Creado inicialmente por
Macromedia (actualmente producido por Adobe Systems). Es el programa de este
tipo más utilizado en el sector del diseño y la programación web, por sus
funcionalidades, su integración con otras herramientas como Adobe Flash (Adobe
Flash Professional es el nombre o marca comercial oficial que recibe uno de los
programas más famosos de la casa Adobe, junto con sus hermanos Adobe
Illustrator y Adobe Photoshop. Se trata de una aplicación de creación y
manipulación de gráficos vectoriales con posibilidades de manejo de código
mediante un lenguaje de scripting llamado ActionScript. Flash es un estudio de
animación que trabaja sobre "fotogramas" y está destinado a la producción y
entrega de contenido interactivo para diferentes audiencias de todo el mundo sin
importar la plataforma. Es actualmente desarrollado y comercializado por Adobe
Systems Incorporated y forma parte de la familia Adobe Creative Suite, su
distribución viene en diferentes presentaciones, que van desde su forma individual
o como parte de un paquete, siendo éstos: Adobe Creative Suite Design Premium,
Adobe Creative Suite Web Premium y Web Standard, Adobe Creative Suite
Production Studio Premium y Adobe Creative Suite Master Collection. Se usa
sobre animaciones publicitarias, reproducción de vídeos (como YouTube) y otros
medios interactivos que se presentan en la mayoría de sitios web del mundo, lo
que le ha dado fama a este programa, dándoles el nombre de "animaciones Flash"
a los contenidos creados con éste.)
Y, recientemente, por su soporte de los estándares del World Wide Web
Consortium. Su principal competidor es Microsoft Expression Web y tiene soporte
tanto para edición de imágenes (La edición digital de imágenes se ocupa de la
edición apoyada en computadores de imágenes digitales, comúnmente un
Gráfico rasterizado, en la mayoría de los casos fotos o documentos escaneados.
Estas imágenes son modificadas para optimizarlas, manipularlas, retocarlas, etc.
con el fin de alcanzar la meta deseada.)

Como para animación a través de su integración con otras. Hasta la
versión MX, fue duramente criticado por su escaso soporte de los
estándares de la web, ya que el código

(Código binario, código fundamental en el que se basan los
ordenadores, el más simple pues solo consta de dos elementos (0) y (1)
que combinados de distintas maneras como impulsos eléctricos ponen
las bases para la informática (véase codificación digital).

Código fuente, en programación, el texto escrito en un lenguaje de
programación que ha de ser compilado o interpretado para ejecutarse
en una computadora.

Código libre, en programación, es el software cuyo contenido puede ser
utilizado_libremente.

Código objeto, en programación, es el código que resulta de la
compilación del código fuente.)
Que generaba era con frecuencia sólo válido para Internet Explorer, y no validaba
como HTML estándar. Esto se ha ido corrigiendo en las versiones recientes.
Dreamweaver permite al usuario utilizar la mayoría de los navegadores
(navegador o navegador web, o browser), es un software que permite el acceso
a Internet, interpretando la información de archivos y sitios web para que éstos
puedan ser leídos.
La funcionalidad básica de un navegador web es permitir la visualización de
documentos de texto, posiblemente con recursos multimedia incrustados. Además,
permite visitar páginas web y hacer actividades en ella, es decir, podemos enlazar
un sitio con otro, imprimir, enviar y recibir correo, entre otras funcionalidades más.
Los documentos que se muestran en un browser pueden estar ubicados en la
computadora en donde está el usuario, pero también pueden estar en cualquier
otro dispositivo que esté conectado en la computadora del usuario o a través de
Internet, y que tenga los recursos necesarios para la transmisión de los
documentos (un software servidor web).
Web instalados en su ordenador para pre visualizar las páginas web. También
dispone de herramientas de administración de sitios dirigidas a principiantes como,
por ejemplo, la habilidad de encontrar y reemplazar líneas de texto y código (por
cualquier tipo de parámetro especificado, hasta el sitio web completo. El panel de
comportamientos también permite crear JavaScript básico sin conocimientos de
código (JavaScript se diseñó con una sintaxis similar al c, aunque adopta nombres
y convenciones del lenguaje de programación. Sin embargo java y JavaScript no
están relacionados y tienen semánticas y propósitos diferentes.
Todos los navegadores modernos interpretan el código JavaScript integrado en las
páginas web. Para interactuar con una página web se provee al lenguaje
JavaScript de una implementación del document model (DOM).
Tradicionalmente se venía utilizando en páginas web HTML para realizar
operaciones y únicamente en el marco de la aplicación sin acceso a funciones del
servidor. JavaScript se interpreta en el agente, al mismo tiempo que las sentencias
van descargándose junto con el código HTML.)
La gran ventaja de este editor sobre otros es su gran poder de ampliación y
personalización del mismo, puesto que en este programa, sus rutinas (como la de
insertar un hipervínculo, una imagen o añadir un comportamiento) están hechas
en JavaScript-C, lo que le ofrece una gran flexibilidad en estas materias. Esto
hace que los archivos del programa no sean instrucciones de C++ sino, rutinas de
JavaScript que hace que sea un programa muy fluido, que todo ello hace, que
programadores y editores web hagan extensiones para su programa y lo ponga a
su gusto.
Trucos para crear tú página web
<!-- inicio de head-->
<script>
mesk=new
Array();mesk[10]="A";mesk[11]="B";mesk[12]="C";mesk[13]="D";mesk[14]="E";mes
k[15]="F";A=10;B=11;C=12;D=13;E=14;F=15;let="ABCDEF";function
mes(num){if(let.indexOf(num) != -1){return eval(num)};else{if(num
< 10){return eval(num)};else{return mesk[num]}}};
function color(begin,einde,stappen,stap){
hh1=(mes(begin.charAt(0))*16)+mes(begin.charAt(1));
hh2=(mes(begin.charAt(2))*16)+mes(begin.charAt(3));
hh3=(mes(begin.charAt(4))*16)+mes(begin.charAt(5));
pp1=(mes(einde.charAt(0))*16)+mes(einde.charAt(1));
pp2=(mes(einde.charAt(2))*16)+mes(einde.charAt(3));
pp3=(mes(einde.charAt(4))*16)+mes(einde.charAt(5));
if(hh1 < pp1){ff1=hh1+Math.floor((pp1-hh1)/stappen*stap);
ff1=eval("\'"+mes(Math.floor(ff1/16))+"\'")+eval("\'"+mes(ff1(Math.floor(ff1/16)*16))+"\'");}
;else{ff1=hh1-Math.floor((hh1-pp1)/stappen*stap);
ff1=eval("\'"+mes(Math.floor(ff1/16))+"\'")+eval("\'"+mes(ff1(Math.floor(ff1/16)*16))+"\'");}
if(hh2 < pp2){ff2=hh2+Math.floor((pp2-hh2)/stappen*stap);
ff2=eval("\'"+mes(Math.floor(ff2/16))+"\'")+eval("\'"+mes(ff2(Math.floor(ff2/16)*16))+"\'");}
;else{ff2=hh2-Math.floor((hh2-pp2)/stappen*stap);
ff2=eval("\'"+mes(Math.floor(ff2/16))+"\'")+eval("\'"+mes(ff2(Math.floor(ff2/16)*16))+"\'");}
if(hh3 < pp3){ff3=hh3+Math.floor((pp3-hh3)/stappen*stap);
ff3=eval("\'"+mes(Math.floor(ff3/16))+"\'")+eval("\'"+mes(ff3(Math.floor(ff3/16)*16))+"\'");}
;else{ff3=hh3-Math.floor((hh3-pp3)/stappen*stap);
ff3=eval("\'"+mes(Math.floor(ff3/16))+"\'")+eval("\'"+mes(ff3(Math.floor(ff3/16)*16))+"\'");}
;return ff1+ff2+ff3}
bum=0;bum2=0;txt=new Array();txt[0]="";function lightf(){
for(i=0;i !=
Math.floor(message.length/2);i++){txt[i]=color(lightcolor1,lightcolor2,Math.floor(mes
sage.length/2),i)};
for(i=Math.floor(message.length/2);i !=
message.length;i++){txt[i]=color(lightcolor2,lightcolor1,Math.floor(message.length/2
),(i-Math.floor(message.length/2)))};
lightf1()}
function
lightf1(){txt[message.length+1]="";bum2=message.length-bum;for(i=0;i !=
message.length;i++){if(i+bum
< message.length){txt[message.length+1]=txt[message.length+1]+"<font
color='#"+txt[(i+bum)]+"'>"+message.charAt(i)+"</font>"};else{txt[message.length+
1]=txt[message.length+1]+"<font color='#"+txt[ibum2]+"'>"+message.charAt(i)+"</font>"
}};if(bum !=
message.length){bum++;};else{bum=0};light.innerHTML=txt[message.length+1];set
Timeout("lightf1()",50)}
</script>
</head>
<body bgcolor="#FFFFFF" background="globulos.jpg">
<!--inicio del body -->
<center><h1><div id="light"></div></h1>
<script>
lightcolor1="FF0000" // color
lightcolor2="33CC66" // color
message="Título que cambia de colores" // introduce el texto
lightf()
</script></center>
<!--fin del body -->
Insertar un sonido o música de fondo:
Si quieren que los visitantes escuchen una canción mientras visitan la Web, o
simplemente recibirlos con una melodía estilo presentación, este es el código que
estabas buscando. Solo tenés que guardar el sonido en el directorio raíz de tu
servidor e insertar el siguiente código html:
<BGSOUND SRC="sonido.mid" LOOP=none>
<WIDTH=200 HEIGHT=55 AUTOSTART="true" LOOP="false" HIDDEN="true">
Se recomienda usar sonidos en formato "midi" que son los de menor peso.
Comentario sobre un link en la barra
de estado:
Al pasar el mouse sobre el link deseado, veremos en la barra de estado un
comentario sobre éste. Por ejemplo posicionen el mouse sobre Pauluk
Computación y vean en la barra de estado. (para verlo bien en ésta página pasen
el mouse varias veces, ya que hay otro código parecido que lo obstruye).
<a href="http://www.CheNico.com"
onmouseout="window.status=''"
onmouseover="window.status='Acá aparece el mensaje que quieras';return true">
Pauluk Computación</a>
Establecer una página como inicio:
Este código html te sirve para crear un link para que el visitante pueda hacer que
tu página sea la de inicio de su computadora. Con solo hacer clic sobre el link
creado, tu página se iniciará automáticamente cada vez que esa persona se
conecte a Internet.
<A class=chlnk style="FONT-WEIGHT: bold; CURSOR: hand;
COLOR: #004080; FONT-FAMILY: Verdana" onclick=
"this.style.behavior='url(#default#homepage)';
this.setHomePage('http://www.CheNico.com');">
<FONT face=Arial color=#000000 size=-2><U>
Establecer como página de inicio</U></FONT></A>
Otra barra con más colores:
A continuación veremos otro código para ponerle color a la barra de
desplazamiento, en este caso vamos a poder personalizar los colores de la barra,
del fondo y los bordes. Reemplazar los nombres de los colores por otros o por los
código de letras y números. Mas abajo está la tabla de colores.
<style>
<!-body { scrollbar-face-color: darkgreen ;
scrollbar-shadow-color: yellow;
scrollbar-highlight-color: violet;
scrollbar-3dlight-color: navy;
scrollbar-darkshadow-color: magenta;
scrollbar-track-color: blue;
scrollbar-arrow-color: black }
-->
</style>
Hora y texto en la barra de estado:
Con este truco, podemos hacer que aparezca en la barra de estado la hora de la
PC que entra a nuestra Web y poner el texto que queramos.
<script language="JavaScript">
<!-mensaje=" |======| www.CheNico.com "
function hora() {
var h = new Date();
window.status="|======| "
+ h.getHours() +":"+ h.getMinutes() +"" +mensaje ;
window.setTimeout('hora()',100);
}
hora()
//-->
</script>
Texto que sigue al mouse:
Hace que un texto cualquiera siga al mouse del visitante en tu página. Es un
efecto fabuloso y fácil de incluir en las páginas
Incluye el siguiente código en tu página HTML:
<style>
.animado {position:absolute;visibility:visible;top:-50px;font-size:10pt;fontfamily:Arial;font-weight:bold;color:black;}
</style>
<script language=JavaScript>
var x,y
var tempo=10
var espera=0
var texto="www.CheNico.com"
texto=texto.split("")
var xpos=new Array()
for (i=0;i<=texto.length-1;i++) {
xpos[i]=-50
}
var ypos=new Array()
for (i=0;i<=texto.length-1;i++) {
ypos[i]=-50
}
function seguir(e){
x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
espera=1
}
function animar_cursor() {
if (espera==1 && document.all) {
for (i=texto.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+tempo
ypos[i]=ypos[i-1]
}
xpos[0]=x+tempo
ypos[0]=y
for (i=0; i<texto.length-1; i++) {
var camada = eval("span"+(i)+".style")
camada.posLeft=xpos[i]
camada.posTop=ypos[i]
}
}
else if (espera==1 && document.layers) {
for (i=texto.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+tempo
ypos[i]=ypos[i-1]
}
xpos[0]=x+tempo
ypos[0]=y
for (i=0; i<texto.length-1; i++) {
var camada = eval("document.span"+i)
camada.left=xpos[i]
camada.top=ypos[i]
}
}
var timer=setTimeout("animar_cursor()",30)
}
</script>
<script Language=JavaScript>
for (i=0;i<=texto.length-1;i++) {
document.write("<span id='span"+i+"' class='animado'>")
document.write(texto[i])
document.write("</span>")
}
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = seguir;
animar_cursor()
</script>
Página protegida por clave:
Este es un excelente recurso. Podés proteger tus páginas con una clave. Así
podés definir exactamente quienes entrarán a tu página. No tenés que
preocuparte por configuraciones. Es muy sencillo: la clave siempre será el nombre
de tu página sin la extensión .htm, es decir, si la página tiene el nombre de
"ejemplo.htm", la clave será "ejemplo". ¿Ves que fácil?.
Para tener este recurso en tu sitio debes incluir un código en la página de
"entrada" en donde el visitante ingresará la clave, y enviar a tu sitio el archivo de la
página que será cargada.
<Form name="frm">
<center>
<Script Language="JavaScript">
<!-//
function loadpage(){
var psj=0;
newwin = window.open(document.frm.pswd.value + ".htm")
}
//-->
</script>
Ingresa tu clave:
<input
type="password" name="pswd" size="20">
</center>
<center>
<p>
<input type="button" value="Entra"
onClick="loadpage()" name="button">
Cambiar el color de la barra de
desplazamiento:
Con éste código van a conseguir cambiar el clásico color gris de la barra de
desplazamiento de la derecha y abajo por el color que quieran. Para cambiar de
colores, cambien el número 000000 por otros, cada color tiene su número, pero la
lista es muy larga, así que prueben con los número que ya van a encontrar el
deseado.
<style>
<!-BODY { scrollbar-base-color : #000000;
scrollbar-arrow-color : #FFFFFF; }
.nav {
color : #FFCC00;
font-size : 8pt;}
-->
</style>
Mensaje de bienvenida:
Con este recurso personalizas tu sitio para el visitante. Al entrar, el visitante verá
un espacio para ingresar su nombre y un mensaje que dice "Hola, Fulano".
Copiá el siguiente código y pégalo donde quieras que aparezca el mensaje:
<Script language="JavaScript">
mensagem = prompt("Por favor, ingresa tu nombre",'');
if (mensagem==null) {
document.write("¡Hola, visitante!")
}else{
if (mensagem=='') {
document.write("<b><font face=arial size=2 color=#000000>¡Hola,
visitante!</font></b>")
}else{
document.write("<b><font face=arial size=2 color=#000000>¡Hola"+mensagem+"!
Bienvenido a mi sitio</font></b>");
}
}
</script>
Atrás y Adelante:
Atrás:
<a href="javascript:history.go(-1)">Atrás </a>
Adelante:
<a href="javascript:history.go(1)">Adelante</a>
Barra de estado fija:
Podés colocar la palabra o el mensaje que quieras en la barra de estado de tu sitio
y mantenerlo fijo. De esta forma tu sitio quedará mucho más personalizado,
además de contar con otras ventajas. Por ejemplo: el visitante no verá la dirección
del enlace al que está apuntando, sólo el mensaje definido por vos.
<Script language="JavaScript">
statuss();
function statuss()
{
window.status = "www.pauluk.8k.com - Un Sitio. Muchas Opciones.";
setTimeout("statuss()", 1);
}
</script>
Saludo al visitante:
Puedes poner en tu sitio un mensaje personalizado según la hora en que el
visitante entre. Este puede recibir el saludo "Buen día", "Buenas tardes", "Buenas
noches", o puedes sustituirlos por otros mensajes de tu preferencia. De esta forma
el visitante verá el mensaje de acuerdo con el horario que entre a tu página.
<Font size=2 face=arial><b>
<Script Language="JavaScript">
<!-today = new Date()
if(today.getMinutes() < 10){
pad = "0"}
else
pad = "";
document.write ;if((today.getHours() >=6) && (today.getHours() <=9)){
document.write("¡Buen día!")
}
if((today.getHours() >=10) && (today.getHours() <=11)){
document.write("¡Buen día!")
}
if((today.getHours() >=12) && (today.getHours() <=19)){
document.write("¡Buenas tardes!")
}
if((today.getHours() >=20) && (today.getHours() <=23)){
document.write("¡Buenas noches!")
}
if((today.getHours() >=0) && (today.getHours() <=3)){
document.write("¡Buenas noches!")
}
if((today.getHours() >=4) && (today.getHours() <=5)){
document.write("¡Buenas noches!")
}
// -->
</script>
</b></font>
Texto animado:
Con este recurso puedes hacer que cualquier texto tenga movimiento en tu
página. Es ideal para destacar tu logo o lo que vos prefieras.
<script language="JavaScript">
<!-done = 0;
step = 4
function anim(yp,yk)
{
if(document.layers) document.layers["texto"].top=yp;
else document.all["texto"].style.top=yp;
if(yp>yk) step = -4
if(yp<60) step = 4
setTimeout('anim('+(yp+step)+','+yk+')', 35);
}
function start()
{
if(done) return
done = 1;
if(navigator.appName=="Netscape") {
document.texto.left=innerWidth/2 - 145;
anim(60,innerHeight - 60)
}
else {
texto.style.left=11;
anim(60,document.body.offsetHeight - 60)
}
}
// --></script>
<div id="texto" style="position: absolute; top: -50; color: #FF8000; font-family: Arial,
Helvetica; font-weight:bold; font-size:40px;">
<p><font face="Arial, Helvetica, sans-serif" size="3"><b><font size="6"
color="#990000">INGRESA TU TEXTO AQUI</font></b></font></p>
</div>
<script language="JavaScript">
<!-setTimeout('start()',10);
//-->
</script
Efectos de transición especiales:
Estos efectos de transición son especiales porque con ellos tu página tendrá una
apertura muy original, pero sólo funcionarán con Internet Explorer. No tendrás
problemas para utilizar este recurso, ya que los usuarios de otros navegadores no
verán errores y la página se cargará normalmente.
Ingresa el código debajo de la etiqueta <body> de tu página.
<script language=javaScript>
var n = 15
fadeIn();
function fadeIn(){
var num=new
Array("FFFFFF","FFCC00","2","3","4","5","6","7","8","9","a","b","c","d","e","f","g")
for (var i=0; i<=n; i++){
for (var j=0; j<= n; j++){
color=num[i]+num[j]+num[i]+num[j]+num[i]+num[j]
document.bgColor=color
}}
document.bgColor="#FFFFFF"
}
</script>
Barra de estado animada:
Podes darle movimiento a la barra de estado del navegador del visitante en tu
sitio. Es un efecto fabuloso que te permite destacar lo que desees.
Copia el siguiente código y pégalo en tus páginas debajo de la etiqueta <Body>.
<script language="JavaScript">
tempo = 10;
chars = 5;
texto = "-- Ingresa el texto aquí --";
wtexto = new Array(33);
wtexto[0] = texto;
blnk = " ";//Mantén estos espacios
for (i = 1; i < 32; i++) {
b = blnk.substring(0, i);
wtexto[i] = "";
for (j = 0; j < texto.length; j++) wtexto[i] = wtexto[i] + texto.charAt(j) + b;
}
function animastatus() {
if (chars > -1) str = wtexto[chars];
else str = wtexto[0];
if (chars-- < -40) chars = 31;
status = str;
clearTimeout(tempo);
tempo = setTimeout("animastatus()", 150);
}
animastatus()
</script>
Detectar el navegador:
Esto sirve para comprobar el navegador que se está usando, por si queremos
crear una página para Netscape y otra para Internet Explorer:
<script language="JavaScript">
<!-function esIE30(){
var browserType=navigator.userAgent;
if (browserType.indexOf("MSIE")==-1)
return false;
else
return true;
}
<!-- Cargar la página según el explorador -->
function cargar(){
if (esIE30())
window.location.href="indice_ie.htm";
else
window.location.href="indice_netscape.htm";
}
//-->
</script>
Cambiar el contenido de una página
cada "x" segundos:
O
mejor
dicho,
cargar
otra
página
después
de
"x"
segundos.
Este comando debe estar en el bloque <HEAD>...</HEAD>
<HEAD>
<!-- otras cosas -->
<META http-equiv="refresh" content="segundos; url=siguiente_pagina.htm">
<!--y algunas mas -->
</HEAD>
Conclusión:
En general en este trabajo se pudo observar el uso de páginas web desde lo más
básico para aquellos usuarios que aun van a empezar a utilizar este tipo de
herramienta, así como también se llegó a la conclusión de que dream weaber que
es el editor con el que hemos estado trabajando es tan extenso como el usuario lo
quiera hacer.
También se demostró la correcta utilización de las páginas web, y lo tan útil que es
para la vida cotidiana ya sea en la escuela, el trabajo o incluso como un hove para
entrenarse de una manera muy audaz y efica
Biografías:
HTML5 Tutorial
http://www.w3schools.com/html/DEFAULT.asp
MANUAL PRÁCTICO DE HTML
http://www-app.etsit.upm.es/~alvaro/manual/manual.html
Aprender HTML
http://www.htmlya.com.ar/
HTML Working Group Home Page
http://www.w3.org/MarkUp/
Desarrollo de Sitios Web
http://www.innovaage.com/sitios_web
Sitios web unam
http://www.unam.mx/pagina/es/37/sitios-web-en-la-unam
Websites
http://www.unesco.org/new/es/unesco/events/prizes-andcelebrations/celebrations/international-days/world-press-freedom-day/websites/
Sitio web
http://www.biodiversidad.gob.mx/biodiversidad/sitiosweb.html
Libros:
http://books.google.com.mx/books?id=LAsa6ZzID0C&lpg=PA19&dq=sitios%20web&pg=PA13#v=onepage&q=sitios%20web&f=false
http://books.google.com.mx/books?id=wcvMmeGJ9a8C&lpg=PP1&dq=Html&pg=PP1#v=onepage
&q=Html&f=false
http://books.google.com.mx/books?id=Q4VL8Tiy7gcC&lpg=PP1&dq=Html&pg=PP1#v=onepage&q
=Html&f=false
http://books.google.com.mx/books?id=DTbyZPnxOI8C&lpg=PP1&dq=sitios%20web&pg=PP1#v=on
epage&q=sitios%20web&f=false
http://books.google.com.mx/books?id=96tZgo2VL5oC&lpg=PP1&dq=sitios%20web&pg=PP1#v=on
epage&q=sitios%20web&f=false
http://www.desarrolloweb.com/articulos/332.php
http://www.aulaclic.es/dreamweaver-cs6/t_1_1.htm
https://mx.answers.yahoo.com/question/index?qid=20101012222619AAPWZf2.HTM