Aplicaciones Web - Javascript

TEMA 2 ELABORACIN DE PGINAS WEB CON LENGUAJES DE MARCAS
Los lenguajes de marcas no son equivalentes a los lenguajes de programacin aunque se definan igualmente como lenguajes, son sistemas de descripcin de informacin. Para ello se utilizan etiquetas o marcas encerradas entre signos < y >. Podemos definir un lenguaje de marcas como una forma de codificar un documento donde junto al texto se incorporan etiquetas, marcas o anotaciones con informacin relativa a la estructura del texto, a su presentacin o a informacin del propio documento.
2.1.-LENGUAJE HTML ETIQUETAS Y ATRIBUTOS

El lenguaje HTML permite la creacin de pginas web. Los documentos HTML no son compilados generando un fichero ejecutable, son archivos interpretados por un navegador.
2.1.1.-VERSIONES DE HTML
A partir del 1995 se empezaron a establecer versiones de HTML. Cada vez que hagamos o que creemos una pgina indicaremos al navegador qu versin de HTML se usa. Esto se har en la primera lnea, donde pondremos !DOCTYPE. Los estndares HTML son el 1.0, el 2.0, el 3.0, el 4.0 y el 4.01. Dentro de la versin 4.0.1 tenemos las siguientes: -HTML 4.01 Strict (Estricto): Se usa sobre etiquetas del estndar HTML 4.01. -HTML 4.01 Transitional: Se aceptan las etiquetas obsoletas. -HTML 4.01 Frameset: Incluye el estilo transitional y adems soporte para frames, es el ms anticuado.
2.1.2.-NORMAS HTML
HTML cuenta con normas o recomendaciones que sugieren cmo se deben escribir los documentos para que el navegador pueda interpretarlos. Consideraciones a tener en cuenta: -Los nombres de las etiquetas no son sensibles a maysculas o minsculas. -Los nombres de las etiquetas no deben contener espacios en blanco. -Las etiquetas pueden anidarse (<b><i>Esto va en negrita y en cursiva</i></b>).
2.1.3.-ESTRUCTURA BSICA DE UN DOCUMENTO HTML

Los documentos HTML estn delimitados por las etiquetas <html> y </html>. Dentro del documento se distinguen 2 partes: -La cabecera (head) Delimitada por las etiquetas <head> y </head>. Contiene la identificacin e informacin del documento, como por ejemplo el ttulo del documento. Dentro se pone el ttulo de la pgina (<title>Ttulo de la pgina</title>), que aparecer en la barra de ttulo de la ventana/pestaa del navegador. -El cuerpo (body) Delimitado por las etiquetas <body> y </body>. Contiene el contenido de lo que se visualiza en pantalla (tablas, texto, imgenes...). Los archivos HTML tienen la extensin .htm o .html, por tanto la estructura bsica de una pgina web es la siguiente: Tipo de documento <html> <head> <title>Ttulo</title> </head> <body> Aqu va el resto de la pgina (texto, imgenes...). </body> </html>
2.1.4.-FORMATEO DE TEXTO
Las siguientes etiquetas son necesarias para obtener texto ms adornado con cabeceras, prrafos, lneas, negritas, subrayado, colores, etctera. Etiquetas de cabeceras: <h1>...</h1> <h2>...</h2> <h3>...</h3> <h4>...</h4> <h5>...</h5> <h6>...</h6> Etiquetas de texto: Cabecera Cabecera Cabecera Cabecera Cabecera Cabecera de de de de de de nivel nivel nivel nivel nivel nivel 1 2 3 4 5 6
<b>Negrita</b> <i>Cursiva</b> <sup>Superndice</sup> <sub>Subndice</sub> Etiquetas de prrafo: <p>Prrafo</p> <div align=x>...</div> Crea una divisin en la pgina, se utiliza para agrupar etiquetas y aplicar estilos. Se escribe texto y salta lneas. Todo lo incluido en div se puede justificar a la izquierda (left), a la derecha (right), centrado (center) o justificado (justify). las <span>...</span> Similar a div pero no admite atributos, se usa para hojas de estilo. EJERCICIO Crear un documento HTML llamado Formateotexto24oct.html, en dicho documento probaremos todas las etiquetas vistas en este apartado. Se pueden combinar varias de ellas. Etiquetas de color y tamao <font color=cdigo color>...</font> En cdigo color se escribe el cdigo del color en hexadecimal o el nombre del color. Ejemplos: -Azul = #000080 -Verde = #BEF781 <font size=tamao>...</font> Con el atributo size se especifica el tamao, es un nmero entre 1 y 7, y por defecto es el 3. <font face=nombre_fuente>...</font> Cambia al tipo de fuente especificada. <body bgcolor=color>...</color> Color al texto del documento. EJERCICIO Crear un documento HTML llamado Formateotexto25oct.html, en dicho documento practicaremos las etiquetas que ya hemos visto y les aadiremos colores.
2.1.5.-ENLACES, LINKS O HIPERVNCULOS
Los enlaces permiten ir a otra pgina web o a otra zona dentro de la misma pgina web. Para incluir enlaces se utiliza la etiqueta <a>. <a href=http://direccin>Texto del enlace</a> Direccin es la URL de la pgina que vamos a enlazar y puede ser una direccin de Internet, una pgina web (actividad2.html), a un fichero o bien otra zona del mismo documento. <a href=#parrafo>texto_enlace</a> El prrafo ha de aparecer en algn lugar del mismo documento acompaado. A estos links internos tambin se les llama anclas. <a href=foto.formato>Foto</a> -> Para enlazar ficheros dentro de la carpeta en la que est la web. <a href=mailto:micorreo@servidor.com>Contactar</a> -> Enviar e-mail a la direccin nombrada.
2.1.6.-NUMERACIN Y VIETAS (LISTAS)

Las listas son elementos de texto que nos sirven para organizar la informacin y estructurarla de acuerdo a una determinada jerarqua. HTML dispone de 3 tipos de listas: -Descriptivas: Son aquellas cuya finalidad es que aparezca una descripcin asociada a cada uno de los elementos de la lista. <dl> <dt>elemento</dt> <dd>descripcin</dd> </dl> -Numeradas: Permiten mantener listas como las anteriores incluyendo una numeracin automtica, de tal forma que la insercin de un nuevo elemento provoca la renumeracin de todos los dems. Este tipo de listas permiten indicar cul ser el valor de comienzo en el primer elemento y qu tipo de numeracin se va a usar indicndolo en la etiqueta <ol>. Tipo puede ser A (numeracin en letras maysculas: A, B, C, D), a (numeracin en letras minsculas: a, b, c, d), i (numeracin romana minscula: i, ii, iii, iv), I (numeracin romana mayscula: I, II, III, IV), 1 (numeracin numrica: 1, 2, 3, 4). <ol start=valor type=tipo> <li>elemento</li> </ol> Prctica: Codificar un documento HTML que se llame Lista_numerada2nov.html. -No numeradas: Son iguales que las anteriores pero los elementos de la lista no llevan asociada ninguna descripcin por lo que sirven nicamente
como elemento de formato de texto, al incorporar una marca al inicio de cada elemento de la lista. Las etiquetas que indican el inicio y el final de la lista son <ul> y </ul> y cada elemento de la lista se indica con <li> y </li>.
2.1.7.-IMGENES
Para insertar una imagen en una pgina web se utiliza la etiqueta <img src=imagen> donde imagen es el nombre del fichero que contiene la imagen, por ejemplo <img src=dibujo.jpg> mostrar en la pgina la imagen. Los formatos grficos ms utilizados son .gif, .png y .jpg porque ocupan poco espacio y se cargan rpidamente. Tambin se puede utilizar una imagen dentro de un enlace, por ejemplo: <a href=listanonumerada7nov.html><img src=dibujo.jpg></a> La etiqueta <img> admite los siguientes atributos: -width = ancho: Se utiliza para especificar el ancho de la imagen. -height = alto: Se utiliza para especificar el alto de la imagen. -align = alineacin: Especifica la alineacin de la imagen, puede ser: -top=arriba -bottom=abajo -left=izquierda -right=derecha -center=centrado -alt = comentario: Define un texto alternativo que se ver si el ratn pasa por la imagen o si el navegador no puede cargar la imagen. -border = tamao: Especifica el tamao del borde de la imagen.
2.1.8.-TABLAS
Las tablas permiten organizar la informacin en filas y columnas, vienen delimitadas por las etiquetas <table>. Dentro de la tabla cada fila est delimitada por las etiquetas <tr>. Y dentro de las filas las columnas vienen delimitadas por las etiquetas <td>. La cabecera es <th>. <table border=1> <tr> <th>Columna primera</th> <th>Columna segunda</th> <td>Fila 1 Columna 1</td> <td>Fila 1 Columna 2</td> <td>Fila 1 Columna 3</td> </tr> <tr> <td>Fila 2 Columna 1</td> <td>Fila 2 Columna 2</td> </table> Atributos utilizados para las tablas: Bgcolor=color (color del fondo de la tabla, de la fila o de la celda)
Bordercolor=color (color del borde de la tabla, la fila o la celda) Valign=valor (alinea verticalmente el contenido de las celda: top, bottom o middle) Align=valor (alinea el texto: left, center o right) Background=imagenfondo Cellpadding=nmero (define en px el espacio entre los bordes de la celda y el contenido) Height=nmero (define altura de tabla en px o %) Width=nmero (define anchura de tabla en px o %) Html con el horario de clase en una tabla. Aplica colores y alinea el texto. Se llamar Horario1SMR8nov.html. Combinar celdas: -Para combinar celdas se deben colocar en las marcas th o td los siguientes atributos: Rowspan=valor (para indicar el nmero de filas que se quiere combinar) Colspan=valor (para indicar el nmero de columnas que se quiere combinar)
2.1.9.-FRAMES
Los frames o marcos permiten dividir un documento en varias zonas, de forma que cada una de stas sea a su vez otro documento html. Se declaran con la etiqueta <frameset>. Actualmente esta etiqueta est en desuso y en su lugar se usa <iframes>, stos son marcos internos o flotantes dentro de las pginas html que permiten mostrar documentos dentro de otros documentos. Suelen ser usados para incluir publicidad o introducir partes de otras pginas en las nuestras. Src=enlace a abrir -> Se indica lo que queremos abrir en el marco. Name = nombre -> Nombre del frame. Scrolling=yes/no -> Barra de desplazamiento. Bordercolor=color Noresize -> Para que no se pueda cambiar el tamao. Height=alto Weidth=ancho
2.1.10.-FORMULARIOS
Estn formados por cajas de texto y botones que permiten introducir datos. Para definir un formulario se utilizan las etiquetas <form> y </form>. Entre estas dos etiquetas se colocan todos los campos y botones que componen el formulario. Podemos usar los siguientes atributos: Action=accin a realizar -> Tipo de accin a llevar a cabo por el formulario.
Method=post o get -> Mtodo en el que se envan los datos (habitualmente usaremos post). Enctype=text/plain -> De esta forma el contenido del formulario se enva como texto plano, nica posibilidad en caso de ser enviado por e-mail. En el caso ms habitual tendr el siguiente aspecto: <form action=mailto:direccin@correo.com method=post enctype=text/plain> La mayora de los controles se crean con la etiqueta <input></input>. <input>Text, password, radio, checkbox, submit, reset...</input> Un atributo comn a todas es name para dar nombre al control y es recomendable usarlo siempre. Otro que es comn a todos ellos es align. Text En las cajas de texto se enva al servidor texto introducido por el usuario. <input type=text name=Mitexto> Atributos para text: -Size=nmero -> Determina la anchura de la caja de texto (valor por defecto, 20). -Maxlenght=nmero -> Determina el nmero mximo de caracteres que entran. -Value=Texto -> Sirve para especificar un texto por defecto. -Title=Texto -> Bocadillo informativo. Password En ocasiones es conveniente pedir al usuario informacin oculta como puede ser una clave de acceso o password (contrasea). Para ello usaremos type=password dentro de la etiqueta <input>. Botones de eleccin o radio buttons Permiten elegir entre varias opciones. Se puede especificar que una opcin est seleccionada por defecto insertando el atributo checked. Para indicar que una serie de botones pertenecen a un mismo grupo se hace con el atributo name, y usaremos el atributo value para dar un nombre distinto a cada uno de los botones. <div align=center> <h3 align=center>Selecciona un tipo de msica</h3> <form> <p><input type=radio name=msica value=Jazz>Jazz</p> <p><input type=radio name=msica value=Pop>Pop</p> </form> </div>
Cajas de seleccin Permiten seleccionar varias opciones de una lista. Cada caja de seleccin es independiente de las dems y por tanto el valor del atributo name debe ser diferente en cada una. La etiqueta es <checkbox>. <h1>Probando checkbox</h1> <font color=red>Selecciona aficiones</font> <p><input type=checkbox name=tenis>Practicar tenis</p> <p><input type=checkbox name=ftbol>Practicar fbtol</p> <p><input type=checkbox name=pdel>Practicar pdel</p> <p><input type=checkbox name=videojuegos>Videojuegos</p> Botones de envo Para crear un botn de envo se usa type=submit. Deberemos incluir la siguiente etiqueta: <input type=submit value=texto del botn name=nombre del botn> Botn de borrado HTML dispone de un control que permite borrar los datos actuales de los campos del formulario y restablecer los valores por defecto. <input type=reset name=Borrado value=Texto del botn>. Botn genrico Este botn no tiene ninguna funcin especfica, es decir, podemos darle la funcin que se estime oportuna. Usaremos type=button. <input type=button value=Pulse para continuar> Las acciones que debe llevar a cabo este botn al ser pulsado deben indicarse con un lenguaje de script, para ello usaremos el atributo onClick. <input type=button value=Pulse onClick=cdigo de script> Ejemplo onClick: <input type=button value=Cargar pgina en la misma ventana onClick=window.location.replace (formulario1.html);> <input type=button value=En otra ventana onClick=window.open (formulario1.html);> Etiquetas <select> Mediante esta etiqueta se puede definir una entrada de datos en forma de lista desplegable que presenta varias opciones de eleccin y el usuario puede elegir una de ellas. <form>
<h3>Desplegable con cinco valores</h3> <h3>Selecciona uno</h3> <select name=milista> <option value=uno>Uno <option value=dos>Dos <option value=tres>Tres <option value=cuatro>Cuatro <option value=cinco>Cinco </select> </form> Si queremos establecer una opcin por defecto usaremos el parmetro selected.
2.2.-LENGUAJE XHTML (eXtensible HTML)

