1

COLEGIO NUESTRA SEÑORA DEL ROSARIO DE FLORIDABLANCA “Verdad, Virtud y Ciencia”

ASIGNATURA Tecnología e Informática PERIODO SEGUNDO

DOCENTE Ivonne Tatiana Paredes FECHA

ESTUDIANTE CURSO 10°

GUÍA PARA EL DESARROLLO DE COMPETENCIAS

I. PREGUNTA PROBLEMATIZADORA ¿Cómo aporto por medio de programas de diseño a la innovación de paginas web?

II. NIVELES DE DESEMPEÑO SUPERIOR: Crea un sitio web con Html con material multimedial, actualizando permanentemente su

contenido e integrando varias herramientas. ALTO: Manipula las herramientas del programa Html para la organización de la información, edición de

imágenes y videos.

BASICO: Identifica las herramientas necesarias para la creación de páginas web.

BAJO: Se le dificulta Identificar las herramientas necesarias para la creación de páginas web.

I. PLAN ESTRATÉGICO DE APRENDIZAJE

TIEMPO (Semanas)

PROCESO DE EVALUACIÓN (Instancias)

COMPETENCIAS

ESTRATEGIAS DIDÁCTICAS Y

EVIDENCIAS DE APRENDIZAJE

CONTENIDO CONCEPTUAL

1

Identifico y analizo ejemplos exitosos y no exitosos de la transferencia tecnológica en la solución de problemas y necesidades. • Actúo teniendo en cuenta normas de seguridad industrial y utilizo elementos de protección en ambientes de trabajo y de producción. •Propongo, analizo y comparo diferentes soluciones a un mismo problema, explicando su origen, ventajas y dificultades. . • Tengo en cuenta aspectos relacionados con la antropometría, la ergonomía, la seguridad, el medio ambiente y el contexto cultural y socio-económico al momento de solucionar problemas con tecnología. Identifico e indago sobre los problemas que afectan directamente a mi comunidad, como consecuencia de la implementación o el retiro de bienes y servicios tecnológicos. •Identifico e indago sobre los problemas que afectan directamente a mi comunidad, como consecuencia de la implementación o el retiro de bienes y servicios tecnológicos.

Explicación del tema por clase magistral, desarrollando el contenido del tema a través de definiciones y los procesos correspondientes a la aplicación de las herramientas, con información técnica, recomendaciones y comentarios para su buen funcionamiento. Descripción, ejecución y aplicación de actividades propuestas en el aula especializada, con la herramienta de html. Actualización del archivo en desarrollo.

INTRODUCCION A

HTML

2

TI 1 3

QUIZ 1 4

5 TI 2 Explicación del tema por clase magistral, desarrollando el contenido del tema a través de definiciones y los procesos correspondientes a la aplicación de las herramientas, con información técnica, recomendaciones y comentarios para su buen funcionamiento. Descripción, ejecución y aplicación de actividades propuestas en el aula especializada, con la herramienta de html.

CODIGOS HTML

6 QUIZ 2

7 DESARROLLO DE GUIA

8

2

•Propongo acciones encaminadas a buscar soluciones sostenibles dentro un contexto participativo.

Actualización del archivo en desarrollo.

9 SUSTENTACIÓN Descripción, ejecución y aplicación de actividades propuestas en el aula especializada, con la herramienta de html.

GENERALIDADES

DE JAVA SCRIPT

10 RETROALIMENTACIÓN

11 TRIMESTRAL

12 AUTOEVALUACIÓN

III. DESARROLLO CONTEXTUAL

RESPONDE

1. ¿Qué interpretación le das a esta imagen? 2. ¿Conoces algo de html? 3. ¿Te parece importante aprender a trabajar html?

ACTIVIDAD 1. INTERIORIZACIÓN, REFLEXIÓN DEL SABER.

QUÉ ES HTML El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y que está compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento. Un documento hipertexto no sólo se compone de texto, puede contener imágenes, sonido, vídeos, etc., por lo que el resultado puede considerarse como un documento multimedia. Los documentos HTML deben tener la extensión html o htm, para que puedan ser visualizados en los navegadores (programas que permiten visualizar las páginas web).

Los navegadores se encargan de interpretar el código HTML de los documentos, y de mostrar a los usuarios las páginas web resultantes del código interpretado. UN POCO DE HISTORIA: En noviembre de 1995 se aprobó el estándar HTML 2.0. para la creación de páginas web. Se creó con objetivos divulgativos, orientado a la actividad académica, en el que el contenido de las páginas era más importante que el diseño.

3

Netscape Navigator fue un navegador web y el primer producto comercial de la compañía Netscape

Communications, creada por Marc Andreessen, uno de los autores de Mosaic, cuando se encontraba en el NCSA (Centro Nacional de Aplicaciones para Supercomputadores) de la Universidad de Illinois en Urbana-Champaign. Netscape fue el primer navegador comercial. Pero esta versión del HTML carecía de muchas herramientas que permitieran controlar el diseño de las páginas y añadir contenido multimedia, por lo que Netscape (cuyos navegadores eran los más utilizados por aquellos años) comenzó a incluir nuevas etiquetas que no existían en el estándar. El comité encargado de establecer los estándares dentro de Internet, comenzó a trabajar en el borrador de una nueva versión de HTML, el borrador de HTML 3.0.

Pero este borrador resultó demasiado extenso, al intentar incluir numerosos nuevos atributos para etiquetas ya existentes, y la creación de otras muchas etiquetas nuevas. Por ello, no fue bien aceptado por el mercado y varias compañías se unieron para formar un nuevo comité encargado de establecer los estándares del HTML. Este comité pasó a llamarse W3C. En enero de 1997 se aprobó el estándar HTML 3.2. Este nuevo estándar incluía las mejoras proporcionadas por los navegadores Internet Explorer y Netscape Navigator, que ya habían realizado extensiones sobre el estándar HTML 2.0.

En diciembre de 1997 se aprobó el estándar HTML 4.0, creado para estandarizar los marcos (frames), las

hojas de estilo y los scripts. En septiembre de 2001 se aprobó el estándar HTML 4.01.

COMPATIBILIDAD CON LOS NAVEGADORES: Como se ha dicho, el navegador instalado en el ordenador del usuario es el que interpreta el código HTML de la página que visita por lo que a veces puede ocurrir que dos usuarios visualicen la misma página de forma distinta porque tienen instalados navegadores distintos o incluso versiones distintas del mismo navegador. Los navegadores de hoy en día pretenden ser compatibles con la última versión de HTML. Es necesario realizar extensiones de los navegadores para que puedan ser compatibles con esta última versión. Dos de los navegadores que continuamente están realizando extensiones son Internet Explorer y Netscape Navigator, que realizan extensiones incluso antes de que se establezcan los estándares, intentando incluir las nuevas funciones incluidas en los borradores. Los navegadores tienen que ser compatibles con la última versión HTML para poder interpretar el mayor número posible de etiquetas. Si un navegador no reconoce una etiqueta, la ignora y el efecto que pretendía la etiqueta no queda reflejado en la página. Para realizar las extensiones de estos navegadores se añaden nuevos atributos a las etiquetas ya existentes, o se añaden nuevas etiquetas. Como resultado a estas extensiones, habrá páginas cuyo código podrá ser interpretado completamente por todos los navegadores, mientras que otras, al incluir nuevos atributos o etiquetas del borrador de la última versión de HTML, solo podrán ser interpretadas en su totalidad en los navegadores más actualizados.

En este último caso también puede ocurrir que alguna etiqueta de la página solamente pueda ser interpretada por un navegador concreto, y otra etiqueta por un navegador diferente al anterior, por lo que nunca sería visualizada en su totalidad por ningún navegador. Uno de los retos de los diseñadores de páginas web es hacer las páginas más atractivas utilizando toda la potencia del lenguaje HTML pero teniendo en cuentas estos problemas de compatibilidades para que

el mayor número de internautas vean sus páginas tal como las ha diseñado. EDITORES: Un editor es un programa que nos permiten redactar documentos. Hoy en día existen un gran número de editores que permiten crear páginas web sin la necesidad de escribir ni una sola línea de código HTML. Estos editores disponen de un entorno visual, y generan automáticamente el código de las páginas. Al poder ver en todo momento cómo quedará la página en el navegador, se facilita la creación de las páginas, y el

uso de menús permite ganar rapidez.

4

