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 type="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&oacute;n <span style="font-size:23px;color:#0000FF">estar&aacute;
en azul y en un tama&ntilde;o m&aacute;s grande</span> gracias a la css directa
que hemos aplicado sobre &eacute;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:
<link rel="stylesheet" type="text/css" href="urlhojadeestilos.css">

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 “&” (&amp;)


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>
  1. Atributos
    1. id
    2. class
    3. style
    4. title
    5. dir
    6. name
    7. usemap
    8. tabindex
    9. width
    10. height
    11. classid>
    12. codebase
    13. codetype
    14. data
    15. type
    16. archive
    17. declare
    18. standby
    19. align
    20. border
    21. hspace
    22. vspace

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.


viernes, 10 de octubre de 2014

10-10-2014 Caracteres especiales, etiquetas de enlace, creación de listas

Una página web se ha de ver en paises distintos, que usan conjuntos de caracteres distintos. El lenguaje HTML nos ofrece un mecanismo por el que podemos estar seguros que una serie de caracteres raros se van a ver bien en todos los ordenadores del mundo,;
independientemente de su juego de caracteres.
Por ejemplo, la "á" (a minúscula acentuada) se escribe "&aacute;" de modo que la palabra página se escribiría en una página HTML de este modo: p&aacute;gina.
Caracteres especiales básicos>
&lt;<&gt;>
&amp;&&quot;"

Caracteres especiales del HTML 2.0

&Aacute;Á&Agrave;À
&Eacute;É&Egrave;È
&Iacute;Í&Igrave;Ì
&Oacute;Ó&Ograve;Ò
&Uacute;Ú&Ugrave;Ù
&aacute;á&agrave;à
&eacute;é&egrave;è
&iacute;í&igrave;ì
&oacute;ó&ograve;ò
&uacute;ú&ugrave;ù
&Auml;Ä&Acirc;Â
&Euml;Ë&Ecirc;Ê
&Iuml;Ï&Icirc;Î
&Ouml;Ö&Ocirc;Ô
&Uuml;Ü&Ucirc;Û
&auml;ä&acirc;â
&euml;ë&ecirc;ê
&iuml;ï&icirc;î
&ouml;ö&ocirc;ô
&uuml;ü&ucirc;û
&Atilde;Ã&aring;å
&Ntilde;Ñ&Aring;Å
&Otilde;Õ&Ccedil;Ç
&atilde;ã&ccedil;ç
&ntilde;ñ&Yacute;Ý
&otilde;õ&yacute;ý
&Oslash;Ø&yuml;ÿ
&oslash;ø&THORN;Þ
&ETH;Ð&thorn;þ
&eth;ð&AElig;Æ
&szlig;ß&aelig;æ


Caracteres especiales del HTML 3.2 

&frac14;¼&nbsp;
&frac12;½&iexcl;¡
&frac34;¾&pound;£
&copy;©&yen;¥
&reg;®&sect;§
&ordf;ª&curren;¤
&sup2;²&brvbar;¦
&sup3;³&laquo;«
&sup1;¹&not;¬
&macr;¯&shy;
&micro;µ&ordm;º
&para;&acute;´
&middot;·&uml;¨
&deg;°&plusmn;±
&cedil;¸&raquo;»
&iquest;¿

Otros carácteres especiales

&times;×&cent;¢
&divide;÷&euro;
&#147;&#153;
&#148;&#137;
&#140;Œ&#131;ƒ
&#135;&#134;

Vemos qué son los enlaces en HTML y los distintos tipos.
La etiqueta <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, pdfjpgzip,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 subjectbody y los caracteres “?” y “&” (&amp;).

jueves, 9 de octubre de 2014

Principales etiquetas HTML

Principales etiquetas HTML

Hoy hemos comenzado la descripción de las principales etiquetas de HTML, explicándonos una a una su función y los diferentes atributos y posibles valores que puede tener cada uno de ellos. Hemos
empezado con el tipo de documento.




Después hemos continuado con las etiquetas <html> y <head> y las etiquetas  que pueden incluirse dentro de ellas a modo de información, links y nombre de la página.











Y para finalizar las etiquetas que formatean el texto del cuerpo de la página.


miércoles, 8 de octubre de 2014

TIPOS DE DOCTYPE

Hoy Luis nos ha explicado  el esquema básico que utilizaremos en estos primeros días del curso para un documento HTML y los distintos tipos de DOCTYPE que podemos utilizar. Como muestra voy a mostrar el resultando.

Esqueleto básico para un documento HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
</head>
<body>
<p>… Your HTML content here …</p>
</body>
</html>

TIPOS DE DOCTYPE
1. strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
2. Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
3. Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

jueves, 2 de octubre de 2014

Programación por capas

Hoy la clase a tratado sobre la programación por capas. Programación por capas La programación por capas es una arquitectura cliente-servidor en el que el objetivo primordial es la separación de la lógica de negocios de la lógica de diseño. Capas y niveles: • Capa de presentación: es la que ve el usuario (también se la denomina "capa de usuario"), presenta el sistema al usuario, le comunica la información y captura la información del usuario en un mínimo de proceso (realiza un filtrado previo para comprobar que no hay errores de formato). • Capa de negocio: es donde residen los programas que se ejecutan, se reciben las peticiones del usuario y se envían las respuestas tras el proceso. • Capa de datos: es donde residen los datos y es la encargada de acceder a los mismos.; Bases de datos asociadas a un servicio web Para la integración de bases de datos y la web es necesario contar con un interfaz, que permita realizar las conexiones, extraer la información y lograr sesiones interactivas entre el usuario y la base de datos. Para acceder a los datos de la base de datos se necesita: - Un navegador que hace la petición del cliente. - Un servidor web, que proporciona el servicio de conexión entre el cliente y la base de datos. - Servidor de base de datos (MySQL, Oracle, Acces) que almacenará la información a acceder. - La aplicación que accede a los datos ( CGI, PHP o ASP), que nos permite crear páginas dinámicas. Lenguajes para acceder a bases de datos
• Scripts: son pequeños programas incrustados en documentos HTML y el servidor web los interpreta y ejecuta antes de servir las páginas al cliente. • CGI: estándar para la interacción entre aplicaciones externas y servidores web. Se desarolla scripts en CGI con el lenguaje Perl.
• PHP: lenguaje de script de código abierto(solo traduce), utilizado con el servidor
APACHE. • ASP: lenguaje de script creado por Microsoft para els ervidor web ISS, basado en
Visual Basic Script. • JSP: lenguaje de script basado en tecnología Java.

jueves, 25 de septiembre de 2014

Inicio del Blog

Hoy día 25 de septiembre de 2014 comenzamos la andadura de Aplicaciones Web.