Vistas de página en total

martes, 23 de abril de 2013

Programación Internet con Html 2


Menús e Imágenes
Para desarrollar la aplicación sencilla, creamos una carpeta html1 y las subcarpeta image que contendrá todas las imágenes de nuestra aplicación y la subcarpeta menu que tendrá los menús de la aplicación. Las páginas html correspondientes del menú están bajo la carpeta html1.
La página index.html y todas las demás contienen un menú de opciones que al seleccionar uno de ellos aparece la página correspondiente. Antes de escribir el código de html de la primera página Pasado – Evolución Física vamos a explicar brevemente como se crean las etiquetas del menú e imágenes que se utilizan en las páginas.

Para crear las etiquetas del menú seguimos los siguientes pasos.
1-Seleccionar un editor de imágenes, hay varios, yo utilizo el Digital Image Pro 10.
2-Buscar en internet una imagen de fondo del menú y guardarlo en la carpeta de menú.
3-Recortar la imagen con el tamaño adecuado de ancho y altura.
4-Escribir el nombre del menú.
5-Repetir los pasos anteriores por cada etiqueta del menú.

Para las imágenes que se utilizan en las páginas, seguir los siguientes pasos.
1-Buscar y seleccionar en internet las imágenes adecuadas y guardarlas en la carpeta de image.
2-Si la imagen va a contener varias imágenes utilizar el editor de imágenes Digital Image Pro 10
3-Seleccionar una imagen de base, en este caso negra.
4-Leer y colocar la primera imagen en el fondo negro.
5-Repetir el paso 4 anterior hasta poner todas las imágenes y guardar la imagen completa.

sábado, 13 de abril de 2013

Programación Internet con Html 1

Iniciamos una aplicación muy simple con html. Lo podemos desarrollar en un teléfono inteligente o una computadora laptop o deskop. Solo necesitamos un editor de texto como el bloc de notas y un navegador como firefox u otro.
Para desarrollar nuestra aplicación sencilla, creamos una carpeta html1 y las subcarpeta image que contendrá, todas las imáges de nuestra aplicación y la subcarpeta menú que tendrá los menus de la aplicación. Las páginas index html y las correspondientes del menú están bajo la carpeta html1.
La siguiente imagen muestra como quedaría la primera página index.html en una laptop. En los siguientes blog desarrollaremos las páginas del menu.



Abrimos el editor de bloc de notas e introducimos el código siguiente.