Estos editores visuales pueden generar en ocasiones código basura, es decir, código que no sirve para nada, en otras ocasiones puede ser más efectivo corregir directamente el código por lo que resulta necesario saber HTML para poder depurar el código de nuestra páginas.

Algunos de los editores visuales con los que podrás crear tus páginas web son Macromedia Dreamweaver, atom, brackets, entre otros; de los cuales los dos últimos tienen la ventaja de ser gratuitos. Es aconsejable comenzar utilizando una herramienta lo más sencilla posible, para tener que insertar nosotros mismos el código HTML. Esto permite familiarizarse con el lenguaje, para poder utilizar algún editor visual posteriormente, y depurar el código cuando fuera necesario. Para crear páginas web escribiendo directamente el código HTML puedes utilizar la herramienta Wordpad o el Bloc de notas que proporciona Windows. En este periodo vamos a trabajar con el Bloc de notas para crear nuestras páginas, ya que se trata de un

editor de textos muy sencillo de manejar, que nos permitirá crear páginas a través del código HTML.

Responde las siguientes preguntas:

1. ¿Qué es HTML? 2. Nombrar cuales tipos de HTML existen. Da un ejemplo de cada uno. 3. Escribir una corta biografia de Tim Berners-Lee. 4. ¿Qué otros proyectos creo Tim Berners-lee.?

ACTIVIDAD 2. SISTEMATIZACIÓN Y TRANSFERENCIA DEL CONOCIMIENTO. SISTEMATIZACIÓN

1. Un documento de hipertexto solo se compone de texto. a) Verdadero b) Falso 2. Los navegadores se encargan de interpretar el código HTML de los documentos. a) Verdadero b) Falso 3. El nuevo comité encargado de establecer los estándares del HTML es el W3C. a) Verdadero b) Falso 4. Que significan las siglas HTML?

TRANSFERENCIA

En grupo de 3 estudiantes continuos realicen un resumen analizado de cada aspecto presentado anteriormente.

II. DESARROLLO CONTEXTUAL Tipos de Sitios en Internet - Análisis de proyectos Web

No tendrás muchas oportunidades de crear una Web de éxito si no ha decidido para qué va a servir. Los tipos de sitios en Internet más comunes son:

5

Tipos de sitios No tendrá muchas oportunidades de crear una Web de éxito si no ha decidido el propósito del Sitio. Algunas personas tienen un objetivo muy específico en mente (como ser contratados para un trabajo o promocionar un libro), mientras que otras simplemente planean dar rienda suelta a su expresión. PERSONALES

Los sitios personales son sobre uno mismo. Según el mundo se va haciendo más conocedor de la Web, parece que todas las personas construyen hogares en línea. Tanto si es para compartir fotos, hacer la crónica de un viaje o simplemente escribir sus últimos pensamientos y obsesiones, ya no es inusual tener un sitio Web personal. Al diseñarlo, la ambición es la meta. Si sólo desea hablar con sus amigos o compartir fotos, puede ahorrarse el esfuerzo recurriendo a una red social como Facebook. Si es más ambicioso, desea un control total sobre el diseño o un sitio Web que aglutine varios intereses, una página personalizada es la tarjeta de presentación digital de un usuario con un verdadero estilo. CURRÍCULUM VITAE

Los sitios de currículum pueden ser potentes herramientas en la carrera profesional. En lugar de fotocopiar un montón de ejemplares de su trayectoria, ¿Por qué no enviar correos electrónicos y distribuir tarjetas de visita que apunten a su CV en línea? Lo mejor de todo, como enlaces a empresas en las que ha trabajado, muestras de portafolio en línea. TEMÁTICOS

Los sitios Web temáticos se centran en un tema en particular. Si está más interesado en construir un sitio web sobre: Su música favorita Arte Libros Comida Movimientos políticos Entonces éste es su lugar. Antes de crear un sitio Web temático piense en si otras personas con sus mismos intereses se preocuparán por visitarlo y eche un vistazo a los ya existentes sobre ese tema. Los mejores invitan a otros con los mismos intereses a unirse a ellos. Los peores presentan los mismos diez o doce enlaces que pueden encontrarse en cualquier página. ACONTECIMIENTOS

Estos sitios Web no están diseñados para mucho tiempo; están centrados en un acontecimiento específico. El ejemplo más común es un sitio Web de boda. Los organizadores del evento lo crean para ofrecer indicaciones, información, enlaces para listas de bodas y unas cuantas fotos románticas. Cuando el evento termina el sitio Web desaparece o se transforma en otra cosa diferente, (como un sitio Web personal de la crónica de la luna de miel). Otros acontecimientos que pueden tratarse de forma similar incluyen: Eventos políticos Conciertos Eventos deportivos y culturales Reuniones familiares Fiestas de disfraces Marchas de protesta Etc. PROMOCIONES

Los sitios promocionales son ideales cuando se quiere mostrar un CD producido por uno mismo o libros recién salidos de la imprenta. Están diseñados para ampliar noticias sobre un artículo específico, ya sea cerámica artesanal o su propio software.

6

En ocasiones, estos sitios Web evolucionan hasta pequeños negocios en línea donde pueden venderse artículos PEQUEÑOS NEGOCIOS (O COMERCIO ELECTRÓNICO)

Estos sitios presentan el uso de más éxito en la red: Vender cualquier cosa, desde smartphone hasta medicamentos con receta. Los sitios de comercio electrónico están tan extendidos que es difícil creer que cuando apareció la red por primera vez el hecho de ganar dinero no estaba en la mente de nadie. Crear un sitio completo de comercio electrónico, como Amazon.com o eBay, supera las capacidades de una sola persona, ya que necesita el mantenimiento de programas complejos y lenguajes de programación junto con la colaboración de docenas de personas. Empresas innovadoras como PayPal y Yahoo ofrecen servicios de suscripción que pueden ayudarle a construir un sitio Web de tipo carrito de compra y aceptar pagos con tarjeta de crédito. También puede alojar anuncios Google para ganar algo de dinero. RESPONDE:

1. ¿Qué tipo de sitio web te gustaría crear? 2. Investiga sobre el tipo de página web que deseas crear 3. Realiza un boceto de la página web, utiliza colores, marcadores, cartulina.

ACTIVIDAD 1. INTERIORIZACIÓN, REFLEXIÓN DEL SABER.

Las etiquetas o marcas: Delimitan cada uno de los elementos que componen un documento HTML. Existen dos tipos de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento. La etiqueta de comienzo está delimitada por los caracteres < y >. Está compuesta por el identificador o

nombre de la etiqueta, y puede contener una serie de atributos opcionales que permiten añadir ciertas propiedades. Su sintaxis es: <identificador atributo1 atributo2 ...> Los atributos de la etiqueta de comienzo siguen una sintaxis predefinida y pueden tomar cualquier valor propio del usuario, o valores HTML predefinidos. La etiqueta de final está delimitada por los caracteres </ y >. Está compuesta por el identificador o nombre

de la etiqueta, y no contiene atributos. Su sintaxis es: </identificador> Cada uno de los elementos de la página se encontrará entre una etiqueta de comienzo y su correspondiente etiqueta de cierre, a excepción de algunos elementos que no necesitan etiqueta de cierre. También es posible anidar etiquetas, es decir, insertar etiquetas entre otras etiquetas de comienzo y de cierre. A continuación tenemos un ejemplo en el que tenemos la etiqueta <font..> anidada dentro de la etiqueta <p..>.: <p align="center"><font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a mi página</font></p> Es importante anidar bien las etiquetas, las etiquetas no se pueden 'cruzar', en nuestro ejemplo hemos empezado por la etiqueta <p..>, antes de cerrar esta etiqueta hemos puesto la <font..> por lo que antes de cerrar la etiqueta <p..> debemos cerrar la etiqueta etiqueta <font..>. MI PRIMERA PÁGINA

Para que te vayas haciendo una idea de cómo crear una página html a través del Bloc de notas, vamos a crear una página web sencilla, con una línea de texto. Lo primero que tienes que hacer es abrir el Bloc de notas. Para abrirlo, puedes dirigirte al menú Inicio, Programas, Accesorios, opción Bloc de notas. Seguidamente introduce, en el documento en blanco, el texto siguiente: <html> <head> <title>MI PRIMERA PÁGINA</title> </head>

7

<body bgcolor="#FFCC99"> <font color="#CC3300" size="5">Hola, estoy haciendo pruebas.</font> </body> </html>

Guarda el documento con

la extensión htm, con el

nombre

