HTML - Basics - For - Simatic - Cpus - en (2) .En - Es

Traducido del inglés al español - www.onlinedoctranslator.
com
Descripción de la aplicación - 02/2014
Conceptos básicos sobre la creación de HTML

para CPU SIMATIC
SIMATIC STEP 7 V12
http://support.automation.siemens.com/WW/view/de/68011496
Garantía y responsabilidad
Garantía y responsabilidad
Nota Los Ejemplos de Aplicación no son vinculantes y no pretenden ser completos respecto a
los circuitos mostrados, equipamientos y cualquier eventualidad. Los ejemplos de
aplicación no representan soluciones específicas del cliente; solo están destinados a
brindar soporte para aplicaciones típicas. Usted es responsable de garantizar que los
productos descritos se utilicen correctamente. Estos ejemplos de aplicación no lo eximen
de la responsabilidad de utilizar prácticas seguras en la aplicación, instalación, operación
y mantenimiento. Al utilizar estos ejemplos de aplicación, usted reconoce que no
podemos ser responsables de ningún daño/reclamo más allá de la cláusula de
responsabilidad descrita. Nos reservamos el derecho de realizar cambios en estos
Ejemplos de aplicación en cualquier momento y sin previo aviso. En caso de divergencias
entre las recomendaciones de este ejemplo de aplicación y otras publicaciones de
Siemens (p. ej. catálogos), el contenido de los demás documentos tiene prioridad.
No aceptamos ninguna responsabilidad por la información contenida en este documento.
Se excluirá cualquier reclamo contra nosotros, basado en cualquier motivo legal, que resulte del
uso de los ejemplos, información, programas, datos de ingeniería y rendimiento, etc., descritos en
este ejemplo de aplicación. Esta exclusión no se aplica en caso de responsabilidad obligatoria, por
ejemplo en virtud de la Ley alemana de responsabilidad de productos ("Produkthaftungsgesetz"),
en caso de dolo, negligencia grave o daños a la vida, el cuerpo o la salud, garantía de la calidad de
un producto. , ocultación fraudulenta de una deficiencia o incumplimiento de una condición que
llega a la raíz del contrato (“wesentliche Vertragspflichten”). Los daños y perjuicios por
-Siemens AG 2014 Todos los derechos reservados
incumplimiento de una obligación contractual sustancial se limitan, sin embargo, a los daños
previsibles, típicos del tipo de contrato, salvo en caso de dolo o negligencia grave o de daño a la
vida, la integridad física o la salud. Las disposiciones anteriores no implican un cambio de la carga
de la prueba en su perjuicio.
Cualquier forma de duplicación o distribución de estos ejemplos de aplicación o extractos del

mismo está prohibida sin el consentimiento expreso de Siemens Industry Sector.
Seguridad Siemens ofrece productos y soluciones con funciones de seguridad industrial que respaldan el
información funcionamiento seguro de plantas, soluciones, máquinas, equipos y/o redes. Son componentes
ción importantes de un concepto integral de seguridad industrial. Teniendo esto en cuenta, los productos
y soluciones de Siemens experimentan un desarrollo continuo. Siemens recomienda
encarecidamente que compruebe periódicamente si hay actualizaciones de productos.
Para el funcionamiento seguro de los productos y soluciones de Siemens, es necesario tomar

medidas preventivas adecuadas (por ejemplo, un concepto de protección celular) e integrar cada
componente en un concepto de seguridad industrial holístico y de última generación. También se
deben considerar los productos de terceros que puedan estar en uso. Para más información sobre
seguridad industrial, visitehttp://www.siemens.com/industrialsecurity .
Para mantenerse informado sobre las actualizaciones de productos a medida que ocurren, suscríbase a un boletín
informativo específico del producto. Para más información visite
http://support.automation.siemens.com .
ID de entrada: 68011496, V1.0, 02/2014 2

Tabla de contenido
Tabla de contenido
Garantía y responsabilidad ................................................. ................................................. 2
1 Conceptos básicos para crear páginas web ................................................ ........................ 4
1.1 Principios generales de las páginas web ................................................ ............. 4

1.1.1 Principios de HTML ................................................ ................................... 4
1.1.2 Uso de formularios ................................................ ........................................ 6
1.1.3 Conceptos básicos sobre hojas de estilos en cascada (CSS).................... ..... 6
1.1.4 Principios de JavaScript ................................................ ................................ 8
1.1.5 Actualización automática de la página web.................................... ......... 9
1.2 Principios de las páginas web estándar ................................................ ......... 11
1.3 Principios de las páginas web definidas por el usuario ................................. ..... 13
1.3.1 Creación de páginas web definidas por el usuario ................................. .......... 13
1.3.2 Bloques necesarios para páginas web definidas por el usuario................................ 15
1.4 Visualización de variables de la CPU en la página web.................... 16
1.4.1 Requisitos ................................................. .................................... dieciséis
1.4.2 Interacción entre el navegador web y la CPU................................. 17
1.4.3 Procedimiento ................................................. .......................................... 18
1.5 Escribiendo variables en la CPU con ayuda de la página web ............. 18
1.5.1 Requisitos ................................................. ................................. 18
1.5.3 Procedimiento ................................................. .......................................... 20
1.6 Vincular variables con textos en el archivo HTML ................................. 21
1.6.1 Requisitos ................................................. ................................. 21
-Siemens AG 2014 Todos los derechos reservados

1.6.3 Procedimiento ................................................. .......................................... 23
1.7 Creación de páginas HTML optimizadas en el tiempo (opcional) ........................ 24
1.8 Principio de funcionamiento del archivo HTML................................................ ...... 27
1.8.1 Comandos AWP................................................ ................................ 27
1.8.2 Información sobre el tipo de documento y el encabezado del archivo HTML ........................ 28
1.8.3 Visualización de áreas................................................. ................................ 30
1.8.4 Visualización de imágenes ................................................. ................................ 32
1.8.5 Creando una tabla con textos ................................................ ........................ 33
1.8.6 Salida de variables de CPU................................................ ................... 34
1.8.7 Generar textos mediante enumeraciones................................................ ........ 34
1.8.8 Configuración de variables en la CPU con valor y botón ................................ 35
1.8.9 Configuración de variables en la CPU sólo mediante botón ................................. 36
1.8.10 Iniciar sesión directamente en páginas web definibles por el usuario.................... 37
2 Glosario ................................................. ................................................. ........ 39

3 Literatura relacionada ................................................ ........................................ 41
3.1 Bibliografía................................................. ........................................ 41
3.2 Especificaciones del enlace de Internet .................................. ................... 41
4 Historia................................................. ................................................. ............ 42
ID de entrada: 68011496, V1.0, 02/2014 3

1 Conceptos básicos para crear páginas web
Definiciones generales
En el contexto del diseño web, el término página web se utiliza para un documento en la World Wide
Web, al que se puede acceder desde un servidor web con un navegador web especificando un
localizador uniforme de recursos (URL). En este contexto, también se hace referencia a una página
HTML o a un documento HTML.
Por página web definida por el usuario se entiende una página web con una sintaxis de comando
adicional (comandos AWP), a través de la cual se puede acceder a una CPU S7 con interfaz
PROFINET.
1.1 Principios generales de las páginas web.
Si ya tiene conocimientos básicos de HTML, puede omitir este capítulo y continuar

leyendo con el capítulo1.2 Principios de las páginas web estándar .
1.1.1 Principios de HTML
HTML significa "Lenguaje de marcado de hipertexto" y es un lenguaje de marcado basado en