Es una versin ms estricta de HTML que nace por la limitacin de HTML con las herramientas basadas en XML, es decir, XHTML es una redefinicin del lenguaje HTML como aplicacin XML. Exige una serie de requisitos bsicos que debe cumplir el cdigo, por ejemplo: elementos adecuadamente anidados, etiquetas en minsculas, elementos cerrados correctamente, valores de los atributos entrecomillados La estructura de un documento XHTML tiene el siguiente aspecto: <?xml version=1.0 encoding=UTF-8?> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd> <html xmls=http://www.w3.org/1999/xhtml xml:lang=es lang=es> <head> <title>Ttulo de la pgina</title> </head> <body> Cdigo pgina </body> </html> En la primera lnea tenemos un prlogo XML. Es opcional, sirve para especificar al navegador la codificacin de caracteres y la versin XML que se est utilizando. XHTML 1: ofrece tres posibles declaraciones de tipo de documento (DOCTYPE). -Strict: Las ms ajustadas al estndar, no puede contener frames, ni elementos, ni atributos; est en desuso. Se usa cuando el formato a los textos se hace a travs de CSS (hojas de estilo). En este caso la cabecera queda como la anterior. -Transitional: Como la anterior pero aadiendo elementos y atributos en desuso. Se utiliza cuando no utilizamos CSS. La cabecera quedara como la anterior pero cambiando las partes en las que pone strict por transitional.
-Frameset: Igual que el transitional pero adems permite utilizar frames.
2.2.1 DIFERENCIAS ENTRE XHTML Y HTML

Todos los nombres de etiquetas y atributos van en minscula. Es importante ya que XML interpreta de forma distinta las maysculas y minsculas: <body>Correcto</body> <BODY>Incorrecto</BODY> <img src="imagen.jpg">Correcto <IMG SRC="imagen.jpg">Incorrecto Todos los valores de los atributos van entre comillas incluso aquellos que sean numricos. Todos los atributos tienen que tener un valor asignado: <input type="checkbox" name="Pars" value="Espaa" checked>Incorrecto <input type="checkbox" name="Pars" value="Espaa" checked=checked>Correcto Toda las etiquetas deben estar cerradas: <li>.</li> <td></td> Cerrar las etiquetas vacas: <br/> <img src=imagen.jpg/> <hr/> Los comentarios no se deben incluir los guiones dobles: Pasos para hacer un comentario: <! Comentario, esto lo ignora el navegador --> correcto <! comentario incorrecto en XHTML --> 
Ejercicio nombre: DeHTMLaXHTML28nov.html Vamos a convertir un documento HTML en XHTML manualmente, para ello comprobaremos qu es vlido con respecto a alguno de los tres tipos de documentos que conforman el XHTML.
2.3.-HOJAS DE ESTILO (CSS)

Las hojas de estilo en cascada son un mecanismo simple que describe cmo se mostrar un documento en pantalla. Las CSS se utilizan para dar estilo a documentos HTML separando el contenido de la presentacin. Los estilos definen la forma de mostrar los elementos HTML.
CSS permite a los desarrolladores web controlar el estilo y el formato de mltiples pginas web al mismo tiempo. Cualquier cambio en el estilo marcado para 1 elemento afectar a todas las pginas vinculadas a esa hoja de estilo en las que aparezca ese elemento.
2.3.1.-SINTAXIS BSICA DE CSS

CSS funciona a base de declaraciones sobre el estilo de uno o unos documentos, por tanto, las CSS estn compuestas por estas reglas aplicadas a un documento HTML: Regla CSS -Selector -Declaracin -Propiedad -Valor El selector es el elemento HTML o la etiqueta a la que vamos a definir un estilo, por ejemplo (en el ejemplo: body). Propiedad es el atributo que se desea modificar (en el ejemplo: backgroundcolor). Valor es el valor que deseamos asignar a la propiedad (en el ejemplo: red). Body{background-color:red;} Ms ejemplos: H1{text-align:center;color:black;} P{background:yellow;color:blue;} Muchos de los valores que se pueden asignar a los atributos son unidades de medida, por ejemplo el valor del tamao de un margen o el tamao de la fuente. Las unidades de medida se muestran en la siguiente tabla. Unidad de medida Pulgadas (in) 2,54 cm Centmetros (cm) Milmetros (mm) Puntos (pt) 1/72 pulgadas Pxel (px) Depende de la resolucin Em Depende de la letra empleada Ejemplo P{font-size:12in;} P{font-size:12cm;} P{font-size:12mm;} P{font-size:12pt;} P{font-size:12px;} P{font-size:12em}
2.3.2.-NORMAS BSICAS A LA HORA DE CREAR CSS

Los selectores pueden aparecer individualmente o agrupados. Cuando hay diferentes selectores se separan por comas. Las propiedades que se desean modificar en una hoja de estilo para un mismo
selector pueden agruparse pero ser necesario separarlas con ;. Normalmente se describe una propiedad por lnea, esto hace que sea ms legible. Si el valor est formado por ms de una palabra hay que ponerlo entre comillas.
2.3.3.-APLICAR CSS A UN DOCUMENTO HTML