miprimpag.htm. Puedes guardarlo a través del menú Archivo, opción Guardar.

Pulsando dos veces sobre el icono del archivo miprimpag.htm, éste debería abrirse automáticamente en el navegador que tengas instalado en tu ordenador. El navegador deberá mostrar una página como la de la izquierda. Como puedes ver, la página resultante es una página que solamente tiene una línea de texto. Si observas la barra de título del navegador, verás que el título de la página es MI PRIMERA PAGINA. Este título ha sido establecido por la línea <title>MI PRIMERA PAGINA</title>. El color de fondo de la página ha sido establecido por la línea <body bgcolor="#FFCC99">. El texto Hola, estoy haciendo pruebas. Se ha insertado a través de línea <font color="#CC3300" size="5">Hola, estoy haciendo pruebas.</font>. ESTRUCTURA DE UNA PÁGINA.

A lo largo de este tema vamos a aprender a crear una página básica. La estructura básica de una página es: <html> <head> ... </head> <body> ... </body> </html> Ahora veamos cómo funcionan estas etiquetas. Identificador del tipo de documento <html> Todas las páginas web escritas en HTML tienen que tener la extensión html o htm. Al mismo tiempo, tienen

que tener las etiquetas <html> y </html>. Entre las etiquetas <html> y </html> estará comprendido el resto del código HTML de la página. Por ejemplo: <html> ... </html> Cabecera de la página <head>

La cabecera de la página se utiliza para agrupar información sobre ella, como puede ser el título. Está formada por las etiquetas <head> y </head>. La etiqueta <head> va justo debajo de la etiqueta <html>.

Por ejemplo:

8

<html> <head> ... </head> ... </html> Entre las etiquetas <head> y </head>, las etiquetas que podemos encontrar y más se utilizan son: <link>, <style>, <script> (estas etiquetas las veremos más adelante), <meta> y la etiqueta <title> que te explicamos

a continuación. Título de la página <title> El título de la página es el que aparecerá en la parte superior de la ventana del navegador, cuando la página esté cargada en él. Para asignar un título a una página es necesario escribir el texto deseado entre las etiquetas <title> y </title>. Estas etiquetas han de estar dentro de la cabecera, es decir, entre las etiquetas <head> y </head>. Por ejemplo: <html> <head> <title> Curso de HTML </title> </head> ... </html> Cuerpo del documento <body> El cuerpo del documento contiene la información propia del documento, es decir lo que queremos que se visualice, el texto de la página, las imágenes, los formularios, etc. Todos estos elementos tienen que encontrarse entre las etiquetas <body> y </body>, que van justo debajo

de la cabecera. Por ejemplo: <html> <head> <title> Curso de HTML </title> </head> <body> ... </body> </html> A través de la etiqueta <body> es posible establecer el color o la imagen de fondo de la página. El color de fondo puede establecerse a través del atributo bgcolor, al que es posible asignarle un color

representado en hexadecimal o por un nombre predefinido. Si no sabes cómo representar los colores en hexadecimal, o a qué número o nombre se corresponde cada uno de ellos, a continuación veras algunos de los colores que necesitas representar.

9

Por ejemplo, para hacer que el color de fondo de una página sea de color azul, tendremos que escribir: ... <body bgcolor="#0000FF"> ... </body> </html> Sería equivalente a poner: ... <body bgcolor="blue"> ... </body> </html> La imagen de fondo puede establecerse a través del atributo background, indicando la ruta en la que se

encuentra la imagen. Por ejemplo, para hacer que la imagen de fondo de una página sea la imagen fondo.gif, que se encuentra en el mismo directorio en el que se encuentra guardada la página, tendremos que escribir: ... <body background="fondo.gif"> ... </body> </html> En el caso de que la imagen no se encuentre en el mismo directorio que la página, y se encuentre dentro de la carpeta imagenes, que sí se encuentra en el mismo directorio que la página, tendremos que escribir: ... <body background="imagenes/fondo.gif"> ... </body> </html> A través de la etiqueta <body> también es posible establecer el color del texto de la página a través del atributo text.

Por ejemplo, para hacer que el color del texto de una página sea de color rojo, tendremos que escribir: ... <body text="#FF0000"> ... </body> </html> Entre el borde de la ventana y el contenido de la página existe un margen, cuyo tamaño en píxeles puede modificarse mediante los atributos leftmargin (margen izquierdo) y topmargin (margen superior). Estos

10

atributos no funcionan para el navegador Netscape, pero sí los atributos marginwidth (anchura del margen) y marginheight (altura del margen). Estos atributos suelen utilizarse para eliminar el margen, para lo cual deben valer cero. Por ejemplo, para hacer que una página no tenga margen superior, y tenga un margen izquierdo de 20 píxeles, tendremos que escribir: ... <body leftmargin="20" topmargin="0" marginwidth="20" marginheight="0" > ... </body> </html> EL TEXTO Los caracteres < y > son dos caracteres especiales que indican inicio y fin de etiqueta. Si se desea insertar

estos caracteres como texto hay que escribir el nombre que los representa: < Se representa con &lt; > Se representa con &gt; Existen otra serie de caracteres que no se visualizan correctamente en algunos navegadores, como es el caso de la ñ y las letras acentuadas, por lo que al igual que ocurre con los caracteres especiales < y >, para

insertarlos como texto habría que escribir el nombre que los representa. A continuación se muestra una lista con algunos caracteres y el nombre con el que han de ser representados:

Carácter Representación Carácter Representación

< &lt; € &euro;

> &gt; ç &ccedil;

á &aacute; Ç &Ccedil;

ü &uuml;

Á &Aacute; Ü &Uuml;

é &eacute; & &amp;

É &Eacute; ¿ &iquest;

í &iacute; ¡ &iexcl;

Í &Iacute; " &quot;

ó &oacute; · &middot;

Ó &Oacute; º &ordm;

ú &uacute; ª &ordf;

Ú &Uacute; ¬ &not;

ñ &ntilde; © &copy;

Ñ &Ntilde; ® &reg;

™ &#153;

Siempre que se inserta texto en HTML hay que tener en cuenta que si se escriben varios espacios en blanco seguidos sólamente se mostrará uno en el navegador. Para conseguir que se muestren varios espacios en blanco seguidos puede sustituirse cada uno de ellos por &nbsp;.

Por ejemplo, para insertar el texto: ¡Bienvenidos, esta es mi 1ª página! Habría que escribir: &iexcl;Bienvenidos, esta es mi&nbsp;&nbsp;&nbsp;1&ordf;&nbsp;&nbsp;&nbsp;p&aacute;gina! COMENTARIOS En ocasiones podemos desear añadir comentarios aclaratorios dentro del código, de manera que no sean visualizados en el navegador, pero sí a la hora de editar el documento. Para insertar comentarios dentro del código, basta con insertar el texto entre <!-- y //-->.

Todo el código que se inserte entre estos símbolos no será visualizado en los navegadores. Por ejemplo, para insertar el texto siguiente con un comentario: ¡Bienvenidos, esta es mi 1ª página! Habría que escribir:

11

<!-- A continuación aparecerá una línea de texto//--> &iexcl;Bienvenidos, esta es mi 1&ordf; p&aacute;gina! Saltos de línea <br>

En general, cuando trabajamos con un editor de texto se produce un salto de línea al pulsar la tecla INTRO. Si pulsamos INTRO en un documento HTML, el salto de línea se producirá en el código, pero no se mostrará en el navegador. Para que se produzca el salto de línea en el navegador, en lugar de pulsar la tecla INTRO hay que insertar la etiqueta <br> donde se desee que se produzca el salto. La etiqueta <br> no precisa ninguna etiqueta de cierre. No hay que insertar la etiqueta </br> después de

ella, ya que dicha etiqueta no existe. Por ejemplo, para insertar el texto: Queridos usuarios, tengo el placer de comunicaros que hay una nueva sección. Habría que escribir: Queridos usuarios,<br>tengo el placer de comunicaros que hay una nueva secci&oacuten. Texto preformateado <pre>

Una forma de asegurarnos de que el texto aparezca en el navegador tal cual ha sido insertado dentro del código, es utilizando las etiquetas <pre> y </pre>. Utilizando estas etiquetas podemos tener la seguridad de que en el navegador se mostrarán todos los espacios en blanco que se inserten en el texto, así como todos los saltos de línea resultantes de pulsar la tecla INTRO, sin la necesidad de utilizar la etiqueta <br>.

