Images Noviembre 1 de 2016

ENTREGA DEL PROYECTO

Este día se hizo la entrega del proyecto.

El proyecto consistía en hacer una pagina web con un template so

bre un tema en especifico.

Mi pagina quedo de la siguiente forma:

Images 25 de octubre/2016

                                                               Proyecto

El día de hoy se hizo la introducción de como iba a ser el proyecto.

Tenemos que buscar un template y hacer una pagina con base a este template y al tema que nos correspondió.

Qué es un template?
Un template es un conjunto de archivos que determinan la estructura y el aspecto visual de un sitio web, y tiene como ventaja principal disminuir tiempos y costos de desarrollo.

Un template es la solución ideal para muchos sitios web institucionales, ya que permiten resolver el aspecto gráfico del sitio en forma rápida y eficiente. Por supuesto que dependerá de cada empresa comprar un template o elegir un diseño web a medida.

Como recomendación personal creo que un excelente template puede solucionar en muchos casos el aspecto del diseño de un sitio web, sobre todo cuando se trata de empresas o freelancers que recién comienzan o que no tienen muy definida su imagen corporativa.

Un template les permitirá hacer el lanzamiento del sitio web hasta dos meses antes como así también disminuir el presupuesto final y, al mismo tiempo, quizás permite al equipo de desarrollo poner el esfuerzo en otras cuestiones de funcionalidad, contenidos o bien de SEO que quizás sean más importantes que la cuestión meramente estética.

¿QUÉ ELEMENTOS SE CONTEMPLAN DENTRO DE UN TEMPLATE?

En general se contemplan todos los elementos que tienen que ver con la estructura y el aspecto gráfico de un sitio web.

Entre los elementos más comunes encontramos:

Regiones - Son las áreas donde van los bloques de contenido. En la mayoría de los casos se pueden observar: el encabezado, el contenido principal, las columnas y el pie de página. Luego según el template y las opciones que tenga, podemos contar con otro tipo de regiones para darle mayor flexibilidad al sitio.

Gama de colores - Por lo general se utilizan entre dos y tres colores principales que hacen a la estética del sitio. Podemos tener un color de base para el fondo, otro color para los links, y finalmente otro color que se puede aplicar en algunas regiones como el header y el footer.

Si el template es flexible entonces debería permitir fácilmente la adaptación de la gama de colores del sitio. Por ejemplo OpenPyme utiliza un template muy flexible y permite adaptar los colores según cada necesidad.

Tipografías - Un template contempla los tamaños que deberían tener las tipografías, como así también el tipo de fuente a utilizar a lo largo de todo el sitio. Se van a definir los estilos para los headings (h1, h2, h3, h4), como así también para los párrafos de texto, viñetas, textos en el footer y demás textos que hacen a los contenidos del sitio.

Menúes de navegación - Por lo general se contempla un menú principal y uno secundario. Es importante que el diseño del menú principal esté cuidadosamente diseñado. Que sea legible y quede claro cuando el usuario hace hover sobre el botón. El menú principal del sitio es el medio de navegación que tiene el usuario y por ende también debería ser un elemento atractivo y agradable a la vista.

Botones - Los botones son fundamentales en el sentido que los entendamos como verdaderos call to action. Es decir como elementos donde queremos que el usuario haga click para que interactúe con el sitio.

Formularios - En todo sitio web hay al menos un formulario de contacto que tiene elementos como las etiquetas (labels) y los cuadros de texto (form-text). El diseño de los formularios también se contempla en todo template y es muy importante cuidar la legibilidad del texto (contraste y tamaño de la fuente), para que la persona que completa el formulario no se sienta frustrada.

Cada uno de estos elementos se deberían relacionan armónicamente para darle consistencia y coherencia a todo el aspecto visual del sitio web. Y esto es lo que diferencia en principio a un excelente template de uno de mediana o baja calidad.

Un template de excelencia no solo tiene la versatilidad y flexibilidad que uno necesita, sino que también tiene ese cuidado y prolijidad en todos sus elementos que terminan siendo cualidades diferenciales.

VENTAJAS DE USAR UN TEMPLATE

Acortar los tiempos - Si utilizás un template podés lanzar tu sitio web hasta dos meses antes (que es el tiempo mínimo que puede llevar hacer un diseño a medida e implementarlo). Para muchos negocios, el tiempo de salida al mercado (lanzamientos) es fundamental, por lo que todo lo que no sea absolutamente importante debería ser solucionado poniendo la practicidad como principal criterio. La utilización de templates es una excelente manera de ser práctico.

Reducir valores de inversión - Directamente relacionado al punto anterior, dos meses menos de esfuerzo puesto en la implementación de un diseño a medido se traduce automáticamente a los cAl mismo tiempo podés reducir los valores de inversión, hasta un máximo (para la parte de implementación del diseño) de un 80%.