texto para estructurar encabezados, textos, listas, tablas o imágenes. Entre otras cosas, HTML no
Copyright - Siemens AG 2014 Todos los derechos reservados
utiliza bucles ni variables y, por tanto, no es un lenguaje de programación.
Estructura
Un documento HTML consta de tres áreas:

• Declaración de tipo de documento (DOCTYPE) al principio del archivo, indicando la definición de
tipo de documento (DTD) utilizada, por ejemplo, HTML 4.01 Transicional.
• Encabezado HTML para información que no debe mostrarse en el área de visualización del
navegador web.
• Cuerpo HTML para información que se muestra en el navegador web.
Elementos HTML (etiquetas)
Los elementos se utilizan para identificar y estructurar diferentes partes de una página web.
Los archivos HTML contienen "elementos HTML" que están marcados con etiquetas (pares de
etiquetas). Casi todos los elementos HTML están marcados con una etiqueta introductoria "<" y una
etiqueta final "</". El contenido intermedio es el "ámbito de aplicación" del elemento correspondiente.
Ejemplo: los párrafos de texto están marcados con <p>

etiqueta. <p>Este es un texto.</p>
Las etiquetas se pueden conectar en cascada y anidarse.
ID de entrada: 68011496, V1.0, 02/2014 4

Etiquetas típicas
La siguiente tabla ofrece una descripción general de las etiquetas más importantes para
estructurar información, que también se utilizan en esta aplicación de ejemplo:
Tabla 1-1
Representación Función Ejemplo
 Comentario 
<a href=“…“> … </a> Enlace
<b> … </b> Negrita <b>Este texto es

negrita</b>.
<cuerpo> …</cuerpo> El contenido se muestra en el
navegador web.
<div>… </div> Agrupación de otros elementos
<formulario> … </formulario> Define una forma
<h1>… </h1> Encabezado de texto
<cabeza>… </cabeza> Área principal de un archivo HTML
<html>…</html> Etiqueta de página web fundamental
<iframe>… </iframe> Define una ventana incrustada

<img src="…">
Integración de una imagen.
<entrada> Crea un elemento de formulario
<enlace> Define una relación lógica con otros

archivos.
<meta> Define metadatos

<p>…</p> Párrafo de texto
<guión> … </guión> Define un área para scripts (por ejemplo,
JavaScript)
<estilo>… </estilo> Dominio de definición para el formato de

hojas de estilo
<tabla> … </tabla> Mesa

Crea una tabla en combinación con
<tr>y <td>
<td>…</td> Columna de tabla
<th> … </th> Cabecera de mesa
<tr>…</tr> Fila de la tabla
ID de entrada: 68011496, V1.0, 02/2014 5

1.1.2 Usando formularios
Para interactuar con la aplicación, utilice formularios en HTML.

Por ejemplo, puede completar los campos de entrada en un formulario y luego enviar el formulario
haciendo clic en un botón. Esto envía el contenido del formulario al servidor web.
Con el método "POST", el contenido del formulario se transfiere desde el navegador

web al servidor web con una solicitud POST especial.
Nota No utilice los formularios en páginas que se actualizan automáticamente. Sus entradas se
sobrescribirán cuando se actualicen.
1.1.3 Conceptos básicos sobre hojas de estilos en cascada (CSS)
CCS es un lenguaje de formato para elementos HTML. Con la ayuda de hojas de estilo, para los elementos
HTML se especifican, por ejemplo, la fuente, el tamaño de fuente, los colores, el borde, la altura, el ancho, etc.
Puede definir formatos centrales para todos, por ejemplo, encabezados de primer orden, celdas de tablas, etc.
Los formatos CSS tienen la siguiente

estructura: Selector {Propiedad: Valor }
Un selector puede contener varias declaraciones (propiedad: valor).
Propiedades típicas de CSS
La siguiente tabla ofrece una descripción general de las propiedades más importantes para
formatear elementos HTML que también se utilizan en esta aplicación de ejemplo:
Tabla 1-2
propiedad CSS Función Ejemplos de valores
posición Tipo de Posición estático, relativo,
absoluto, fijo
arriba Posición inicial desde arriba Posición 10 píxeles, 2%
izquierda inicial desde la izquierda Posición

abajo inicial desde abajo Posición inicial
bien desde la derecha
ancho Ancho 100 píxeles, 20%

altura Altura
dirección escribir dirección litro, rtl
índice z Posición de capa para superposición 1, 2
Familia tipográfica Fuente Arial, Helvética
Estilo de fuente Estilo de fuente cursiva, oblicua, normal
tamaño de fuente Tamaño de fuente 20px, 100%, pequeño,
mediano grande
peso de fuente Peso de fuente/tipo de fuente atrevido, normal, más atrevido,
más ligero, de 100 a 900
ID de entrada: 68011496, V1.0, 02/2014 6

propiedad CSS Función Ejemplos de valores

decoracion-de-texto Decoración de texto subrayado, parpadeo, ninguno
transformación de texto Transformación de texto Mayúscula minúscula
color Color de texto rgb(51,102,170), #FFFFFF
alineación vertical: Alineamiento vertical arriba, medio, abajo
texto alineado Alineación horizontal izquierda centro derecha,
justificar
margen Margen (general) 10 píxeles, 5%
margen superior Margen superior
margen derecho Margen derecho

margen inferior Margen inferior
margen izquierdo Margen izquierdo
relleno acolchado general 10 píxeles, 5%
acolchado superior Acolchado superior
relleno-derecha Relleno derecho

fondo acolchado Fondo acolchado
relleno-izquierda Relleno a la izquierda
borde[-arriba, -derecha, - general fronterizo 2px blanco sólido

abajo, -izquierda]
borde[-arriba, -derecha, - Grosor del borde 2px, 1%, fino, medio, grueso
abajo, -izquierda]
borde[-arriba, -derecha, - # FFFF00, blanco
Color del borde

abajo, -izquierda]
borde[-arriba, -derecha, - Tipo de borde ninguno, oculto, punteado,
abajo, -izquierda] sólido, discontinuo, doble
colapso fronterizo modelo de frontera separar, colapsar
fondo Color de fondo e imagen Imagen.png sin repetición
color de fondo Color de fondo rgb(51,102,170), #FFFFFF
imagen de fondo Imagen de fondo Imagen.png
repetición de fondo Efecto repetido repetir, no repetir,
repetir-x, repetir-y
archivo adjunto de fondo Efecto de marca de agua desplazamiento, fijo
posición de fondo Posición de fondo 10px 10px, arriba, abajo,
centro, izquierda, derecha
tipo de estilo de lista Tipo de estilo de lista ninguno, cuadrado, círculo,
desct
celdas vacias Visualización de celdas vacías mostrar ocultar
ID de entrada: 68011496, V1.0, 02/2014 7

Integración de hojas de estilo en cascada (CSS) en HTML

Hay varias formas de integrar hojas de estilo en un archivo HTML:
• dentro de un elemento HTML
• entre el <estilo>y </estilo>etiquetas

• en un archivo CSS externo
Defina las hojas de estilo en un archivo CSS separado si desea utilizar formatos uniformes en
varios archivos HTML. Este archivo CSS simplemente se integra en el archivo HTML. La sintaxis es
la siguiente:
<enlace rel="hoja de estilo" tipo="texto/css" href="<Formato>.css">
Las hojas de estilo definidas se abordan con elidentificaciónyclaseatributos de las etiquetas
HTML. CSS proporciona amplias opciones de formato y se mantiene la descripción general en el
archivo HTML.
1.1.4 Principios de JavaScript
JavaScript permite evaluar las interacciones del usuario y cambiar, recargar o crear
contenidos; por tanto, amplía las posibilidades de HTML/CSS.
Integración de JavaScript en HTML