Por ejemplo, para insertar el texto: Hola, BIENVENIDOS esta ES MI PÁGINA WEB y esto un texto preformateado Habría que escribir: <pre>Hola, BIENVENIDOS

esta ES MI PÁGINA WEB y esto un texto preformateado</pre>

El inconveniente de esta etiqueta es que entre las etiquetas <pre> y </pre> no se pueden incluir las etiquetas <img> (para incluir imágenes), <object> (para incluir objetos como animaciones), <big>, <small>, <sub> ni <sup>.

Separadores <hr> El elemento que suele utilizarse para separar secciones dentro de una misma página es la regla horizontal. Para insertar una regla horizontal hay que insertar la etiqueta <hr>. Dicha etiqueta no precisa ninguna etiqueta de cierre. Es posible especificar algunos atributos de la regla horizontal:

Atributo Significado Posibles valores

align alineación de la regla dentro de la página

left (izquierda)

right (derecha)

center (centro)

width ancho de la regla un número, acompañado de % cuando se desee que sea en porcentaje

size alto de la regla un número

noshade eliminar el sombreado de la regla

no puede tomar valores

Por ejemplo, para insertar el texto y la regla horizontal siguientes: Inicio

Bienvenidos a mi página. Habría que escribir: Inicio<hr align="left" width="300%" size="5" noshade>Bienvenidos a mi p&aacute;gina.

12

Sangrado de texto <blockquote>

La sangría es una especie de margen que se establece a ambos lados del texto. Para que un texto aparezca sangrado, se inserta entre las etiquetas <blockquote> y </blockquote>.

Esta etiqueta en un principio se definió para delimitar citas pero que como la mayoría de los navegadores resuelven la cita incluyendo un sangrado del texto, su uso para sangrar texto se ha generalizado. El uso de la etiqueta <blockquote> obliga a que el texto aparezca en una nueva línea.

Insertando el texto entre varias etiquetas <blockquote> y </blockquote> se consigue que los márgenes sean mayores. Por ejemplo, para insertar el texto: Queridos usuarios, tengo el placer de comunicaros que hay una nueva sección. Habría que escribir: Queridos usuarios, <blockquote> <blockquote> tengo el placer de comunicaros que hay una nueva secci&oacuten. </blockquote> </blockquote> Formatear el texto <font>

Las propiedades del texto pueden modificarse a través de la etiqueta <font>. Para ello, podemos insertar el texto entre las etiquetas <font> y </font>, especificando algunos de los atributos de la etiqueta:

Atributo Significado Posibles valores

face fuente nombre de la fuente, o fuentes

color color del texto

número hexadecimal o texto predefinido

size tamaño del texto

valores del 1 al 7, siendo por defecto el 3,

o desplazamiento respecto al tamaño por defecto,

añadiendo + o - delante del valor

Por ejemplo, para insertar el texto: Bienvenidos Habría que escribir: <font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos</font> También es posible definir una fuente para todo el documento. Para ello, hay que insertar la etiqueta <basefont> después de la etiqueta <body>.

La etiqueta <basefont> no necesita una etiqueta de cierre, y permite modificar los mismos atributos del texto que la etiqueta <font>.

Por ejemplo: <body> <basefont color="#006699" size="4" face="Arial"> ... Este código haría que la fuente del documento fuera por defecto de color azul, de tamaño 4 y Arial. Si después de indicar la etiqueta <basefont> o <font>, el navegador encuentra otra etiqueta <font>, la que prevalece es

siempre la última que se encuentra. Resaltado del texto <b>

Existen una serie de etiquetas que permiten aplicar diferentes estilos al texto que se encuentra entre ellas, y generalmente se utilizan para resaltarlo. Estos estilos pueden agruparse según vayan asociados al tipo de letra o a la información que represente el texto. No hay que olvidar que todas estas etiquetas necesitan una etiqueta de cierre, y que pueden aplicarse varias etiquetas al mismo texto. A continuación se muestran algunas etiquetas asociadas al tipo de letra:

13

Etiqueta Significado Ejemplo

<b> negrita curso HTML Rosario

<i> cursiva curso HTML Rosario

<u> subrayado curso HTML Rosario

<s> tachado curso HTML Rosario

<tt> teletipo (máquina de escribir) curso HTML Rosario

<big> aumenta el tamaño de la fuente curso HTML Rosario

<small> disminuye el tamaño de la fuente

curso HTML Rosario

A continuación se muestran algunas etiquetas asociadas al tipo de información:

Etiqueta Significado Ejemplo

<cite> cita curso HTML Rosario

<code> ejemplo de código

curso HTML Rosario

<dfn> definición curso HTML Rosario

<del> eliminado curso HTML Rosario

<em> énfasis curso HTML Rosario

<ins> insertado curso HTML Rosario

<kbd> teclado curso HTML Rosario

<samp> muestra curso HTML Rosario

<strong> destacado curso HTML Rosario

<sub> subíndice curso HTML Rosario

<sup> superíndice curso HTML Rosario

<var> variable curso HTML Rosario

Las etiquetas más utilizadas son las asociadas al tipo de letra, ya que son más fáciles de recordar, y en muchos casos los resultados son los mismos que los de aplicar una etiqueta diferente. Por ejemplo, el resultado de aplicar las etiquetas <b> y <strong> es el mismo. Incluso a veces algunos estilos asociados al tipo de información pueden representarse de forma distinta según el navegador. Por ejemplo, para insertar el texto: Bienvenidos a mi primera pagina

Habría que escribir: <font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a <b><u><tt>mi primera pagina</tt></u></b></font> Párrafos <p> El texto de una página puede agruparse en párrafos. Para ello, el texto de cada uno de los párrafos debe insertarse entre las etiquetas <p> y </p>. No es necesario insertar la etiqueta <br> para que un nuevo párrafo aparezca debajo del anterior, ya que las etiquetas <p> y </p> hacen que se cambie de línea automáticamente.

También es posible cambiar la alineación del texto de cada párrafo. Para ello se modifica el valor del atributo align, cuyos valores pueden ser left (izquierda), right (derecha), center (centrado) o justify (justificado).

Por ejemplo, para insertar el texto: Bienvenidos a mi página.

14

Aquí encontraréis cursos de formación muy interesantes. Habría que escribir: <p align="center">Bienvenidos a mi p&aacutegina.</p> <p>Aqu&iacute encontrar&eacuteis cursos de formaci&oacuten muy interesantes.</p> Otra forma de cambiar la alineación del texto es mediante las etiquetas <div> y </div>, para las que también existe el atributo align. La etiqueta <div>, al igual que la etiqueta <p>, se utiliza para agrupar bloques de texto, pero con la diferencia de que la separación entre ellos es menor. Por ejemplo, para insertar el texto: Bienvenidos a mi página. Aquí encontraréis cursos de formación muy interesantes. Habría que escribir: <div align="center">Bienvenidos a mi p&aacutegina.</div> <div>Aqu&iacute encontrar&eacuteis cursos de formaci&oacuten muy interesantes.</div> También es posible insertar el texto entre las etiquetas <center> y </center> para que aparezca centrado.

Por ejemplo, para insertar el texto: Bienvenidos a mi página. Habría que escribir: <center>Bienvenidos a mi p&aacutegina.</center> Otro par de etiquetas que permiten agrupar bloques de texto, pero que no implican el cambio de línea (como en el caso de <p> y <div>), son las etiquetas <span> y </span> . Encabezados <h1>

Existen una serie de encabezados que suelen utilizarse para establecer títulos dentro de una página. La diferencia entre los distintos tipos de encabezado es el tamaño de la letra, el tipo de resaltado, y la separación existente entre el texto y los elementos que tiene encima y debajo de él. Hay que tener en cuenta que el navegador del usuario es el que aplicará el estilo del encabezado por lo que el mismo título se puede visualizar de forma diferente según el navegador. Existen seis etiquetas que representan seis tipos de cabeceras distintas. Todas estas etiquetas precisan una etiqueta de cierre. A continuación se muestran los distintos encabezados existentes:

Etiqueta Ejemplo

<H1> Título 1: HTML

<H2> Título 2: HTML

<H3> Título 3: HTML

<H4> Título 4: HTML

<H5> Título 5: HTML

<H6> Título 6: HTML

Para todas estas etiquetas es posible especificar el valor del atributo align. Por ejemplo, para insertar el texto:

El lenguaje HTML

Ejemplo 1: Las etiquetas

Habría que escribir: <H2 align="center">El lenguaje HTML</H2><H4>Ejemplo 1: Las etiquetas</H4> Marquesinas <marquee>