Existen 3 formas de dar estilo a un documento HTML: 1.-Mediante el atributo style, utilizndolo sobre aquellos elementos que lo permitan, por ejemplo: <html> <head><title>Ejemplo_estilos29nov</title></head> <body style=background-color:#FF0000;> Texto sin formato, pgina con fondo rojo. <p style=font-family:'comic sans ms';font-size:16pt;color:blue;> Prrafo con fuente Comic Sans, tamao 16 y color azul.</p> </body> </html> Este tipo de definicin del estilo pierde las ventajas que ofrecen las hojas de estilo al mezclarse el contenido con la presentacin. 2.-Mediante la etiqueta style, declarando la etiqueta <style> dentro de la seccin <head> del documento. <html> <head><title>Ej_estilos_interno30nov</title> <style type="text/css"> body { padding-left:11em; font-family:"Times New Roman";color:red; background-color:#d8da3d; } p { background:yellow;color:black; font-family:"Comic Sans MS"; border:"solid blue";border-width:0.5in"; } h1 { font-family:Helvetica; } </style> </head> <body> <h1>Tipo de letra de ttulo</h1> <p>Estilo prrafo, color fondo amarillo, texto negro, tipo letra Comic,
encerrado en borde azul</p><br/> Valores por defecto de body: letra Times, color rojo </body> </html> 3.-Mediante un enlace a una hoja de estilos externa que estar vinculada al documento HTML a travs de la etiqueta <link> dentro de la seccin <head>. Vamos a ver un ejemplo (Estilos_externo30nov.html) en el que usaremos el fichero de estilos Estilos30nov.css. Estilos30nov.html <html> <head> <link rel="STYLESHEET" type="text/css" href="Estilos30nov.css"> <title>Pgina que lee estilos</title> </head> <body> <h1>Pgina con estilos</h1> Esta pgina enlaza con un fichero CSS. <br/><br/> <table border="0" cellpadding="2" cellspacing="2" width="300"> <tr><td>Dentro de un TD tiene estilo propio</td> </tr> <tr><td>Segunda fila</td> </tr> </table> </body> </html> Estilos30nov.css body { background-color:#006600; font-family:arial; color:white; } p { font-size:12pt; font-family:arial,helvetica; font-weight:normal; } h1 { font-size:36pt; text-decoration:underline; text-align:center; background-color:teal; } td { font-size:10pt; font-family:verdana,arial; text-align:center;
background-color:#666666; }
2.3.4.-ATRIBUTOS DE LAS HOJAS DE ESTILO

Para todos los elementos ATRIBUTO Width Height USO Ancho del elemento - Ej: width:20px; Alto
Para fuentes ATRIBUTO Color font-size font-family font-weight font-style USO Color al texto Ej: color:red; Tamao de la fuente Ej: fontsize:12pt; Tipo de fuente Ej: font-family:arial; Ancho de caracteres Ej: fontweight:bold; POSIBLES: bold, lighter, 100...900 Estilo fuente Ej: font-style:normal POSIBLES: normal, italic, oblique Para prrafos ATRIBUTO line-height text-decoration text-align text-indent text-transform letter-spacing word-spacing USO Espacio entre lneas None, underline, overline, line-through Left, center, right, justify Margen: px, pt, em, cm... Transforma el texto a mayscula, minscula o letra capital POSIBLES: capitalize, uppercase, lowercase Espaciado entre letras Espaciado entre palabras Para fondos ATRIBUTO background-color background-image background-repeat USO Color de fondo Imagen de fondo para un elemento Repite la imagen de fondo POSIBLES: repeat-x, repeat-y, no-
repeat Vamos a aplicar los siguientes estilos: 1.-Para toda la pgina color de fuente rojo (red), color de fonda plata (silver) y tipo de letra arial. 2.-Para las etiquetas h1 pondremos color blanco, espaciado de palabra de 30 px y letra Comic Sans MS. 3.-Para las etiquetas h3 pondremos letra cursiva, en minscula y fuente tahoma. 4.-Para los prrafos se alinea el texto al centro, que ocupe un ancho de 250 px y color de fondo olive. 5.-En la lista ul pondremos un ancho de 200 px y color de fondo purple.
Para cajas
Las partes que componen cada caja son las siguientes: -Contenido: Es el elemento HTML en s (palabras de un prrafo, una imagen, una lista de elementos...). -Relleno o padding: Espacio libre opcional entre el contenido y el borde. -Borde o border: Es la lnea que encierra -Margen o margin: Es la separacin opcional existente entre la caja y el resto de cajas adyacentes. ATRIBUTO margin-left margin-right margin-top margin-bottom padding-left padding-right padding-bottom padding-top USO Margen a la izquierda
Espacio insertado
border-color border-style border-width Aplicar los siguientes estilos:
Color del borde Dotted (punteado), solid o double
1.-body: Margen a la izquierda (200px) 2.-h1: Margen a la derecha (300px), relleno (5px) y borde solid rojo (5px) 3.-h3: Margen a la derecha (300px) y texto alineado a la derecha 4.-p: Relleno arriba y abajo (10px) y borde solid azul (10px) 5.-li: Relleno (5px) y borde solid blanco (0.5px) Actividad_CapitalesEuropeas13dic En esta prctica crearemos varias pginas que muestren datos de las capitales europeas. Se elaborar una pgina principal que se llamar ndice.html con enlaces que accedern a cada una de las pginas creadas. Para cada capital se crear una pgina (mnimo 3), por ejemplo: Madrid, Roma y Pars. En esta pgina aparecer al menos un prrafo contando algo sobre la ciudad y una fotografa de la misma. Busca informacin en Internet. Los estilos a aplicar son: body: Relleno a la izquierda (12em), letra Arial de color purple y color de fondo #d8da3d. h1: Tipo de letra Comic Sans MS. ul: Relleno y margen a 0, position:fixed, arriba 100px, izquierda 50px. img: Se colocan a la derecha y con un margen a la derecha de 50px. p: Relleno de 3px en todas las direcciones, margen a la derecha de 30em, color del texto negro, color de fondo plum, borde solid de color brown y ancho de 5px y posicin fixed. Guarda los estilos en un archivo de estilos (CSS_Capitales13dic.css) y enlzalo dentro de cada una de las pginas.
2.3.5.-SELECTOR DE CLASE
Con el selector de clases (class) se puede hacer que un mismo elemento pueda tener varios estilos y adems que un mismo estilo pueda ser aplicado a varios elementos para definir una clase se utiliza la palabra reservada junto al nombre de la clase. <head><style type="text/css"> estilo1 { padding-left:11em;
font-family:"Times New Roman"; color:red; background-color:#d8da3d; } estilo2 { background-color:yellow; color:black; font-family:"Comic Sans MS"; border:solid blue 0.5in; } </style></head> <body> <h1 class="estilo1">sta es la cabecera H1 del documento</h1> <p class="estilo1">ste es el primer prrafo.</p> <p class="estilo2">ste es el segundo prrafo.</p> <h2 class="estilo2">sta es la cabecera H2 del documento.</h2> </body> </html>
2.3.6.-SELECTOR DE ID
Usado con <div>. Permite agrupar varias etiquetas. Mediante el atributo id se pueden establecer una serie de estilos a un grupo de etiquetas incluidas en <div>. La sintaxis o el formato que se va a utilizar es el siguiente: <div id="nombre">Y para poner el estilo deber escribirse nombre. #nombre { estilos a aplicar } Ser til cuando se divida la pgina en grupos o contenedores, por ejemplo: 1.-Modificaremos el body del ejercicio anterior y aadiremos una etiqueta <div> con el selector id que incluir las tres primeras lneas. Quedar de la siguiente forma: <div id="contenido"> <h1 class="estilo1"> sta es la cabecera h1 del documento.</h1> <p class="estilo1"> ste es el primer prrafo.</p> <p class="estilo2"> ste es el segundo prrafo.</p>
</div> <h2 class="estilo2"> sta es la cabecera h2 del documento.</h> Vamos a aplicar los siguientes estilos a contenido: #contenido {width:50px;margin-left:100px;background-color:#FFF99;} A este ejercicio lo titularemos "Estilos_ID21dic.html".
2.3.7.-ELABORAR MENS
La instrusin de mens en las pginas se puede hacer de varias formas. Una de ellas es usando enlaces y otra usando listas. 2.-Ejemplo: Menu_horizontal_enlaces21dic.html Creacin de un men horizontal usando enlaces a buscadores de Internet. El body sera: <body> <div id="horizontal"> <a href="http://www.google.es">Google</a> <a href="http://yahoo.es">Yahoo</a> <a href="http://es.msn.com">Msn</a> <a href="http://www.altavista.com">Altavista</a> </div> </body> <head> <style type="text/CSS"> #horizontal Estilo para div id: ancho 400px y un borde. Esto hace que el men aparezca en una caja. #horizontal {width:400px;border:solid grey;border-width:3px;} En este ejercicio se utiliza el cdigo del archivo CSS creado en la actividad anterior. Se parte del siguiente cdigo de estilos asociados a la lista. ul { padding:0; margin:0; position:fixed;left:50px;top:100px; }
-Se cambia el relleno (padding) de 0 a 5 px para que la lista no quede tan pegada a la caja que la contiene. -Se pone un ancho de 160 px a la caja que la contiene. -Se quita el estilo de la lista para que no aparezcan topos (ninguno). -Lista con color #F5A9F2 de fondo.
-A continuacin se da estilo al enlace contenido en la lista (li a). -Se pone un relleno (padding) de 0.2em 0em 0.2em 1.5em. -Deber visualizarse cada elemento en un block. -Se quita la decoracin del enlace. -Se le da un fondo de color #F4F4F4. li -Borde en la parte superior de 2px. -Borde "slido" (solid) de color "blanco" (#FFFFFF). -Se hace que cuando pase el ratn por los enlaces de la lista y cuando el enlace est pulsado, aparezca el color de fondo #F3F781. -Cuando se haya visitado, se ponga el color de fuente a "negro" (#000000).
2.3.8.-ESTILOS PARA TABLAS

Se puede cambiar el aspecto de una tabla utilizando estilos. Por defecto, cuando se crea una tabla aparece sin bordes, por ejemplo, para poner un borde de color rojo a una tabla seran necesarias las siguientes reglas: table {border-collapse:collapse;} table, th, td {border:1px solid red;} Tabla_y_estilos11ene.html Dada la siguiente tabla, aplicar los siguientes estilos: 1.-Borde de una lnea y ancho de 600px 2.-Para las etiquetas th y td a la vez, borde slido (solid) de color rojo (red), relleno (padding) arriba y abajo de 0 y derecha e izquierda de 0,3 (0.3em) 3.-Para th, relleno de color #CECEF6 y letra Comic Sans MS 4.-Para las filas (tr), color de fondo #F5F6CE 5.-Cuando pase el ratn por las filas queremos que el fondo cambie de color y que el tamao de la fuente tenga 15px
2.3.9.-CONTENEDORES
Los contenedores o cajas de contenido permiten dividir el documento en reas de contenido para de esta manera organizar la forma de presentar la informacin. Un esquema de un sitio podra estar estructurado de la siguiente forma.
A partir del siguiente cdigo se aplican los estilos necesarios para obtener el aspecto de nuestra pgina. La estructura de la pgina ser la siguiente:
1.-Columna de la izquierda (secundario): ancho 200px, padding 5px, color de fondo amarillo #ffff55, borde solid de 1px y de color #555555, se coloca como caja flotante a la izquierda (float:left). 2.-Principal: margen a la izquierda de 200px, padding 5px, color de fondo #FFFFBB. 3.-Se ajustan las columnas al borde de la pgina. Para ello no se deja margen ni relleno en todos los elementos de la pgina. 4.-Se dan propiedades al contenedor llamado "contenido" para que aparezca centrado en la pgina. 5.-Finalmente se hace que el alto de la columna llegue hasta el final y para eso aadimos "height:100%" a todas las etiquetas "div", es decir, contenido,
secundario y principal.
2.4.-INTEGRACIN DE SCRIPTS (JAVASCRIPT)

Los lenguajes de script sirven principalmente para aadir contenido "dinmico" a las pginas web (grficos, textos y dems). El contenido dinmico puede cambiar dependiendo de las operaciones que realiza el usuario a lo largo de su ejecucin Vamos a ver programas script realizados en el lenguaje JavaScript cuya principal funcin es incluir contenido dinmico a las pginas web. El cdigo JavaScript se cierra entre las etiquetas <script> y </script>. Se puede incluir en cualquier parte del documento, habitualmente dentro de head y la forma ms estndar de incluir el cdigo es la siguiente: <script type="text/javascript">  </script> El lenguaje JavaScript es sensible a maysculas y minsculas.
2.4.1.-VARIABLES EN JAVASCRIPT
Podemos definir una variable como un depsito/contenedor donde hay un valor. La variable consta de un nombre y pertenece a un tipo. Provincia -> Cadena de caracteres Salario -> Numrico Los nombres de la variable atienden a las siguientes reglas: 1.-Deben comenzar con una letra. 2.-Una variable no puede tener el mismo nombre que una palabra clave o reservada del lenguaje.
Una variable se declara o se define anteponindole la palabra clave o la palabra reservada "var". Se pueden declarar varias variables en la misma lnea. var salario,edad=19,nombre;
2.4.2.-ELECCIN DEL NOMBRE DE UNA VARIABLE

Una variable se puede definir e inmediatamente inicializarla con un valor. Debemos elegir nombres de variables representativos. Salario y edad son nombres representativos de su contenido. Cuando visualizamos una variable no debemos ponerla entre comillas simples. Una variable es de un tipo determinado cuando le asignamos un valor. Para mostrar el contenido de una variable en pantalla utilizamos la funcin "write", que pertenece al objeto "document".
2.4.3.-VENTANA EMERGENTE (PROMPT)

Para la entrada de datos desde el teclado tenemos la funcin prompt.
2.4.4.-FUNCIN ALERT
Muestra un mensaje utilizando una ventana.
2.4.5.-OPERACIONES MATEMTICAS EN JAVASCRIPT

Vamos a ver un ejemplo de algoritmo que realiza la carga desde el teclado de dos nmeros e imprime su suma y su producto. La funcin parseInt hace que los valores de las variables se sumen como enteros y no como cadena de caracteres.
2.4.6.-ESTRUCTURAS CONDICIONALES (if Y else)

Cuando hay que tomar una decisin aparecen las estructuras condicionales. Codificar un programa JavaScript que lea la nota y el nombre de un alumno por teclado y que muestre un mensaje de que est aprobado cuando la nota sea mayor o igual a 5.
La instruccin if lleva la condicin entre parntesis y else entre corchetes.
Para poner condiciones podemos utilizar los operadores relacionales y los operadores lgicos. Relacionales > mayor que < menor que >= mayor o igual que <= menor o igual que == igual a != distinto a Lgicos ! (NOT) && (and) || (OR) Programa que lea dos nmeros y visualice el mayor.
2.4.9 BUCLE FOR

Cualquier programa que requiera una estructura repetitiva se puede resolver empleando la estructura While. Pero existe otra estructura repetitiva cuyo formato es ms adecuado para ciertas situaciones. Se trata de situaciones en las que conocemos la cantidad de veces (iteraciones) que queremos que se ejecute el bloque de instrucciones. Por ejemplo: leer 10 nmeros, cargar los nombres de 20 alumnos. Sintaxis: for(<Inicializacin>;<condicin>;<incremento o decremento>) { Instruccin-1; Instruccin-2; } for(i=1; i<=num; i++) {document.write(i+<br>); } Bloques: Inicializacin: se inicializa la variable de control del bucle for. En el ejemplo la variable de control es la i y la inicializamos a 1. Condicin: se especifica la condicin de permanencia en el bucle; es decir estaremos en el bucle si la condicin es verdadera. Incremento decremento: se especifica la variacin de la variable de control en cada iteracin Funcionamiento:
1 Se inicializa la variable de control. 2 Se evala la condicin. En caso de ser verdadera se ejecuta el bloque de instrucciones, en caso contrario se sale del bucle y continua el programa. 3 Ejecuta las instrucciones. 4 Ejecuta el 3er argumento(incremento o decremento). 5 Se repiten sucesivamente los pasos del 2 a el 4. Ejercicio: Codificar un javascript que muestre los numero del 1 al 10 con un bucle for. Js_for1al10_30ene Programa javascript que se llame js_25a50_30Ene; que codifique los numeros impares en orden ascendente del 25 al 50. Codificar un programa javascript que lea un numero entero y positivo menor que 100 y muestre todos los numeros pares entre 100 y el numero introducido de manera descendente. Codificar un javascript que lea un numero entre el 1 y el 10 y utilizando un bucle for visualize su tabla de multiplicar. Codificar un javascript que lea un numero y nos diga si es mltiplo de 7. Codificar un javascript que lea un numero menor que 100 y nos muestre sus divisores. Js_divisores31ene. Codificar un programa javascript que nos lea un numero y nos muestre cuantos dgitos tiene Js_Ndigitos1feb. Codificar un javascript que lea el nombre y la edad de 5 personas y al final del proceso nos visualize el nombre de la mayor y de la mas joven. Js_mayorymasjoven_1feb. Codificar un javascript que lea un numero y nos muestre si es un numero primo Codificar un javascript que lea un numero y diga el factorial del numero Codificar un javascript que lea un numero desde el teclado y al final nos muestre el mayor y el menor de los numero introducidos y la media de todos los nmeros. El proceso terminara cuando se introduzca un 0
2.4.10 FUNCIONES JAVASCRIPT

Hasta ahora hemos visto como realizar cdigo de una forma estructurada con sentencias de control que nos permiten dominar la ejecucin del programa. Pero qu ocurre si queremos reutilizar un cdigo en varios programas. Esto se resuelve gracias a las funciones. Las funciones son segmentos de cdigo que tienen nombre y que podemos utilizar en cualquier parte del cdigo realizando lo que se conoce como una llamada. Ejemplo de funcin:
function datos_personales (nombre, apellidos, edad) {/*inicio*/ return (Hola, +nombre+ +apellidos+ tienes +edad+ aos); }/*fin*/ alert (datos_personales(Pepito , Perez , 24)); Codificar un javascript que incluya una funcin que recibe tres nmeros y nos devuelve el mayor de los 3. Codificar un javascript que lea un numero entero y positivo y nos diga si el numero es primo usando una funcin f_primo con esta sintaxis: La funcin devolver uno de dos posibles valores(true o false) Divisores con funcin. Los divisores sern mostrados dentro de la funcin
2.4.11 VALIDACION DE FORMULARIOS

Los formularios representan una forma rpida y eficaz de enviar informacin desde el ordenador del usuario hasta el servidor web. La mayora de los campos que el usuario debe rellenar obedecen a un formato determinado por lo que conviene completarlos de manera correcta para evitar errores de proceso en el servidor. Javascript es una herramienta til para validar la informacin en el cliente; es decir, antes de llegar al servidor. En primer lugar creamos el formulario dentro del body y usamos campos de entrada y un botn para enviar los datos. Al pulsar el botos vamos a aadir el elemento onclick que llama a una funcin javascript. <body> <h2>formulario. Validacion nombre y edad</h2> <form name=mi formulario action=mailto:aw@hotmail.com> <table> <tr> <td>Nombre</td> <td><input type=text name=edad></td> </tr> <tr> <td>Edad:</td> <td><input type=text name=edad></td> </tr> <tr><td colspan=2 align=center> <input type=button value=Enviar onclick=Vaodar(miformulario)></td> </tr> </table> </form> </body> Cdigo funcin
<script type=text/javascript> function validar(miformulario) { //validacin nombre If (document.miformulario.nombre.value.lenght==0) { Alert(Tiene que escribir su nombre); Document.formulario.nombre.focus (); Return 0; } If (document.miformulario.edad.value<=18) { Alert(Pedimos una edad mayor que 18); Document.miformulario.edad.focus (); Return 0; } Alert (gracias por enviar el formulario); Document.miformulario.submit (); } </script> 2. Actividad validar_formulario2. A partir del ejercicio anterior aadir un campo al formulario que le vamos a llamar estado civil. El contenido del formulario seria soltero y casado. A partir del ejercicio anterior aade el campo salario al formulario y valida su importe para que este comprendido entre 650 y 4000
TEMA 3: GESTORES DE CONTENIDOS. JOOMLA

Un gestor de contenido (Content Management System) proporciona un entorno que posibilita la actualizacin, mantenimiento y ampliacin de contenidos en la web de forma sencilla y con la colaboracin de multiples usuarios. 3.1 Definicion y tipos (CMS) CMS-> Aplicacin informtica que permite crear un marco de trabajo para la creacin, edicin, gestin y publicacin de contenido digital en diversos formatos. El sistema permite manejar de manera independiente el contenido y el diseo. Actualmente se impone el uso de CMS gratuitos para elaborar y gestionar las webs obteniendo sitios mas dinmicos y llenos de funcionalidades. Algunas de las caractersticas mas importantes de un CMS son: 1. Inclusion de nuevas funcionalidades en la web 2. Mantenimiento de gran cantidad de paginas a la vez 3. Reutilizacion de objetos o componentes 4. Paginas interactivas 5. Cambios de aspectos en la web 6. Control de acceso a la web
Habitualmente un CMS esta soportado por una base de datos en la que se aloja el contenido del sitio. Por tanto para instalar un CMS necesitaremos un servidor web, una base de datos y un lenguaje de programacin. Los mas extendidos: Servidor web apache. Base de datos Mysql Lenguaje de programacin PHP Una clasificacin de CMS atendiendo al tipo de uso o funcionalidades puede ser: Blogs: pensados para paginas personales (symphony, wordpress). Foros: para compartir opiniones (phpBB, MyBB) Wikis: pensado para desarrollo colaborativo (Docuwiki, mediawiki) E-learning: plataformas para contenidos de enseanzas online (moodle, claroline) E-commerce: aplicaciones de comercio electrnico (OS commerce) 3.2 Instalacion de Joomla Es un potente CMS que permite crear sitios web elegantes, dinmicos, interactivos de una manera sencilla. Con Joomla podemos incluir foros, encuestas, noticias, blog, calendarios, chat, bsqueda dentro del sitio web y mas elementos. Por su diseo potencia y flexibilidad se esta convirtiendo en el sistema de publicacin preferido por millones de administradores web de todo el mundo para desarrollar su portal web. Joomla necesita una base de datos MySQL para guardar la informacin y configuracin del sistema. Necesita tambin el lenguaje PHP cuyos scripts son los que ejecutan las acciones de consulta y modificacin de la base de datos; convirtiendo los datos en webs interpretables por los navegadores. Finalmente necesita un servidor web, habitualmente apache. Por tanto una posibilidad para realizar nuestra instalacin seria utilizar el paquete XAMPP (windows) o LAMPP (linux). 1. Instalacion de un servidor web: instalaremos XAMPP (1.7.3) y los descargaremos de la web de apache. http://www.apachefriends.org/en/xampp-windows.html 2. Descargar la versin de JOOMLA a instalar (1.5.18) desde http://joomla spanish.org 3. Arrancar el servidor web 4. Crear una carpeta de nombre joomla, dentro de htdocs 5. Descomprimir joomla 6. Abrir el navegador y escribir http://localhost/joomla 1. Se elige el idioma 2. Paso de comprobacin previa; en principio deben aparecer todos los parmetros en verde. Si hay alguno en rojo se puede cambiar en php.ini 3. En el paso 3 licencia se lee y se acepta 4. Se configura la base de datos y el tipo de esta es MySQL. El nombre del servidor es localhost. El nombre de usuario es root y el nombre de la base de datos es joomla 5. Nos saltamos la configuracin FTP
6. Nombre del sitio web nombre y apellidos. Correo el que queramos y contrasea del usuario admin en la configuracin principal. Instalamos contenido de datos de ejemplo y siguente 7. Eliminamos la carpeta installation en htdocs 8. Entramos a joomla y nos vamos a administracin o http://localhost/joomla/administrator
3.2.1 PRIMEROS PASOS CON JOOMLA Una vez instalado el joomla hay que entrar en la administracin para aadir contenidos a nuestro sitio web. Para ello escribimos http://localhost/joomla2/administrator ; nos conectamos como usuario admin y contrasea admin. Se muestra le ventana del panel de control del sitio. Lo primero que haremos es aadir contenidos al sitio. Para ello crearemos artculos. Articulos: se organizan en secciones y categoras. Las secciones pueden contener gran cantidad de categoras y las categoras gran cantidad de artculos. Para crear secciones se pulsa el gestor de secciones en el panel de control. Para crear categoras el gestor de categoras y para artculos el gestor de artculos. Crear secciones y categoras 7 marzo. Nos conectamos como usuario admin. Creamos la seccin apuntes y dentro de esta creamos aplicaciones web, redes y equipos. 1. Pulsar el botn gestor de secciones y pulsar el botn nuevo. 2. Introducir los datos de la seccin; en el titulo de la seccin apuntes; en el campo alias el mismo nombre; en publicado se deja si; en el campo de nivel de acceso se deja como publico para que todo el mundo acceda a la seccin. Finalmente aadimos una descripcin y pulsamos guardar. 3. Procedemos a crear las categoras. Accedemos al gestor de categoras. Ventana similar a la de las secciones. Se escriben los datos y al finalizar se visualizaran las categoras creadas y a la seccin a la que pertenece. Crear las secciones aficiones y otros; dentro de aficiones categora msica y deportes, y dentro de otros crea otras cosas Una vez creadas las secciones y las categoras lo siguiente es crear los artculos y asignarlos a sus correspondientes categoras. Para crear un articulo damos a contenido y gestor de articulo y en esa ventana pulsar nuevo. En la ventana de edicin elegimos la seccin y la categora del articulo indicando si va a estar publicado o no y si va a aparecer en la pagina principal o no. Podemos pulsar el botn vista previa para ver como va quedando el articulo. Creararticulos12marzo. Crea un articulo dentro de cada categora de la seccin apuntes. Un articulo sobre la web 2.0, otro sobre la historia de los ordenadores y otro sobre conceptos bsicos de redes.
Pruba aadiendo imgenes, vietas, encabezados. Si son muy extensos los artculos utiliza el botn Leer ms. que aparece en la parte inferior de la ventana de edicin. Se puede cambiar la configuracin de presentacin de todos los artculos pulsando el botn preferencias (gestor de articulos). Se puede elegir si se muestra el titulo del articulo, el nombre de la seccin o la categora a la que pertenece, el nombre del autor, la fecha de creacin y los iconos para imprimir, verlo en pdf. Para cambiar el orden de aparicin de artculos se abre el gestor de la pagina de inicio desde el men contenido y se utiliza la flecha de la columna ordenar. Articuloinicio_12marzo. Crea un articulo llamado inicio que ser el nico que se visualice al iniciar joomla. Escribe un mensaje de presentacin del sitio web. Asgnale seccin otros y categora otras cosas. Configura la presentacin para que este articulo no muestre ni el titulo ni fechas; nada. Aade una imagen 3.3 GESTION DE MENUS Los menus en Joomla son grupos de vnculos a secciones, categoras, artculos, componentes o paginas externas. Cada uno de ellos es un tipo de men distinto. Cada men debe tener un nombre de identificacin nico. Los mens son mdulos de Joomla, por lo tanto un men solo es visible si el mdulo mod_mainmenu esta publicado. Para administrar los mens vamos a mens-> gestor de mens. Cada men va a tener asociado un modulo que se genera al crear el men. Este modulo ha de ser habilitado desde el gestor de modulos. Los menus que vienen por defecto son: - Mainmenu: men principal del sitio. Lo que se encuentre como primer elemento de este men es lo que se mostrara en la pagina principal. - Topmenu: este es el men horizontal que aparece sobre la cabecera del sitio. - Usermenu: men de usuario. Solo aparece cuando un usuario se registra e ingresa en el sistema. - Othermenu. 3.3.1 CREACION DE MENUS Creacion_menu_apuntes13marzo 1. Entramos como Admin, gestor de menus y pulsamos botn nuevo 2. En el campo nombre nico escribimos menapuntes, en el titulo de men ponemos mis apuntes, en descripcin mis apuntes de clase y en el titulo del modulo ponemos MenuApuntes 3. Pulsamos guardar y para que el men aparezca publicado habilitamos el modulo correspondiente, para ello vamos a extensiones gestor de modulos. 4. Seleccionamos el modulo correspondiente y pulsamos el botn habilitar. Se puede cambiar el orden y la posicin del men editando el modulo del men.
Si editamos el modulo asociado al men se visualizan sus propiedades. Encontramos 3 grandes bloques de opciones configurables. 1. Detalles: se puede indicar la posicin para visualizar el men y el nivel de acceso que indica si ser visible para todos o solo para los usuarios registrados. 2. Asignacion de menus: indica cuando ser visible el men en la navegacin de nuestro sitio web. 3. Parametros: definen opciones como el nombre, el estilo, mostrar iconos asociados, etc. Opcionesdemenu. Prueba a cambiar la posicin de visualizacin del men creado y comprueba los cambios desde la parte publica o front-end. 3.3.2 CREACION DE ITEMS DE MENU Lo siguiente es aadir los elementos o tems a los mens. Para entrar en el gestor de tems de men accedemos al gestor de men y pulsamos el botn editar tem de men. Para crear un nuevo tem de men pulsamos nuevo. Primero debemos elegir el tipo de tem, es decir el tipo de enlace o acceso que queremos tener y a continuacin se eligen los detalles del tem. Encontramos distintos grupos de tipos de tem de men. El primero a utilizar es enlace interno/ artculos que nos va a permitir enlazar con los artculos, las secciones y las categoras. Dependiendo del tipo elegido podremos ver un articulo solo. Los artculos de una categora o presentar las categoras de una seccin. Creacionitemsdemenu14marzo. Nos conectamos con usuario admin Se aaden los siguientes tems de men: Todos mis apuntes (se debe visualizar la lista de artculos de la seccin todos mis apuntes en formato de blog.) En el tipo de tem de men se selecciona enlace interno- articulo- seccinpresentacin de la seccin blog. Luego nos queda rellenar los detalles y parmetros. Detalles: Titulo: nombre del tem del men. Mostrar: se elige el men en el que se creara el tem. Insertar tem: se elige en que nivel se crea el tem, en principio solo el nivel superior. Publicado Ordenar Nivel de acceso De la lista seccin se elige la seccin de contenidos en nuestro caso apuntes. Mis aficiones, se debe visualizar la lista de categoras de la seccin aficiones, el tipo de tem ser enlace interno- artculosseccin- presentacin de la seccin. Luego rellenamos los detalles y los parmetros. Crea los menus que aparecen en la siguiente tabla (tabla de menus 14 marzo):
3.4GESTIN DE EXTENSIONES Por extensiones se entiende todo aquello que realiza alguna tarea en joomla y que junto al nucleo de joomla complementa toda la potencialidad del sistema. Son extensiones: - Los componentes: pequeos programas que se instalan desde el panel de administracin de joomla - Los modulos: ya hemos visto que los menos llevan asociado un modulo. Son aplicaciones mas simples que los componentes. Muestran informacin secundaria que toman de la base de datos. - Los plugins: aplicaciones que se apoderan de los artculos de contenido antes de ser mostrados y publicados en el sistema y le agregan informacin adicional o lo alteran de forma dinmica completando asi el contenido total que va a ser entregado al navegador del usuario final. - Los idiomas: paquetes de archivos que permiten que la parte publica y la parte de administracin se muestren en un idioma determinado. - Las plantillas: deciden como se muestra el espacio web. Tanto el front-end como el back-end. Normalmente nos encontramos los siguientes elementos: - Cabecera y pie de pagina - Espacio central: donde se cargan los contenidos a travs de las operaciones realizadas por componentes y plugins. - Diferentes espacios: donde se cargan los modulos definidos en la plantilla a travs de las posiciones top, breadcrumb, left, right, user1, user2, user3, footer, syndicate. 3.4.1 GESTION DE COMPONENTES
Programas independientes que trabajan con el nucleo de joomla. Tienen su propia tabla en la base de datos y sus propios archivos. Lo que les hace independientes. Se encuentran en la carpeta joomla2\components. Los ms comunes son: - Componentes que funcionan en parte publica y administracin: com_content(contenido), com_weblinks, com_newsfeeds, etc. - Solo funcionan en el back end: com_frontpage, com_login, com_templates. - Componentes que combinan su funcionamiento con modulos: com_polls, com_login. Desde el men componentes se pueden gestionar varios de los componentes instalados en joomla. Podremos crear anuncios, encuestas, enlaces, contactos, etc 3.4.1.1 CREAR ANUNCIOS Se puede incluir publicidad en nuestro sitio web. Para crear un anuncio (banner) es necesario crear categoras y clientes. Crear anuncios 19 marzo. Nos conectamos como admin. 1. Se buscan los logos o iconos de las empresas anunciantes y se guardan en la carpeta joomla2/images/banners 2. Se abre el men> componentes>banners. Se crea la categora y luego los clientes y finalmente el banner desde la opcin men> anuncios. En el banner se selecciona la categora, el cliente, la URL y se elige el logo 3.
4. Al crear el nuevo modulo se marca como tipo de modulo banner y seleccionamos la posicin del modulo, el cliente y la categoria 3.4.1.2 CREAR ENCUESTAS Las encuestas se crean desde el gestor de encuestas (menu comoponentes> encuestas). Una vez creadas hay que ir al gestor
de modulos para crear un modulo del tipo encuesta y asociarlo a la encuesta. Crear_encuesta_20marzo 1. Nos conectamos como admin y creamos la encuesta llamada deportes populares. Queremos ver que deportes son los mas votados de la siguiente lista: futbol- baloncesto- tenisciclismo- gimnasia- automovilismo. 2. Pasos para la encuesta: a) Pulsamos el botn nuevo; en el campo titulo el nombre de la encuesta. En intervalo se escriben los segundos entre votacin y votacin. b) En los campos de opciones se rellenan las opciones de la encuesta. 3. Una vez creada la encuesta se crea el modulo con el tipo de modulo encuesta. Le damos el nombre de nombres populares. En el apartado parmetros elegimos la encuesta creada anteriormente. Probar a realizar varias votaciones y observa los resultados de la encuesta.
Encuesta_asignaturas20marzo 1. Inserta una nueva encuesta sobre las asignaturas mas populares. 2. Las opciones son los nombres de las asignaturas. 3.4.1.3 CREAR ENLACES WEB Nos permite crear listas de enlaces de forma organizada. Primero hay que crear categoras que agrupen a los enlaces del sitio web y luego se crean los enlaces asignndolos a una categora. Para que se vean los enlaces es necesario crear un tem de men del tipo enlaces web. enlacesWeb_20marzo 1. Nos conectamos como admin y creamos la categora educacin y asignamos los siguientes enlaces 2.
3. Se abre el men componentes > enlaces web > categoras > nuevo 4. En el campo titulo: educacin 5. Una vez creada la categora se crean los enlaces. Para ello se hace clic en la pestaa enlaces en el gestor de categoras y pulsamos nuevo. 6. Se escribe en el campo el nombre de la pagina. Se elige la categora de la lista y se escribe la URL. Puede verse en la misma ventana o en otra ventana. 7. Una vez creados los enlaces es necesario crear el tem de men. Le aadimos al men principal y su titulo va a ser enlaces web educativos. 8. Elegimos presentar los enlaces de una sola categora en los tems de men del men principal. 3.4.1.4 CREAR CONTACTOS Este proceso es similar a la creacin de enlaces web. Primero se crea una categora de contactos y luego la lista de contactos para esa categora. Se abre el men componentes> contactos> categoras, se crea la categora y a continuacin los contactos. En la ventana de creacin de contactos se pide toda la informacin del contacto y en la seccin de parmetros se indican los datos que se quieran mostrar. Para poder visualizar los contactos en el front-end se ha de crear un tem de men del tipo contactos. Se podrn presentar todos los contactos de una categora o tambin los datos de un solo contacto. Crear contactos21marzo. Crea dos categoras de contactos: amigos y trabajo. Aade dos o mas contactos en cada categora y crea los tems de men contactos para ver los de cada categora. Aadelos al men otras cosas. Cambia las preferencias de los contactos en el gestor de contactos y haz que solo se mueste el nombre, el email y el telfono. 3.4.1.5 SERVIDOR DE NOTICIAS (RSS)
Posibilidad de estar al dia y visualizar noticias que provienen de otras web que tienen habilitadas la sindicacin y distribucin de contenidos. Las noticias se clasifican en categoras. Primero se crea la categora de noticias y luego se aaden las noticias o los servicios RSS. Los datos a rellenar son el nombre, la categora y el enlace al servicio de noticias. Para que las noticias se vean en el front-end se necesitan crear tems de men de tipo servidor de noticias y elegir entre la lista de servicios de noticias los de una categora, de todas las categoras o un solo servicio de noticias. Servidor de noticias 21 marzo. Crea la categora y servicios de noticias de la tabla mostrada a continuacin.
Educacion y actualidad son las categoras. Crea un men con el nombre mis noticias. Codificar un JS que lea un numero entero y positivo y nos visualice su tabla de multiplicar. Dicha tabla de multiplicar se mostrara en una funcin con el prototipo siguiente: Ftablamultiplicar(numero) 3.4.2 GESTION DE MODULOS Existen dos tipos de modulos: -front-end: los de la parte publica y creados hasta ahora -back-end: la parte de administracin (pestaa AdministracionGestor de modulos). Los modulos utilizados en la gestin de joomla se encuentran localizados en la carpeta joomla/administrator/modules. Los modulos instalados en el back-end y su funcin son los siguientes: -Mod_logged: lista de usuarios conectados. -Mod_popular: lista de los artculos de contenido mas visitados. -Mod_latest: lista de los artculos aadidos recientemente.
-Mod_stats: lista de los mens de estadsticas. -Mod_title: muestra el titulo del rea de trabajo en que nos encontramos. -Mod_menu: muestra el men principal de la administracin de joomla. Los modulos del front-end se encuentran localizados en la carpeta joomla/modules. Deben estar habilitados para que se muestren. Por lo general los modulos suelen ser complemento de los componentes, como ya hemos visto en la creacin de banners (mod_banners) o en la creacin de menus (mod_mainmenu) o en la creacin de encuestas (mod_poll). Existen mas tipos de modulos en el front_end; algunos de ellos son los siguientes: Modulo para crear un acceso de usuarios desde el front-end (mod_login). Crear un marco o wrapper con nuestra pagina favorita (mod_wrapper) Modulo que nos indica quien esta en lnea (mod_whosonline) Actividad: Acceso a usuarios: Nos conectamos como admin. Creamos un acceso a usuarios en el front-end para conectarse a la plataforma 1 Se abre el men extensiones/gestor de modulos y pulsamos nuevo 2 Elegimos el tipo de modulo y se hace click en el enlace acceder 3 En los detalles escribimos titulo, la posicin en el front-end, arriba a la derecha (opcional), tambin los menus o elementos de men donde queremos que se visualice el modulo. En parmetros indicamos que no se guarde en la cach. Los elementos de men que queremos que se visualicen cuando nos conectamos y cuando nos desconectamos. Modulos front-end28marzo. Aade los modulos para saber quien esta en lnea, la ruta de acceso (mod_breadcrumbs) y un marco o wrapper con tu pagina favorita. Teniendo en cuenta que: -El modulo quien esta en lnea esta a la derecha debajo del modulo de acceso. Se tiene que ver solo desde el tem de men de acceso. - La ruta de acceso debe de estar en la posicin breadcrumb y se debe de ver en todos los accesos. - El wrapper se visualiza a la derecha y se debe ver solo cuando activamos un tem de men del men aficiones. 3.4.3 Gestion de plugins
En el apartado anterior ya hemos definido lo que son los plugins; programas que de alguna manera personalizan los contenidos. Pueden ser llamados mediante comandos especiales y se pueden mostrar para ciertos contenidos y/o componentes. Los plugins se encuentran en la carpeta htdocs\joomla\plugins. El gestor de plugins se encuentra dentro del men extensiones. Extensiones-> Gestor de plugins Algunos de los plugins son los siguientes: -Authentication: manejan la autentificacin de usuarios de joomla. -Content: manejan funcionalidades a los contenidos como por ejemplo anterior y siguiente a un artculo, la posibilidad de votacin a un artculo. -Editors: manejan funciones de los editores que se utilizan para crear artculos. -Search: estos plugins habilitan las bsquedas dentro de categoras, contactos, secciones -System: funcionalidades del sistema como soporte para funciones antiguas o suministrar el acceso al sistema. Cuando se instala un plugin suele traer instrucciones de instalacin y de manejo. Veamos algunos: 3.4.3.1- Plugin Allvideos Este plugin nos permite ver videos y escuchar audio insertndolos dentro de los artculos de contenido. Se descarga desde: http://extensions.joomla.org/extensions/multimedia/videoplayers-a-gallery/812 Para instalar el plugin se abre el men extensiones y instalar/desinstalar. En el apartado subir paquete se selecciona el plugin a instalar. Se pulsa el botn examinar y elegimos el paquete descargado. Una vez instalado podemos editar el plugin Allvideos para personalizar los parmetros. La ubicacin de los archivos de video es images/stories/video o images/stories/audio. Si las carpetas no existen se crean. Para ver videos o escuchar audio hay que tener en cuenta el tipo de archivo (formato) que vamos a visionar o escuchar como se muestra en la siguiente tabla. Tipo FLV (flash video) SWF (small web format) WMV (Windows media video) MP3 WMA Actividad: multimedia Formato {flv}nombre del video{/flv} {swf}..{/swf} {wmv}..{/wmv} {mp3}.{/mp3} {wma}..{/wma}
Descargar el plugin de la pagina vista anteriormente e instalarlo en joomla. Articulo_con_videoyaudio. Creamos un articulo de nombre mis favoritos. Que va a abrir los archivos multimedia cancion1.mp3 y video.flv 1- Hay que copiar el archivo video.flv en la carpeta videos y cancin.mp3 en la carpeta audio. 2- Una vez copiados se crea el articulo con el editor de artculos, se asigna la seccin aficiones y la categora msica. 3.4.4 Instalar componentes Los componentes son programas independientes que trabajan con el nucleo de joomla. Alguno de ellos vienen incluidos y otros se descargan e instalan en la plataforma. Los hay gratuitos y otros de pago. El componente suele descargarse comprimido y a la hora de instalar se indica la ubicacin y el nombre del archivo comprimido. Muchos componentes instalaran sus propios mdulos e incluirn sus propios pugins y por tanto ser necesario abrir el gester de plugins y el gestor de modulos para cambiar sus propiedades y parmetros y para que se pueda visualizar en el sitio/ parte publica/ front end. Se clasifican teniendo en cuenta la funcionalidad que aaden al sistema. Se pueden acceder a gran variedad desde: http://extensions.joomla.org/extensions Podemos clasificarlo en: - Calendarios y eventos (incluyen relojes) - Galeria multimedia - Sitios multilinges - Gestores de descargas - Foros, chats, mensajera Crea un calendario aadir_calendario11abril Instalamos el componente calendario y lo insertamos en un modulo que se coloque a la derecha. 1- Busca en la pagina de componentes joomla un calendario gratuito, por ejemplo http://extensions.joomla.org/extensions/calendars-aevents/calendars/11143 2- Una vez descargado lo instalamos en el men extensiones instalar/desinstalar 3- Una vez instalado con xito entramos en la pestaa modulo del gestor de extensiones y comprobamos que el modulo se ha instalado correctamente. 4- Es necesario publicarlo para verlo, para ello iremos a gestor de modulos, lo editamos, lo habilitamos y lo colocamos a la derecha en primer lugar.
5- En el apartado parmetros podemos seleccionar que en el calendario se vea la semana actual, el mes o dos meses. 6- En el apartado detalles se puede cambiar el titulo y personalizar mas el calendario. Aadir componente reloj y contador de visitas. Busca un componente reloj y un componente contador de visitas. Descrgalos e instlalos en tu plataforma. Edita los mdulos correspondientes y cambia valores en los parmetros. Puedes encontrar estos componentes en la plataforma GNOMIO Instalar galera de fotos Existen muchas extensiones para instalar galeras de fotos en joomla. Para instalarlos se procede como en casos anteriores. Estas extensiones tienen la particularidad de tener su propio panel de control para gestionarse e incluso su propio tem de men para luego abrir la galera en el front end, as pues si instalamos por ejemplo Joomlgallery podremos entrar en su propio panel de control. Lo primero que hay que hacer es crear categoras para clasificar las fotos desde category manager y luego descargar imgenes desde el picture upload indicando a que categora se le asigna. A continuacin se crea un enlace de men que abra la galera y se visualice en el sitio web. Galeriafotos_joomgallery16abril Conectado como admin creamos una galera de fotos. La categora se va a llamar Nevada 2010 Componentes-> joomgallery->category manager. En el campo titulo: nevada 2010 En descripcin: una pequea descripcin Se suben las fotos a la plataforma. Se abre el men componentes joomgallery-> picture upload Se podr editar cada foto y aadir una descripcin. Creamos un enlace de men para ver la galera en el front end. El enlace se crea en el men aficiones y lo vamos a llamar mi galera de fotos. El nuevo tem de men es joomgallery. En configuration manager se puede configurar la forma de presentar toda la galera de fotos Instalacin de un mapa del sitio Los mapas del sitio web permiten tener una vista general de como se tiene organizado el sitio y asi tener un acceso mas rpido al mismo. La mayora de los mapas de sitio son componentes aunque algunos de ellos traen un plugin. Se pueden descargar de http://extensions.joomla.org/extensions/structure-a-navegation/sitemap Mapasitio17abril.
Nos conectamos como admin. Instalamos el componente Xmap que permite crear un mapa del sitio web que permite crear la estructura de los mens. Usando la estructura de los mens para poder acceder rpidamente a toda la navegacin creada en el sitio web. Se podrn crear tantos mapas de sitio como se deseen. Cada uno de ellos mostrara los mens que se seleccionen Este componente viene comprimido com_Xmap-1.2.8 Instalamos este componente desde extensiones>instalar/desinstalar Una vez instalado aparecer en el men componentes, lo primero que se hace es crear un mapa y luego crear un tem de men de tipo Xmap para poder verlo en el front-end El primer mapa del sitio creado por defecto se llama sitemap 1. Para modificarlo hacemos click en la caja de texto y escribimos mapa del sitio. Inicialmente solo tiene seleccionado el men principal, podemos agregar mas pulsando en el enlace correspondiente. Una vez definido el mapa del sitio solo falta que este accesible desde algn tem de men. Crearemos un tem de men de tipo enlace interno Xmap en el men principal. Ponemos de ttulo de mapa del sitio y seleccionamos el mapa creado anteriormente dentro de los parmetros bsicos. Aade dos mapas de sitio mas en los mens mis apuntes y mis aficiones y creamos los tems de men correspondientes. Instalacion de descarga de archivos. Existen extensiones que permiten cargar y descargar archivos desde nuestro sitio web en la direccin http://extensions.joomla.org/extensions/directory-adocumentation/downloads se pueden encontrar varias de estas extensiones. Suelen incluir algn componente, algn plugin y algn traductor de idioma. Para su instalacin hay que leer las indicaciones que acompaan a la extensin. En la siguiente actividad vamos a instalar uno de los mas usados. Descarga_archivos18abril. Nos conectamos como admin y instalamos la extensin attachment. Esta extensin permite subir archivos a la plataforma y adjuntarlos en la parte final de un articulo de contenidos. Hay que instalar dos archivos. Attachments-2.0.2.zip Attachments-spanish-es-Es-2.0.zip El primero contiene el componente para gestionar los archivos adjuntos y los plugins que permiten mostrar dichos archivos en los artculos. Tambin aade el botn para adjuntar archivos en el editor. El segundo es el traductor de idioma para esta extensin. 1- Se instala el primer fichero. Una vez instalado nos aseguramos en el gestor de plugins que los nuevos estn habilitados. Para aadir archivos que puedan ser descargados desde el sitio web hay que ir al men componentes- attachments. Para aadir un adjunto a un artculo se realiza con el gestor de adjuntos, seleccionando en el campo select article el articulo y en attach file el fichero que queremos adjuntar.
2- Una vez cargado un fichero en el sitio web hay que publicarlo y es necesario cambiar los parmetros e indicar quien puede ver las descargas any logged- in users/ anyone. 3- Aadir el fichero historia de la informtica.pdf. Otra forma de adjuntar un archivo a un articulo es pulsando el botn add attachment que aparece en la parte inferior de la edicin del articulo. Para ver el botn de descarga del mismo hay que abrir el men componentes- attachment y publicarlo. Crea un artculo nuevo que permita descargar varios archivos (mnimo 3). El artculo se llamara descargas. Se le asignara a la categora de aplicaciones web. Se deben descargar 3 archivos de apuntes. Crea un tem de men dentro de apuntes que abra ese artculo y que se vea en el front end. Instalacion de una exposicin de diapositivas o imgenes. Estos componentes permiten presentar una serie de imgenes de forma automtica. Suelen ser mdulos y se suelen descargar de http://extensions.joomla.org/extensions/photos-a-images/images-slideshow Slideshow23abril. 1. Nos conectamos como admin e instalamos el modulo mod_slideshow.zip. Es un modulo que permite mostrar una coleccin de imgenes localizadas en una carpeta en el servidor. 2. Abrimos el men extensiones-> instalar/desinstalar. Una vez instalado aparecer en el gestor de modulos como horizontal slideshow. Tendremos en cuenta las siguientes propiedades: - Titulo - Posicin del modulo donde queremos que se vea - La carpeta donde se almacenaran las imgenes en defecto modules/mod_slideshow/samples. 3. Se debe indicar si se muestran todas las imgenes o en caso negativo se indican los nombres de las mismas. Tambien se pueden aadir un titulo para cada imagen y una direccin web para unir la imagen a esa URL 3.4.5 Gestion de plantillas Las plantillas son extensiones que permiten disponer de diseos elegantes y flexibles para el sitio web. Se puede instalar una plantilla como otro complemento mas o desde extensiones-> gestor de plantillas. Existen muchos sitios para descargar plantillas (http://joomla24.com). Instalaremos varias plantillas y se puede probar a hacer las predeterminadas para ver como queda el sitio web. La edicin de la plantilla permite editar parmetros y cambiar el aspecto del frontend. Se pueden editar y cambiar los archivos HTML y CSS que usa la plantilla pulsando los botones correspondientes. Los archivos de una plantilla se instalan en la carpeta joomla\templates\nombre-plantilla.
En la carpeta del nombre de la plantilla existe un archivo llamado favicon.ico, contiene el icono que aparece junto a la URL cuando abrimos el sitio web. Se puede editar con el paint y personalizar procurando que tenga la misma dimensin de ancho y alto. En la carpeta templates/images se encuentran los archivos de imagen de la cabecera y los pies de la plantilla. Suelen tener nombres como logo, footer, header. Si se desea personalizar bastar con editar y cambiarlos por otros con el mismo nombre y dimensiones. Personaliza la plantilla cambiando los logos y el icono de navegacin, usa para ello un programa grfico. Antes de modificar los ficheros haz una copia de seguridad. Dentro del logo poned vuestro nombre. 3.5 GESTIN DE USUARIOS Los usuarios de sitios web pueden dividirse en dos categoras principales: - Invitados: pueden navegar libremente por todo el contenido salvo el que este reservado para los usuarios registrados. - Los registrados: registrados en el sitio web con usuario y contrasea. A estos se les permite acceder al rea o zona restringida del sitio. Recibiendo privilegios especiales no disponibles para los invitados. Los registrados se dividen en dos grupos: a) Usuarios del fron-end (parte pblica) b) Usuarios del back-end (administracin) En joomla aparecen 3 niveles distinto de acceso: - Pblico: accesible a todos los usuarios - Registrado: accesible para todos los usuarios de tipo registrado - Especial: accesible para los usuarios autor, editor, jefe de redaccin, gestor, administrador y super administrador. Un usuario al registrarse ha de rellenar un formulario y luego el administrador lo debe habilitar. Los tipos de usuarios del front-end de menor a mayor nivel de acceso son los siguientes: Registrado: accede a la informacin que requiere este nivel de autenticacin. Autor: puede enviar nuevos artculos de contenido y editar los creados por l, pero no puede editar los artculos de los dems ni publicar los que escriba el mismo. Editor: puede enviar nuevos artculos y editar cualquier artculo pero no puede decidir su publicacin. Jefe de redaccin o publicador: puede enviar, modificar y publicar artculos de contenido. Para crear y gestionar usuarios se accede a la administracin de usuarios. En el men sitios -> gestin de usuarios.
Gestin de usuarios 2 de mayo. Nos conectamos como admin y creamos los siguientes usuarios con las siguientes caractersticas. Nombre Email Contrasea Tipo usuario Usu1 Usu1@hotmail.es Usu1 Registrado Autor1 Autor1@hotmail.es Autor1 Autor Editor1 Editor1@hotmail.es Editor1 Editor Publicador1 Publicador1@hotmail Publicador1 Publicador .es 1. Desde el gestor de usuarios pulsamos nuevo y rellenar el nombre de usuario y en grupo se marca el tipo de usuario. 2. Se crean los 4 usuarios. Una vez creados abrimos una nueva sesin con el usuario y observamos que todos los usuarios pueden adjuntar archivos que luego el administrador deber habilitar. 3. Al visualizar los artculos podremos observar que aparecen unos iconos de opciones para los autores, editores y publicadores. 4. Vamos a aadir un men: usuarios conectados. Solo visible cuando un usuario se conecte al sitio web. Desde el gestor de men se crea el men y luego desde el gestor de mdulos elegimos posicin derecha y nivel de acceso registrado. 5. Lo siguiente es aadir tem de men. Elegimos el tem enlace interno-> artculos-> artculo -> presentacin de artculo. Despus haremos el tem enviar el enlace. Elegiremos el tipo enlace interno-> enlaces web -> presentacin de los enlaces web enviados. Aadiremos cerrar sesin. Item enlace interno usuario, acceder y presentacin predeterminada de acceso a la cuenta de usuario y por ltimo otro tem que sea mi cuenta Enlace interno-> usuario -> usuario y por ltimo usar presentacin de formulario. 3.5.2 Usuarios del back-end (administracin) Son usuarios de la administracin, aunque tambin pueden conectarse desde la parte pblica (back-end). Existen los siguientes tipos de usuarios: - Gestor: puede administrar el gestor de archivos multimedia, la administracin de los tems o elementos de men. Puede crear los tems de men pero no la creacin de menus. Permiso para la gestin de contenidos. Permisos para la gestin de los componentes instalados. - Administrador: adems de lo anterior puede administrar usuarios excepto el superadministrador. Permisos para instalar todo tipo de extensiones, componentes, modulos y plugins - Superadministrador: usuario admin. Posee acceso total a todo el sitio y solo el es capaz de crear o editar otros usuarios del mismo nivel. Usuarios backend7 mayo
Crea los usuarios mostrados en la siguiente tabla. Una vez creados nos conectamos al back end y comprobamos lo que puede hacer cada uno de ellos Nombre usuario Gestor1 Administrador1 Super1 E-mail Gestor1@hotmail.com Administrador1@hotmail.c om Super1@hotmail.com Contrasea Gestor1 Administrador1 Super1 Tipo Gestor Administrador Super administrador
TEMA 4- Servicio de archivos Dropbox
1. Instalacion y uso de un servicio de archivos. Actualmente necesitamos un servicio de archivos multiplataforma que pueda convivir con la multitud de S.S.O.O. y maquinas multimedia existentes. Los servicios de archivo deben estar integrados en la nube y ser independientes de la plataforma software desde la que se accede. Uno de los servicios de archivos mas usado es dropbox y cuenta con un programa cliente para los principales S.S.O.O. (Windows, Linux, MAC) y tambin para las plataformas multimedia actuales (PDA, smartphones). Ademas dropbox dispone de un portal web para acceder a su plataforma. Existen otras alternativas como son sparkleshare, syncplicity o sugarsync. 2. Dropbox Servicio multiplataforma de alojamiento de archivos en la nube. Permite disponer de archivos y carpetas de forma remota realizando una sincronizacin entre nuestro ordenador y un disco virtual en la nube, cada vez que hagamos un cambio en nuestros archivos los copiara al instante en el disco virtual en la nube. Estos archivos Pueden ser compartidos con otros usuarios de dropbox y se pueden acceder a ellos desde la plataforma. Para utilizar dropbox solo son necesarios dos pasos: a) Registrarse como usuario de dropbox. Se necesita una cuenta para poder usar sus servicios. La cuenta gratuita se llama basic y dispone de 2GB de espacio. b) Instalar el software cliente en la maquina desde la que se desea acceder a los servicios de dropbox. Cada mquina necesitara un software cliente especfico segn sus caractersticas. Dropbox8mayo. Registrar una cuenta basic en dropbox e instalar el cliente para Windows. Despues cargar varios archivos en la carpeta dropbox y visualizarlos usando el navegador.
1- Abrir el navegador y escribir http://www.dropbox.com/login , pulsar sobre create an account. 2- Descargar el cliente para Windows 3- Ejecutar el cliente con el archivo previamente instalado 4- Seleccionar una cuenta dropbox y escribir los datos de la cuenta 5- En la siguiente pantalla elegimos el tipo de cuenta; gratuita 6- Pequeo tour que nos explique como usar dropbox 7- Seleccionar dos opciones: la primera para aadir un acceso directo y la segunda para cambiar el lugar por defecto de la carpeta dropbox 8- El sistema esta configurado. Hacemos doble click sobre el icono de notificaciones y se muestra nuestra carpeta dropbox 9- Cargamos varios archivos en la carpeta 10Una vez sincronizado abrir el navegador, acceder a nuestro espacio dropbox (email y contrasea) y ver que se visualizan los mismos archivos y carpetas.
TEMA 5: GESTION DE APRENDIZAJE A DISTANCIA. MOODLE