<html>
<!-- Primero iniciamos con la etiqueta html, el encabezado head y el titulo. -->
<head>
<title>Evolución y desarrollo humano</title>
</head>
<!-- Ahora ponemos el cuerpo de la página, con un fondo -->
<body background="image/gold3.jpeg">
<!-- Creamos una tabla con un borde de 0 y la centramos -->
<center><table border="0">
<!-- Definimos el primer renglón o fila y la primera columna que contendrá una imagen -->
<tr> <td>
<img src="image/linea-tiempo2.jpg" width="150" hight="50"></td>
<!-- La segunda columna contendrá una un encabezado y los menus -->
<td><center><h1><font color="gold" face="veredana">Evolución y Desarrollo Humano </font></h1></center>
<a href="evolucion-fisica.html"><img src="menu/menu11.png" width="150" hight="140" alt="Pasado de la Evolución Física"></a>
<a href="evolucion-biologica.html"><img src="menu/menu22.png" width="150" hight="140" alt="Pasado de la Evolución Biológica"></a>
<a href="evolucion-social.html"><img src="menu/menu33.png" width="150" hight="140" alt="Pasado de la Evolución Social"></a>
<a href="presente-desarrollo.html"><img src="menu/menu44.png" width="150" hight="140" alt="Presente del Desarrollo"></a>
<a href="futuro-proyecto.html"><img src="menu/menu55.png" width="150" hight="140" alt="Futuro con un Proyecto"></a><br>
</td></tr>
<!—El siguiente renglón abarca las dos columnas y contendrá un párrafo de texto -->
<tr><td colspan="2">
<p>La Evolución y Desarrollo Humano es un modelo que se basa en la línea o flecha del tiempo que surgió desde la gran explosión y crea el pasado de la evolución física, biológica y social, el presente del desarrollo humano y el futuro con un proyecto de vida.Vivimos en la época de la información y del conocimiento, de los grandes descubrimientos científicos, también de los maravillosos inventos tecnológicos en el que el hombre actual esta inmerso, computadoras, internet, teléfonos celulares, naves espaciales, satélites, energía nuclear etc.  Pero sabemos ¿Cómo el ser humano llego a estos niveles de inteligencia? Si, es el resultado de la evolución del universo y del desarrollo humano. Pero el desarrollo de la vida humana es tan corta e insignificante ante la gran inmensidad y grandiosidad del universo. Para comprenderlo, primero debemos entender el significado de Evolución como la aparición o surgimiento de algo en un tiempo muy largo en el transcurso de muchos millones de años con transformaciones o cambios sucesivos como acontece con la evolución del universo. Segundo el Desarrollo que es parte de la evolución  de todos los seres vivos y se aplica específicamente a un solo ser en un espacio-tiempo muy pequeño y corto desde que nace hasta que muere en un periodo de minutos, días hasta varios años, como es el caso del ciclo de vida del ser humano, de nacer, vivir o desarrollarse y morir.
</p></td></tr>
<!—El siguiente renglón contiene una imagen de ancho de 700px y altura de 600px -->
<tr><td colspan="2">
<center><img src="image/universo.jpg" width="700" hight="600"></center>
</td></tr>
<!—El siguiente renglón abarca las dos columnas y contendrá un encabezado centrado -->
<tr><td colspan="2">
<center><h3><font color="yellow" face="veredana">Pasado de la Evolución</font></h3></center>
</td></tr>
<!—El siguiente renglón abarca las dos columnas y un párrafo de texto -->
<tr><td colspan="2">
<p> ¿De dónde venimos? debemos de conocer y de estudiar el pasado en la línea del tiempo de la evolución universal, iniciamos con el físico, continuamos con el biológico y terminamos con el social. La evolución física se inicia con las teorías de cuerdas y membranas para explicar las 4 fuerzas fundamentales y la gran explosión, la formación de las partículas, átomos, moléculas, gas y polvo cósmico que crea las estrellas y cuerpos celestes formando el universo de galaxias. La galaxia vía láctea incluye al sistema solar con 9 planetas, uno de ellos la tierra, inicialmente incandescente y después se enfría formando capas una sólida y liquida, otra gaseosa.
La evolución biológica se inicia con las moléculas orgánicas, continúa la formación del ADN, las células vegetales, los microorganismos unicelulares, los organismos multicelulares terminando con la aparición del hombre pensante.
La evolución social se inicia con la aparición del ser humano en la prehistoria, continua la edad antigua, la edad media, la edad moderna, la edad contemporánea y la edad de la información. Finaliza con la descripción del mundo actual y los individuos parte de la sociedad.
</p></td></tr>
<!—El siguiente renglón abarca las dos columnas y contendrá un encabezado centrado -->
<tr><td colspan="2">
<center><h3><font color="#6E6E6E" face="veredana">Pasado de la Evolución Física</font></h3></center>
</td></tr>
<!—El siguiente renglón abarca las dos columnas y un párrafo de texto -->
<tr><td colspan="2">
<p>Es estudiado por las Ciencias Físicas, con las nuevas teorías de cuerdas y membranas se explica las 4 fuerzas fundamentales y la gran explosión, la formación de las partículas subatómicas, el átomo, moléculas, los gases y polvo cósmico. Estos forman las estrellas y los planetas como componentes de las galaxias y todas juntas forman el universo. En la galaxia la Vía Láctea se forma el sistema solar con sus planetas, uno de ellos la tierra, primero como bola incandescente pasa por diversas etapas de enfriamiento y diferentes tipos de  atmósferas, se crean los mares, volcanes, montañas y la vida.
</p></td></tr>
<!-- El siguiente renglón abarca las dos columnas y contendrá un encabezado centrado -->
<tr><td colspan="2">
<center><h3><font color="blue" face="veredana">Pasado de la Evolución Biológica</font></h3></center>
</td></tr>
<!-- El siguiente renglón abarca las dos columnas y un párrafo de texto -->
<tr><td colspan="2">
<p>La vida en la tierra y en otros planetas es estudiado por las Ciencias Biológicas. Iniciamos con la combinación de elementos inorgánicos creando las primeras moléculas orgánicas como los aminoácidos y proteínas, glúcidos o azucares, los lípidos o grasas, los nucleótidos. También los  primeros ARN y ADN que crea la primera célula, los microorganismos unicelulares como el virus y la bacteria. Continúan los organismos pluricelulares vegetales y animales, culmina con el hombre. Los vegetales inician desde las algas, briofitas, pteridofitas, angiospermas y gimnospermas. Los animales inician desde los filos de las esponjas, continua con los celentéreos, platelmintos, nematodos, equinodermos, anélidos, moluscos, artrópodos. Finalmente el filo de los cordados de peces, anfibios, reptiles, aves, mamíferos, primates, homínido  y el hombre.
</p></td></tr>
<!-- El siguiente renglón abarca las dos columnas y contendrá un encabezado centrado -->
<tr><td colspan="2">
<center><h3><font color="#2EFEF7" face="veredana">Pasado de la Evolución Social</font></h3></center>
</td></tr>
<!-- El siguiente renglón abarca las dos columnas y un párrafo de texto -->
<tr><td colspan="2">
<p>El hombre es estudiando por las Ciencias Sociales, Para su estudio nos basaremos en la historia de la humanidad en sus etapas de, Prehistoria con las épocas paleolítica y neolítica, la Edad Antigua desde la invención de la escritura hasta la caída del imperio romano, la Edad Media desde la caída del imperio romano hasta la caída de Constantinopla, Edad Moderna desde la caída de Constantinopla hasta la revolución francesa y la edad contemporánea desde la revolución francesa hasta nuestros días. Desde 1948 vivimos la época de la información y el conocimiento, terminamos con la descripción del mundo actual y el hombre como un ser  individual y social.  
</p></td></tr>
<!-- El siguiente renglón abarca las dos columnas y contendrá un encabezado centrado -->
<tr><td colspan="2">
<center><h3><font color="green" face="veredana">Presente del Desarrollo Humano</font></h3></center>
</td></tr>
<!--El siguiente renglón abarca las dos columnas y un párrafo de texto -->
<tr><td colspan="2">
<p>¿Quiénes Somos? En el presente seguimos siendo parte de la evolución física, biológica y social, somos seres humanos resultado de la evolución universal  y nuestra vida es un transcurrir en la línea del tiempo.
El Presente de cada persona la vive en alguna etapa del ciclo de vida del ser humano, Todos pasamos y estamos en alguna de las etapas de fecundación, nacimiento, lactancia, infancia, adolescencia, madurez, vejez, la muerte y en la trascendencia de su alma espiritual en el más allá. Además estamos viviendo e involucrados en algún sistema social, económico y político. Cada día de 24 horas las usamos para satisfacer nuestras necesidades humanas 8 horas para dormir y soñar, 16 horas de vigilia para comer y dependiendo de la etapa para reproducirnos y finalmente morir. Para trascender y realizarnos como ser humano debemos cuestionar quién fui analizando mi vida pasada, cuales son mis valores, de si tengo autoestima, talento, mis fortalezas y debilidades para conocer quién soy. En base a esto haremos un plan de vida que establezca la visión o destino, la misión o propósito fundamental y las metas que deseo alcanzar y de esta forma indicar de quién deseo ser en el futuro.
</p></td></tr>
<!-- El siguiente renglón abarca las dos columnas y contendrá un encabezado centrado -->
<tr><td colspan="2">
<center><h3><font color="red" face="veredana">Futuro con un Proyecto de Vida</font></h3></center>
</td></tr>
<!-- El siguiente renglón abarca las dos columnas y un párrafo de texto -->
<tr><td colspan="2">
<p>¿Hacia Dónde Vamos? El futuro de la humanidad en la línea del tiempo es tan incierto, desconcertante y temeroso. Cada persona debería de tener y seguir su proyecto de vida, en donde ha estableciendo metas y objetivos para poder guiar o controlar su destino de la mejor manera posible y alcanzar su propósito principal. Con plan o sin él, todos tienen que satisfacer sus necesidades básicas de la vida cotidiana y de enfrentarse a problemas personales y familiares de enfermedades, accidentes, la delincuencia, etc. Conocer los problemas locales y globales de sobrepoblación, hambre, recursos naturales limitados, industrialización y tecnología en gran escala y consecuencia de estos la contaminación de todo tipo. De conocer los problemas de los desastres hechos por el hombre como el terrorismo, revoluciones, guerras convencionales y la nuclear. De conocer los planes de contingencia de los problemas  de los desastres naturales de erupciones de volcanes, inundaciones, maremotos, terremotos que todos en parte destruyen pueblos, ciudades y muere mucha gente. Finalmente de la caída de un meteorito o cualquier otro cuerpo que destruya parcialmente o totalmente la tierra, esto último puede exterminar a toda la humanidad.
</p></td></tr>
<!-- El siguiente renglón abarca las dos columnas y contendrá un menu centrado -->
<tr><td colspan="2">
<center>
<a href="evolucion-fisica.html"><img src="menu/menu11.png" width="150" hight="140" alt="Pasado de la Evolución Física"></a>
<a href="evolucion-biologica.html"><img src="menu/menu22.png" width="150" hight="140" alt="Pasado de la Evolución Biológica"></a>
<a href="evolucion-social.html"><img src="menu/menu33.png" width="150" hight="140" alt="Pasado de la Evolución Social"></a>
<a href="presente-desarrollo.html"><img src="menu/menu44.png" width="150" hight="140" alt="Presente del Desarrollo"></a>
<a href="futuro-proyecto.html"><img src="menu/menu55.png" width="150" hight="140" alt="Futuro con un Proyecto"></a><br>
</center>
</td></tr>
<!-- Finaliza la tabla centrada, el cuerpo y el documento o página  -->
</table></center>
</body>
</html>
 