Las marquesinas son líneas de texto que pueden desplazarse de un lado a otro de la ventana en forma de línea. Para insertar una marquesina, es necesario insertar el texto entre las etiquetas <marquee> y </marquee>.

15

La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas puedes hacer que estas propiedades varíen. A través del atributo behavior puede modificarse el tipo de movimiento. Puede tomar los valores alternate (de lado a lado de la ventana, como si rebotara en los extremos), scroll (de un lado a otro, continuamente) o slide (de un lado a otro, pero una sola vez).

A través del atributo direction puede modificarse la dirección en la que se moverá el texto. Puede tomar los valores down (de arriba a abajo), up (de abajo a arriba), left (de derecha a izquierda) o right (de izquierda a

derecha). También es posible establecer un color de fondo, a través del atributo bgcolor. Por ejemplo, para insertar la siguiente marquesina: Esto es una marquesina

Habría que escribir: <marquee bgcolor="#006699" behavior="alternate" direction="right"> <b><font color="#FFFFCC" size="5">Esto es una marquesina </font></b> </marquee> También es posible insertar imágenes, tablas y otros elementos entre las etiquetas <marquee> y </marquee>, no solamente texto. Hiperenlace <a>

Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo. Aquellos elementos (texto, imágenes, etc.) sobre los que se desee insertar un enlace han de encontrarse entre las etiquetas <a> y </a>. A través del atributo href se especifica la página a la que está asociado el enlace, la página que se visualizará

cuando el usuario haga clic en el enlace. Por ejemplo, para insertar el enlace: Visita www.rosarioflorida.com Habría que escribir: <a href=" http://www.rosarioflorida.com/site/"> Visita www.rosarioflorida.com </a> TIPOS DE REFERENCIAS Existen diferentes formas de expresar una referencia a una página a través del atributo href.

- Referencia absoluta:

Conduce a una ubicación externa al sitio en el que se encuentra el documento. La ubicación es en Internet, en este caso hay que empezar la referencia por http:// , el nombre del dominio y algunas veces el nombre de la página. Si no se escribe el nombre de la página se cargará la página de inicio asociada al dominio. Por ejemplo, "http://www.rosarioflorida.com" tendrá el mismo efecto que "http://www.rosarioflorida.com/site/" Para insertar el enlace: Visita www.rosarioflorida.com Habría que escribir: <a href=" http://www.rosarioflorida.com/site/"> Visita www.rosarioflorida.com </a>

Referencia relativa al sitio:

Conduce a un documento situado dentro del mismo sitio que el documento actual. Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un objetivo común, estando todos ellos dentro de una misma carpeta, conocida como carpeta raíz del sitio. Por ejemplo, teniendo en cuenta que el documento t_4_1.htm se encuentra directamente dentro de la carpeta raíz del sitio, para insertar el enlace: Enlace a Tema 4: Hiperenlaces Habría que escribir: <a href="/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a> Observa como aparece el símbolo "/" delante del nombre del documento. Esta barra inclinada indica la carpeta raíz del sitio. Si el documento t_4_1.htm se encontrara, por ejemplo, dentro de una carpeta llamada tema4, y esta estuviera dentro de la carpeta raíz del sitio, habría que escribir: <a href="/tema4/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>

16

IMAGEN <img> Todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten mejorar su apariencia, o dotarla de una mayor información visual. Para insertar una imagen es necesario insertar la etiqueta <img>. Dicha etiqueta no necesita etiqueta de cierre. El nombre de la imagen ha de especificarse a través del atributo src.

Por ejemplo, para insertar la siguiente imagen:

Habría que escribir: <img src="imagenes/logo_animales.gif"> Teniendo en cuenta que la imagen se llama logo_animales.gif y que está dentro de la carpeta imagenes, que se encuentra en el mismo directorio que el documento actual (referencia relativa al documento). Para trabajar de una forma más sencilla y ordenada, es recomendable que todos los documentos html se encuentren en un mismo directorio, y que dentro de este directorio existan diferentes carpetas para agrupar otros objetos, como puede ser una carpeta destinada a almacenar imágenes, o una carpeta destinada a almacenar archivos de audio, etc. Existen una serie de formatos de imagen más recomendables que otros para ser introducidos en una página web.

- Formatos de imagen

Las imágenes pueden ser de muchos formatos diferentes: bmp, gif, jpg, etc. Pero no todos estos formatos son adecuados para una web, debido a que pueden ocupar mucha memoria o a que no son compatibles con algunos navegadores. Los formatos más utilizados son el GIF y el JPG, que a pesar de ser imágenes de menor calidad que las imágenes BMP, son más recomendables debido a que ocupan menos memoria. Vamos a ver un poco más sobre estos formatos: Formato GIF: Utilizan un máximo de 256 colores, y son recomendables para imágenes con grandes áreas de un mismo color o de tonos no continuos. Suelen utilizarse con gran frecuencia, ya que permiten definir transparencias y animación. Formato JPG:

Las imágenes son de mayor calidad que las GIF, al poder contener millones de colores, pero el tamaño de la imagen es mayor y tarda más en descargarse se utilizan más para fotos. Puedes incluir imágenes en otros formatos, que podrán ser visualizadas en algunos navegadores. Este es el caso de las imágenes BMP y PNG. Puedes cambiar el formato de las imágenes mediante la utilización de algún programa de tratamiento de imágenes, como pueden ser Fireworks, Photoshop, Corel Draw, etc. Por ejemplo el Fireworks de Macromedia tiene una opción, exportar a tipo gif que reduce considerablemente la ocupación de la imagen sin perder en calidad (siempre que la imagen se adecue al formato)

TEXTO ALTERNATIVO

Cuando una imagen no puede ser visualizada en el navegador, cosa que puede ocurrir al especificar mal el valor del atributo src, aparece un recuadro blanco con una X roja en su lugar, junto con el nombre de la

imagen. Podemos hacer que en lugar de mostrarse el nombre de la imagen aparezca el texto que nosotros deseemos, gracias al atributo alt.

Por ejemplo, imagina que deseamos mostrar una imagen llamada gatito.gif, con el texto alternativo Imagen gato, para ello insertamos el siguiente código: <img src="gatito.gif" alt="Imagen gato" > Pero hemos cometido un error, ya que dicha imagen no se encuentra en el mismo directorio que el documento actual, sino que se encuentra dentro de la carpeta imágenes. En lugar de la imagen se mostrará lo siguiente:

Si en lugar del código anterior hubiéramos insertado el siguiente código: <img src="imagenes/gatito.gif" alt="Imagen gato" >

17

La imagen habría mostrado correctamente:

El texto alternativo se muestra también al situar el puntero sobre la imagen. Si situas el puntero sobre la imagen durante unos segundos, verás como aparece el texto Imagen gato. El texto alternativo es muy útil a la hora de diseñar páginas más asequibles a los invidentes ya que los programas lectores son capaces de leer el texto alternativo.

Realiza los ejemplos que se presentan anteriormente y socializa con tu docente

ACTIVIDAD 2. SISTEMATIZACIÓN Y TRANSFERENCIA DEL CONOCIMIENTO. SISTEMATIZACIÓN

Busca que es un número hexadecimal.

¿Qué características tienen las etiquetas de comienzo de elemento y la de fin o cierre de elemento?

¿Según lo leído para qué sirve la etiqueta <html>?

TRANSFERENCIA

1. Si no tienes abierto el Bloc de notas, ábrelo para realizar el primer ejercicio. 2. Escribe el código que aparece a continuación:

<html> <head> <title>Inicio</title> </head> <body bgcolor="#99CC99"> </body> </html> Con este código estarás creando un documento con el título "Inicio", y con el color de fondo verde (#99CC99).

3. Haz clic sobre el menú Archivo. 4. Haz clic sobre la opción Guardar como. Se abrirá el cuadro de diálogo Guardar como. 5. En el recuadro Tipo: elige Todos los archivos. 6. Guarda el documento con el nombre inicio.htm. 7. Abre el documento que acabas de crear en un navegador, y comprueba que obtienes una página.

Fíjate en el color de fondo de la página y en la barra de título. 8. Añadir el código necesario para que la página quede de la siguiente forma:

18

9. Añadir el código necesario para que la página quede de la siguiente forma:

10. Añadir el código necesario para que la página quede de la siguiente forma (el fondo puede ser la

imagen que desees, Establecer #990033 como color del texto del documento, y 4 como el tamaño normal.):

III. DESARROLLO CONTEXTUAL DATOS CURIOSOS

JavaScript está en todas partes! Desde que el lenguaje fue desarrollado en 1995 por Brendan Eich para hacer sitios web interactivos, en los últimos años se ha ido haciendo mucho más. Hoy en día, su popularidad ha inspirado un vibrante ecosistema de tecnologías, bibliotecas y marcos.

Casi cualquier sitio web moderno usa JavaScript.¿sabía que JavaScript ha saltado del navegador al servidor?

Desde la creación de NodeJS , JavaScript en las aplicaciones de servidor se ha vuelto bastante popular y ahora desempeña un papel clave en la infraestructura de back-end para las principales multinacionales.

Entonces, ¿qué otras cosas geniales crees que puedes hacer con JavaScript? Escribelas.

19

ACTIVIDAD 1. INTERIORIZACIÓN, REFLEXIÓN DEL SABER.

JavaScript es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico. Antecedentes En diciembre de 1995, Netscape y Sun Microsystems (el creador del lenguaje Java) luego de unirse objetivo de desarrollar el proyecto en conjunto, reintroducen este lenguaje con el nombre de Javascript. En respuesta a la popularidad de Javascript, Microsoft lanzo su propio lenguaje de programación a base de script, VBScript (una pequeña versión de Visual Basic). En el año de 1996 Microsoft se interesa por competir con Javascript por lo que lanza su lenguaje llamado Jscript, introducido en los navegadores de Internet Explorer. ¿Cómo nace Javascript? Javascript nació con la necesidad de permitir a los autores de sitio web crear páginas que permitan intercambiar con los usuarios, ya que se necesitaba crear webs de mayor complejidad. El HTML solo permitía crear páginas estáticas donde se podía mostrar textos con estilos, pero se necesitaba interactuar con los usuarios. El HTML solo permitía crear páginas estáticas donde se podía mostrar textos con estilos, pero se necesitaba interactuar con los usuarios. En los años de 1990, Netscape creo Livescript; las primeras versiones de este lenguaje fueron principalmente dedicadas a pequeños grupos de diseñadores Web que no necesitaban utilizar un compilador, o sin ninguna experiencia en la programación orientada a objetos. A medida que estuvieron disponibles nuevas versiones de este lenguaje incluían nuevos componentes que dan gran potencial al lenguaje, pero lamentablemente esta versión solo funcionaba en la última versión del Navigator en aquel momento. JavaScript fue desarrollado originalmente por Brendan Eich de Netscape con el nombre de Mocha, el cuál fue renombrado posteriormente a LiveScript, para finalmente quedar como JavaScript. El cambio de nombre coincidió aproximadamente con el momento en que Netscape agregó soporte para la tecnología Java en su navegador web Netscape Navigator en la versión 2.0B3 en diciembre de 1995. La denominación produjo confusión, dando la impresión de que el lenguaje es una prolongación de Java, y se ha caracterizado por muchos como una estrategia de mercadotecnia de Netscape para obtener prestigio e innovar en lo que eran los nuevos lenguajes de programación web. Características de Javascript • Es simple, no hace falta tener conocimientos avanzados de programación para poder hacer un programa en JavaScript. • Maneja objetos dentro de nuestra página Web y sobre ese objeto podemos definir diferentes eventos. Dichos objetos facilitan la programacion de paginas interactivas, a la vez que se evita la posibilidad de ejecutar comandos que puedan ser peligrosos para la maquina del usuario, tales como formateo de unidades, modificar archivos etc. • Es dinámico, responde a eventos en tiempo real. Eventos como presionar un botón, pasar el puntero del mouse sobre un determinado texto o el simple hecho de cargar la página o caducar un tiempo. Con esto podemos cambiar totalmente el aspecto de nuestra página al gusto del usuario, evitándonos tener en el servidor un página para cada gusto, hacer calculos en base a variables cuyo valor es determinado por el usuario, etc. Otras características del lenguaje son: Su sintaxis es similar a la usada en Java y C, al ser un lenguaje del lado del cliente este es interpretado por el Navegador, no se necesita tener instalado ningún Framework. • Variables: var = “Hola”, n=103 • Condiciones: if(i<10){ … } • Ciclos: for(i; i<10; i++){ … } • Arreglos: var miArreglo = new Array(“12”, “77”, “5”) • Funciones: Ppopias del lenguaje y predefinidas por los usuarios • Comentarios para una sola línea: // Comentarios • Comentarios para varias lineas: /*Comentarios*/ • Permite la programación orientada a objetos: document.write("Hola"); • Las variables pueden ser definidas como: string, integer, float, bolean simplemente utilizando “var”. Podemos usar “+” para concatenar cadenas y variables. Clases del lenguaje Arrays

20

Boolean Date Function Math Number Object Strings Diferencias entre Java y Javascript • Compilador: Para programar en Java necesitamos un Kit de desarrollo y un compilador. Sin embargo, Javascript no es un lenguaje que necesite que sus programas se compilen, sino que éstos se interpretan por parte del navegador cuando éste lee la página. • Orientado a objetos: Java es un lenguaje de programación orientado a objetos. (Más tarde veremos que quiere decir orientado a objetos, para el que no lo sepa todavía) Javascript no es orientado a objetos, esto quiere decir que podremos programar sin necesidad de crear clases, tal como se realiza en los lenguajes de programación estructurada como C o Pascal. • Propósito: Java es mucho más potente que Javascript, esto es debido a que Java es un lenguaje de propósito general, con el que se pueden hacer aplicaciones de lo más variado, sin embargo, con Javascript sólo podemos escribir programas para que se ejecuten en páginas web. • Otras características: Como se ve Java es mucho más complejo, aunque también más potente, robusto y seguro. Tiene más funcionalidades que Javascript y las diferencias que los separan son lo suficientemente importantes como para distinguirlos fácilmente. Utilización de Javascript 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ámicas, aunque existe una forma de JavaScript del lado del servidor (Server-side JavaScript o SSJS). Su uso en aplicaciones externas a la web. 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. ¿Dónde se puede ver funcionando? Entre los diferentes servicios que se encuentran realizados con Javascript en Internet se encuentran: Servicios Correo Servicios y clientes IRC y Chat Buscadores de Información.También podemos encontrar o crear códigos para insertarlos en las páginas como plugins o módulos funcionales: Reloj Contadores de visitas Fechas Calculadoras Validadores de formularios Detectores de navegadores e idiomas. ¿Cómo identificar código Javascript? El código javascript podemos encontrarlo dentro de las etiquetas <body></body> de nuestras páginas web. Por lo general se insertan entre: <script></script>. También pueden estar ubicados en ficheros externos usando: <script type="text/javascript" src="micodigo.js"></script> ¿Es compatible con navegadores? Javascript es soportado por la mayoría de los navegadores como Internet Explorer, Netscape Navigator, Opera, Mozilla Firefox, entre otros. Con el surgimiento de lenguajes como PHP del lado del servidor y Javascript del lado del cliente, surgió Ajax en acrónimo de (Asynchronous Javascript And XML (Lenguaje de Etiquetado Extensible por sus siglas en inglés). El mismo es una técnica para crear aplicaciones web interactivas. Este lenguaje combina varias tecnologías: • HTML y Hojas de Estilos CSS para generar estilos. • Implementaciones ECMAScript, uno de ellos es el lenguaje Javascript. • XMLHttpRequest es una de las funciones más importantes que incluye, que permite intercambiar datos asincrónicamente con el servidor web, puede ser mediante PHP, ASP, entre otros. Debemos tener en cuenta

21

que aunque Javascript sea soportado en gran cantidad de navegadores nuestros usuarios pueden elegir la opción de Activar/Desactivar el Javascript en los mismos. Javascript puede incluirse en cualquier documento y es compatible con HTML en el navegador del cliente, ya sea PHP, ASP, JSP y SVG. Incluir código directamente en una estructura HTML es una práctica invasiva y no recomendada. El método correcto que define la W3C es incluir javascript como un archivo externo, tanto por cuestiones de accesibilidad como práctica y velocidad en la navegación. RESPONDE:

1. Para crear un servidor web es necesario usar un lenguaje de programación tal como Hello World de Node. Hacer una descripción y escribir un ejemplo de cómo se programa un servidor web desde Node.

2. Explicar detalladamente como funciona una aplicación usando Javascript. Y ¿por qué es tan importante este tipo de programación?

3. Como funciona Javascript en aplicaciones móviles y ¿por qué es tan difícil desarrollar aplicaciones móviles?. Explique su respuesta.

4. ¿Qué papel juega javascript en el desarrollo de relojes inteligentes? Sustente su respuesta y de ejemplos.

ACTIVIDAD 2. SISTEMATIZACIÓN Y TRANSFERENCIA DEL CONOCIMIENTO. SISTEMATIZACIÓN

Observa el siguiente video y realiza el ejercicio.

https://www.youtube.com/watch?v=inwRGV6DDe8

TRANSFERENCIA Realiza el siguiente ejercicio.

Visualizacion en pantalla

Planteamiento general

Calculadora acabada

Pretendemos crear un cuadro o banner que nos muestre una calculadora parecida a una sencilla calculadora de bolsillo. Nos fijamos como ejemplo en la calculadora que viene con en el sistema operativo windows o en alguna parecida.

El recuadro o banner de la calculadora debe distinguirse del resto de la página, debe tener una "pantalla" donde ver los números que vamos escribiendo y los resultados, y unos botones o teclas con los números, operaciones, y otros elementos que hay en una calculadora normal.

La calculadora debe resolver las operaciones aritméticas que se planteen. Pàra ello además de usar los botones mediante un click de ratón, debemos poder usar el teclado para escribir y resolver las operaciones.

A la derecha mostramos cómo queda la calculadora una vez acabado el ejercicio. Pantalla y botones Empezaremos por crear el código que muestre la "pantalla" de la calculadora y los botones que vamos a utilizar para las "teclas". Para ello creamos una página en HTML. En ella creamos un "div" en el que mostraremos la calculadora. Dentro del "div calculadora", creamos un formulario que contendrá los elementos de la calculadora. En primer lugar la pantalla, a la que ponemos un atributo "id" para poder manejarla más tarde, y las teclas que consistirán en elementos "input type='button'". La distribución de los botones en filas la hacemos poniendo todos los botones de una misma fila dentro de un mismo párrafo. El código HTML que nos mostrará lo anterior es el siguiente: <div class="calculadora" <form action="#" name="calculadora" id="calculadora"> <p id="textoPantalla">0</p> <p> <input type="button" class="largo" value="Retr" /> <input type="button" class="largo" value="CE" /> <input type="button" class="largo" value="C" /> </p> <p> <input type="button" value="7" /> <input type="button" value="8" /> <input type="button" value="9" /> <input type="button" value="/" /> <input type="button" value="Raiz" /> </p>

22

<p> <input type="button" value="4" /> <input type="button" value="5" /> <input type="button" value="6" /> <input type="button" value="*" /> <input type="button" value="%" /> </p> <p> <input type="button" value="1" /> <input type="button" value="2" /> <input type="button" value="3" /> <input type="button" value="-" /> <input type="button" value="1/x" /> </p> <p> <input type="button" value="0" /> <input type="button" value="+/-" /> <input type="button" value="." /> <input type="button" value="+" /> <input type="button" value="="/> </p> </form> </div>

Fíjate que en los tres primeros botones le hemos puesto un atributo de clase class="largo"; esto es porque estos botones serán distintos de los otros. Este código lo veremos en pantalla tal como se nos muestra en el siguiente enlace:

http://aprende-web.net/jspracticas/calculadora/ej1.html Debemos mejorar el aspecto de la calculadora, esto lo haremos mediante el código css con el que daremos unas dimensiones determinadas a la calculadora, un borde que la delimite del resto de elementos, un color de fondo: A la vez centraremos las filas de botones y delimitaremos el estilo del texto de la pantalla y de los botones. Para ello aplicamos al código anterior el siguiente código CSS: /*aspectos generales: bordes y color de fondo de calculadora*/ .calculadora { border: 3px blue ridge; width: 250px;text-align: center; background-color: #f6f8d8; } /*pantalla de visualización: bordes, posición, color de fondo, estilo letra.*/ #textoPantalla { width: 185px; border: 2px black solid; text-align: right; position: relative; left: 23px; padding: 0px 5px; background-color: white; font-family: "courier new"; overflow: hidden;} /*botones normales: anchura y margen*/ .calculadora [type=button] { width: 35px; padding: 0; } /*botones especiales*/ .calculadora input.largo { color: red; width: 60px; } Tras añadir el código CSS anterior, el aspecto de la calculadora será tal como lo vemos en el siguiente enlace: http://aprende-web.net/jspracticas/calculadora/ej2.html

Planificación del script

Planteamiento general

En la página anterior hemos creado la estructura estática, es decir la apariencia que tiene la calculadora en pantalla. ahora necesitamos hacerla funcionar.

Antes de meternos a utilizar el código javascript para hacer funcionar la calculadora, debemos fijarnos en cómo funciona una calculadora de bolsillo, para "copiar" su forma de trabajar.

Una vez que sepamos los detalles de cómo funciona una calculadora, aplicaremos este sistema de funcionamiento a nuestro script. Funcionamiento de una calculadora

Cogemos una calculadora normal, (si no tienes otra la del S.O. windows te puede servir), ya sea real o virtual, y nos fijamos en como funciona. Nosotros debemos hacer que nuestro script funcione de la misma manera. observamos lo siguiente:

23

En principio observamos que hay diferentes tipos de teclas en función de su comportamiento. Las teclas de control: Retroceso, borrado total, y borrado parcial.(Retr, CE, C) Cifras y coma decimal: escriben el número en la pantalla. Operaciones con dos números: operaciones clásicas: suma, resta, multiplicación y división. Operaciones con un número: Raíz cuadrada, porcentaje, número opuesto y número inverso. Tecla de igual: Resuelve las operaciones.

Vemos que las distintas teclas o grupos de teclas hacen varias funciones diferentes. veamos cómo se traduce eso en el código. Planteamiento de la programación

Dependiendo de los distintos grupos de teclas y su comportamiento crearemos las distintas funciones que compondrán nuestro script. Veamos cuales son esas funciones asociadas a las teclas:

Teclas de cifras y coma decimal: La función de estas teclas es escribir un número en pantalla, el cual debemos guardarlo por si en una operación interviene más de un número. Crearmos una funcion número

(xx) donde recogemos las cifras pulsadas y los vamos añadiendo para formar un sólo número. Tendremos en cuenta también la coma decimal, la cual sólo puede escribirse una vez en el número. En la función recogemos en el parámetro la tecla pulsada para poder añadirla a las anteriores.

Operaciones con dos números: para estas teclas crearemos una funcion operar (op) En la cual en primer

lugar guardamos el número de la pantalla. Guardamos después el tipo de operación, el cual nos viene dado en el argumento de la función. Después ponemos la pantalla a cero para poder escribir el segundo número. La resolución de la operación se hace mediante el signo igual, sin embargo si ya habíamos guardado una operación anterior, las calculadoras también resuleven las operaciones pendientes al apretar cualquiera de estas teclas, por lo que dentro de esta función haremos una llamada a la función del signo igual antes de guardar ningún número.

Tecla de igual: Para esta tecla crearemos una funcion igualar () que resuelve las operaciones con dos

números, para ello comprobamos primero si tenemos un número guardado, y una operación guardada; si es así operamos de la siguiente manera: número guardado - operacion guardada - número de pantalla. Si no ha un número guardado o una operación guardada dejamos el número de pantalla tal como está. Después de operar el resultado lo guardamos como el número de reserva, ya que puede ser que queramos volver a operar con él.

Operaciones con un número: Estas teclas hacen operaciones en las que se toma el número que hay en

pantalla y se opera con él, por lo que no se necesitan dos números. Aquí crearemos una función para cada tecla en la que tomamos el número que hay en pantalla y lo transformamos. Las funciones serán:raizc() para la raiz cuadrada; porcent() para el porcentaje; opuest() para el número opuesto; yinve() para el número inverso. Estas operaciones se muestran directamente en pantalla sin necesidad de utilizar la tecla de igual, por lo que las funciones las resuelven directamente y muestran el número en pantalla.

Teclas de control: Cada una de estas teclas tiene una función distinta en la calculadora, por lo que crearemos en el código una función para cada tecla: retro() función asociada a la tecla retro, la cual permite borrar la última cifra escrita; borradoParcial() esta función borra el número escrito en pantalla, pero conserva el número y la operación guardada; borradoTotal() esta función borra tanto el número de pantalla como el número y operación guardadas, reinicializando la calculadora.

Estas son las funciones que nos van a permitir interactuar con las teclas para hacer funcionar la calculadora. Debemos ahora desarrollar el código que tendrá cada una de ellas.

Como ya sabemos los nombres de las funciones, vamos a poner en el código HTML los diferentes atributos onclick que harán que se activen las funciones. Modificamos el código HTML y nos quedará de la siguiente manera: <div class="calculadora" <form action="#" name="calculadora" id="calculadora"> <p id="textoPantalla">0</p> <p> <input type="button" class="largo" value="Retr" onclick="retro()" /> <input type="button" class="largo" value="CE" onclick="borradoParcial()" /> <input type="button" class="largo" value="C" onclick="borradoTotal()" /> </p> <p> <input type="button" value="7" onclick="numero(7)" /> <input type="button" value="8" onclick="numero('8')" /> <input type="button" value="9" onclick="numero('9')" /> <input type="button" value="/" onclick="operar('/')" /> <input type="button" value="Raiz" onclick="raizc()" /> </p> <p> <input type="button" value="4" onclick="numero('4')" /> <input type="button" value="5" onclick="numero('5')" /> <input type="button" value="6" onclick="numero('6')" /> <input type="button" value="*" onclick="operar('*')" /> <input type="button" value="%" onclick="porcent()" /> </p> <p> <input type="button" value="1" onclick="numero('1')" /> <input type="button" value="2" onclick="numero('2')" />

24

<input type="button" value="3" onclick="numero('3')" /> <input type="button" value="-" onclick="operar('-')" /> <input type="button" value="1/x" onclick="inve()" /> </p> <p> <input type="button" value="0" onclick="numero('0')" /> <input type="button" value="+/-" onclick="opuest()" /> <input type="button" value="." onclick="numero('.')" /> <input type="button" value="+" onclick="operar('+')" /> <input type="button" value="=" onclick="igualar()" /> </p> </form> </div> En el código se hace un llamamiento a las distintas funciones que se activarán al pulsar con el ratón las diferentes teclas de la calculadora. Si examinas el código verás que cada tecla tiene asignada la función que le corresponde, y con el argumento que le corresponde en caso de que éste haga falta. La calculadora debe funcionar también con las teclas del teclado, para ello crearemos también una función que recoja el valor de las teclas pulsadas, y envíe el resultado a las funciones adecuadas. ACTIVIDAD 3. RETROALIMENTACION DEL CONOCIMIENTO.

1. Los navegadores tienen que ser compatibles con la última versión HTML para poder insertar imágenes. a) Verdadero b) Falso 2. Siempre que escribimos una etiqueta debemos escribir su correspondiente etiqueta de cierre. a) Verdadero b) Falso 3. Si un navegador no reconoce una etiqueta... a) la cambia por otra b) la ignora c) muestra una imagen en su lugar 4. Para realizar las extensiones de los navegadores. a) se añaden nuevos atributos y etiquetas b) se crean nuevos editores visuales c) se utilizan editores de texto 5. Existen dos tipos de etiquetas: a) La de comienzo de elemento y la de fin de página b) La de comienzo de elemento y la de atributo c) La de comienzo de elemento y la de fin o cierre de elemento 6. El código de todas las páginas: a) Puede ser interpretado completamente por todos los navegadores. b) No puede ser interpretado completamente por todos los navegadores. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores. 7. Los editores visuales a) Pueden generar código basura. b) Permiten crear páginas web sin la necesidad de escribir ni una sola línea de código HTML. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores. 8. Las páginas web escritas en HTML tienen que tener la extensión html o htm. a) Verdadero b) Falso 9. El código de las páginas estará comprendido entre las etiquetas <head> y </head>. a) Verdadero b) Falso 10. El título de una página se establece dentro de la cabecera. a) Verdadero b) Falso 11. El margen que hay entre el borde de la ventana y el contenido de la página no puede modificarse. a) Verdadero b) Falso