5.1Qu es un sistema de gestin de aprendizaje a distancia? Los sistemas e-learning contituyen el modelo mas innovador de la educacin a distancia basada en aplicaciones web. Este sistema hace uso de plataformas o sistemas software que permiten la comunicacin entre profesores y alumnos, y el acceso a los contenidos. Un sistema de gestin de aprendizaje (LMS) es una herramienta informtica que se usa para organizar y controlar actividades de formacin tanto en instituciones educativas como en empresas pblicas y privadas. Estos sistemas permiten desarrollar programas formativos tanto para enseanzas regladas como para formacin contnua y ocupacional. Sus caractersticas principales son: 1. Acceso al sistema desde cualquier lugar y momento. 2. Se usa un navegador para acceder al informacin (aplicacin web). 3. Acceso restringido. Solo los usuarios registrados pueden acceder al sistema. 4. Diferentes niveles de usuarios con diferentes privilegios. 5. Incluye interfaz grfica donde se integran textos, grficos, videos, animaciones 6. Organizacin de la informacin de forma hipertextual. Algunos de los LMS ms populares son los siguientes: - Atutor: entorno de creacin y gestin de cursos en lnea. Pone mucha atencin en la accesibilidad de los materiales de aprendizaje.
LRN: entorno de apoyo a grupos a los que se le aade la funcionalidad e-learning. Moodle: entorno para la creacin de cursos en lnea. La unidad lgica es el curso.
INSTALACIN Y CONFIGURACIN BSICA