Calidad final - Un template se actualiza permanentemente. También se testea y puede recibir feedback de una comunidad de usuarios para que el desarrollador lo siga mejorando. En este sentido un template puede resultar en una solución de primerísimo nivel, testeada y revisada en más de una ocasión. Se mejoran permanentemente cuestiones que tienen que ver con el código, la compatibilidad con los navegadores, la documentación, etc.

http://www.glidea.com.ar/blog/que-es-un-template

Images octubre-18/2016

                              Template

Un template es un conjunto de archivos que determinan la estructura y el aspecto visual de un sitio web, y tiene como ventaja principal disminuir tiempos y costos de desarrollo.

Un template es la solución ideal para muchos sitios web institucionales, ya que permiten resolver el aspecto gráfico del sitio en forma rápida y eficiente. Por supuesto que dependerá de cada empresa comprar un template o elegir un diseño web a medida.

¿QUÉ ELEMENTOS SE CONTEMPLAN DENTRO DE UN TEMPLATE?

En general se contemplan todos los elementos que tienen que ver con la estructura y el aspecto gráfico de un sitio web.

Entre los elementos más comunes encontramos:

Regiones - Son las áreas donde van los bloques de contenido. En la mayoría de los casos se pueden observar: el encabezado, el contenido principal, las columnas y el pie de página. Luego según el template y las opciones que tenga, podemos contar con otro tipo de regiones para darle mayor flexibilidad al sitio.

Gama de colores - Por lo general se utilizan entre dos y tres colores principales que hacen a la estética del sitio. Podemos tener un color de base para el fondo, otro color para los links, y finalmente otro color que se puede aplicar en algunas regiones como el header y el footer.

Si el template es flexible entonces debería permitir fácilmente la adaptación de la gama de colores del sitio. Por ejemplo OpenPyme utiliza un template muy flexible y permite adaptar los colores según cada necesidad.

Tipografías - Un template contempla los tamaños que deberían tener las tipografías, como así también el tipo de fuente a utilizar a lo largo de todo el sitio. Se van a definir los estilos para los headings (h1, h2, h3, h4), como así también para los párrafos de texto, viñetas, textos en el footer y demás textos que hacen a los contenidos del sitio.

Menúes de navegación - Por lo general se contempla un menú principal y uno secundario. Es importante que el diseño del menú principal esté cuidadosamente diseñado. Que sea legible y quede claro cuando el usuario hace hover sobre el botón. El menú principal del sitio es el medio de navegación que tiene el usuario y por ende también debería ser un elemento atractivo y agradable a la vista.

Botones - Los botones son fundamentales en el sentido que los entendamos como verdaderos call to action. Es decir como elementos donde queremos que el usuario haga click para que interactúe con el sitio.

Formularios - En todo sitio web hay al menos un formulario de contacto que tiene elementos como las etiquetas (labels) y los cuadros de texto (form-text). El diseño de los formularios también se contempla en todo template y es muy importante cuidar la legibilidad del texto (contraste y tamaño de la fuente), para que la persona que completa el formulario no se sienta frustrada.

Proyecto:

1. Tenga presente que el trabajo del proyecto del periodo inicio el día martes 18 de octubre de 2016, con la entrega de una hoja marcada con sus nombres y apellidos, en ella ud. escribio como mínimo 5 programas o peliculas de su niñez. ( 10 puntos ).
2. Llevar a clase un template free(gratis), sin efectos flash, ni template wix; este template debe ser referente a su tema.
3. Llevar los textos e imagenes que uds. necesiten para empezar a trabajar en el proyecto en horas de clase.
4. No deben llevar el proyecto ni empezado ni terminado, la realización del proyecto se inicia desde cero en la clase; si se lleva empezado o terminado, se le cambiara el tema.
5. Crear una carpeta que ud. debe llamar PRIMERapellido_PRIMERnombre_##, donde ## hace referencia a 9a ó 9b según sea su caso.
6. En esa carpeta(PRIMERapellido_PRIMERnombre_##) debe guardar la carpeta del template, las imagenes y texto que ud. descargo en su CASA, todo referente al tema elegido.
7. Esa carpeta(PRIMERapellido_PRIMERnombre_##) debe ser guardada en su memoria usb personal( sólo suya, no compartida ), o en su nube personal( sólo suya, no compartida ).
8. Si por algún caso su memoria usb falla, debe tener una copia de seguridad, ya sea en otra memoria usb personal( sólo suya, no compartida ), en una nube personal ( sólo suya, no compartida ).
9. La memoria usb que presente al docente o con la cual va a trabajar debe estar marcada al menos con su primer nombre, primer apellido.
10. El modelo del trabajo realizado por el docente , será presentado en clase, para que con ello ud. pueda trabajar siguiendo dicho esquema.
11. Las condiciones de entrega y los 10 temas adicionales, serán entregados el día de clase.
12. Si el estudiante falto a la clase del 18 de octubre de 2016, debe presentar el supletorio.

Images octubre-11/2016

se realizaron algunos ejercicios y se realizo una evaluación:

nota 1 = parseInt(prompt("nota 1"));
nota 2 = parseInt(prompt("nota 2"));
def=(nota 1 + nota 2)/2
(def>=75){

}
else{

}


etiquetas:

length= lee los caracteres
prompt= pide informacion por teclado

Images octubre-4/2016

                                                              Javascript


etiquetas:

substring: se usa para extraer informacion

ejemplo:
mensaje="texto"
mensaje.substring (5  2);

donde esta el 5 es la posicion
donde esta el 2 la cantidad

Hola-mundo-Bucaramanga-colombia
split("texto")

palabras [numero de caracter];

comando for

for ( i = 0; i < = 6; i+2){
document.write (palabras1[i ]+" ")

toLowerCase -----> minuscula

toUpperCase -----> mayuscula

palabra1[3]            //una

X = palabra1[3].substring (1);

Y = x*toUpperCase(  );

a = a+1 <=> a++
a = a-1 <=> a--
a = a+10 <=> a+ = 10

Images septiembre-27/2016

se revisaron los ejercicios:

1.
<html>
<head>
<title>El primer script</title>

<script>
  var mensaje = "Hola Mundo";
var numeroLetras = mensaje.length; // numeroLetras = 10
</script>
</head>

<body>
<p>Esta página contiene el primer script</p>
</body>
</html>

2.
<html>
<head>
<title>El segundo script</title>

<script>
  var mensaje1 = "Hola";
var mensaje2 = " Mundo";
var mensaje = mensaje1 + mensaje2; // mensaje = "Hola Mundo"
</script>
</head>

<body>
<p>Esta página contiene el segundo script</p>
</body>
</html>

3.
<html>
<head>
<title>El tercer script</title>

<script>
  var mensaje1 = "Hola";
var mensaje2 = mensaje1.concat(" Mundo"); // mensaje2 = "Hola Mundo"
</script>
</head>

<body>
<p>Esta página contiene el tercer script</p>
</body>
</html>

4.
<html>
<head>
<title>El cuarto script</title>

<script>
  var variable1 = "Hola ";
var variable2 = 3;
var mensaje = variable1 + variable2; // mensaje = "Hola 3"
</script>
</head>

<body>
<p>Esta página contiene el cuarto script</p>
</body>
</html>

5.
<html>
<head>
<title>El quinto script</title>

<script>
  var mensaje1 = "Hola";
var mensaje2 = "Mundo";
var mensaje = mensaje1 + mensaje2; // mensaje = "HolaMundo"
</script>
</head>

<body>
<p>Esta página contiene el quinto script</p>
</body>
</html>

6.<html>
<head>
<title>El sexto script</title>

<script>
  var mensaje1 = "Hola";
var mensaje2 = "Mundo";
var mensaje = mensaje1 + " " + mensaje2; // mensaje = "Hola Mundo"
</script>
</head>

<body>
<p>Esta página contiene el sexto script</p>
</body>
</html>

7.
<html>
<head>
<title>El septimo script</title>

<script>
  var mensaje1 = "Hola";
var mensaje2 = mensaje1.toUpperCase(); // mensaje2 = "HOLA"
</script>
</head>

<body>
<p>Esta página contiene el septimo script</p>
</body>
</html>

8.
<html>
<head>
<title>El octavo script</title>

<script>
  var mensaje1 = "HolA";
var mensaje2 = mensaje1.toLowerCase(); // mensaje2 = "hola"
</script>
</head>

<body>
<p>Esta página contiene el octavo script</p>
</body>
</html>

9.
<html>
<head>
<title>El noveno script</title>

<script>
  var mensaje = "Hola";
var letra = mensaje.charAt(0); // letra = H
letra = mensaje.charAt(2);     // letra = l
</script>
</head>

<body>
<p>Esta página contiene el noveno script</p>
</body>
</html>

10.
<html>
<head>
<title>El decimo script</title>

<script >
  var mensaje = "Hola";
var posicion = mensaje.indexOf('a'); // posicion = 3
posicion = mensaje.indexOf('b');     // posicion = -1
</script>
</head>

<body>
<p>Esta página contiene el decimo script</p>
</body>
</html>

11.
<html>
<head>
<title>El undecimo script</title>

<script>
  var mensaje = "Hola";
var posicion = mensaje.lastIndexOf('a'); // posicion = 3
posicion = mensaje.lastIndexOf('b');     // posicion = -1
</script>
</head>

<body>
<p>Esta página contiene el undecimo script</p>
</body>
</html>

12.
<html>
<head>
<title>El doceavo script</title>

<script>
  var mensaje = "Hola Mundo";
var porcion = mensaje.substring(2); // porcion = "la Mundo"
porcion = mensaje.substring(5);     // porcion = "Mundo"
porcion = mensaje.substring(7);     // porcion = "ndo"
</script>
</head>

<body>
<p>Esta página contiene el doceavo script</p>
</body>
</html>

13.
<html>
<head>
<title>El trece script</title>

<script >
  var mensaje = "Hola Mundo";
var porcion = mensaje.substring(-2); // porcion = "Hola Mundo"
</script>
</head>

<body>
<p>Esta página contiene el trece script</p>
</body>
</html>

14.
<html>
<head>
<title>El catorce script</title>

<script>
  var mensaje = "Hola Mundo";
var porcion = mensaje.substring(1, 8); // porcion = "ola Mun"
porcion = mensaje.substring(3, 4);     // porcion = "a"
</script>
</head>

<body>
<p>Esta página contiene el catorce script</p>
</body>
</html>

15.
<html>
<head>
<title>El quince script</title>

<script >
  var mensaje = "Hola Mundo";
var porcion = mensaje.substring(5, 0); // porcion = "Hola "
porcion = mensaje.substring(0, 5);     // porcion = "Hola "
</script>
</head>

<body>
<p>Esta página contiene el quince script</p>
</body>
</html>

16.
<html>
<head>
<title>El diesciseis script</title>

<script >
  var mensaje = "Hola Mundo, soy una cadena de texto!";
var palabras = mensaje.split(" ");
// palabras = ["Hola", "Mundo,", "soy", "una", "cadena", "de", "texto!"];
</script>
</head>

<body>
<p>Esta página contiene el diesciseis script</p>
</body>
</html>

17.
<html>
<head>
<title>El diescisiete script</title>

<script >
  var palabra = "Hola";
var letras = palabra.split(""); // letras = ["H", "o", "l", "a"]
</script>
</head>

<body>
<p>Esta página contiene el diescisiete script</p>
</body>
</html>

y se realizo evaluacion sobre el tema de javascript

Images septiembre/20/2016

                                         javascript

(abreviado comúnmente JS) es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos,  basado en prototipos, imperativo, débilmente tipado y dinámico.

Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas aunque existe una forma de JavaScript del lado del servidor (Server-side JavaScript o SSJS). Su uso en aplicaciones externas a la web, por ejemplo en documentos PDF, aplicaciones de escritorio (mayoritariamente widgets) es también significativo.

tomado de: https://es.wikipedia.org/wiki/JavaScript

ejemplo:

<html>

<head><title>practica de javascript</title></head>

<script>

document.write("<b>Hola</b>a<font color=`#ff0000´>todos</font>")

</script>

<body>

texto de ejemplo

</body>

</html>

etiquetas:

alert: mensaje.

front end: es lo que usted le al cliente.

Images septiembre/13/2016

el colegio dio la semana del 12 al 16 por lo tanto no hubo clase de informática el día 13 de septiembre de 2016.

Images septiembre/06/2016

Se entregaron definitivas y se vio un poco de reojo el tema de javascript

<html>

<head><title>pagina web html con javascript</title></head>

<script>

              alert ("hola mundo en javascript")

<body>

texto de ejemplo

</body>

</html>

etiquetas en javascript:

//texto de ejemplo=comentario=los comentarios no se ejecutan/este tipo de comentario es para una sola linea.

/* texto de ejemplo*/=este comentario es de varias lineas.

concatenacion: es unir una o dos cadenas

Images agosto/30/2016

Se realizo acumulativo mi nota fue 100 el acumulativo consistía en unirse en grupos de a 4 y  con los proyectos crear una tabla 2x2 y poner el nombre de los integrantes y la url y debian una carpeta con otras dos carpetas adentro de ellas poner el proyecto de cada grupo quedaria asi:

<html>
<head><title>acumulativo</head></title>
<body>
<table>
<tr>
<td>nombre de los integrantes</td>
<td>vinculo al proyecto</td>
<tr>
<td>nombre de los integrantes</td>
<td>vinculos al proyecto</td>
</body>
</html>

Images agosto-23/2016

se continua trabajando en el proyecto plazo de 8 dias para entregarlo al ingeniero

<html>
<head><title>SebastianRamirez_WilliamRODRIGUEZ</title></head> 
<body background="G:\Ramirezsebastian_RodriguezWilliam_pc-159_9A/imagen/fondo 2.jpg">
<EMBED SRC="G:\Ramirezsebastian_RodriguezWilliam_pc-159_9A/musica/musica.mp3" AUTOSTART=true LOOP=true VOLUME="80" WIDTH="0" HEIGHT="0">>
<table width="100%" border="0" >
<tr>
<td bgcolor="#C0C0C0" rowspan="2"><img src="G:\Ramirezsebastian_RodriguezWilliam_pc-159_9A/imagen/jjjjj.png"></td>
<td bgcolor="orange"><b>inicio</td>
<td bgcolor="orange"><b>reseña_historica</td>
<td bgcolor="orange"><b>mision-vision</td>
<td bgcolor="orange"><b>zona_de_recreacion_familiar_Ergo</td>
<td bgcolor="orange" colspan="2"><b>contacto,</td>
<td bgcolor="orange"><br></td>
</tr>
<tr>
<td bgcolor="#C0C0C0"><b>tipos de ladrillo</td>
<td bgcolor="#C0C0C0"><b>|_Proceso_de_Seleccción_de_Mezcla_|</td>
<td bgcolor="#C0C0C0"><b> Proceso_en_Producción_de_Extendido_|</td>
<td bgcolor="#C0C0C0"><b> Proceso _de_Encasille_| </td>
<td bgcolor="#C0C0C0"><b> Proceso_de_Quema</td>
<td bgcolor="#C0C0C0"><b>|_Proceso_de_Deshorne_|</td>
</tr>
</table>
<table width="100%" height="7%">
<tr><td bgcolor="orange"></td></tr>
<tr><td bgcolor="black"></td></tr>
</table>
<img src="G:\Ramirezsebastian_RodriguezWilliam_pc-159_9A/imagen/imagen 4.png" width="100%">
<table align="center">
<tr><td><font color="white"><font size=20><b>construyendo_un_futuro_seguro</font></font></td></tr>
<tr><td bgcolor="orange"><font size=20>Fabricació_de Ladrillos_H7-H10-H12-H15-H10_1/2_y_Tejas</font></td></tr>
</table>
</body>
</html>

Images Agosto-16/2016

Hacer una simulación de una pagina web:

1.crear una carpeta que se llame: PrimerApellidoPrimerNombre_PrimerApellidoPrimerNombre_##_9a
2.el primer documento se debe llamar index.html
3.debe crear una carpeta que se llame carpeta imagenes en la cual deben ir las imagenes
4.la pagina debe tener integrada musica.
http://www.edutecne.utn.edu.ar/audio/sonido_en_web.pdf

5.el title debe ser el primernombreprimerapellido .
6.todas las imagenes debe llevar una "AYUDA RAPIDA".
7.El diseño debe ser lo mas parecido a la pagina original.

http://www.ladrilleraergo.com/

Images Agosto-9/2016

Evaluacion

<html>

<head><title>evaluacion</title></head>

<body>

<table width="80%" border="1">

<tr>

<td rowspan="2">12 78</td>

<td>34</td>

<td>56</td>

</tr>

<tr>

<td colspan="2">9 10 11 12</td>

<td>13 14</td>

</tr>

</table>

</body>

</html>

Anclas

Sirve para definir posiciones dentro de un documento y se puede usar como destino de hiperenlaces.
Para crear un ancla (anchor) se procede de la siguiente manera:

<A NAME="nombre_etiqueta">Texto del elemento ancla</A>

Visualmente est elemento no tiene niun efecto, pero si lo tiene en forma interactiva con el usuario.
Para hacer referencia al ancla o posición se hace el siguiente tipo de hiperenlace:

<A HREF="#nombre_etiqueta">Texto del hiperenlace</A>

De esta manera accederemos a la posición donde hayamos puesto el ancla
Por ejemplo al final de este documento hemos puesto la siguiente ancla:

<a name="final">Este es el final del documento!!</a>

Y para acceder a esa posición usamos el siguiente hipernlace:

<A HREF="#final">Vamos al final del documento</A>

Que se vería así:
Vamos al final del documento (clicklea el hiperenlace para ver lo que sucede!!)
usando #nombre_etiqueta estamos asumiendo que el ancla esta en el documento actual, o sea estamos usando un ruta relativa al documento.

Si queremos acceder a un ancla desde fuera del documento, usamos un enlace más completo donde se incluye el nombre del documento donde se encuentra el ancla:
<A HREF="anclas.php#final">Vamos al final del documento</A>

En nuestro caso este documento se llama anclas.php. El nombre del docuemnto se coloca siempre antes del signo gato (#).
La anclas son muy buenas por ejemplo para presentar un listado inicial, y cada elemento del listado se desarrolla a lo largo del documento, pudiendo enlazar con anclas las diferentes posiciones del documento donde se desarrolla cada elemento del listado incial.

http://www.bufoland.cl/cursoweb/html/anclas.php

Images Agosto-2/2016

Tutorial HTML: Tablas con Colspan y Rowspan

Es la forma de fusionar celdas en una tabla.

Rowspan, indica el número de filas que ocupará la celda. Por defecto ocupa una sola fila.

Colspan, indica el número de columnas que ocupará la celda. Por defecto ocupa una sola columna.

De esta forma si ponemos <td colsan=2>, quiere decir que la celda actual se extiende en el ancho de dos celdas.

Algo parecido ocurre si ponemos <td rowspan=3>, la celda ocupará el alto de 3 celdas normales.

Veamos un ejemplo:

Si visualizamos esta tabla, podemos observar que la primera celda ocupa tres filas, y no sobrepasa la altura total de las tres celdas que tiene a la derecha.

Países Europeos	España	Madrid
	Francia	Paris
	Reino Unido	Londres
Países Americanos	EEUU	Washington
	Canada	Toronto
	Mexico	Mexico

Código fuente de la tabla:

<table width="80%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="3"><p>Países Europeos</p></td>
<td><p>España</p></td>
<td><p>Madrid</p></td>
</tr>
<tr>
<td><p>Francia</p></td>
<td><p>Paris</p></td>
</tr>
<tr>
<td><p>Reino Unido</p></td>
<td><p>Londres</p></td>
</tr>
<tr>
<td rowspan="3"><p>Países Americanos</p></td>
<td><p>EEUU</p></td>
<td><p>Washington</p></td>
</tr>
<tr>
<td><p>Canada</p></td>
<td><p>Toronto</p></td>
</tr>
<tr>
<td><p>Mexico</p></td>
<td><p>Mexico</p></td>
</tr>
</table>

http://www.usabilidad.tv/tutoriales_html/colspan_y_rowspan.asp

Images julio-26/2016

Este día resolvimos todas las dudas que teníamos sobre varias etiquetas, con ejemplos, e hicimos una evaluación. La solución de la evaluación era la siguiente.

<html>
<head><title></title></head>
<body bgcolor="00ff00" text="fff">
<table width="70%" border="1">
<tr>
<td><b>peña nelson</b></td>
<td><img src="" width="32px" height="32px"></td>
<td><ul><li>1</li><li>2</li><li>3</li></ul></td>
</tr>

<tr>
<td><u>peña nelson</u></td>
<td><marquee direction="up">divino amor</marquee></td>
<td><font color="f00"><b><h3>9a</h3></b></font></td>
</tr>

<tr>
<td><hr></td>
<td><marquee direction="down">150</marquee></td>
<td><font color="000"><b><h3>jorge</h3></b></font></td>
</tr>

</table>
</body>
</html>

Images Julio-19/2016

Ese día realizaron una evaluación la respuestas a ella era:

<html>
<head><title>evaluacion html</title></head>
<body><b>colegio divino amor</b><br>
<hr>
<img src="http://coldivinoamor.edu.co/images/logo.fw.png"></img><br>
<hr>
<font color="#00ff00">prueba</font>
</body>
</html>

y de esta forma se vería al abrirlo

Si quisiéramos cambiar el color del fondo y de la fuente del body, haríamos esto:
<body bgcolor "#000000" text= "#ffffff"> Mensaje <body>
</html>

Si queremos poner una imagen de fondo:
<background "http://coldivinoamor.edu.co/images/logo.fw.png">

Para colocar una imagen o texto en movimiento:
<marquee> texto o imagen </marquee>

Para que rebote:

<marquee behavior="alternate">

Para cambiar la direccion:
<marquee direction "down" o "up">

* Cómo trabajar con el Bloc de Notas. Oprima AQUI.

* Cómo trabajar con el NotePad++. Oprima AQUI.

* Fondo de páginas. Oprima AQUI.

* Manejo de imagenes. Oprima AQUI.

* Enlaces, link, vinculos, hipervinculos, hiperenlaces. Oprima AQUI.

* Texto en Movimiento. OPRIMIR AQUI.

* Texto en Movimiento. OPRIMIR AQUI.

Images Julio - 12 / 2016

                             HTML


HTML, sigla en inglés de HyperText Markup Language (lenguaje de marcas de hipertexto), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, juegos, entre otros. Es un estándar a cargo del World Wide Web Consortium (W3C) o Consorcio WWW, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. Se considera el lenguaje web más importante siendo su invención crucial en la aparición, desarrollo y expansión de la World Wide Web (WWW). Es el estándar que se ha impuesto en la visualización de páginas web y es el que todos los navegadores actuales han adoptado. El HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>,/).

Las etiquetas se dividen en dos:
1. Cerradas: se cierran.

 <title>inserte un titulo</title>

2.Abierta: las que nunca se cierra.

<img src = ``_´´>
<img src = ``_´´/>

jamas se debe hacer esto:  

</img> 

Etiquetas:

• <html>: define el inicio del documento HTML, le indica al navegador que lo que viene a continuación debe ser interpretado como código HTML. Esto es así de facto, ya que en teoría lo que define el tipo de documento es el DOCTYPE, que significa la palabra justo tras DOCTYPE el tag de raíz.
• <script>: incrusta un script en una web, o llama a uno mediante src="url del script". Se recomienda incluir el tipo MIME en el atributo type, en el caso de JavaScript  text/javascript.
• <head>: define la cabecera del documento HTML; esta cabecera suele contener información sobre el documento que no se muestra directamente al usuario como, por ejemplo, el título de la ventana del navegador. Dentro de la cabecera<head> es posible encontrar:
• <body>: define el contenido principal o cuerpo del documento. Esta es la parte del documento html que se muestra en el navegador; dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como color de fondo y márgenes. Dentro del cuerpo <body> es posible encontrar numerosas etiquetas. A continuación se indican algunas a modo de ejemplo.

<html> :  se coloca al principio

</html> :  se coloca al final

<head> Encabezado: es el titulo de la pagina

<body> Cuerpo. texto de la pagina

<hr> Linea horizontal

<pre> Respeta lo que estoy escribiendo 

<p> Párrafo

<b> Negrilla = <strong> Son tienen la misma función

<s> Tachado

<u> Subrayado

<i> Italica o cursiva (Están inclinadas).

<br> Salto de linea ó enter

<font color#00FFF7> Color de texto

</inserte la etiqueta que quiere cerrar> :  se usa para cerrar cualquier etiqueta

Tomado de: https://es.wikipedia.org/wiki/HTML

Images junio 7 de 2016

Se corrigieron e arreglaron las notas definitivas de los estudiantes y se entregaron las notas definitivas

Images Mayo 31 de 2016

• 1.Realizar un programa que le presente un menú al usuario con las siguientes opciones: lo desarrollan todos

• 1. Leer dos números enteros positivos únicamente.   
• 2. Sumar los dos números leídos.  
• 3. Restarle al primer número el segundo (siempre y cuando el primero sea mayor que él segundo, en caso contrario indicar con un mensaje que la operación no es posible realizarla y volver al menú principal.
• 4. Multiplicar los dos números (siempre y cuando ninguno de los números sea igual a cero, , en caso contrario indicar con un mensaje que la operación no es posible realizarla y volver al menú principal,).
• 5. Dividir el primer número dado por el segundo.  
• 6. Salir Nota: Se debe garantizar que el usuario haya ingresado los dos números antes de poder realizar cualquier operación y que no se puede escribir un resultado sin la realización de una operación.

Solución:

Proceso sin_titulo numero1 = -1 numero2 = -1 ya_se_digito_los_numeros = "no" Repetir Escribir "" Escribir "****************************************************************" Escribir "* 1. Leer dos nœmeros enteros positivos œnicamente. *" Escribir "* 2. Sumar los dos nœmeros le'dos. *" Escribir "* 3. Restarle al primer nœmero el segundo. *" Escribir "* 4. Multiplicar los dos nœmeros. *" Escribir "* 5. Dividir el primer nœmero dado por el segundo. *" Escribir "* 6. Salir. *" Escribir "****************************************************************" Escribir "" Leer opciones Escribir "" Segun opciones Hacer 1: Escribir "" Escribir "1. Leer dos nœmeros enteros positivos œnicamente." Escribir "" Escribir "Digite el Primer Numero" Leer numero1 Escribir "Digite el Segundo Numero" Leer numero2 ya_se_digito_los_numeros = "no" Si numero1 > 0 Entonces Si numero2 > 0 Entonces ya_se_digito_los_numeros = "si" Sino numero1 = -1 numero2 = -1 Escribir "Hace falta digitar un numero entero Positivo en el Segundo Valor" Fin Si Sino numero1 = -1 numero2 = -1 Escribir "Hace falta digitar un numero entero Positivo en el Primer Valor" Fin Si 2: Escribir "" Escribir "2. Sumar los dos nœmeros le'dos." Escribir "" Si ya_se_digito_los_numeros = "si" Entonces Escribir "Suma de los dos numeros = ( " numero1 " + " numero2 " = " ( numero1 + numero2 ) " )" Sino Escribir "" Escribir "****************************************************************" Escribir "* Hace falta digitar los dos numeros *" Escribir "****************************************************************" Escribir "" Fin Si 3: Escribir "" Escribir "3. Restarle al primer nœmero el segundo." Escribir "" Si ya_se_digito_los_numeros = "si" Entonces Si numero1 > numero2 Entonces Escribir "Resta de los dos numeros = ( " numero1 " - " numero2 " = " ( numero1 - numero2 ) " )" Sino Escribir "La operaci—n no es posible realizarla." Fin Si Sino Escribir "" Escribir "****************************************************************" Escribir "* Hace falta digitar los dos numeros *" Escribir "****************************************************************" Escribir "" Fin Si 4: Escribir "" Escribir "4. Multiplicar los dos nœmeros." Escribir "" Si ya_se_digito_los_numeros = "si" Entonces Si numero1 > 0 Entonces Si numero2 > 0 Entonces Escribir "Multiplicacion de los dos numeros = ( " numero1 " * " numero2 " = " ( numero1 * numero2 ) " )" Sino Escribir "No se puede Multiplicar porque el Segundo Numero es Cero." Fin Si Sino Escribir "No se puede Multiplicar porque el Primer Numero es Cero." Fin Si Sino Escribir "" Escribir "****************************************************************" Escribir "* Hace falta digitar los dos numeros *" Escribir "****************************************************************" Escribir "" Fin Si 5: Escribir "" Escribir "5. Dividir el primer nœmero dado por el segundo." Escribir "" Si ya_se_digito_los_numeros = "si" Entonces Si numero2 <> 0 Entonces Escribir "Division de los dos numeros = ( " numero1 " / " numero2 " = " ( numero1 / numero2 ) " )" Sino Escribir "No se puede Dividir porque el Segundo Numero es Cero." Fin Si Sino Escribir "" Escribir "****************************************************************" Escribir "* Hace falta digitar los dos numeros *" Escribir "****************************************************************" Escribir "" Fin Si 6: Escribir "" Escribir "****************************************************************" Escribir "* HASTA LUEGO. *" Escribir "****************************************************************" Escribir "" De Otro Modo: Escribir "" Escribir "****************************************************************" Escribir "* Opcion No VALIDA. *" Escribir "****************************************************************" Escribir "" Fin Segun Hasta Que opciones = 6 FinProceso

2. Desarrollar un algoritmos que permita realizar la sumatoria de los primeros 100 números utilizando los 3 ciclos (para, repita, mientras)

Solución:

Proceso sin_titulo cantidad_de_numeros = 100 suma = 0 Para i<-0 Hasta cantidad_de_numeros Con Paso 1 Hacer suma = suma + i Fin Para Escribir "" Escribir "CICLO FOR -> Sumatoria de los primeros " cantidad_de_numeros " es = " suma Escribir "" suma = 0 i = 0 Repetir i = i + 1 suma = suma + i Hasta Que i > ( cantidad_de_numeros - 1) Escribir "" Escribir "CICLO REPETIR HASTA -> Sumatoria de los primeros " cantidad_de_numeros " es = " suma Escribir "" suma = 0 i = 0 Mientras i < cantidad_de_numeros Hacer i = i + 1 suma = suma + i Fin Mientras Escribir "" Escribir "CICLO HACER MIENTRAS -> Sumatoria de los primeros " cantidad_de_numeros " es = " suma Escribir "" FinProceso

3. Cree un algoritmo que capture un mes en números y el software muestre un mensaje que indique cuantos días tiene ese mes. Ejemplo: si se digita "07", el algoritmo debe mostrar "Julio, tiene treinta un días". El algoritmo debe también advertir que si se trata de febrero tiene 28 días, pero si el año fuera bisiesto tendría 29.

Solución:

Proceso sin_titulo Dimension mes[12] mes[1]='Enero' mes[2]='Febrero' mes[3]='Marzo' mes[4]='Abril' mes[5]='Mayo' mes[6]='Junio' mes[7]='Julio' mes[8]='Agosto' mes[9]='Septiembre' mes[10]='Octubre' mes[11]='Noviembre' mes[11]='Diciembre' Escribir "Digite un numero entre 1 y 12" Leer n es_bisiesto = "" Si (n>=1) && (n<=12) Entonces Segun n Hacer 1, 3, 5, 7, 8, 10, 12: maximo_dia_mes = 31 2: maximo_dia_mes = 28 es_bisiesto = ", pero si fuera A–o Bisiesto tendria 29 dias." 4, 6, 9, 11 : maximo_dia_mes = 30 Fin Segun Escribir mes[n] " tiene " maximo_dia_mes " dias " es_bisiesto Sino Escribir "Debe digitar un valor de mes entre 1 y 12" Fin Si FinProceso

4. Se requiere que solo con la utilización de ciclos y condicionales, usted pueda convertir un número decimal < a 5000 a número Romano.

Solución:

Proceso sin_titulo Escribir "Digite un numero entre 1 y 5000" Leer decimal Si (decimal>=1) && (decimal<=5000) Entonces Escribir "********* Conversion a Romano *********" Dimension unidad[10] DImension decenas[10] Dimension centenas[10] Dimension miles[6] unidad[1]='' unidad[2]='I' unidad[3]='II' unidad[4]='III' unidad[5]='IV' unidad[6]='V' unidad[7]='VI' unidad[8]='VII' unidad[9]='VIII' unidad[10]='IX' decenas[1]='' decenas[2]='X' decenas[3]='XX' decenas[4]='XXX' decenas[5]='XL' decenas[6]='L' decenas[7]='LX' decenas[8]='LXX' decenas[9]='LXXX' decenas[10]='XC' centenas[1]='' centenas[2]='C' centenas[3]='CC' centenas[4]='CCC' centenas[5]='CD' centenas[6]='D' centenas[7]='DC' centenas[8]='DCC' centenas[9]='DCCC' centenas[10]='CM' miles[1]='' miles[2]='M' miles[3]='MM' miles[4]='MMM' miles[5]='[IV]' miles[6]='[V]' miles_= trunc(decimal/1000) MOD 10 centenas_= trunc(decimal/100) MOD 10 decenas_= trunc(decimal/10) MOD 10 unidades_= decimal MOD 10 Escribir miles[miles_+1] centenas[centenas_+1] decenas[decenas_+1] unidad[unidades_+1] Sino Escribir "Lo siento solo sirve la conversion entre numeros de 1 a 5000" Fin Si FinProceso