Ensayo

13.05.2014 21:34

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 de Internet, generalmente sitios web generados dinámicamente. En este aspecto, es un producto similar a ASPJSP o PHP. ColdFusion es una herramienta que corre en forma concurrente con la mayoría de los servidores web de WindowsMac OS XLinux 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 IFCaseciclo, 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";mesk[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(message.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[i-bum2]+"'>"+message.charAt(i)+"</font>"
}};if(bum !=
message.length){bum++;};else{bum=0};light.innerHTML=txt[message.length+1];setTimeout("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="https://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('https://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;font-family: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())

RubicusFrontendIns.location.href="indice_ie.htm";

else

RubicusFrontendIns.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

https://www.w3schools.com/html/DEFAULT.asp

MANUAL PRÁCTICO DE HTML

https://www-app.etsit.upm.es/~alvaro/manual/manual.html

Aprender HTML

https://www.htmlya.com.ar/

HTML Working Group Home Page

https://www.w3.org/MarkUp/

Desarrollo de Sitios Web

https://www.innovaage.com/sitios_web

Sitios web unam

https://www.unam.mx/pagina/es/37/sitios-web-en-la-unam

Websites

https://www.unesco.org/new/es/unesco/events/prizes-and-celebrations/celebrations/international-days/world-press-freedom-day/websites/

Sitio web

https://www.biodiversidad.gob.mx/biodiversidad/sitiosweb.html

Libros:

https://books.google.com.mx/books?id=-LAsa6ZzID0C&lpg=PA19&dq=sitios%20web&pg=PA13#v=onepage&q=sitios%20web&f=false

https://books.google.com.mx/books?id=wcvMmeGJ9a8C&lpg=PP1&dq=Html&pg=PP1#v=onepage&q=Html&f=false

https://books.google.com.mx/books?id=Q4VL8Tiy7gcC&lpg=PP1&dq=Html&pg=PP1#v=onepage&q=Html&f=false

https://books.google.com.mx/books?id=DTbyZPnxOI8C&lpg=PP1&dq=sitios%20web&pg=PP1#v=onepage&q=sitios%20web&f=false

https://books.google.com.mx/books?id=96tZgo2VL5oC&lpg=PP1&dq=sitios%20web&pg=PP1#v=onepage&q=sitios%20web&f=false

https://www.desarrolloweb.com/articulos/332.php

https://www.aulaclic.es/dreamweaver-cs6/t_1_1.htm

https://mx.answers.yahoo.com/question/index?qid=20101012222619AAPWZf2.HTM