Alguna de la ventajas de Moodle son: a) Cdigo abierto. b) Fcil de instalar. c) Interfaz sencilla, amigable e intuitiva. d) Permite crear y gestionar cursos o contenidos de forma sencilla. e) Pone el nfasis en las actividades y la participacin. f) Entorno modular y flexible donde el profesor escoje que tipo de actividad realiza en cada curso. g) Permite la comunicacin mediante foros, correos y chats favoreciendo el aprendizaje cooperativo. h) Facilita subir archivos y ponerlos a disposicin de los estudiantes. i) Se pueden crear test, cuestionarios o ejercicios de autoevaluacin. j) Permite gestionar grupos de estudiantes dentro de un curso. k) Ofrece la posibilidad de crear backups completos de un curso en formato zip. l) Permite monitorizar la actividad de los estudiantes dentro de un curso. Para instalar moodle en nuestro ordenador son necesarios los siguientes requisitos: - Un servidor web que soporte PHP; por ejemplo apache. - Una instalacin de PHP en funcionamiento. - Una base de datos (MySQL) para almacenar los datos de configuracin, datos de usuario, datos de interaccion con los estudiantes, datos de resultados de los exmenes Como es cdigo abierto el software se puede descargar y utilizar de manera gratuita y libremente. Existen dos tipos de paquetes: - Paquete estndar: se instala en cualquier plataforma que ya tenga instalado el servidor web, el PHP y la base de datos. - Todo incluido: adecuado para cuando no se dispone de servidor web porque incluye apache, MySQL y PHP. 5.1.1 INSTALACION EN WINDOWS Vamos a ver como instalar moodle en un SO Windows. Podemos usar una mquina virtual con Windows tipo VMWare. - Instalacin moodle. Descarca instalacin de moodle para Windows. 1- Abrir el sitio de descargas de moodle: http://moodle.org/downloads
234567-
Descargar la versin 1.9 de moodle Crear una carpeta moodle dentro de htdocs Descomprimir el fichero descargado en la carpeta creada Abrir el navegador en http://localhost/moodle Se visualiza la pantalla inicial de la instalacin. Llegaremos a una pantalla para confirmar las direcciones de instalacin de moodle y el directorio de datos. Dejar por defecto los nombres que aparecen y pulsar siguiente 8- Comprobar si los diferentes componentes del servidor cumplen los requisitos mnimos del sistema. Debe aparecer OK en la columna de estado de los componentes. 9- La siguiente pantalla da la oportunidad de descargar el paquete de idioma espaol y continuar la instalacin en nuestro idioma. 10En las siguientes pantallas pulsamos continuar (fichero de configuracin, licencia de moodle, sentencia MySQL,.) 11Al finalizar la creacin de tablas tendremos una pantalla para configurar la cuenta del administrador principal que tendr el control completo sobre el sitio. Contrasea( Cursos2011*) y una cuenta de correo valida (payjavi@hotmail.es) 12En la siguiente pantalla rellenar los datos generales del sistema, nombre completo del sitio, nombre corto y una breve descripcin. 13Guardamos los cambios y veremos nuestra pgina principal 5.1.2 Estructura de directorios La instalacin de moodle crea una estructura de directorios con una serie de archivos y carpetas importantes. Los mas importantes son: - config.php: archivo que contiene la configuracin fundamental. Este archivo se crea durante la instalacin de moodle. - Install.php: el script que se ejecutara para crear el archivo config.php. - Versin.php: define la versin actual del cdigo de moodle. - Index.php: pagina principal del sitio. Las carpetas mas importantes son: - /admin: carpetas y archivos php necesarios para administrar moodle. - /auth: mdulos para la autenticacin de usuarios. - /blocks: mdulos de los pequeos bloques laterales contenidos en muchas pginas. - /calendar: archivos para manejar los eventos de calendario. - /course: archivos necesarios para gestionar los cursos. - /doc: documentacin de moodle. - /err: cdigos sobre los errores de la plataforma. - /lang: para configurar idiomas. - /login: maneja las entradas y creacin de cuentas. - /theme: paquetes de temas para cambiar la apariencia del sitio. - /user: cdigo para mostrar y gestionar los usuarios.
5.2Personalizacin del entorno Al finalizar la instalacin de moodle nos conectaremos como usuario admin y nos aparecern los enlaces y textos de la pantalla principal en ingls. Lo primero que haremos ser cambiar el idioma del sitio moodle. Moodle_espaol15mayo 1. http://localhost/moodle 2. Conectarnos como admin 3. Hacer click en idioma que es dentro de site administration y despus pulsamos sobre lenguaje packs 4. De la lista disponible elegimos espaol internacional y pulsamos install Instalacion temamoodle15mayo 1. Nos conectamos como admin en http://moodle.org 2. Hacer click en el enlace descargas -> temas. En cada tema se puede hacer click en demostration site para ver una demostracin del mismo 3. Elegimos un tema 4. Comprobar que se pueda instalar en nuestra versin. 5. El fichero descargado hay que descomprimirlo en la carpeta /theme 6. Conectados como admin hacer click en el enlace apariencia/entornos/selector de temas 7. Elegimos el tema zebra y pulsamos escoger Cambiar el aspecto de moodle, probar diferentes temas. Si quieres volver al tema inicial elige standardwhite en la lista de temas. CalendarioMoodle16mayo La instalacin por defecto visualiza como primer dia de la semana el domingo. Se realizaran los cambios para que el primer dia de la semana sea el lunes. 1. Nos conectamos como admin 2. Click en el enlace apariencia/calendario y se visualiza la pantalla con las propiedades del calendario Los bloques proporcionan informacin o funcionalidad adicional y se incorporan con el paquete estndar de moodle. En la pagina principal se visualizan los siguientes bloques: - Administracin del sitio - Descripcion del curso/sitio - Calendario Podemos cambiar la pagina principal aadiendo, moviendo o quitando bloques. Para acceder a la edicin de bloques pulsamos activar edicin (esquina superior derecha). Validacionusuarios. Vamos a aadir a la pagina principal el bloque de validacin de usuarios, moviendo el calendario de sitio y ocultando la descripcin del curso/sitio
1- Conectados como admin pulsar activar edicin. 2- Se visualizan una serie de opciones en forma de icono. Al pasar el puntero nos dira su funcin. 3- Para ocultar el bloque hacemos click en la opcin ocultar. 4- Para aadir el bloque de validacion de usuarios (entrar) pulsamos aadir, seleccionamos el bloque y entrar. 5- Para ver los cambios realizados nos desconectamos del sitio Usuarios_en_linea16mayo Cambia el aspecto de la pgina principal. Aade el bloque usuarios en lnea y vuelve a mostrar el bloque descripcin del curso 5.3CREACIN DE CATEGORAS Y CURSOS Los cursos es la parte mas importante de un sistema gestor de aprendizaje a distancia. Creados por los administradores o por usuarios con el rol de autores de cursos. Para que los alumnos puedan acceder a un curso determinado debern estar matriculados en el. La matriculacin la puede llevar a cabo el administrador del sitio, el profesor del curso o incluso el propio alumno (poco recomendable por motivos de seguridad). Los cursos se estructuran en categoras: se puede crear una categora para el ciclo formativo de A.S.I.R. y otra para el ciclo formativo de S.M.R. Dentro de cada categora se pueden crear subcategoras, una para el primer curso y otra para el segundo curso y dentro de cada subcategora crearamos un curso para cada uno de los mdulos (aplicaciones web, M.M.Eq en el primero; servicios en red, seguridad informtica en el segundo) Crearcategorias_y_subcategoras 1. Conectados como admin crear categoras y subcategoras mostradas anteriormente. 2. Click en el enlace cursos del bloque de administracin del sitio-> agregar y editar, aadir nueva categora. 3. Escribir el nombre de la categora y pulsar el botn crear categora. 4. Pulsar el botn agregar subcategora para crear la subcategora primer curso y pulsar el botn crear subcategora. 5. Repetir estos pasos hasta crear la estructura deseada. 6. Para comprobar el trabajo escribimos en la barra de direcciones http://localhost/moodle o nos desconectamos del sistema. Conectados como admin crear los cursos mostrados en la siguiente tabla: Nombre curso Formato Temas Nombre corto Aplicaciones Temas 7 Web Montaje Temas 9 Montaje Servicios en red Temas 7 red Seguridad Temas 5 seguridad Click en el enlace cursos-> agregar/editar cursos del bloque administracin y pulsamos el botn aadir nuevo curso. De la lista de categoras elegir
Sistemas microinformticos y redes-> primer curso. Escribir el nombre completo, nombre corto, descripcin, el formato y numero de temas.

