tutorial de proyecto pro html

TUTORIAL AUTOR: HERNANDO GOMEZ PALENCIA INGENIERO ELECTRONICO

PROCEDIMIENTO PARA ACTIVAR UN DISPOSITIVO ELECTRONICO POR INTERNET

1. Descargar el software APPSERV servidor.exe y se instala.

2. Una vez instalado Apache oprimimos la tecla de WINDOS + R y damos

enter, para que aparezca la ventana que se muestra y escribimos cmd y aceptar.

3. A continuación se observa un pantallazo en el cual se escribe Ipconfig y enter. Esto se hace para obtener la dirección IP, con la flecha de la derecha se despliega hacia arriba en busca de la dirección IP (ejemplo 10.8.16.40) se selecciona y se copia la IP que es la dirección de nuestra página de internet.

4. Se abre la ventana de internet y se copia la IP en la barra de direcciones

5. Abrimos una página web por ejemplo la del Sena y vamos a menú VER y hacemos clic en código fuente que servirá de guía para escribir el código HTML.

6. Abrimos el block de notas y escribimos el siguiente código HTML con el fin

de crear la página de internet <HTML> <HEAD>

<TITLE>MI SEGUNDA PÁGINA </TITLE> </HEAD> </HTML>

7. En el barra de menú del block de notas abrimos archivo y damos clic en guardar como.

8. Guardamos puede ser en el escritorio pero así index.html

9. Hacemos clic en equipo disco C y en la carpeta APPSERV abrimos la carpeta WWW y borramos el archivo INDEX.PHP

10. Copiamos en la carpeta APPSERV\WWW el archivo INDEX.HTML que guardamos (por ejemplo en el escritorio).

11. Se abre otra página de internet con la dirección IP 10.8.16.40 aparecerá MI

SEGUNDA PAGINA que fue escrita en el block de notas

12. Ubicamos la carpeta APPSERV abrimos y en la carpeta WWW seleccionamos el archivo

INDEX que se creo y lo abrimos con el fin de modificar el código HTML.

13. Seguimos escribiendo el código HTML en el block de notas

<HTML> <HEAD>

<TITLE>MI SEGUNDA PÁGINA </TITLE> </HEAD>

<body bgcolor=blue background= "lighthouse.jpg"> </body> <HTML>

14. A continuación creamos un formulario esto se realiza con código PHP este

se encuentra en un documento PDF se llama manual PHP este código se

ejecuta en la pagina del servidor

15. Abrimos el manual y copiamos un código que aparece en la pagina 18 y

que es el siguiente.

<form action="action.php" method="POST"> Your name: <input type="text" name="name" />

Your age: <input type="text" name="age" /> <input type="submit">

</form>

php_manual.pdf

16. El código anterior se utiliza para crear botones y para que salga centrado <input type="submit"></center>

Cambiamos el código y lo escribimos de la siguiente manera <center><form action="action.php" method="post">

dato:<input type=text" name=dato"/> <input type="submit"></center>

</form>

17. Guardamos en el block de notas y abrimos internet Explorer y actualizamos

18. Abrimos otro block de notas con el fin de crear otra página web esta será en código PHP.

19. Se guarda este nuevo block de notas (tener en cuenta que no se guarde como documento).

20. El block de notas creado se debe guardar en c\appserv\www en este caso se guarda como .PHP (ejemplo HG.PHP).

21. Se escribe el siguiente código en el nuevo block de notas para realizar una conexión física en el puerto de comunicaciones (ejemplo xbee).

<?php $dato=$_post['dato'];

$output='`mode com1: baud=115200 parity=n data=8 stop=1 &#96'; $fp=fopen('com1' ,'r+');

$written&byte fputs($fp.$dato); echo"<center><index.html>volver</a></center>"; ?>

Nota: se debe tener en cuenta que los puertos que se trabajan son los primeros que aparecen disponibles es decir com1, com2 etc. Se selecciona el COM a trabajar y se guarda.

