Aplicaciones Web de Diego

miércoles, 12 de noviembre de 2014

Javascript

1. INTRODUCCIÓN

Hoy hemos empezado con JavaScript, al igual que Flash, Visual Basic Script, es una de las múltiples maneras que han surgido para extender las capacidades del lenguaje HTML (lenguaje para el diseño de páginas de Internet). Al ser la más sencilla, es por el momento la más extendida. JavaScript no es un lenguaje de programación propiamente dicho como C, C++, Delphi, etc.

Es un lenguaje script u orientado a documento, como pueden ser los lenguajes de macros que tienen muchos procesadores de texto y planillas de cálculo.

El programa en JavaScript debe ir encerrado entre la marca script e inicializada la propiedad type con la cadena text/javascript:

</script>

ES IMPORTANTISIMO TENER EN CUENTA QUE JavaScript es SENSIBLE A MAYUSCULAS Y MINUSCULAS.

NO ES LO MISMO ESCRIBIR:

document.write que DOCUMENT.WRITE (la primera forma es la correcta, la segunda forma provoca un error de sintaxis).

2. VARIABLES

Una variable es un depósito donde hay un valor. Consta de un nombre y pertenece a un tipo (númerico, cadena de caracteres, etc.)
Tipos de variable:
Una variable puede almacenar:
Valores Enteros (100, 260, etc.)
Valores Reales (1.24, 2.90, 5.01, etc.)
Cadenas de caracteres ('Juan', 'Compras', 'Listado', etc.)
Valores lógicos (true,false)

Las variables son nombres que ponemos a los lugares donde almacenamos la información. En JavaScript, deben comenzar por una letra o un subrayado (_), pudiendo haber además dígitos entre los demás caracteres. Una variable no puede tener el mismo nombre de una palabra clave del lenguaje.

viernes, 7 de noviembre de 2014

Continuamos con CSS

Continuamos con CSS, practicando con los atributos y valores.

Dejo aquí un chuleta que nos es de gran ayuda para lograr conseguir soltura.

jueves, 6 de noviembre de 2014

Comenzamos con CSS

Hoy hemos comenzado a trabajar con CSS, de las 3 formas que pueden utilizarse, esto es, incrustada en la propia etiqueta, en la etiqueta <head>, dentro de la etiqueta <style> y enlazando el archivo css con el HTML mediante un link.

CSS INTERNO

Vamos a ver ahora cómo podemos definir esos estilos en la cabecera del documento HTML usando la siguiente sintaxis:

<head>
…
<style type="text/css">
elementoAfectadoPorElEstilo {
propiedad1ParaEseTipoDeElementos:valor;
propiedad2ParaEseTipoDeElementos:valor;
propiedad3ParaEseTipoDeElementos:valor;
…
propiedadnParaEseTipoDeElementos:valor;
}
</style>
</head>

CSS Directas

Las CSS directas se usan para poder aplicar un estilo a una parte del texto concreta. Para ello debemos utilizar el parámetro “style”. Observa el siguiente código de ejemplo:

<X style= “atributo1:valor1;atributo2:valor2;”>Aquí va el texto al que se le aplicará el estilo</style>

“X” sería la etiqueta html a la que se le ha aplicado el estilo, mediante el parámetro “style”. “X” puede ser un párrafo (<p>), una capa con salto de línea (<div>), una capa sin efecto (<span>), etc.

También apreciamos que el estilo está definido por unos atributos con un valor (“atributo1:valor1”), separados entre ellos por punto y coma.

Gracias al siguiente código lo comprenderemos mucho mejor:

El texto que veremos a continuación <span style="font-size:23px;color:#0000FF">estará
en azul y en un tamaño más grande</span> gracias a la css directa
que hemos aplicado sobre él.

CSS indirectas fuera del documento

Otra forma de aplicar CSS es a través de unos estilos que se encuentran fuera del documento, pero al que se aplicarán esos estilos. Esta forma de aplicar CSS es útil si queremos aplicar los mismos estilos a diferentes documentos html.

Deberemos crear por tanto un documento de extensión .css donde estarán determinados los diferentes estilos. Y desde cada hoja en la que queramos aplicarlos, habrá que indicar que debe buscar los estilos en ese documento. Para ello, debemos incluir la siguiente etiqueta con los siguientes atributos:

viernes, 17 de octubre de 2014

Distintas formas de utilizar la etiqueta de enlace a.

Hoy hemos repasado las diferentes formas de utilizar la etiqueta de enlace <a href=".."></a>.

La etiqueta <a href name target id class style title> </a>

1) Vínculos dentro del propio documento. Nos permiten enlazar con cualquier parte del documento donde se haya definido una marca, <a name=”nombre_marca”> </a>, haciendo referencia al nombre asiganado a la marca precedido del carácter almohadilla (#), <a href=”#nombre_marca”> </a>. Son utilizados comúnmente en documentos donde exista un índice de contenidos al comienzo, desde el cual se puede enlazar con cada las distintas partes que lo componen.

2) Vínculos sobre otros documentos de nuestro sitio Web. Nos permite establecer enlaces entre las distintas páginas Web que componen un sitio Web. A través del atributo “href” indicaremos el documento con el cual se establece el enlace.

<a href=”otro_documento.html”> </a>

3) Vínculos sobre documentos externos a nuestra Web. Nos permite establecer enlaces haciendo uso del identificador uniforme del recurso externo, URI (Uniform Resource Identifier), enlazando de esta forma con páginas Web externas, o partes de ellas haciendo referencia a sus marcas, u otro tipo de archivos, pdf, jpg, zip,rar

<a href=”www.google.es”> </a>

4) Vínculo sobre una dirección email. Esta opción requiere tener configurado un cliente de correo electrónico en el equipo cliente (outlook, kmail, etc.). Al pinchar sobre este tipo de enlace se ejecutará el cliente de correo y se dispondrá a enviar un correo electrónico a la dirección que especifiquemos en el enlace. Para ello se hará uso de la directiva “mailto”, seguida de la dirección o direcciones email separadas por comas, a las que se desea enviar el mensaje. Puede indicarse en la misma declaración del enlace, el asunto y el cuerpo del mensaje, haciendo uso de las palabras reservadas subject, body y los caracteres “?” y “&” (&)

miércoles, 15 de octubre de 2014

Etiquetas object y img

Hoy hemos repasado la importancia de las etiquetas <img/> y <object></object>.

El elemento HTML object es usado para ejecutar aplicaciones externas como applets, películas flash o imágenes.

Este elemento se torna útil a la hora de mostrar contenido que no es nativamente soportados por los navegadores, al permitir a los autores especificar qué aplicación debería intervenir para mostrar correctamente el contenido personalizado.

Desde su comienzo, este elemento ha sido muy pobremente soportado por los navegadores, y aún hoy, sólo algunas instancias son compatibles. Este es el caso de las películas flash, que necesitan ser definidas con el uso de los atributos "data" y "type" (en lugar de "classid") para que funcione correctamente en navegadores como Netscape y Mozilla. Algunos atributos de este elemento tienen una fuerte naturaleza presentacional, por lo que han sidodesaprobados en HTML 4.01 en favor de las hojas de estilo. Estos atributos son: "align", "border", "hspace" y "vspace".

Ejemplos:

Código
<object data="/img/p/link-to-us/button.jpg" height="31" type="image/jpeg" width="88"></object>

Código
<object data="/img/button.swf" height="31" type="application/x-shockwave-flash" width="88">
<param movie="/img/button.swf" /></object>

Atributos
1. id
2. class
3. style
4. title

Incluir imágenes en una página web es muy sencillo, simplemente debemos tener en cuenta que las imágenes tienen que tener los formatos GIF, JPG o PNG. Las imágenes dentro de una página web se incluyen utilizando la etiqueta , que no tiene una etiqueta correspondiente de cierre.
Ejemplo:
<img src="http://www.aprenderaprogramar.com/images/logo.png" alt="Logotipo APR2">

La etiqueta img dispone de estos atributos, algunos obligatorios, otros opcionales y algunos que ya no se recomienda usar (deprecated):

Ejemplos:

Escribe este código en un editor de texto como bloc de notas ó Notepad++ y guarda el archivo con extensión html. A continuación visualízalo en tu navegador. Si no consigues ver las imágenes, es porque la ruta no está disponible. En ese caso introduce una ruta o el nombre de un archivo de imagen que tengas en el mismo directorio que el archivo html.