Hay varias formas de integrar comandos JavaScript en un archivo HTML:

• entre el <guión>y </guión>etiquetas
• para referencias
• como parámetro de una etiqueta HTML
• en un archivo JS externo
Defina el código JavaScript en un archivo separado si desea utilizar las mismas funciones en
varios archivos HTML. Como resultado, sólo necesita ingresar el código una vez y puede hacer
referencia a él en varios archivos HTML.
La sintaxis es la siguiente:
<script src="<Script>.js" tipo="texto/javascript"> </script>
ID de entrada: 68011496, V1.0, 02/2014 8

1.1.5 Actualización automática de la página web.
Duración de la velocidad de carga de la página.
El tiempo de actualización de una página web depende del contenido de la página. Las partes
estadísticas y las partes dinámicas (variables) deben actualizarse.
Tiempo de transmisión variable para CPU 1516-3 PN/DP

El tiempo de transmisión interna entre la CPU y el servidor web integrado depende del número
de variables a transferir. El tamaño de las variables es prácticamente irrelevante. La velocidad de
transmisión se puede aumentar mediante una mayor carga de comunicación a expensas del
tiempo de ciclo del programa.
Puede encontrar una descripción general del tiempo de transmisión en la siguiente tabla, dependiendo
del número de variables y de la carga de comunicación configurada:
Tabla 1-3
Número de variables Carga de comunicación Tiempo de actualización
[%] [s]
10 20 1.2
10 40 1.1
20 20 1.4
20 40 1.3
40 20 1.6
40 40 1.5
Nota Elimine las variables de sus páginas HTML que no se utilizan para aumentar la
velocidad de transmisión. Comentar las variables no es suficiente.
Opciones
La configuración de "actualización automática" en las propiedades del PLC solo es válida para páginas
web estándar y no para páginas web definidas por el usuario.
En principio, el HTML es estático y no responde a modificaciones del contenido. Por lo

tanto, si los valores cambian en el programa S7, es útil que los valores modificados se
muestren en el navegador web.
Hay varias formas de actualizar la visualización de la página web:
• Actualización manual con <F5>
• Actualización automática con una metafecha en el encabezado del archivo HTML
• Actualización automática con JavaScript

Para escribir variables en la CPU se debe crear una página HTML independiente sin
función de actualización automática. Esto evita que las entradas que aún no están
completadas se sobrescriban cuando la página se actualiza automáticamente.
ID de entrada: 68011496, V1.0, 02/2014 9

Actualización manual
Presione <F5> (Internet Explorer: "Ver > Actualizar") para actualizar la pantalla en el
navegador web.
Actualizar con HTML

Con la siguiente línea de código en el encabezado del archivo HTML, la visualización en el
navegador web se actualiza cíclicamente:
<meta http-equiv="refresh" content="10; URL=Ejemplo.html">
El ciclo de actualización se ingresa en segundos. Con "contenido="10;",el ciclo de actualización es

de 10 segundos. El ciclo de actualización real depende de la cantidad de datos de la página.
Ingrese a la página web a actualizar mediante "URL = ".En el ejemplo de aplicación, esto es
"Overview.html".
Actualizar con JavaScript

En el cuerpo del archivo HTML, el siguiente JavaScript actualiza la visualización en el
navegador web cada 10 segundos:
<script type="text/javascript">
setInterval("document.location.reload()",10000); </script>
ID de entrada: 68011496, V1.0, 02/2014 10

1.2 Principios de las páginas web estándar.
Requisitos
En STEP 7 se requieren los siguientes ajustes en las propiedades del PLC:
• El servidor web debe estar activado.
• Si necesita acceso seguro a las páginas web estándar, active la casilla de
verificación "Permitir acceso solo con HTTPS".
• La actualización automática de las páginas web estándar está habilitada. El intervalo de
actualización está preestablecido en 10 s y puede estar en el rango de 1 a 999.
Acceso vía HTTP o HTTPS

Con la URL "http://ww.xx.yy.zz" o "https://ww.xx.yy.zz" se accede a las páginas
web estándar. "ww.xx.yy.zz" corresponde a la dirección IP de la CPU S7-1500.
HTTPS se utiliza para el cifrado y autenticación de la comunicación entre el navegador y

el servidor web. Si la casilla de verificación "Permitir acceso sólo con HTTPS" está
activada, sólo es posible acceder a las páginas web de la CPU S7-1500 a través de HTTPS.
Acceso
El usuario con el nombre "Cualquiera" es la configuración predeterminada en la lista de usuarios. Este
usuario tiene derechos de acceso mínimos (acceso de lectura a la introducción y a la página de inicio).
Los derechos de acceso del usuario "Todos" se pueden ampliar. El usuario “Todos” ha sido definido
sin contraseña.
Para utilizar la funcionalidad completa de las páginas web, debe iniciar sesión. Inicie sesión con un
nombre de usuario y una contraseña definidos en la configuración web de STEP 7. Luego podrá
acceder a las páginas web habilitadas para este usuario con la correspondiente derechos de
acceso.
Los campos de entrada para iniciar sesión se pueden encontrar en la esquina superior izquierda de cada página web estándar.
Figura 1-1 Ventana de inicio de sesión
ID de entrada: 68011496, V1.0, 02/2014 11

Páginas web estándar de SIMATIC S7-1500

El servidor web del S7-1500 ya ofrece mucha información sobre la CPU correspondiente a
través de páginas web estándar integradas. Estas páginas web estándar se enumeran
individualmente en la tabla:
Tabla 1-4
Nombre Contenido
Introducción
Página de introducción a las páginas web estándar.
Página de inicio La página de inicio proporciona una descripción general de la información general de
la CPU, el nombre de la CPU, el tipo de CPU e información básica sobre el estado
operativo actual.
Identificación Visualización de información de identificación estática, como número de

serie, pedido y versión.
Búfer de diagnóstico Visualización del contenido del búfer de diagnóstico con las últimas entradas primero
Módulo Visualización simbólica del estado de un módulo con comentarios.

información
Mensajes Visualización del contenido del búfer de mensajes.

Comunicación Visualización de la información sobre las interfaces PROFINET de la CPU;

visualización de la demanda de recursos de la conexión
Topología Visualización de la configuración topológica y del estado de los dispositivos PROFINET

del sistema PROFINET IO en forma gráfica y en tabla
páginas de usuario En las "Páginas de usuario" del servidor web puede cargar las páginas HTML
creadas para leer los datos del sistema de destino.
Explorador de archivos El explorador de archivos enumera todos los archivos y directorios de datos que existen en la
tarjeta de memoria SIMATIC. Los archivos se pueden descargar, eliminar, cambiar de nombre o
cargar. Los directorios se pueden volver a crear, eliminar o cambiar de nombre.
Una descripción detallada de la configuración de las páginas web estándar está disponible en la Manual
de funciones del servidor web S7-1500 ; no es objeto de este documento de solicitud.
ID de entrada: 68011496, V1.0, 02/2014 12

1.3 Principios de las páginas web definidas por el usuario.
Los siguientes capítulos proporcionan conocimientos básicos de las páginas web definidas por el usuario
en relación con la aplicación.
Encontrará información contextual en la ayuda online de SIMATIC STEP 7 V12

