tutorial de proyecto pro html

Page 1

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>


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 s e o b s e r v a 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.


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.