Abril 22, 2015 (Clase)

------>Tipos de <input type>

• Mouse move ----- movimiento del mouse
• onclic--------------- clic
• ondblclic ---------- doble clic
• ofocus ------------- ubicar sobre la caja de texto (tiempo que se demora allí)
• onblur ------------- se pierde el tiempo
• onkeypress ------ ver lo que digita
• onkeydown ------ oprime
• onkeyup ---------- suelta
• password -------- contraseña (no la deja copiar ni pegar)

Ejemplos:

• 
  

<script>
if(confirm("¿Quiere salir de la  salir de la pagina?")){
}
 else {
}
</script>

• 
  

<script>
var a = new Date();
document.write(a.getDate() + "/" + (a.getMonth() +1) + "/" + a.getFullYear());
</script>

• 
  

<script>
var b = new Date();
document.write(a.getDate() + "/" + (b.getMonth() +1) + "/" + b.getFullYear() + "," + b.getHours() + ":" + b.getMinutes() + ":" + b.getSeconds());
</script>

• 
  

<script>
var c = new Array ("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
var d=new Date();
document.write(d.getDate() + " de " + c[d.getMonth()] + " de " + d.getFullYear());
</script>

• 
  

<script>
var e = new Array ("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
var f = new Array("Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado");
var g =new Date();
document.write(f[g.getDay()] + " " + g.getDate() + " de " + e[g.getMonth()] + " de " + g.getFullYear());
</script>

• 
  

<select name="OS">
   <option value="1">Windows Vista</option>
   <option value="2">Windows 7</option>
   <option value="3">Windows XP</option>
   <option value="10">Fedora</option>
   <option value="11">Debian</option>
   <option value="12">Suse</option>
</select>

• 
  

<select name="OS" >
   <option selected value="0"> Elige una opción </option>
       <optgroup label="Microsoft">
       <option value="1">Windows Vista</option>
       <option value="2">Windows 7</option>
       <option value="3">Windows XP</option>
   </optgroup>
   <optgroup label="Linux">
       <option value="10">Fedora</option>
       <option value="11">Debian</option>
       <option value="12">Suse</option>
   </optgroup>
</select>

• 
  

<select name="OS" size=9>
   <option selected value="0"> Elige una opción </option>
       <optgroup label="Microsoft">
       <option value="1">Windows Vista</option>
       <option value="2">Windows 7</option>
       <option value="3">Windows XP</option>
   </optgroup>
   <optgroup label="Linux">
       <option value="10">Fedora</option>
       <option value="11">Debian</option>
       <option value="12">Suse</option>
   </optgroup>
</select>


Tomado de:

http://azteca.programandowebs.com/javascript/funcion-confirm-en-javascript/626/

http://minitutoriales.blogspot.com/2013/10/como-mostrar-la-fecha-actual-con.html

http://michelletorres.mx/listas-desplegables-en-los-formularios-html/#.VUBM3yF_Okq

Abril 22, 2015

Clase N° 11

ETIQUETAS CSS

+El docente dejó investigación acerca de unas nuevas etiquetas

===>La etiqueta <ul> se utiliza para crear una lista desordenada.

Las listas desordenadas se representan con los siguientes símbolos:

• disc(círculo relleno)
• circle(círculo vacío)
• square(cuadrado vacío)

Los diferentes objetos de las listas se representan con la etiqueta <li>.

Ejemplo:

<ul>
    <li>Hola</li>
    <li>Buenos días</li>
    <li>Tema  segundo periodo</li>
</ul>

===>La etiqueta <li> nos define los objetos de la lista.

Esta etiqueta se utiliza tanto para las listas ordenadas <ol>, como para las listas desordenadas <ul>.

Ejemplo:

Lista ordenada
<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>


Lista desordenada <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

===>La etiqueta <span> se utiliza para añadir estructura a una parte de un texto.

Esta etiqueta se usa comunmente para añadir un estilo determinado dentro de una sección del texto.

Ejemplo:

<p>RGB: <span class="rojo">Red</span>,<span class="verde">Green</span>,
<span class="azul">Blue</span>.</p>

===>La etiqueta <div> se utiliza para definir una sección dentro del documento.

Esta etiqueta se usa comunmente para agrupar un bloque de elementos, para luego añadirle un estilo determinado.

Ejemplo:

<div style="color:red">
   <h3>Grupo 1</h3>
   <p>Este bloque tiene definido el texto de color rojo.</p>
</div>
<div style="color:green">
   <h3>Grupo 2</h3>
   <p>Este bloque tiene definido el texto de color verde.</p>
</div>

===>La etiqueta <textarea> crea un control de entrada de texto multilínea.

Ejemplo:

<textarea rows="5" cols="40">
En este ejemplo podemos observar que se puede establecer un texto inicial en el área de ingreso de texto.
</textarea>

===>La etiqueta <select> crea un menú desplegable.

Cada opción ofrecida por dicho menú se representa por un elemento option.

Ejemplo:

<select>
   <option value="html">HTML</option>
   <option value="css">CSS</option>
   <option value="js">JavaScript</option>
   <option value="php">PHP</option>
</select>

===>La etiqueta <input> se utiliza para el ingreso de datos por parte del usuario.

El campo del input dependerá del tipo de control que le asignemos al atributo type.

• text - entrada de texto de una línea
• password - entrada de texto de una línea con carateres ocultos
• checkbox - casilla de verificació
• radio - radiobotón
• submit - botón de envio
• image - botón de envio gráfico o mapa de imágenes
• reset - botón de reinicialización
• button - botón pulsador
• hidden - control oculto
• file - selección de archivo

Ejemplos:

<form action="ejemplo.php" method="get">
   Nombre: <input type="text" name="nombre" /><br />
   Contraseña: <input type="password" name="contra" /><br />
   <input type="reset" value="Borrar" />
</form>

< input type=submit value="Enviar Datos">

<input type=hidden name="hola" value="estilo">

 <input type=button value="Open Window" onclick="openwindow()">

===>La etiqueta <map> especifica un mapa de imagenes.

Un mapa de imagenes es una imagen que permite clickear diferentes areas de la misma.
Esta etiqueta requiere del atributo name, con el mismo nombre usado en el atributousemap de la etiqueta <img>. De esta forma se establece la relación imagen-mapa.

Ejemplo:

<img src="/formas.gif" border="0" width="225" height="251" usemap="#map1">

<map name="map1">
<area href="/cuadrado.html" shape=rect coords="0,75,100,175">
<area href="/circulo.html" shape=circle coords="175,50,50">
<area href="/triangulo.html" shape=poly coords="125,250, 225,250, 175,165">
</map>

===>La etiqueta <area> se utiliza para definir regiones o areas dentro de un mapa de imágenes y los enlaces asociados a esas regiones.

Un mapa de imagenes es una imagen que permite clickear diferentes areas de la misma.
La etiqueta <area> siempre debe estar ubicada dentro de la etiqueta <map>

Ejemplo:

<img src="/formas.gif" border="0" width="225" height="251" usemap="#map1">

<map name="map1">
<area href="/cuadrado.html" shape=rect coords="0,75,100,175">
<area href="/circulo.html" shape=circle coords="175,50,50">
<area href="/triangulo.html" shape=poly coords="125,250, 225,250, 175,165">
</map>

===>¿Qué es Street View?

Google Street View es una prestación de Google Maps y de Google Earth que proporciona panorámicas a nivel de calle (360 grados de movimiento horizontal y 290 grados de movimiento vertical), permitiendo a los usuarios ver partes de las ciudades seleccionadas y sus áreas metropolitanas circundantes. Se introdujo, en primer lugar, en los Estados Unidos el día 25 de mayo de 2007. Cuando se lanzó el servicio, sólo cinco ciudades estadounidenses estaban incluidas. Desde entonces se ha expandido a 31 países europeos, 7 latinoamericanos, 11 asiáticos, 4 africanos y la Antártida.

Se puede navegar a través de estas imágenes utilizando los cursores del teclado o usando el ratón. Además, en mayo de 2009 se introdujo una novedad de navegación en la aplicación, basada en los datos proporcionados por la tecnología láser, que permite una navegación más rápida a lo largo del recorrido.

Abril 15, 2015

Clase N° 10


+Realización del siguiente ejercicio con el docente:

Index.html

<link href="estilo.css" rel="stylesheet" type="text/css"> <body> <input type="button" id="lukas" value="Aceptar"> <br> <span id="lukas">Bucaramanga</span> <br> <span class ="lola" id="lukas" >Bucaramanga</span> </body>

estilo.css

h1{color:#9932cd;} marquee {color:#9932cd;} #lukas{ background-color: #ff0000; width: 150px; height: 50px; color: #fff; } .lola{ background-color: #00ff00; color: #ffff00; }

Abril 8, 2015

Clase N° 09

CSS

Una hoja de estilo, es un documento guardado con la extensión .css

Para enlazar un documento html a un documento css:

<link href="style.css" rel="stylesheet" type="text/css">

• background-color: se usa para el color de fondo

• color: se usa para el color de letra

Ejercicio CSS

• Página principal
• Meditaciones
• Mi ciudad
• Enlaces

Mi primera página con estilo

¡Bienvenido a mi primera página con estilo!

No tiene imágenes, pero tiene estilo. También tiene enlaces, aunque no te lleven a ningún sitio.

Debería haber más cosas aquí, pero todavía no sé qué poner.

Creada el 5 de abril de 2004
por mí mismo.

Tarea Semana Santa

Ver tutorial de CSS dejado por el Docente: 

http://www.w3.org/Style/Examples/011/firstcss.es.html

W3C

El World Wide Web Consortium, abreviado W3C, es un consorcio internacional que produce recomendaciones para la World Wide Web.

Fue creado en octubre de 1994 y está dirigida por Tim Berners-Lee, el creador original de URL (Uniform Resource Locator, Localizador Uniforme de Recursos), HTTP (HyperText Transfer Protocol, Protocolo de Transferencia de HiperTexto) y HTML (Hyper Text Markup Language,Lenguaje de Marcado de HiperTexto) que son las principales tecnologías sobre las que se basa la Web.

Fue creada el 1 de octubre de 1994 por Tim Berners-Lee en el MIT, actual sede central del consorcio. Uniéndose posteriormente en abril de 1995 INRIA en Francia, reemplazado por el ERCIM en el 2003 como el huésped europeo del consorcio y Universidad de Keiō (Shonan Fujisawa Campus) en Japón en septiembre de 1996 como huésped asiático. Estos organismos administran el consorcio, el cual está integrado por:

·         Miembros del W3C. A abril de 2010 contaba con 330 miembros (lista completa).

·         Equipo W3C (W3C Team) 65 investigadores y expertos de todo el mundo (directorio).

·         Oficinas W3C (W3C Offices). Centros regionales establecidos en Alemania y Austria (oficina conjunta), Australia, Benelux (oficina conjunta), China, Corea del Sur, España, Finlandia, Grecia, Hong Kong, Hungría, India, Israel, Italia, Marruecos, Suecia y Reino Unido e Irlanda (oficina conjunta) (lista de oficinas W3C).

La oficina española del W3C, establecida en el 2003, está albergada por la Fundación CTIC en el Parque Científico Tecnológico de Gijón (Principado de Asturias).

TOMADO DE:http://es.wikipedia.org/wiki/World_Wide_Web_Consortium

Cronograma Segundo Periodo