Cuando se halla introducido todo el código html, guardamos el archivo con el nombre de index.html bajo la carpeta de html1. Si se tienen las etiquetas de menú y las imágenes se puede ejecutar el archivo index.html con algún navegador como firefox. Más adelante daremos el código y archivos de menu e image.  


jueves, 11 de abril de 2013

Programación Internet con Html


Introducción
Dirección de EYDH
Internet es la red de redes de comunicación  mundial o global y se puede utilizar diferentes servicios como sitios o páginas web, correo electrónico, mensajes sms, transferencia de archivos ftp, telnet. Para utilizar alguno de los servicios como ver paginas o sitios web es necesario un computadora con una conexión a un proveedor de servicios de internet. La computadora debe tener un browser o navegador de internet como firefox, explorer de Windows u otro.  Las páginas o sitios web se crean programando en algún lenguaje como html y son alojados en un servidor web, una vez instalados pueden dar servicios de enviar las páginas a otras computadoras cliente que lo solicitan utilizando la dirección de internet del servidor. También se puede solicitar información de algún tema, en este caso inicia el navegador firefox y  buscador como google, se introduce el tema que se desea ver o consultar, el buscador google despliega varios sitios del tema deseado, se puede seleccionar algún sitio web haciendo click o presionando el botón derecho con el mouse o la pantalla de un teléfono inteligente y aparecerá la página del sitio web. Se puede continuar visitando otros sitios web o páginas web hasta obtener toda la información deseada.
Las páginas web son la parte fundamental de sitio web. Para crear las páginas del web se puede utilizar un lenguaje de programación desde el más sencillo como html, hasta los más avanzados como java, php, asp entre otros.
Iniciaremos la programación de internet con el lenguaje HTML (Hyper Text Mark Languaje) que significa lenguaje de marcas de hyper texto. Realmente no es un lenguaje de programación, es un lenguaje de presentación que lo interpreta un navegador y lo presenta en una pantalla de una computadora o de un teléfono inteligente. El lenguaje html  está constituido por marcas y etiquetas, la etiqueta de inicio esta encerradas entre el signo menor y mayor < etiqueta > y termina con el signo menor, una diagonal, la etiqueta y el signo menor </etiqueta>.  Las marcas y etiquetas son interpretadas por el navegador y la página en  html es desplegada en la pantalla de la computadora o teléfono celular. Toda página web en html  tiene la siguiente estructura de una etiqueta de html, un encabezado head, un cuerpo body y sus respectivas marcas finales.
 <html>