25

12. Puede establecerse una imagen de fondo a través del atributo background. a) Verdadero b) Falso 13. Las etiquetas <body> y </body> van... a) Justo encima de la cabecera. b) Dentro de la cabecera. c) Justo debajo de la cabecera. 14. Es posible definir el color de la fuente del documento mediante... a) la etiqueta <html>. b) el atributo bgcolor. c) el atributo text. 15. Los atributos leftmargin y topmargin. a) no funcionan en Internet Explorer. b) no funcionan en Netscape. c) funcionan en todos los navegadores. 16. El color de fondo de una página... a) se especifica en la etiqueta <body>. b) puede establecerse a través del atributo bgcolor. c) las dos afirmaciones anteriores son verdaderas. d) las tres afirmaciones anteriores son falsas. 17. Los colores se representan en... a) binario. b) decimal. c) las dos afirmaciones anteriores son verdaderas. d) las tres afirmaciones anteriores son falsas. 18. Existen algunos caracteres que no se visualizan correctamente en algunos navegadores. a) Verdadero b) Falso 19. Los caracteres < y > son dos caracteres especiales que indican inicio y fin de etiqueta. a) Verdadero b) Falso 20. Los comentarios se insertan entre <!-- y //-->. a) Verdadero b) Falso 21. Si se escriben varios espacios en blanco seguidos sólamente se mostrará uno en el navegador. a) Verdadero b) Falso 22. La etiqueta <b> hace que el texto se muestre en cursiva. a) Verdadero. b) Falso. 23. El texto &nbsp; equivale a un espacio en blanco. a) Verdadero b) Falso 24. Los encabezados... a) Sirven para establecer el color de fondo del texto. b) Se utilizan para establecer títulos dentro de la página. c) No existen en HTML. 25. Las etiquetas <center> y </center>... a) permiten cambiar el tamaño del texto. b) permiten insertar un texto como título. c) permiten centrar el texto. 26. Para agrupar bloques de texto... A) Podemos utilizar las etiquetas <p> y <div>. B) Podemos utilizar la etiqueta <span>. C) Cualquiera de las dos primeras opciones. D) Ninguna de las opciones anteriores.