y, entre otros, en la instrucción "WWW" (SFC 99).
Ventajas
La creación de una página web definida por el usuario es ventajosa si no se requiere un
sistema HMI permanente, pero ocasionalmente se necesita información de diagnóstico y
visualizaciones. Dado que se utilizan tecnologías web estándar, no se requiere hardware ni
software de visualización adicional.
Una solución con AWP es razonable para aplicaciones sencillas y la página web se
puede diseñar individualmente según sus necesidades.
1.3.1 Crear páginas web definidas por el usuario
Figura 1-2 Descripción general de la creación de páginas web definidas por el usuario
Cliente con navegador
-
PROFINET
Pedido
Página web
Industrial
Ethernet
SIMATIC PASO 7
V12 -
Bloques
CPU 1516-3 PN/DP como
- OB1 servidor web
SIMATIC PASO 7 LLAMAR “WWW“ -
V12 -…
editor HTML DB333/334
- Símbolos
-
Editor
- archivo HTML
imágenes
ID de entrada: 68011496, V1.0, 02/2014 13

Procedimiento
Tabla 1-5
No. Instrucción
1. Cree el archivo HTML para la CPU con un editor HTML. Toda la aplicación web
consta de archivos fuente individuales, por ejemplo, *.html, *.png, *.js,
* . css, etc. Para poder acceder a las variables de la CPU, se proporciona la sintaxis de
comando correspondiente (comandos AWP).
2. Genere bloques de datos (DB de control web y DB de fragmento) con STEP 7 a partir de los archivos
fuente. Los números de DB se pueden configurar libremente (por defecto: DB 333 y desde DB334). Los DB
se guardan en la navegación del proyecto en "Bloques de programa > Bloques de sistema > Servidor
web". Estos bloques de datos se componen de un bloque de datos de control que controla la visualización
de las páginas web y de uno o varios fragmentos de bloques de datos con las páginas web compiladas.
3. Asigne un nombre simbólico en STEP 7 a las variables que desee utilizar en la

página web.
4. Con STEP 7 se crea un programa S7. Para la sincronización entre el programa de usuario y
el servidor web, pero también para la inicialización, debe llamar la instrucción WWW (SFC
99) en el programa de usuario.
5. Transfiera todos los bloques a la CPU con STEP 7.
6. Abra un navegador web e ingrese la URL "http://ww.xx.yy.zz" o "https://ww.xx.yy.zz".

"ww.xx.yy.zz" corresponde a la dirección IP de la CPU S7-1500.
El navegador web solicita la página web de la CPU a través del protocolo http; la CPU
proporciona la página web como servidor web.
El acceso al servidor web de la CPU es posible independientemente del ordenador de

configuración; cada dispositivo de salida con un navegador web integrado y acceso a la
interfaz PN de la CPU puede mostrar la página web.
Para poder obtener acceso de escritura a la página web, debe iniciar sesión.
ID de entrada: 68011496, V1.0, 02/2014 14

1.3.2 Bloques necesarios para páginas web definidas por el usuario
WWW (SFC99)
Con la ayuda de la instrucción "WWW" (SFC99), la CPU interpreta los bloques de datos y
puede utilizarlos como páginas web definidas por el usuario.
Bases de datos de control web y bases de datos fragmentadas
La base de la página web diseñada por usted es un archivo HTML (o varios archivos HTML
conectados con imágenes):
Para permitir que la CPU interprete el archivo HTML, se almacena en bloques de datos junto con
otros archivos necesarios. Utilice STEP 7 para este propósito:
La base de datos de control web (predeterminada: DB333) contiene lo siguiente:
• Variables de estado y control de la página web

• Estado de la comunicación (por ejemplo, si está pendiente una solicitud del navegador
web al servidor web)
• Información de error
Además de la base de datos de control web, también existen “bases de datos de fragmentos” que comienzan
por defecto con DB334. Estos DB contienen páginas web codificadas y datos multimedia (p. ej. imágenes).
Todos los DB de control web se encuentran en el archivo "Bloques de programa/Bloques de

sistema/Servidor web" del navegador de programas de STEP 7.
Por lo tanto, el tamaño de las páginas web definidas por el usuario determina también el tamaño del
programa de usuario. El tamaño del programa de usuario, los datos y la configuración están
limitados por la memoria de carga disponible y la memoria principal de la CPU.
Nota Si necesita reducir el espacio para sus páginas web definidas por el usuario, elimine algunas de las
imágenes insertadas, cuando corresponda.
ID de entrada: 68011496, V1.0, 02/2014 15

1.4 Mostrar variables de la CPU en la página web

Uso típico de variables.
En la tabla siguiente encontrará una descripción general del uso de variables:
Tabla 1-6
Representación Función Ejemplo Informa-
ción
:="<Nombre>" Mostrar variable de CPU :="NivelMínimo del Tanque": Capítulo.1.4
 una variable en la CPU con un Nombre='"OpenValve"' -->
método "POST" independiente
 valor de una variable Enum="Valor de alarma" -->
1.4.1 Requisitos
Para poder visualizar variables de la CPU en la página web, es necesario lo siguiente

requisitos previosaplicar:
Tabla 1-7
programa S7 archivo HTML
• A cada variable se le debe asignar un nombre • No es necesario declarar variables mediante un

simbólico. La variable solo se puede mostrar en la comando AWP en el archivo HTML.
página web mediante nombres simbólicos.
• Es necesaria una llamada cíclica de la
instrucción "WWW" (SFC99) si se preprocesan
variables en el programa S7.
• Para las variables, se permiten los tipos de datos estándar,
los tipos de datos PLC generados por el usuario y las
estructuras.
ID de entrada: 68011496, V1.0, 02/2014 dieciséis

1.4.2 Interacción entre el navegador web y la CPU
Figura 1-3 Interacción entre el navegador web y la CPU al leer variables
CPU S7 Navegador web
- - - -
OB1 DB333/DB334 servidor web con navegador web
Página web
PM14 = 5 … … …
… Caudal = 5 Caudal = 5 5
Llamar“WWW"
… … …
…
memoria de trabajo
…
MW14
…
-
Símbolos
…
Caudal: MW14
Tabla 1-8
No. Descripción
7. Las variables que se muestran o escriben en la página web deben tener un nombre simbólico. A una
variable de una base de datos se accede, por ejemplo, con "Nombre_DB".Nombre_variable.
8. En el programa S7 se llama la instrucción "WWW" (SFC99).
9. Llamando a la instrucción “WWW” (SFC99) se inicializa el DB de control web (por defecto: DB333).
10. El servidor web de la CPU convierte los datos con ayuda de la información del DB de control web
(predeterminado: DB333) a un formato (= página web) que puede ser interpretado por un
navegador web.
La página web de la CPU se llama en un navegador web a través de la dirección IP de la CPU.
11. Con cada solicitud del navegador web, la página web se actualiza (manual o automáticamente). La
información sobre la actualización de una página web se puede encontrar en el capítulo1.1.5 Actualización
automática de la página web .
También se puede crear una solicitud al servidor web con el método "Publicar" al escribir una
variable en la CPU. Después de haber "enviado" la página web, se actualiza toda la página web.
Conceptos básicos sobre la creación de

HTML ID de entrada: 68011496, V1.0, 02/2014 17
1.4.3 Procedimiento
Programa S7:
En el programa S-7 no se requiere programación.
Archivo HTML:
Una variable se puede mostrar en cualquier posición de la página HTML. La sintaxis es la

siguiente:
:="<Variable>":
Ejemplo de la variable "TankLevelMaximum":
<p>:="NivelMáximoDeTanque":</p>
La visualización de la variable se realiza independientemente del tipo de datos. La actualización

de la variable se describe en el capítulo1.1.5 Actualización automática de la página web .
1.5 Escribir variables en la CPU con la ayuda de la página

