UNIVERSIDAD AUTÓNOMA DE LA CIUDAD DE MÉXICO UACM
Aplicaciones con microprocesadores y microcontroladores
Proyecto Servidor web.
Cruz Mendoza Jessica, Matrícula 10-002-0249, jessica.cruz94@yahoo.com.mx
Aldama Villegas Adán Paul, Matricula: 08-003-1532, dorspaul_190@hotmail.com
Fabricio Astorga Martínez, Matrícula 05-003-3123, fastorgam@gmail.com
Moreno Granados Urania Serena, Matrícula: 06-003-0985, arumg_11@hotmail.com
Abstract: We will mount the circuit
physically and simulated by configuring
ports, performing programming in c language, for an SPI interface.
Keyword: servidor, web, protocolo, petición, datos.
Introducción: Un servidor web o servidor HTTP es un programa
informático que procesa una aplicación del lado del servidor,
realizando conexiones bidireccionales o unidireccionales y
síncronas o asíncronas con el cliente y generando o cediendo una
respuesta en cualquier lenguaje o Aplicación del lado del cliente.
El código recibido por el cliente es renderizado por un navegador
web. Para la transmisión de todos estos datos suele utilizarse algún
protocolo. Generalmente se usa el protocolo HTTP (Hyper Text
Transfer Protocol) para estas comunicaciones, perteneciente a la
capa de aplicación del modelo OSI (Open Systems
Interconnections). El término también se emplea para referirse al
ordenador.
Arquitectura
Petición GET
Un servidor web opera mediante el protocolo HTTP, de la capa de
aplicación del Modelo OSI. Al protocolo HTTP se le asigna
habitualmente el puerto TCP 80 (Transmission Control Protocol).
Las peticiones al servidor suelen realizarse mediante HTTP
utilizando el método de petición GET, en el que el recurso se
solicita a través de la url al servidor Web.
GET /index.html HTTP/1.1 HOST: www.host.com
En la barra de URL (Uniform Resource Locator) de un navegador
cualquiera, la petición anterior sería análoga a la siguiente
dirección Web:
www.host.com/index.html
Esquema de una petición GET
Petición Web
El navegador, por medio de la interfaz de usuario, permite al
usuario realizar una o varias peticiones Web. La interfaz de
usuario o entorno de usuario es el conjunto de elementos del
navegador que permiten realizar la petición de forma activa. Una
petición Web no solo puede ser realizada mediante un navegador,
sino con cualquier herramienta habilitada para tal fin, como una
consola de comandos Telnet.
Elementos del entorno de usuario más comunes en navegadores
Web visuales:
Nombre Descripción
Hipervínculo Es una porción de contenido Web, texto, imagen
enlace o link y otros elementos, que enlaza con una dirección
Web. Al pulsar un hipervínculo, el navegador
genera una petición GET automática a la
dirección URL de dicho link.
Formulario Al realizar el envío satisfactorio de los datos de
Web un formulario, el navegador Web genera una
petición GET o POST (comúnmente POST)
automática a la par que envía los datos al
servidor.
Barra de Todos los navegadores incluyen una barra de
direcciones direcciones mediante la cual puede accederse
manualmente a cualquier dirección URL, de
modo que el navegador generará una petición
GET automática a dicha URL cada vez que el
usuario lo desee.
Script activo o Cualquier aplicación Javascript tiene acceso al
pasivo estado del navegador, cómo puede modificar los
datos que describen tal estado, de forma pasiva
(sin medio de la intervención del usuario) o de
forma activa (mediante alguna acción del
usuario).
1.1 Socket a dirección DNS
Se produce una socket con un servidor dado en dirección IP
(Internet Protocol) mediante TCP (Transmission Control
Protocol). Por lo general las direcciones que el navegador posee
inicialmente son direcciones DNS (direcciones alfanuméricas) que
deberá convertir a direcciones numéricas.
1.2 Resolución de DNS a IP
Si la dirección dada es DNS y no existe una regla en la base de
datos DNS (Domine Name Server), el Host Resolver Request
solicita al servidor DNS la o las direcciones IPs correspondientes.
El navegador crea una nueva regla y almacena la dirección IP
junto a la dirección DNS en su base de datos de reglas DNS.
1.3 Recuperación de la regla DNS
Una vez almacenada la regla, se realiza una petición a la base de
datos DNS para recuperar los valores de la regla.
1.4 Socket a dirección IP
Se produce una socket con la dirección IP mediante TCP. La
dirección IP puede haberse recuperado en el paso anterior.
SOCKET 192.168.0.1
1.5 Preparación de la petición
Se crea la petición GET estableciendo la url, un flag, la priority de
la petición y el método (implícitamente GET).
1.6 Apertura Caché
Se abre y/o se crea una entrada en el http cache.
1.7 Efectuación de la petición
Se realiza la petición GET. Se leen las cabeceras HTTP de la http
transaction y más tarde el cuerpo de la http transaction.
GET /index.html HTTP/1.1
1.8 Consulta en Caché
Se consulta en el caché de disco si existe una entrada en el caché
asociada al recurso que se ha solicitado. Los valores son created
(true o false) y key (la url del recurso).
1.9 Respuesta booleana de la existencia del recurso solicitado
Si la entrada no existe (si el valor de created es false) se escriben
los datos en el caché de disco. Si no, se lee directamente.
2.0 Presentación visual del recurso
Se concluye la operación y se muestra en pantalla (si es preciso) la
información.
Petición GET pasiva
Javascript permite realizar modificaciones en el estado del
navegador. El estado del navegador viene definido por el array de
objetos location del objeto global Window. Se referencia a tal
objeto con window.location. En concreto window.location.href
contiene la dirección actual del navegador Web.
Si una parte del script ejecuta tal sentencia:
window.location.href='http://wikipedia.org';
El navegador hará tal petición Web sin que el usuario haya
mediado en tal circunstancia o sus efectos. Del mismo modo se
producirá una nueva petición GET si se altera el valor de
window.location.search o window.location.protocol.
Procedimiento del navegador
La tarea del navegador Web es crear la petición a partir de los
datos recogidos en el entorno de usuario de elementos del mismo,
como enlaces, el valor del texto de la barra de búsqueda, los
metatags.
<a href="http://es.wikipedia.org">Entrar</a>
Al pulsar en el enlace, el navegador crea automáticamente la
petición GET y las cabeceras de la petición sobre la base de los
metatags (cabeceras definidas), los cookies y cabeceras
automáticas del navegador, para luego enviarlas junto a la petición
al Servidor.
Petición POST (Power On Self Test)
Es el segundo tipo de petición HTTP más utilizado. Los datos a
enviar al servidor se incluyen en el cuerpo de la misma petición
con las cabeceras HTTP asignadas correspondientemente respecto
al tipo de petición. Generalmente se asocia con los formularios
web en los que los datos suelen ser cifrados para enviarlos de
manera segura al servidor.
Por motivos de convención se incluye en la petición la cabecera
application/x-www-form-urlencoded, que indica el formato o
codificación de los datos a enviar; esta es variable->valor en el
formato: variable=valor separada cada par variable->valor por &.
Esta cabecera, en los formularios HTML (Hyper Text Markup
Lenguage) se envía automáticamente, pero en otras tecnologías
web tal como AJAX (Asynchronous JavaScript And eXtensible
Markup Language), si se desea hacer correctamente una petición
POST, debe ser especificado o instanciado el objeto:
setRequestHeader ("Content-type: application/x-www-form- • Cookie: Especifica un identificador de sesión en la
urlencode"); ajax.send (data); petición derivado de un cookie.
• Accept-Encoding: Especifica el tipo de codificación
Si se utilizase el método GET los datos deberían de ser añadidos a (generalmente compresión) que se espera de la
la URL, lo que los expondría a ser vistos de forma directa. respuesta. (No todos los navegadores envían esta
cabecera)
Estructura de una petición POST
Estructura de una respuesta POST
Artículo principal: Cabeceras HTTP
Artículo principal: Cabeceras HTTP
Estructura típica de una respuesta Muestra
Estructura típica de una Muestra POST
petición POST
HTTP version HTTP-version- HTTP/1.1 200 OK
Petition POST url POST comment.php HTTP/1.1 & state state
type HTTP/1.1
Date date-string Tue, 07 Jun 2011 05:52:31
Referer http-url- index.php GMT
referer
Server server-string Apache/2.2.17 (Win32)
Content- contentleng 63 mod_ssl/2.2.17...
Length ht-int
Expires expire-date- Thu, 19 Nov 1981 08:52:00
Origin http-url- http://es.wikipedia.org string GMT
origin
Cache-Control Cache-control- no-store, no-cache, must-
User- useragent- Mozilla/5.0 (Windows; U; Windows string revalidate...
Agent string NT 6.1; en-US) ...
Pragma pragma-string no-cache
Content- content- application/x-www-form-urlencoded
Content-Length Content-length- 297
Type type-string
int
Accept mimetypes- application/xml,application/xhtml+xml
Content-Type Content-type- text/html
accepted- ...
string
string
Keep-Alive Keep-alive- timeout=5, max=98
Accept- language- es-ES,es;q=0.8
string
Languag accepted-
Connection Connection- Keep-Alive
e string
string
Accept- charset- ISO-8859-1,utf-8;q=0.7,*;q=0.3
X-Powered-By X-powered-by- PHP/5.3.5
Charset accepted-
string
string
Cookie phpsessid- PHPSESSID=gm0ugf96iojuldio8i51u9
string 2716 Codificación del mensaje del cuerpo de la petición
Accept- accept- gzip,deflate,sdch
Encodin encoding- Los datos que se envían en el cuerpo de la petición POST deben
g string tener algún formato que permita manipularlos en un futuro
Content Content- &data=4&lang=es+es procesamiento. Por ello la petición debe tener asignada la cabecera
string Content-Type cuyo valor será la codificación de los datos. De este
modo el sistema podrá diferenciar entre variables aisladas, datos
Composición de una petición POST binarios, texto plano, o cualquier otro tipo de formato. El formato
de una cadena de datos se denomina MIME y es el valor que
deberá ser incluido en esta cabecera.1
Las cabeceras más comunes que se envían en una petición POST:
En HTML la cabecera Content-Type se especifica
• Petition type: Especifica el tipo de petición HTTP. (Esta automáticamente y su valor es application/x-www-form-
cabecera no tiene nombre, se envía tal cual) urlencoded, no obstante pueden especificarse por estándar otros
• Referer: Especifica la url desde la cual se hizo la dos valores: multipart/form-data y text/plain utilizando el atributo
petición POST. enctype del elemento form de la siguiente manera
• Content-Length: Especifica la longitud en bytes de los
datos enviados en el cuerpo de la petición.
<form enctype="multipart/form-data">...</form>
• Origin: Especifica la url principal del sitio.
<form enctype="text/plain">...</form>
• User-Agent: Especifica el identificador del navegador
<form enctype="application/x-www-form-urlencoded">...</form>
Web desde el cual se hizo la petición.
• Content-Type: Especifica el formato o MIME
(Multipurpose Internet Mail Extensions) de los datos O cualquier otro valor MIME. El multipart/form-data se utiliza
enviados en el cuerpo de la petición. para enviar grandes cadenas binarias que suponen cualquier otro
• Accept: Especifica el MIME que se espera en la tipo de documento que no sea texto plano, como imágenes, vídeos
respuesta. o ejecutables. Para varios valores, separar por comas.
• Accept-Language: Especifica el código del lenguaje
esperado en la respuesta. El application/x-www-form-urlencoded codifica de forma
• Accept-Charset: Especifica la codificación que se espera automática los valores de todos los elementos del formulario del
en la respuesta. modo variable=valor, separados por &. El atributo name de un
input suele ser el nombre de la variable y su value el valor. Los
espacios se reemplazan por + y los caracteres no alfanuméricos
por $HH donde HH representa el número hexadecimal del carácter
ASCII (American Standard Code for Information Interchange -
Código Estándar Americano para Intercambio de Información).
id=valor+de+la+variable&tama%A4o=4
que representado de otra forma es:
id: valor de la variable
tamaño: 4
Procedimiento del navegador
El navegador recopila la información del formulario para crear la
petición y enviarla. Las cabeceras las envía junto a la petición
POST, y se recopilan sobre la base de los metatags definidos en el
código, los automáticos del navegador y los Cookies. Es el
navegador, también, el que codifica los datos si es necesario. [1]
1.«Form enctype».
Socket de Internet
Socket designa un concepto abstracto por el cual dos programas
(posiblemente situados en computadoras distintas) pueden
intercambiar cualquier flujo de datos, generalmente de manera
fiable y ordenada.
El término socket es también usado como el nombre de una API
(Application Programming Interface - interfaz de programación de
aplicaciones) para la familia de protocolos de Internet TCP/IP,
provista usualmente por el sistema operativo.
Los sockets de Internet constituyen el mecanismo para la entrega
de paquetes de datos provenientes de la tarjeta de red a los
procesos o hilos apropiados. Un socket queda definido por un par
de direcciones IP local y remota, un protocolo de transporte y un
par de números de puerto local y remoto. [2]
Renderización (del inglés rendering) es un proceso de generar
una imagen visible e inteligible para el ser humano, a partir de
información digital. [3]
Metatag
Las meta etiquetas, etiquetas meta o elementos meta (también
conocidas por su nombre en inglés, metatags o meta tags) son
etiquetas HTML que se incorporan en el encabezado de una
página web y que resultan invisibles para un visitante normal, pero
de gran utilidad para navegadores u otros programas que puedan
valerse de esta información.
Su propósito es el de incluir información (metadatos) de referencia
sobre la página: autor, título, fecha, palabras clave, descripción,
etc. [4]
Cookie (informática)
Una cookie (galleta o galleta informática) es una pequeña
información enviada por un sitio web y almacenada en el
navegador del usuario, de manera que el sitio web puede consultar
la actividad previa del navegador.
Sus principales funciones son:
• Recordar accesos: conocer si ya se ha visitado la página
para actuar en consecuencia, por ejemplo mostrando o
no cierto contenido, recordar a un usuario, etc. Cuando
un usuario introduce su nombre de usuario y contraseña,
se almacena una cookie para que no tenga que estar
introduciéndolas para cada página del servidor. Sin
embargo, una cookie no identifica a una persona, sino a
una combinación de computadora de la clase de
computación-navegador-usuario.
• Conocer información sobre los hábitos de navegación, e
intentos de spyware (programas espía), por parte de
agencias de publicidad y otros. Esto puede causar
problemas de privacidad y es una de las razones por la
que las cookies tienen sus detractores.
Originalmente, solo podían ser almacenadas por petición de un
CGI desde el servidor, pero Netscape dio a su lenguaje JavaScript
la capacidad de introducirlas directamente desde el cliente, sin
necesidad de los CGI. En un principio, debido a errores del
navegador, esto dio algunos problemas de seguridad. Las cookies
pueden ser borradas, aceptadas o bloqueadas según se desee, para
esto se debe configurar convenientemente el navegador web. [5]
Material: // Representa en lcd el texto introducido desde la aplicación web
//
1 Cristal de 20 Mhz.
////////////////////////////////////////////////////////////////////////////////
1 Push button.

1 LCD 16x2.
#include <18F4550.h>
5 Leds de colores
#device ADC=8
2 Capacitores de 22 μF.
#use delay(clock=20000000)
1 Microcontrolador 18F4550.
#fuses
1 Controlador Ethernet autónomo HS,NOWDT,NOPROTECT,NOLVP,NODEBUG,USBDIV,VRE
con interfaz SPI ENC 28J60. GEN,NOPBADEN,WRTB

1 Puerto USB.

5 Leds de colores #byte porte = 0xF84

5 Resistencias de 330 Ω.

1Resistencias de 10 kΩ. /** Configuración para el uso del stack tcip **/

1Resistencias de 1 kΩ. #define STACK_USE_ICMP 1 //Módulo de respuesta ICMP

(ping)
1 Protoboard
#define STACK_USE_ARP 1 //Para solucionar
direccionamiento MAC de las IP
Desarrollo:
#define STACK_USE_TCP 1 //Para enviar paquetes TCP
Push button
#define STACK_USE_HTTP 1 //Uso de las funciones http
Los botones push bottons son dispositivos de entrada básicos en del stack.
un sistema integrado vistos en sistemas muy simples a sistemas
altamente complejos. Son los botones básicos de encendido y #define STACK_USE_CCS_PICENS 1 //CCS PICENS
apagado que actúan como dispositivos de control. Cortocircuita la (Embedded Ethernet) 18F4620 + ENC28J60
línea cuando se presiona y se abre cuando no se presiona. En el
proyecto el push botton se conecta al puerto RE0 del pic 18F4550 #define STACK_USE_MCPENC 1 //Uso del enc28j60 por el
Posteriormente el microcontrolador hará las operaciones ya stack (stacktsk.c)
programadas en lenguaje ensamblador, para lo cual mostramos el
código: #define STACK_USE_MAC 1 //Uso de la tarjeta de red

SERVIDOR WEB CON PIC 18F4550 Y ENC28J60 #define HTTP_SOCKET 80 //Nº de puerto asociado al
// socket.

// //

// ccs PIC C compiler v4.104 // /********** Definición del patillaje de conexión al enc28j60
******************/
// //
/* Existen varias posibilidades:
// (c) RobotyPic 2015 //

// //
Opción 1. No definir nada, en cuyo caso se implementará una
//////////////////////////////////////////////////////////////////////////////// comunicación SPI por

// Conmuta encendido-apagado de 3 leds controlados desde la software y se tomarán la definición de patillas establecida en
aplicación web // enc28j60.c

// Muestra variables leídas por el PIC: Canal analógico An0 y

estado bit RE0 //
SO PIN_D7 ---- ENC >>>> PIC
SI PIN_D6 ---- PIC >>>> ENC #define PIN_ENC_MAC_CS PIN_B2 //Chip select

CLK PIN_D5 #define PIN_ENC_MAC_RST PIN_B3 //Reset

CS PIN_D4 #define PIN_ENC_MAC_INT PIN_B4 //Interrupción

RST PIN_D3

INT PIN_D2 /*****************************************************

*************************/
WOL PIN_D1

#define use_portd_lcd TRUE //Uso del puerto d para control

Opción 2. Definir todas las patillas de la comunicación SPI, en del lcd
cuyo caso se
//#include <LCD420PIC18F_RyP.c> //Carga librería del lcd de
implementará una comunicación SPI por software con la 4x20 para familia 18F
definición de patillas

elegida. Por ejemplo...

#include "tcpip/stacktsk.c" //Carga el stack TCP/IP de
Microchip

#define PIN_ENC_MAC_SO PIN_C4 //Entrada serie de datos

#define PIN_ENC_MAC_SI PIN_C5 //Salida serie de datos

#define PIN_ENC_MAC_CLK PIN_B4 //Señal de reloj /********************* PAGINA WEB A MOSTRAR

**********************************/
#define PIN_ENC_MAC_CS PIN_B5 //Chip select
/* Página principal INDEX (/) */
#define PIN_ENC_MAC_RST PIN_B6 //Reset
const char HTML_INDEX_PAGE[]="
#define PIN_ENC_MAC_INT PIN_B7 //Interrupción
<HTML> <BODY BGCOLOR=#FFFFFF TEXT=#000000>

<IMG SRC=\"http://www.robotypic.com/ryp.png\"><P>
Opción 3. El que aquí se ha utilizado, que consiste en habilitar el
uso de SPI <center> <H1>Servidor WEB con PIC 18f4550 </H1> </center>

por hardware del PIC y definir las patillas ajenas al hardware del <BR> <center> <H2>ROBOTYPIC</H2> </CENTER>
módulo SPI

(CS, INT y RST). En este caso es imprescindible definir también

la patilla SO

para que el stack (dentro de enc28j60.c) no habilite SPI por <FORM METHOD=GET>
software. Da igual
<P>LCD: <INPUT TYPE=\"text\" NAME=\"lcd\" size=20
que patilla SO se defina, la que se deberá cablear será la SO real maxlength=16>
del PIC */
<input type=\"submit\" value=\"Enviar texto\">

</FORM>
#define ENC_MAC_USE_SPI 1 //Uso del SPI por hardware

#define PIN_ENC_MAC_SO PIN_B0
//#define PIN_ENC_MAC_SI PIN_C7
(no necesario definir)
<FORM METHOD=GET>
//Entrada serie de datos
<input type=\"submit\" name=\"boton1\" value=\"Botón 1\">
//Salida serie de datos
</FORM>

//#define PIN_ENC_MAC_CLK PIN_B1 //Señal de reloj (no

necesario definir)
<FORM METHOD=GET>
<input type=\"submit\" name=\"boton2\" value=\"Botón 2\"> void MACAddrInit(void) {