26

27. Las marquesinas... A) Pueden contener texto. B) Pueden contener imágenes. C) Cualquiera de las dos primeras opciones. D) Ninguna de las opciones anteriores. 28. Un hiperenlace es lo mismo que un hipervínculo, un vínculo, o un enlace. a) Verdadero b) Falso 29. Para insertar una imagen es necesario insertar la etiqueta <imagen>. a) Verdadero b) Falso 30. Existen una serie de formatos de imagen más recomendables que otros para ser introducidos en una página web. a) Verdadero b) Falso 31. Cuando una imagen no puede ser visualizada en el navegador aparece un recuadro blanco con una X roja en su lugar. a) Verdadero b) Falso 32. El texto alternativo no aparece al situar el puntero sobre la imagen. a) Verdadero b) Falso 33. Es preferible modificar el tamaño de las imágenes desde un editor de imágenes. a) Verdadero. b) Falso.

IV. CONCEPTOS TÉRMINO / CONCEPTO SIGNIFICADO

HTML

ETIQUETAS

JAVA

V. AUTOEVALUACIÓN Y MEJORA

AUTOEVALUACIÓN DEL PROCESO DE FORMACIÓN

A continuación, encontrarás una lista de ítems desarrollados durante la unidad. Debes decir si cumples o no cada uno de ellos. Lo importante no es obtener una calificación, sino reflexionar sobre lo que haces. Analiza y responde muy sinceramente.

ITEMS SI NO

1. Soy puntual en mi llegada al salón de clases.

2. Cumplo responsablemente con la presentación de tareas, talleres y trabajos de la asignatura.

3. Preparo adecuadamente, parciales, quices, exposiciones y evaluaciones acumulativas.

4. Contribuyo a la construcción de conocimiento asumiendo una actitud de escucha, respeto y reconocimiento de las opiniones de mis compañeros y profesores.

5. Cumplo con el manual de convivencia y practico los valores Rosaristas en el salón de clase.

NOTA DEFINITIVA DE LA AUTOEVALUACIÓN.

COMPROMISO DE MEJORA

VI. FUENTES DE CONSULTA

Referencias

27

AMADOR MONTAÑO, José Francisco (2005); Keypoint 1- 2- 3, Editorial Educativa Bogotá – Colombia.

Páginas Web

www.dagabot.com http://windows.microsoft.com/es-cl/windows/using-mouse#1TC=windows-7 https://sites.google.com/site/informaticaprimariaespamix/home/El-teclado

http://es.slideshare.net/cvbonilla1/el-teclado-8718564