web
1.5.1 Requisitos
Para poder escribir variables en la CPU a través de la página web, se deben cumplir las
siguientes condiciones:
Tabla 1-9
• A cada variable se le debe asignar un nombre • Las variables deben declararse mediante el
simbólico. Una variable sólo puede accederse comando AWP (
Ejemplo de cómo escribir la variable "Caudal": 
Normalmente, el comando AWP se encuentra en la primera instrucción del archivo HTML en el que se
utiliza la variable.
Transferir las variables desde el navegador web.

Al llamar al formulario, se selecciona el método POST para transferir los datos desde el
navegador web al servidor web. El formulario consta de dos unidades:
• Un campo para ingresar el valor:
El campo recibe un nombre mediante una variable y designa la variable del comando
AWP, por ejemplo

.
• Un botón con el que se confirma la entrada del valor. Los datos del
formulario se transfieren mediante "enviar".
Ejemplo:
Aparición en la página web:
Código:
<form método="publicar" acción="" onsubmit="devolver cheque();">

<input type="text" name='"Flowrate"' size="2"> <input
type="submit" value="Establecer un nuevo caudal"> </form>
ID de entrada: 68011496, V1.0, 02/2014 20

1.6 Vincular variables con textos en el archivo HTML
En algunos casos, en una página web tiene sentido generar mensajes directamente como
texto y no como una variable. Para ello, STEP 7 proporciona enumeraciones. Con una
enumeración, puedes vincular valores con textos concretos. Estos textos pueden crearse en
uno o varios idiomas. Nuestra aplicación contiene mensajes de texto en un solo idioma.
1.6.1 Requisitos
Para generar indicaciones como texto, se aplican los siguientes requisitos previos:
Tabla 1-11
• A cada variable se le debe asignar un nombre • EsnoEs necesario declarar variables mediante
simbólico. Una variable sólo puede accederse un comando AWP en el archivo HTML, porque
mediante nombres simbólicos. solo se leen pero no se escriben.
• Es necesaria una llamada cíclica de la • Todos los archivos dependientes del idioma incl. el
instrucción "WWW" (SFC99) si se preprocesan archivo HTML debe almacenarse en el mismo directorio.
variables en el programa S7.
•
Para las variables, se aprueban todos los tipos de

datos numéricos.
ID de entrada: 68011496, V1.0, 02/2014 21

El siguiente gráfico ilustra la interacción entre el navegador web y la CPU:

Figura 1-5 Interacción entre el navegador web y la CPU al convertir variables a texto
- - - -
OB1 DB333/DB334 Página web navegador web
Valor de alarma =
PM12 = 1 Alarma = 1 Alarma = 1
… ≙Nivel del tanque
Nivel del tanque
Llame "WWW"
1 = Nivel del tanque
abajo abajo
abajo ¡mínimo!
… ¡mínimo!
¡mínimo!
…
memoria de trabajo
…
MW12
…
Símbolos
…
Alarma: MW12
…
Tabla 1-12
No. Descripción
1. El programa S7 llama la instrucción “WWW” (SFC99) y pone el valor de MW12 ("Alarma") a

"1".
2. Debido a la llamada cíclica de la instrucción "WWW" (SFC99), también se actualiza la variable "Alarma" en
DB333/334.
3. El servidor web vincula el valor "Alarma" con el texto relacionado.
4. En el navegador web se muestra el texto correspondiente en lugar del valor "Alarma".

1.6.3 Procedimiento
Creando TIPO DE ENUM
El comando AWP, mediante el cual se definen los tipos ENUM, es:


Ejemplo para el tipo ENUM "AlarmValue":


Normalmente, el comando AWP se encuentra en la primera instrucción del archivo HTML en el que se
utiliza la variable.
Asignación de TIPO DE ENUM
La sintaxis para mostrar texto en lugar del valor es la siguiente, p. ej. para la variable
"Alarma":
 :="Alarma":
ID de entrada: 68011496, V1.0, 02/2014 23

1.7 Creación de páginas HTML optimizadas en el tiempo (opcional)
La creación de páginas HTML optimizadas en el tiempo no se describe en los manuales del

S7-1500. La idea de la actualización mediante JavaScript es la de integrar una subpágina web
en la página web definida por el usuario. Esto se hace con el llamado "marco en
línea" (iFrame). Para recuperar nuevos valores del controlador, no se recarga la página web
completa, sino solo la subpágina web en el marco en línea. Esto tiene la ventaja de que el
controlador sólo necesita solicitar unos pocos datos. Si, por ejemplo, se utilizan imágenes en
la página principal, no es necesario solicitarlas al controlador para cada actualización, lo que
sí hacen en los otros dos mecanismos introducidos. Por lo tanto, la actualización mediante
JavaScript provoca una baja transmisión de datos, lo que también puede tener un efecto
positivo en la carga de la red y en el tiempo de ciclo del controlador. El concepto se muestra
en la siguiente figura.
Figura 1-6 Variable de lectura/escritura
Update_DataOpti.html
Leer variable
DatosOpti.html
Start_Stop_buttons.html
escribir variable
ID de entrada: 68011496, V1.0, 02/2014 24

Tabla 1-13
No. Descripción
1. Hay una página HTML definida por el usuario (a continuación denominada página principal) que se
mostrará. En esta aplicación, esta es la página HTML "DataOpti.html". No se actualiza.
2. Esta página principal no incluye variables. Todas las variables de control que se leerán o
escribirán se empaquetarán en archivos HTML adicionales (aquí “Update_DataOpti.html” y
“Start_Stop_buttons.html“), que a su vez están incrustados como marcos (iframe) en la
página principal. Sólo se actualizan los fotogramas individuales.
3. El archivo “Update_DataOpti.html” contiene dos tablas. En la segunda línea de la primera tabla, el

tiempo de actualización se indica en milisegundos (por ejemplo, 1000). A partir de la segunda línea
de la segunda tabla, la columna de la izquierda contiene los comandos AWP de la variable que se
va a leer (por ejemplo:="Data_Buffer".Datos[1].Data_Struct.TimeStamp:). La columna de la derecha
contiene los respectivos ID (p. ej.Id.hora1).Las IP deben ser únicas. La página principal
“DataOpti.html” contiene los ID ingresados en lugar de los comandos AWP de la variable que se
va a leer. Es decir, para utilizar un elemento para la actualización, los atributos "ID" deben
ingresarse y preasignarse con el nombre de ID respectivo (p. ej.id="HoraId1").El archivo HTML
separado
“Update_DataOpti.html” está incrustado como marco (marco flotante,ver punto 2) en la página
principal “DataOpti.html”. La sintaxis respectiva es la siguiente:
<iframe src="Update_DataOpti.html" estilo="display:none;" />
El "pantalla: ninguna”La propiedad CSS, destacada para el marco, impide su visualización en la
página principal.
4. Las funciones de JavaScript (verFigura 1-7 Funciones de JavaScript ) en el archivo

“Update_DataOpti.html” determina automáticamente el tamaño actual de la segunda tabla. Los
elementos HTML con el ID se determinan en la página principal. El código del programa JavaScript
reemplaza todo el contenido de este elemento HTML con el contenido de la columna izquierda de
la segunda tabla. Finalmente se establece un tiempo de espera a partir del tiempo definido en la
primera tabla y luego se renueva la actualización.
5. Para variables de entrada (ver capítulo1.5 Escribir variables en la CPU con ayuda de la página web ) los
formularios se insertan en archivos HTML separados. Los archivos HTML están incrustados como marcos
en la página principal. Se pueden escribir varios formularios en un archivo HTML.
ID de entrada: 68011496, V1.0, 02/2014 25

Figura 1-7 Funciones de JavaScript

Nota El archivo “Update_DataOpti.html” se puede adaptar a su aplicación con poco

esfuerzo. Solo necesita ingresar su variable con el ID respectivo en la segunda tabla.
En tu página principal reemplazas la variable con el ID respectivo. Esto no requiere
ningún cambio en JavaScript.
Más información sobre este tema está disponible en las siguientes preguntas frecuentes:
¿Cómo se pueden actualizar automáticamente las páginas web personalizadas y las páginas web estándar
en STEP 7 (TIA Portal)?

1.8 Principio de funcionamiento del archivo HTML
El siguiente capítulo proporciona una explicación detallada de las secciones individuales del
archivo HTML. Para la creación de páginas HTML sólo se utilizan valores fijos para la posición y el
tamaño de los elementos. Esto evita que los elementos se muevan y se superpongan cuando la
ventana del navegador se hace más pequeña.
1.8.1 Comandos AWP
Lo esencial
Los comandos AWP se insertan como comentarios HTML en archivos HTML. Los comandos AWP
se pueden ubicar en cualquier posición del archivo HTML. Sin embargo, por razones de claridad,
es apropiado enumerar los comandos centrales de AWP al principio del archivo HTML.
Figura 1-8 Comandos AWP

Explicaciones
Tabla 1-14
Código Explicación
 identificarse como AWP_In_Variable.
Nota: tenga en cuenta que las comillas están
anidadas. La variable se escribe entre comillas y
enmarcada por una coma invertida (' " … " ').

<!-- AWP_Enum_Ref Los tipos ENUM se asignan a variables con

Nombre='"Alarma"' AWP_Enum_Ref.
Enum="Valor de alarma" --
> :="Alarma":
ID de entrada: 68011496, V1.0, 02/2014 27

1.8.2 Información sobre el tipo de documento y el encabezado del archivo HTML.
Lo esencial
La siguiente información debe estar contenida en cada archivo HTML para que sea compatible
con HTML. La única excepción es el "<meta http-equiv="actualizar"…>"etiqueta: si se abstiene de
actualizar automáticamente la página y trabaja con <F5> en su lugar, puede omitir esta etiqueta.
El <enlace…>y <guión…>Las etiquetas también son opcionales.
Figura 1-9 Información sobre el tipo de documento y el encabezado del archivo HTML
Explicaciones
Tabla 1-15
<!DOCTYPE HTML PUBLIC "- // Especificación del tipo de documento HTML: el
W3C//DTD HTML 4.01 tipo de documento es HTML en la versión de
Transicional//ES"> idioma V4.01 en la variante "transicional". El
código de idioma "EN" se refiere al idioma de
las etiquetas, es decir, inglés.
El tipo de documento siempre está delante de
"<HTML>"etiqueta.
<html>…</html> Contiene el contenido HTML.
<title>Sitio web definido por el usuario: Título de la página web que luego se mostrará
descripción general de la aplicación</title> en el encabezado del navegador web.
<meta http-equiv="Contenido- Idioma del contenido del archivo

Idioma" content="en" >
<meta http-equiv="Tipo de contenido" Con "contenido="texto/html",Se especifica el

content="text/html; charset=utf-8" > tipo MIME, seguido del juego de caracteres
UTF-8 utilizado.
MIME significa Extensiones de correo de Internet
multipropósito. El tipo MIME describe el tipo de
datos transferidos.
ID de entrada: 68011496, V1.0, 02/2014 28

<meta http-equiv="actualizar" Metafecha opcional: con este comando, la página
contenido="1; URL=Overview.html"> web se actualiza cada segundo. Especialmente
para el seguimiento de procesos es apropiado
tener la página web
actualizado cíclicamente. Para páginas con campos de
entrada, la actualización cíclica puede causar problemas.
Puede encontrar más información sobre la

actualización de la página web en la Sección1.1.5
Actualización automática de la página web .
<enlace rel="hoja de estilo" Vía <enlace…>,Se hace referencia a un archivo CSS que
tipo="texto/css" contiene toda la información sobre el diseño óptico de la
href="Hoja de estilo/siemens_Stylesh página web, por ejemplo, blanco.
eet.css"> color de fondo, etc.
<guión El área para scripts (p. ej. JavaScript) se

src="Script/siemens_script.js" define entre <guión…>y </script>.Anota
tipo="texto/javascript"> las instrucciones dentro del área en el
</script> lenguaje script o integra un archivo
separado con tu script con src.
<cuerpo> …</cuerpo> Contiene el cuerpo del texto.
ID de entrada: 68011496, V1.0, 02/2014 29

1.8.3 Visualización de áreas
Lo esencial
Se utilizan tres áreas en el archivo HTML:

• Área de encabezado (encabezado)
• Barra de navegación (navi)
• Área de datos (página)
Explicaciones
La siguiente figura muestra las áreas del archivo HTML:
Figura 1-10 Áreas del archivo HTML
Derechos de autor - Siemens
ID de entrada: 68011496, V1.0, 02/2014 30

El formato de las áreas se define centralmente en un archivo CSS separado:
Figura 1-11 Formato de las áreas del archivo CSS

Policía
Tabla 1-16
# página { Los formatos CSS tienen la siguiente
POSICIÓN: absoluta; estructura: Selector {Propiedad: valor}
izquierda: 150px;
arriba: 0; En nuestro ejemplo, la página es el selector con
varias declaraciones (propiedad: valor):
altura: 800 píxeles;
ancho: 920px;
Puede encontrar más información sobre el formato de
relleno superior: 180px;
elementos HTML en el capítulo1.1.3 Conceptos básicos
relleno-izquierda: 30px; sobre hojas de estilos en cascada (CSS) .
relleno-derecha: 30px;
alineación de texto: izquierda;
color del borde: blanco;

estilo de borde: sólido;
ancho de borde: 1px;
color de fondo:
rgb(208,211,218);
colapso de fronteras: separado;
índice z: 1;
}