</FORM> MY_MAC_BYTE1=0;

MY_MAC_BYTE2=0x04;

<FORM METHOD=GET> MY_MAC_BYTE3=0xA3;

<input type=\"submit\" name=\"boton3\" value=\"Botón 3\"> MY_MAC_BYTE4=0x06;

</FORM> MY_MAC_BYTE5=0x07;

MY_MAC_BYTE6=0x08;

<P> <A HREF=\"/lecturas\">Lecturas del PIC</A> }

</BODY> </HTML>

"; void IPAddrInit (void) {

//Elección de la dirección IP.

/* Página secundaria (\lecturas). Accesible desde la página MY_IP_BYTE1=192;

principal */
MY_IP_BYTE2=168;
const char HTML_LECTURAS_PAGE[]="
MY_IP_BYTE3=1;
<meta http-equiv=\"refresh\"content=\"3;url=lecturas\">
MY_IP_BYTE4=15;

<HTML> <BODY BGCOLOR=#FFFFFF TEXT=#000000>

//Elección de la dirección de puerta de enlace.
<IMG SRC=\"http://www.robotypic.com/ryp.png\"><P>
MY_GATE_BYTE1=192;
<center> <H1>Servidor WEB con PIC 18f4550 </H1> </center>
MY_GATE_BYTE2=168;
<BR> <center> <H2>ROBOTYPIC</H2> </CENTER>
MY_GATE_BYTE3=1;
<br> <center>LECTURAS</center>
MY_GATE_BYTE4=1;