<head>
<title>Nombre de la página</title>
</head>
<body>
Encabezados, párrafos de texto, imágenes, hipervínculos, etc.
</body>
</html>
Html. Identifica todo el documento o página web e inicia con <html> y debe terminar con </html>
Head- Esta parte es la cabeza de la página que contiene el titulo que aparece en la parte superior de la página desplegada por el browser, también contiene definiciones de estilos (style) y funciones de java script.
 Body. Es el cuerpo de la página web y puede definir características de todo el documento como el color de fondo (background ).
Comentarios. Se representa por <!-- Comentarios..... --> No los interpreta el navegador.
Encabezados. El cuerpo (body) de la página puede contener texto con encabezados, desde el más pequeño <h6> y </h6> hasta el más grande <h1> y </h1>:
<h1>Encabezado h1</h1>
<h2>Encabezado h2</h2>
<h3>Encabezado h3</h3>
<h4>Encabezado h4</h4>
<h5>Encabezado h5</h5>
<h6>Encabezado h6</h6>
Párrafos. También contiene texto como párrafos que inicia con <p> y finaliza con </p>:
<p>Este es un párrafo p de texto que puede contener varias líneas y para separar líneas se utiliza la etiqueta <br> o <br /> también puede contener texto o palabras con varios estilos de itálicas o cursiva <i>palabras itálicas</i>  texto en negrita <b>palabras en negrita</> para palabras subrayadas <u>palabras subrayadas</u> y existen otros tipos.</p>
Tipos o fonts. Los encabezados h y párrafos p pueden cambiar su tipo de letras, color, tamaño de 1 a 7, con <font> y </Font>:
<font bgcolor=”color de fondo” face=”veredana, arial” size=”8”><h1>Encabezado h1</h1></Font>
Centro. El encabezado h1 puede centrarse con <center> y </center>:
<center><font color=”blue” face=”veredana, arial” size=”5”><h1>Encabezado h1</h1></Font></center>
Estilos. El font y center puede sustituirse por la etiqueta estilo (style) de css en línea:
<h1 style=”Font-family:verdana, arial;”>Encabezado h1</h1>
<p style=”Font-family:verdana, arial; color:red; font-size:10px;”>Este es un párrafo que es definido por style< p />
<h1 style=”text-align:center;”>Encabezado h1 centrado</h1>
Listas. Para organizar listas como listas ordenadas ol y listas desordenadas ul:
Una lista ordenada es marcada por una secuencia de números desde 1:
<ol>
<li>elemento1</li>
<li>elemento1</li>
<li>elemento1</li>
</ol>
Una lista desordenada, cada elemento contiene un marca de un pequeño círculo negro:
<ul>
<li>elemento1</li>
<li>elemento2</li>
<li>elemento3</li>
</ul>
Enlaces. Enlaces o vínculos  a sitios web, al presionarlo se dirige al enlace web y si target=”_blank” se despliega en otra ventana del vavegador, si no tiene target por default se despliega en la misma ventana:
<a href=http://www.google.com target=”_blank”>Enlace a google</a>
Imagen. Insertar imágenes con determinados tamaños de ancho (width) y altura (higth), la imagen puede estar en formato jpg, gif, png  y otros. L a imagen se puede alinear (align) a la izquierda (left) o derecha (right). La imagen  puede estar en un directorio de la computadora o en una dirección o enlace de internet. Con alterno (alt) puede desplegar un comentario al estar cargando la imagen o al no encontrar la imagen.
<img src=”imagen.jpg” alt=”Esta es una imagen” widdth=”100” hight=”100” align=”left”>
Un enlace web puede contener una imagen como referencia:
<a href=http://www.google.com><img src=”imagen.jpg” width=”50” hight=”50”></a>
Tablas. Los datos se pueden organizar como tablas de filas (tr) y columnas (td) y encabezados de columnas (th), se puede definir el borde (border) y color de la tabla.
<tabla border=”0” bgcolor=”green”>
<tr>
<th>Encabezado de columna1</th>
<th>Encabezado de columna2</th>
</tr>
 <tr>