1.8.4 Visualización de imágenes
Lo esencial
Hay varias imágenes utilizadas en el archivo HTML:

• Imágenes estáticas
• Imagen de fondo
• Imagen con altura variable
• Imagen dinámica que cambia dependiendo de un bit de estado en la CPU.
Explicaciones
Figura 1-12 Representación de imágenes en el archivo HTML

Copyright - Siemens AG 2014 AL
Tabla 1-17
<img src="Imágenes/SIEMENS_Logo.PNG"> Las imágenes se integran a través del "imagen"etiqueta.
background="Images\TankExample.PNG" "fondo"especifica la imagen de fondo con sus

style="fondo-repeat:no-repeat; fondo- propiedades.
posición:abajo a la izquierda"
<img src="Imagen\blue.png" Para imágenes con altura variable, como, por ejemplo, indicador
alt="Nivel" de nivel, un "Escala de nivel de tanque" La variable se especifica
ancho="56px" con ":" y una unidad de medida, por ejemplo "píxeles"en lugar de
altura=":=TankLevelScal:px "> un valor para "altura".
<img Esta imagen depende de la variable "StatusValveCPU".

src="Imágenes\Valve:="EstadoValveCPU":. png" Esta variable puede adoptar los estados "0" y "1".
nombre="Válvula" Las imágenes almacenadas tienen la denominación

"EstadoValveCPU = 0" Valve0.png (válvula cerrada) y Valve1.png (válvula abierta).
id="EstadoValveCPU"
alt="Válvula" >
Cuando la válvula está cerrada, "StatusValveCPU" tiene el
valor 0: la llamada de imagen consta de:
"Válvula" + "0" + ".png" = Válvula0.png
Con "alt",usted especifica un texto que se mostrará si
la página web no puede acceder a la imagen.
ID de entrada: 68011496, V1.0, 02/2014 32