<P> <B>AN: </B>%0 </P>

//Elección de la máscara de red.Si no se indica nada se tomará
<BR/> 255.255.255.0

<P> <B>RE0: </B>%1 </P> MY_MASK_BYTE1=255;

<BR/> MY_MASK_BYTE2=255;

MY_MASK_BYTE3=255;

MY_MASK_BYTE4=0;

<P><A HREF=\"/\">LCD/LEDs</A> }

</BODY></HTML>

";

/*************************** FUNCIÓN GET PAGE

/* Elección de MAC. No puede haber 2 dispositivos con misma
MAC en una misma red
Microchip Vendor ID MAC: 00.04.A3.xx.xx.xx. */
******************************/
/* Esta función devuelve la posición de memoria donde se
encuentra la página web
a mostrar. En este caso se trata de una web con 2 páginas. Una /* Con la función http_format_char interconectamos las variables
principal index (/) virtuales de

y una secundaria (/lecturas) */ la página web con las variables del programa del PIC. Se encarga
de enviar los

cambios producidos en la aplicación del PIC y reflejarlos en la

int32 http_get_page(char *file_str) { aplicación web.

int32 file_loc=0; Muestra,por tanto, las lectura obtenidas por el PIC y las representa
en la
static char index[]="/";
aplicación de la página web
static char lecturas[]="/lecturas";

%0 es la variable virtual para representar el valor de la lectura del

printf(lcd_putc,"\fRequest %s ",file_str); //Muestra en lcd canal
solicitud
analógico

%1 es la variable virtual para representar el valor de la lectura del

/* Busca la posición de memoria donde se encuentra la página bit 0 del
solicitada */
puerto E.
if (stricmp(file_str,index)==0) //Si es la principal...
*/
file_loc=label_address (HTML_INDEX_PAGE); //...toma
su posición en la memoria int8 http_format_char(int32 file, char id, char *str, int8 max_ret) {

else if (stricmp(file_str,lecturas)==0) //O si es la char new_str[20];

secundaria...
int8 len=0;
file_loc=label_address(HTML_LECTURAS_PAGE);
//...toma su posición en la memoria int8 AD0;

int8 RE0;

/* Muestra en lcd la página solicitada */

if (file_loc){ //Si existe... *str=0;

printf(lcd_putc,"\n(FILE=%LU)",file_loc); //...muestra en
lcd pos. de memoria
switch(id) {
}
case '0':
else{ //Si no existe...
set_adc_channel(0);
printf(lcd_putc,"\n(File Not Found)"); //...muestra en lcd
mensaje delay_us(100);

} AD0=read_adc();

/* Devuelve la posición en la memoria donde se encuentra la sprintf(new_str,"0x%X",AD0);

página a mostrar */
len=strlen(new_str);
return(file_loc);
break;
}
case '1':

RE0=bit_test(porte,0);
/************************** FUNCIÓN FORMAT CHAR
*****************************/ sprintf(new_str,"%d",RE0);

len=strlen(new_str);
 break; printf(lcd_putc,"\fCGI FILE=%LD", file);

default: printf(lcd_putc,"\nKEY=%S", key);

len=0; printf(lcd_putc,"\nVAL=%S", val);

/* Se ejecutará al pulsar el botón "Botón 1" en la aplicación web

*/
if (len)strncpy(str, new_str, max_ret);
if (stricmp(key,boton1_key)==0) {
else *str=0;
output_toggle(PIN_C0);

}
return(len);
/* Se ejecutará al pulsar el botón "Botón 2" en la aplicación web
} */

if (stricmp(key,boton2_key)==0) {

output_toggle(PIN_C1);

/*************************** FUNCIÓN EXEC CGI }

******************************/
/* Se ejecutará al pulsar el botón "Botón 3" en la aplicación web
/* Con la función http_exec_cgi interconectamos las variables */
virtuales de la
if (stricmp(key,boton3_key)==0) {
página web con las variables del programa del PIC. Se encarga de
recibir output_toggle(PIN_C2);

los cambios producidos en la aplicación web y reflejarlos en el }

hardware del PIC.
/* Se ejecutará al pulsar el botón "Enviar texto" en la aplicación
Ejecuta, por tanto, la acción elegida según el valor de la variable web */
virtual recibida
if (stricmp(key,lcd_key)==0) {
de la página web
printf(lcd_putc,"\f%s",val); //Muestra en el lcd el texto
recibido

key es la variable virtual que viene de la página web }

val es el valor de una variable virtual de la página web }

file es la dirección de la página web devuelta por http_get_page ()

/************************** FUNCIÓN PRINCIPAL

*********************************/
*/
void main(void) {

void http_exec_cgi(int32 file, char *key, char *val) {

/* Habilitación y configuración del canal analógico 0 */
static char boton1_key[]="boton1";
setup_adc (ADC_CLOCK_INTERNAL);
static char boton2_key[]="boton2";
setup_adc_ports (AN0);
static char boton3_key[]="boton3";
set_adc_channel(0);
static char lcd_key[]="lcd";
delay_ms(1);
 /*Reset de las salidas */ etc) are defined in TCPIPConfig.h.

output_low(PIN_C0); Many hardware configuration settings (SPI port and GPIO pins
used)
output_low(PIN_C1);
are defined in HardwareProfile.h.
output_low(PIN_C2);
*/

/* Inicialización del lcd */

#include "tcpip/p18cxxx.h"
lcd_init();

printf(lcd_putc,"\fROBOTYPIC WEB SERVER"); //Mensaje

de inicio en lcd #FUSES NOWDT //No Watch Dog Timer

delay_ms(1000);

#use delay(crystal=20MHz)

/* Inicialización del Stack */

MACAddrInit (); //Se asigna la dirección MAC elegida

IPAddrInit (); //Se asigna IP, mascara de red y puerta de enlace #define MIN(a,b) ((a > b) ? b : a)
elegidos

StackInit (); //Inicializa el stack

#include <stdint.h>

#include "tcpip/StackTsk2.h"
/* Muestra la IP elegida en lcd */
#include "tcpip/TCPIPConfig.h"
printf(lcd_putc,"\n\n IP: %u.%u.%u.%u", MY_IP_BYTE1,
MY_IP_BYTE2, MY_IP_BYTE3, MY_IP_BYTE4); #include "tcpip/HardwareProfile.h"

printf(lcd_putc,"\n %u", HTTP_SOCKET);

delay_ms(10); typedef struct

while (TRUE) { BYTE vSocketPurpose;

StackTask ( ); BYTE vMemoryMedium;

} WORD wTXBufferSize;

WORD wRXBufferSize;

} } TCPSocketInitializer_t;

#include <18LF4550.h> #if TCP_CONFIGURATION > 0

#device ADC=10 TCPSocketInitializer_t TCPSocketInitializer

[TCP_CONFIGURATION] =

{
/*
#if defined(STACK_USE_CCS_HTTP2_SERVER)
TCP/IP Stack enabled.
{TCP_PURPOSE_HTTP_SERVER, TCP_ETH_RAM,
Many TCP/IP configuration settings (servers enabled, ports used, STACK_CCS_HTTP2_SERVER_TX_SIZE,
STACK_CCS_HTTP2_SERVER_RX_SIZE},
 #endif form section. Dynamic display elements can be added or removed
from
#if defined(STACK_USE_SMTP_CLIENT)
index.htm and index.xml */
{TCP_PURPOSE_DEFAULT, TCP_ETH_RAM,
STACK_CCS_SMTP_TX_SIZE, /* TODO: Server files must be built into an MPFS image prior to
STACK_CCS_SMTP_RX_SIZE},
compiling and runing the web server. Running makempfsimg.bat
#endif in the

#if defined(STACK_USE_MY_TELNET_SERVER) /mpfs directory will create an MPFS image of the files in /pages.

{TCP_PURPOSE_TELNET, TCP_ETH_RAM, A new MPFS image has to be compiled and re-loaded if a file in
STACK_MY_TELNET_SERVER_TX_SIZE,
STACK_MY_TELNET_SERVER_RX_SIZE}, /pages needs to be changed. */

#endif

#if defined(STACK_USE_CCS_HTTP_CLIENT) unsigned int8 http_format_char(char* file, char id, char *str,
unsigned int8 max_ret)
{TCP_PURPOSE_GENERIC_TCP_CLIENT,
TCP_ETH_RAM, STACK_MY_HTTPC_TX_SIZE, {
STACK_MY_HTTPC_RX_SIZE},
/* TODO: This is a callback function to the HTTP stack.
#endif
'id' is the char for the dynamic element to be updated.
};
For each dynamic element you create, you need to parse
#else
and save a result to 'str'. *str is where the callback
#undef TCP_CONFIGURATION
function must save the formatting result, and it should
#define TCP_CONFIGURATION 1
not store more than max_ret characters to this pointer
TCPSocketInitializer_t
TCPSocketInitializer[TCP_CONFIGURATION] = (buffer-overrun protection).

{ Example:

{TCP_PURPOSE_DEFAULT, TCP_ETH_RAM, 250, 250} switch(id) {

}; case 0x00:

#endif set_adc_channel(0);

delay_us(100);

#include "tcpip/StackTsk2.c" i=read_adc();

sprintf(new_str,"0x%X", i);

#include <webserver.h> .....

strncpy(str, new_str, max_ret);

/* TODO: Web server enabled. Server files are added to the /pages */

directory. You can modify the contents of the dynamic display

fields
*str = 0;
at the end of the index.htm file. By default, headings are in the left

column and the dynamic display elements are in the right. The text
if (id == 0)
on
{
the input buttons can be set by changing the 'value' strings in the
 //TODO: Handle dyn0 field and save MY_IP_BYTE2=MY_DEFAULT_IP_ADDR_BYTE2;
result to str
MY_IP_BYTE3=MY_DEFAULT_IP_ADDR_BYTE3;
}
MY_IP_BYTE4=MY_DEFAULT_IP_ADDR_BYTE4;

return(strlen(str));
//network gateway
}
MY_GATE_BYTE1=MY_DEFAULT_GATE_BYTE1;

MY_GATE_BYTE2=MY_DEFAULT_GATE_BYTE2;
void http_exec_cgi(char* file, char *key, char *val)
MY_GATE_BYTE3=MY_DEFAULT_GATE_BYTE3;
{
MY_GATE_BYTE4=MY_DEFAULT_GATE_BYTE4;
/* TODO: This is a callback function to the HTTP stack.

This function is called with each key/value pair read in

//subnet mask
the GET/POST request before any web data is sent to the
MY_MASK_BYTE1=MY_DEFAULT_MASK_BYTE1
web browser. 'key' matches the name of the field and ;

'val' is the value it was changed to. MY_MASK_BYTE2=MY_DEFAULT_MASK_BYTE2

;
Example:
MY_MASK_BYTE3=MY_DEFAULT_MASK_BYTE3
int8 v = atoi (val); ;

if (stricmp(key,led1_key)==0) MY_MASK_BYTE4=MY_DEFAULT_MASK_BYTE4
;
LedSet (0, v);
}
*/

void main()
}
{

setup_adc_ports(AN0);
void IPAddressInit (void)
setup_adc(ADC_CLOCK_INTERNAL|ADC_TAD_MU
{ L_0);

//MAC address of this unit

MY_MAC_BYTE1=MY_DEFAULT_MAC_BYTE1; IPAddressInit ( );

MY_MAC_BYTE2=MY_DEFAULT_MAC_BYTE2; TickInit ( );

MY_MAC_BYTE3=MY_DEFAULT_MAC_BYTE3; enable_interrupts (GLOBAL);

MY_MAC_BYTE4=MY_DEFAULT_MAC_BYTE4; StackInit ( );

MY_MAC_BYTE5=MY_DEFAULT_MAC_BYTE5;

MY_MAC_BYTE6=MY_DEFAULT_MAC_BYTE6;

//IP address of this unit while (TRUE)

MY_IP_BYTE1=MY_DEFAULT_IP_ADDR_BYTE1; {
 Las resistencias de 330Ω y los leds de colores rojo y verde están
conectados a los puertos LED Ay LED D del controlador Ethernet
// TCP/IP code ENC 28J60.

StackTask();

Y también se muestra el LCD 16x2.

StackApplications ( ); Implementación de un servidor web en un Protoboard.

//TODO: User Code

Una vez realizado el código del programa para el proyecto de un

servidor web en lenguaje ensamblador muestra la dirección Mac,
el protocolo HTML, la dirección IP, la petición GET, el protocolo
TCP y la petición POST utilizando la comunicación SPI.

Imagen 2: Implementación de un servidor web en un protoboard.

Simlación de un servidor web en Proteus: En la imagen se muestra la implementación de un servidor web

utilizando un protoboard.

La resistencia de 1 kΩ esta conectada al puerto analógico A0 , las

resistencias de 330Ω y los leds de colores verde, azul y amarillo
están conectados a los puertos digitales de C0 a C2 y a tierra, la
resistencia de 10kΩ, el push button y tierra están conectados al
puerto digital E0 y los 5 volts están conectados al puerto digital
E3 del PIC 18F4550.

Las resistencias de 330Ω y los leds de colores rojo y verde están

conectados a los puertos LED Ay LED D del controlador Ethernet
ENC 28J60.
Imagen 1: Simulación de un servidor web.

En la imagen se muestra la simulación de un servidor web

Y también se muestra el LCD 16x2.
utilizando el software Proteus.

La resistencia de 1 kΩ esta conectada al puerto analógico A0 , las

resistencias de 330Ω y los leds de colores verde, azul y amarillo
están conectados a los puertos digitales de C0 a C2 y a tierra, la
resistencia de 10kΩ, el push button y tierra están conectados al
puerto digital E0 y los 5 volts están conectados al puerto digital
E3 del PIC 18F4550.
Conclusión:
Para concluir este proyecto que hemos realizado

podemos conocer y darnos cuenta de los

procesos que se llevan a cabo en un circuito

electrónico desde el diseño, la configuración,

los materiales necesarios, la codificación, la

simulación incluso podemos pensar en la

parte estética del circuito, así como buscar información acerca de

los conceptos empleados en la introducción. También es
importante mencionar que hemos realizado un ajuste en la forma
de programar pues en lenguaje ensamblador indicamos los
puertos, entradas, incluso necesitamos librerías específicas para su
funcionamiento que anteriormente desconocíamos o no
contemplábamos tan de forma específica como ahora, algo muy
sencillo también, pero que no habíamos hecho fue el uso del ciclo
for, al principio fue un poco confuso relacionarlo con la parte del
circuito, al final quedo más clara la idea y su funcionamiento, otro
punto es seguir mejorando las conexiones entre los
dispositivos pues hubo varios errores y fallas a la hora de hacer las
pruebas por esos motivos, debemos agilizar aún más el manejo de
registros en la programación y al momento de estar ideando su
funcionamiento.

Referencias web
[1] https://es.wikipedia.org/wiki/Servidor_web

[2] https://es.wikipedia.org/wiki/Socket_de_Internet

[3] https://es.wikipedia.org/wiki/Renderizaci%C3%B3n

[4] https://es.wikipedia.org/wiki/Etiqueta_meta

[5] https://es.wikipedia.org/wiki/Cookie_(inform%C3%A1tica)

Bibliografía
[6] Castillo Velázquez José Ignacio, Redes de datos, México, Ed Samsara,
2016.