<td>Dato de fila1 columna1</td>
<td>Dato de fila1 columna2</td>
</tr> <tr>
<td>Dato de fila2 columna1</td>
<td>Dato de fila2 columna2</td>
</tr>
</table>
Marco interno o Iframe. Se puede insertar marco (frame)  de texto en la página con iframe, va a desplegar pagina.html en una ventana incrustada en la página definida con un ancho (width) y altura (higth).
<iframe src=”pagina.html” width=”100” hight=”100”></iframe>
Cuando la pagina está en una dirección de interne iframe queda así.
<iframe src=”pagina.html” width=”100” hight=”100 name=”nom-pagina””></iframe>
<p><a href=http://www.google.com target=”nom-pagina”>Enlace a google</a></p>
Marco. Se utilizan para desplegar varios documentos o páginas web en la misma ventana. La ventana se puede organizar con diferentes marcos horizontales y verticales. El siguiente ejemplo crea dos marcos verticales, el primero utiliza el 25% y el segundo un 75% de la ventana.
<frameset cols=”25%, 75%”>
<frame src=”pagina1.html”/>
 <frame src=”pagina2.html”/>
 </frameset>
Formas. Es posible hacer peticiones a los usuarios de internet de datos particulares utilizando las formas y utilizar el método  obtener (get) o enviar (post) para transmitir y recibir datos, (get) se utiliza para forma con pocos datos  y (post) para  forma con muchos datos. La forma contiene campos de texto, password, botones de radio, cuadros de checar, botón de submit o envió y otros. La acción corresponde a la página en lenguage php  u otro, en el servidor y guardar los datos en un archivo, en una base de datos u otra operación que se realiza con los datos y puede ser retornados los resultados al cliente.
<form action=”http://eydh.co.ne/acción.php” method=”post”>
Nombre:<input type=”text” name=”nomb” size=”20” maxlength=”60”/> <br>
Apellido:<input type=”text” name=”apell” size=”20” maxlength=”60” /><br>
Password:<input type=”password” name=”pwd” /><br>
Sexo:<br />
<input type=”radio” name=”sexo” value=”femenino”/>Femenino<br>
<input type=”radio” name=”sexo” value=”masculino”/>Masculino<br>
Estado civil:<br />
<input type=”checkbox” name=”estado” value=”soltero”/>Soltero<br>
<input type=”checkbox” name=”estado” value=”casado”/>Casado<br>
Enviar forma:<input type=”submit” value=”Submit”/> <br>
</form>
Estas son las etiquetas principales de html, hay más características de ellas, pero con esto es suficiente para desarrollar y programar una aplicación sencilla en html.