1.8.5 Creando una tabla con textos
Lo esencial
Se recomienda el uso de una tabla para evitar que el contenido de la página web se mueva,
dependiendo del tamaño de la ventana.
Por supuesto, también puedes definir una tabla de forma centralizada para tu página web mediante
CSS (Cascading Style Sheet).
Explicaciones
En la siguiente figura, por razones de claridad, solo se muestran el encabezado y la primera y
última línea de la tabla.
Figura 1-13 Representación de la tabla en el archivo HTML

Derechos de autor - Siem
Tabla 1-18
<borde de tabla="1"> El ancho del trazo (borde)de la tabla es "1".
… Crea una mesa sin marco (mesa invisible) con
</tabla) borde="0".
<tr> <tr>significa fila de tabla.

<td El contenido de una celda se encuentra entre <td> (datos de
class="static_field_headline_small"> Datos</td> la tabla) y </td>.
Los formatos, por ejemplo
<td "campo_estático_título_pequeño”de los datos de la tabla
class="static_field_headline_left"> Hora</td>
se definen en el archivo CSS.
"clase=“<nombre>“"Asigna los formatos del archivo CSS a los
<td elementos del archivo HTML. De este modo se consigue un
class="static_field_headline_left"> Valor</td> aspecto uniforme en todos, por ejemplo en las mesas.
</tr>
ID de entrada: 68011496, V1.0, 02/2014 33

1.8.6 Salida de variables de CPU
Explicaciones
Las variables de la CPU siempre se muestran mediante el nombre del símbolo:
Figura 1-14 Representación de etiquetas en el archivo HTML
En lugar de "Nivel del tanque", siempre se muestra en la página web el valor actual de
la CPU.
1.8.7 Generar textos mediante enumeraciones
Explicaciones
Mediante enumeraciones se pueden asignar textos a los valores individuales de una variable de la CPU.
Figura 1-15 Representación de enumeraciones en el archivo HTML

En lugar de los valores individuales de "Alarma" se muestran los textos previamente asignados en
HTML. Estos textos se almacenan como "AlarmValue" de tipo enumeración y se transfieren a la página
web a través de DB333.
ID de entrada: 68011496, V1.0, 02/2014 34

1.8.8 Configuración de variables en la CPU con valor y botón
Lo esencial
Para poder transferir variables a la CPU a través de la página web es necesario trabajar con
formularios y, por ejemplo, con el método "POST".
Explicaciones
Figura 1-16 Representación de entradas en el archivo HTML
Tabla 1-19
<form método="publicar" acción="" Llamar al formulario con elcorreométodo. Bajo acción,

onsubmit="devolver cheque();"> no se requieren detalles ya que con acciónla página
<input type="text" id="wert1" name='"Flowrate"' actual se llama de forma predeterminada.
size="2" style="alto: 45px; ancho: 50px; tamaño con el llamadoal enviarcontrolador de eventos, el
de fuente: 21px; alineación de texto: centro;
controlar()Se ejecuta la función que se define en el
relleno: 8px ;">
archivo JS. Con un clic enentregar,la función comprueba si
la entrada está en el rango de 1 a 10. Si se cumple esta
<tipo de entrada="enviar"
condición, elcontrolar()La función devuelve VERDADERO;
value="Establecer un nuevo caudal" style="alto:
de lo contrario, el valor de retorno es FALSO y se genera
45px; ancho: 200px">
un mensaje adicional.
</formulario>
Contipo de entrada = "texto",Se vincula un campo de entrada
cuyo contenido se envía al servidor web de la CPU con
entregar (sólo sicomprobar() = VERDADERO). entregarse
controla mediante un botón llamado "Establecer un nuevo
caudal".
ID de entrada: 68011496, V1.0, 02/2014 35

1.8.9 Configuración de variables en la CPU solo mediante botón
Lo esencial
Para asignar a las variables en la CPU un valor predefinido hay que trabajar con un
formulario, el método "POST" y un valor oculto.
Explicaciones
Figura 1-17 Representación de botones en el archivo HTML
Copyright - Siemens AG 2014 Todos los derechos relacionados
Tabla 1-20
<formulario método="publicar" acción=""> Llamar al formulario con elcorreométodo. Bajo acción,
<tipo de entrada="enviar" no se requieren detalles ya que con acciónla página
valor="AbrirVálvula"> actual se llama de forma predeterminada.
<tipo de entrada="oculto" Contipo de entrada = "oculto",a la variable
nombre='"OpenValve"' tamaño="20px" "OpenValve" se le asigna el valor 1, a la variable
valor="1"> "CloseValve" el valor 0.
<tipo de entrada="oculto" Conentregar,los valores de las variables se envían
nombre='"CloseValve"' tamaño="20px" al servidor web de la CPU.
valor="0">
</formulario>
<formulario método="publicar" acción=""> Acción inversa a la fila anterior: llamar al formulario

<tipo de entrada="enviar" para asignar el valor 1 a "CloseValve" y el valor 0 a
valor="CerrarVálvula"> "OpenValve".
<tipo de entrada="oculto"
nombre='"CloseValve"' tamaño="20px"
valor="1">
<tipo de entrada="oculto"
nombre='"OpenValve"' tamaño="20px"
valor="0">
</formulario>
ID de entrada: 68011496, V1.0, 02/2014 36

1.8.10 Iniciar sesión directamente en páginas web definibles por el usuario
Lo esencial
Para escribir variables en la CPU, generalmente debe iniciar sesión en el servidor web de la CPU. No es
necesario iniciar sesión si desea otorgar derechos de escritura a las páginas definidas por el usuario para el
usuario "Todos". Sin embargo, esto no se puede recomendar desde el punto de vista de la seguridad de la
planta. La ventana de inicio de sesión está disponible en la esquina superior izquierda de las páginas web
estándar. La ventana de inicio de sesión se integró en las páginas web definidas por el usuario, por lo que no
es necesario cambiar a las páginas web estándar para iniciar sesión.
Explicaciones
Figura 1-18 Inicio de sesión en páginas web definidas por el usuario en el archivo HTML
ID de entrada: 68011496, V1.0, 02/2014 37

Tabla 1-21
<cuerpo onload="loginCheck()"> Para cada actualización de la página web, la

función JavaScriptiniciar sesiónVerificar()se
ejecuta automáticamente.
<iframe id="WebserverIFrame" En la página definida por el usuario, unmarco flotanteSe

name="WebserverIFrameName" define que contiene la página web estándar. El marco
src="../../Portal/Portal.mwsl" flotantese vuelve invisible con el estilo = "pantalla:
style="display:none"></iframe> ninguna"atributo.
<div id="logForm" class="Login_Area" clase="Área_de_inicio de sesión"asigna los formatos del archivo

colspan="2"></div> CSS a la ventana de inicio de sesión con
id="logForm".El ID se define en el iniciar
sesiónVerificar()función.
función loginCheck() La función JavaScriptiniciar sesiónVerificar()sondea en el

iFrame de la página web estándar si existe el formulario
para iniciar o cerrar sesión. El formulario respectivo para
iniciar o cerrar sesión se agrega respectivamente en la
página web definida por el usuario.
Nota Más información sobre este tema está disponible en las siguientes preguntas frecuentes:
¿Cómo se puede acceder directamente a páginas web personalizadas del S7-1200?