22. Se abre la página de internet y observamos que se creó el formulario o los botones. (datos y enviar consulta).

23. Se da clic a enviar consulta y se debe mostrar la siguiente pagina

24. A continuación trabajamos en simulación para eso debemos descargar el software simulador virtual que se llama VIRTUAL SERIAL PORT ELTIMA 7.0 esto se hace con el motivo de realizar pruebas por los puertos virtuales.

Abrimos el programa ELTIMA 7.0

25. Selecciono un par de puertos y para saber si están trabajando los puertos

virtuales se despliega el COM (en este caso COM1) se abre la pagina web y se escriben varios caracteres en dato y se da clic en enviar consulta.

El resultado se observa en el COM que se ha seleccionado (en este caso COM1) del ítem sent ( )byte. Se caracteriza por que hay una flecha de color azul hacia la derecha y el numero de byte ( ) cambia de valor.

26. Ahora configuramos el hiperterminal para completar la comunicación virtual

y debemos hacer lo siguiente:

a. Configuración del hiperterminal se da un nombre al hiperterminal y aceptar

b. Aparece la siguiente ventana y se selecciona el puerto con que queremos comunicarnos con el terminal virtual (asegúrese que no esté ocupado o en uso) le damos aceptar

c. Y

se observa e

c. En la siguiente ventana selecciono la velocidad de comunicación del puerto en este caso 9600 BAUD. Esta velocidad debe concordar con la seleccionada en el block de notas donde se esta escribiendo el código PHP. Y aceptar.

d. Debe salir conectado en la parte inferior izquierda de la pantalla donde está la flecha.

27. Una vez conectado se abre la pagina web y el hiperterminal y en el ítem dato se escriben caracteres

28. Se envía estos caracteres haciendo CLIC en el BOTON ENVIAR CONSULTA y deben aparecer en el hyperterminal como lo muestra la imagen.

NOTA. LA PAGINA WEB CAMBIA DE PANTALLAZO DE CODIGO HTML A CODIGO PHP.

29. Una vez ejecutado lo anterior podemos simular en proteus con el fin de aplicar la programación ejecutada en el ccs (asegúrese que hyperterminal este desconectado para realizar esta simulación).

Abrimos la página web y un programa que utilice rs232 en proteus (en este caso abro un programa motor con rs232)

30. Antes de simular el COMPIM o RS 232 se debe configurar es decir seleccionar el COM(en este caso estamos utilizando el com2) y la velocidad de comunicaciones (en este caso usamos 9600 que es el que escribimos en el código PHP).

31. Damos clic en play del proteus para simular y abrimos la pagina web como se muestra en la siguiente imagen

32. El programa a simular en proteus tiene la siguiente rutina. enciende un motor oprimiendo las letras

d para girar a la derecha i para girar a la izquierda p para parar el motor

Motor en estado inicial es decir parado

33. Escribo la letra d (debo tener cuidado que si en el ccs escribí la letra d en mayúscula aquí la escribo en mayúscula o si la escribí en minúscula la debo escribir en minúscula) y hago clic en el botón enviar consulta para que el motor gire a la derecha

Esta imagen muestra la pagina del código PHP y el motor girando a la derecha

34. Escribo la letra I en dato (debo tener cuidado que si en el ccs escribí la letra I en mayúscula aquí la escribo en mayúscula o si la escribí en minúscula la debo escribir en minúscula) y hago clic en el boton enviar consulta para que el motor gire a la izquierda.

Motor girando a la izquierda.

Esta imagen muestra la pagina del código php y el motor girando a la IZQUIERDA

35. Escribo la letra p en dato (debo tener cuidado que si en el ccs escribí la letra p en mayúscula aquí la escribo en mayúscula o si la escribí en minúscula la debo escribir en minúscula) y hago clic en el botón enviar consulta para que el motor pare.

Motor parado

Esta imagen muestra la pagina del código PHP y el motor PARADO.

tutorial de proyecto pro html

Documents

Transcript of tutorial de proyecto pro html