Aplicaciones Web - Javascript

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Aplicaciones Web - Javascript

Uploaded by

Copyright:

Available Formats

TEMA 2 ELABORACIN DE PGINAS WEB CON LENGUAJES DE MARCAS

2.1.-LENGUAJE HTML ETIQUETAS Y ATRIBUTOS

2.1.3.-ESTRUCTURA BSICA DE UN DOCUMENTO HTML

2.1.5.-ENLACES, LINKS O HIPERVNCULOS

2.1.6.-NUMERACIN Y VIETAS (LISTAS)

2.2.-LENGUAJE XHTML (eXtensible HTML)

-Frameset: Igual que el transitional pero adems permite utilizar frames.

2.2.1 DIFERENCIAS ENTRE XHTML Y HTML

2.3.-HOJAS DE ESTILO (CSS)

2.3.1.-SINTAXIS BSICA DE CSS

2.3.2.-NORMAS BSICAS A LA HORA DE CREAR CSS

2.3.3.-APLICAR CSS A UN DOCUMENTO HTML

2.3.4.-ATRIBUTOS DE LAS HOJAS DE ESTILO

border-color border-style border-width Aplicar los siguientes estilos:

Color del borde Dotted (punteado), solid o double

2.3.8.-ESTILOS PARA TABLAS

2.4.-INTEGRACIN DE SCRIPTS (JAVASCRIPT)

2.4.2.-ELECCIN DEL NOMBRE DE UNA VARIABLE

2.4.3.-VENTANA EMERGENTE (PROMPT)

2.4.5.-OPERACIONES MATEMTICAS EN JAVASCRIPT

2.4.6.-ESTRUCTURAS CONDICIONALES (if Y else)

La instruccin if lleva la condicin entre parntesis y else entre corchetes.

2.4.9 BUCLE FOR

2.4.10 FUNCIONES JAVASCRIPT

2.4.11 VALIDACION DE FORMULARIOS

TEMA 3: GESTORES DE CONTENIDOS. JOOMLA

TEMA 4- Servicio de archivos Dropbox

TEMA 5: GESTION DE APRENDIZAJE A DISTANCIA. MOODLE

INSTALACIN Y CONFIGURACIN BSICA

You might also like