2 Glosario
2 Glosario
AWP
Automatización Programación Web
comando AWP
Se entiende por comando AWP la sintaxis de comando especial con la que se
intercambian datos entre la CPU y el archivo HTML.
CSS
CSS (Cascading Style Sheets) define cómo se muestra una sección o contenido marcado en
HTML.
Cortafuegos
El firewall se utiliza para restringir el acceso a la red según la dirección del remitente o de
destino y los servicios utilizados. Para el tráfico de datos gestionado a través del cortafuegos,
este decide, basándose en reglas fijas, si determinados paquetes de red se transportan o no.
De esta forma, el firewall intenta impedir el acceso no autorizado a la red.
La función de un firewall no es detectar ataques. Implementa exclusivamente las reglas para
la comunicación de la red.
archivo HTML
Los archivos HTML son la base de la World Wide Web y se muestran en un

navegador web.
En este documento, nos referimos al archivo HTML cuando edita la página web, por ejemplo con
Frontpage. En el navegador web nos referimos a esta página como página web.
HTTP
El Protocolo de transferencia de hipertexto (HTTP) es un protocolo para transferir datos a través de
una red.
HTTPS
El Protocolo seguro de transferencia de hipertexto es un protocolo de comunicación que se utiliza para el
intercambio de datos confidenciales.
Tipo de Mimica
Con ayuda del estándar MIME (MultiPurpose Internet Mail Extensions), el navegador
web sabe, por ejemplo durante una transferencia HTTP, qué datos envía el servidor web,
por ejemplo si se trata de texto sin formato, un documento HTML o una imagen PNG.
ID de entrada: 68011496, V1.0, 02/2014 39

2 Glosario
UTF-8
UTF-8 (formato de transformación UCS de 8 bits) es la codificación más utilizada para
caracteres Unicode.
A cada carácter Unicode se le asigna una cadena de bytes especialmente codificada de longitud
variable. UTF-8 admite hasta cuatro bytes en los que se pueden mostrar todos los caracteres
Unicode.
navegador web
Los navegadores web son programas de visualización de páginas web y pueden comunicarse con
servidores web.
Los navegadores web típicos son:
• Microsoft Internet Explorer

• Mozilla Firefox
Página web
Ver archivo HTML.
Servidor web
Un servidor web almacena páginas web y las pone a disposición. Un servidor web es un programa de
software que transfiere documentos con la ayuda de protocolos de transferencia estandarizados (http,
HTTPS) a un navegador web.
En una CPU con interfaz PROFINET está integrado un servidor web que se puede ampliar
con páginas web personalizadas.
ID de entrada: 68011496, V1.0, 02/2014 40

3 Literatura relacionada
3 Literatura relacionada
3.1 Bibliografía
Esta tabla le ofrece una variedad de literatura pertinente.
Tabla 13
Tema Título
/1/ HTML HTML und CSS, Praxisrezepte für Einsteiger [HTML

y CSS, recetas prácticas para principiantes]
Robert Agular
mitop
ISBN 978-3-8266-1779-9
/2/ HTML Manual HTML

[Manual HTML]
Stefan Münz/Wolfgang Nefzger
Franzis Verlag
ISBN 3-7723-6654-6
/3/ JavaScript JavaScript und Ajax, Das umfassende Handbuch

[JavaScript y Ajax, el manual completo]
Christian Wenz
Prensa Galileo
ISBN 978-3-8362-1128-4
3.2 Especificaciones del enlace de Internet
Esta tabla contiene una selección de enlaces para obtener más información.
Tabla 23
Tema Título
/1/ Enlace a esto http://support.automation.siemens.com/WW/view/de/68011496

documento
/2/ Industria Siemens http://support.automation.siemens.com

Soporte en línea
/3/ HTML, JavaScript http://www.selfhtml.de/
http://de.selfhtml.org/ http://
www.little-boxes.de/
/4/ S7-1500 Web http://support.automation.siemens.com/WW/view/es/59193560

función del servidor
manual
/5/ S7-1500 http://support.automation.siemens.com/WW/view/es/59191792
Manual del sistema
/6/ Programación http://support.automation.siemens.com/WW/view/es/81318674

guía para
S7-1200/1500
ID de entrada: 68011496, V1.0, 02/2014 41

4 Historia
4 Historia
Tabla 14
Versión Fecha Modificaciones
V1.0 02/2014 Primera versión

ID de entrada: 68011496, V1.0, 02/2014 42

HTML - Basics - For - Simatic - Cpus - en (2) .En - Es

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML - Basics - For - Simatic - Cpus - en (2) .En - Es

Cargado por

Copyright:

Formatos disponibles

Traducido del inglés al español - www.onlinedoctranslator.

Descripción de la aplicación - 02/2014

Conceptos básicos sobre la creación de HTML

No aceptamos ninguna responsabilidad por la información contenida en este documento.

Cualquier forma de duplicación o distribución de estos ejemplos de aplicación o extractos del

Para el funcionamiento seguro de los productos y soluciones de Siemens, es necesario tomar

Conceptos básicos sobre la creación de HTML

ID de entrada: 68011496, V1.0, 02/2014 2

1 Conceptos básicos para crear páginas web ................................................ ........................ 4

1.1 Principios generales de las páginas web ................................................ ............. 4

1.6.2 Interacción entre el navegador web y la CPU................................. 22

2 Glosario ................................................. ................................................. ........ 39

4 Historia................................................. ................................................. ............ 42

Conceptos básicos sobre la creación de HTML

ID de entrada: 68011496, V1.0, 02/2014 3

1 Conceptos básicos para crear páginas web

1.1 Principios generales de las páginas web.

Si ya tiene conocimientos básicos de HTML, puede omitir este capítulo y continuar

1.1.1 Principios de HTML

HTML significa "Lenguaje de marcado de hipertexto" y es un lenguaje de marcado basado en

utiliza bucles ni variables y, por tanto, no es un lenguaje de programación.

Un documento HTML consta de tres áreas:

• Cuerpo HTML para información que se muestra en el navegador web.

Elementos HTML (etiquetas)

Ejemplo: los párrafos de texto están marcados con <p>

Conceptos básicos sobre la creación de HTML

ID de entrada: 68011496, V1.0, 02/2014 4

<b> … </b> Negrita <b>Este texto es

<div>… </div> Agrupación de otros elementos

<formulario> … </formulario> Define una forma

<h1>… </h1> Encabezado de texto

<cabeza>… </cabeza> Área principal de un archivo HTML

<html>…</html> Etiqueta de página web fundamental

<iframe>… </iframe> Define una ventana incrustada

Integración de una imagen.

<entrada> Crea un elemento de formulario

<enlace> Define una relación lógica con otros

<meta> Define metadatos

<estilo>… </estilo> Dominio de definición para el formato de

<tabla> … </tabla> Mesa

<th> … </th> Cabecera de mesa

<tr>…</tr> Fila de la tabla

Conceptos básicos sobre la creación de HTML

ID de entrada: 68011496, V1.0, 02/2014 5

1.1.2 Usando formularios

Para interactuar con la aplicación, utilice formularios en HTML.

Con el método "POST", el contenido del formulario se transfiere desde el navegador

1.1.3 Conceptos básicos sobre hojas de estilos en cascada (CSS)

Los formatos CSS tienen la siguiente

estructura: Selector {Propiedad: Valor }

Un selector puede contener varias declaraciones (propiedad: valor).

Propiedades típicas de CSS

izquierda inicial desde la izquierda Posición

ancho Ancho 100 píxeles, 20%

Conceptos básicos sobre la creación de HTML

ID de entrada: 68011496, V1.0, 02/2014 6

propiedad CSS Función Ejemplos de valores

margen superior Margen superior

margen derecho Margen derecho

relleno acolchado general 10 píxeles, 5%

acolchado superior Acolchado superior

relleno-derecha Relleno derecho