HTML Basics For Simatic Cpus PORTUGUES

Traduzido do Inglês para o Português - www.onlinedoctranslator.
com
Descrição do aplicativo - 02/2014
Noções básicas de criação de HTMLs

para CPUs SIMATIC
SIMATIC STEP 7 V12
http://support.automation.siemens.com/WW/view/de/68011496
Garantia e responsabilidade
Garantia e responsabilidade
Observação
Os Exemplos de Aplicação não são vinculativos e não pretendem ser completos
em relação aos circuitos mostrados, equipamentos e qualquer eventualidade.
Os exemplos de aplicação não representam soluções específicas do cliente; eles
se destinam apenas a fornecer suporte para aplicativos típicos. Você é
responsável por garantir que os produtos descritos sejam usados
corretamente. Esses exemplos de aplicação não o isentam da responsabilidade
de usar práticas seguras na aplicação, instalação, operação e manutenção. Ao
usar esses exemplos de aplicação, você reconhece que não podemos ser
responsabilizados por quaisquer danos / reivindicações além da cláusula de
responsabilidade descrita. Nós nos reservamos o direito de fazer alterações
nesses Exemplos de Aplicativos a qualquer momento e sem aviso prévio.
Não aceitamos qualquer responsabilidade pelas informações contidas neste documento.
Qualquer reclamação contra nós - com base em qualquer motivo legal - resultante
do uso de exemplos, informações, programas, dados de engenharia e
desempenho, etc., descritos neste exemplo de aplicação, serão excluídos. Tal
exclusão não se aplicará no caso de responsabilidade obrigatória, por exemplo, ao
abrigo da Lei de Responsabilidade do Produto Alemão ("Produkthaftungsgesetz"),
em caso de dolo, negligência grave ou lesão de vida, corpo ou saúde, garantia de
qualidade de um produto , ocultação fraudulenta de uma deficiência ou violação
- Siemens AG 2014 Todos os direitos reservados
de uma condição que está na origem do contrato (“wesentliche Vertragspflichten”).

Os danos por violação de uma obrigação contratual substancial são, no entanto,
limitados aos danos previsíveis, típicos para o tipo de contrato, exceto em caso de
dolo ou negligência grave ou lesão à vida, corpo ou saúde.
Qualquer forma de duplicação ou distribuição desses exemplos de aplicação ou trechos deste

documento é proibida sem o consentimento expresso do Setor Industrial da Siemens.
Segurança A Siemens fornece produtos e soluções com funções de segurança industrial que apoiam a
informa- operação segura de plantas, soluções, máquinas, equipamentos e / ou redes. Eles são
ção componentes importantes em um conceito holístico de segurança industrial. Pensando nisso,
os produtos e soluções da Siemens passam por um desenvolvimento contínuo. A Siemens
recomenda enfaticamente que você verifique regularmente as atualizações do produto.
Para a operação segura dos produtos e soluções da Siemens, é necessário tomar medidas
preventivas adequadas (por exemplo, conceito de proteção celular) e integrar cada
componente em um conceito de segurança industrial de última geração. Produtos de
terceiros que podem estar em uso também devem ser considerados. Para obter mais
informações sobre segurança industrial, visitehttp://www.siemens.com/industrialsecurity.
Para se manter informado sobre as atualizações do produto à medida que ocorrem, inscreva-se para receber um
boletim informativo específico do produto. Para mais informações visite
http://support.automation.siemens.com.

ID de entrada: 68011496, V1.0, 02/2014 2
Índice
Índice
Garantia e responsabilidade ............................................... .................................................. 2
1 Noções básicas para criar páginas da Web ............................................. .......................... 4
1,1 Princípios gerais de páginas da web ............................................. ............. 4

1.1.1 Princípios de HTML ............................................... ................................ 4
1.1.2 Usando formulários ................................................ .......................................... 6
1.1.3 Noções básicas sobre folhas de estilo em cascata (CSS) .......................................... .. 6
1.1.4 Princípios de JavaScript ............................................... ......................... 8
1.1.5 Atualização automática da página da web ............................................ ...... 9
1,2 Princípios de páginas da web padrão ............................................. ......... 11
1,3 Princípios de páginas da web definidas pelo usuário ........................................... ..... 13
1.3.1 Criando páginas da web definidas pelo usuário ............................................ .......... 13
1.3.2 Blocos necessários para páginas da web definidas pelo usuário ...................................... 15
1,4 Exibindo variáveis da CPU na página da web ......................... 16
1.4.1 Requisitos ................................................. .................................... 16
1.4.2 Interação entre navegador da web e CPU ....................................... 17
1.4.3 Procedimento ................................................. .......................................... 18
1,5 Escrevendo variáveis na CPU com a ajuda da página da web ............. 18
1.5.1 Requisitos ................................................. .................................... 18
1.5.3 Procedimento ................................................. .......................................... 20
1,6 Vinculando variáveis com textos no arquivo HTML ...................................... 21
1.6.1 Requisitos ................................................. .................................... 21
- Siemens AG 2014 Todos os direitos reservados
1.6.3 Procedimento ................................................. .......................................... 23

1,7 Criação de páginas HTML otimizadas para o tempo (opcional) ............................... 24
1,8 Princípio funcional do arquivo HTML ............................................ ...... 27
1.8.1 Comandos AWP ................................................ ................................. 27
1.8.2 Informações sobre doctype e cabeçalho do arquivo HTML ............................ 28
1.8.3 Exibição de áreas ............................................... .............................. 30
1.8.4 Exibição de imagens ............................................... ........................... 32
1.8.5 Criando uma tabela com textos ............................................. ..................... 33
1.8.6 Saída de variáveis de CPU ............................................... .................... 34
1.8.7 Envio de textos por meio de enumerações .............................................. ........ 34
1.8.8 Configurando variáveis na CPU com valor e botão ........................... 35
1.8.9 Configurando variáveis na CPU via botão apenas ...................................... 36
1.8.10 Fazendo logon diretamente em páginas da web definidas pelo usuário .............................. 37
2 Glossário ................................................. .................................................. ........ 39

3 Literatura relacionada ................................................ ............................................ 41
3,1 Bibliografia................................................. ....................................... 41

3,2 Especificações do link de Internet ............................................... ................... 41
4 História................................................. .................................................. ............ 42

ID de entrada: 68011496, V1.0, 02/2014 3
1 Noções básicas para criar páginas da web
Definições gerais
No contexto do design da web, o termo página da web é usado para um documento na World
Wide Web, que pode ser chamado de um servidor da web com um navegador da web
especificando um Uniform Resource Locator (URL). Neste contexto, também é referido como
uma página HTML ou um documento HTML.
Uma página web definida pelo usuário é entendida como uma página web com uma sintaxe de
comando adicional (comandos AWP) que pode ser utilizada para acessar uma UCP S7 com interface
PROFINET.
1,1 Princípios gerais de páginas da web
Se você já tem conhecimento básico de HTML, pode pular este capítulo e

continuar lendo o capítulo 1.2 Princípios de páginas da web padrão.
1.1.1 Princípios de HTML
HTML significa "Hypertext Markup Language" e é uma linguagem de marcação baseada em texto
para estruturar cabeçalhos, textos, listas, tabelas ou imagens. Entre outras coisas, o HTML não
Copyright - Siemens AG 2014 Todos os direitos reservados
usa loops e variáveis e, portanto, não é uma linguagem de programação.
Estrutura
Um documento HTML consiste em três áreas:
• Declaração do tipo de documento (DOCTYPE) no início do arquivo, informando a definição
do tipo de documento (DTD) utilizado, por exemplo, HTML 4.01 Transitional.
• Cabeçalho HTML para informações que não devem ser exibidas na área de exibição do
navegador da web.
• Corpo HTML para informações que são exibidas no navegador da web.
Elementos HTML (tags)

Elementos são usados para identificar e estruturar diferentes partes de uma página da web.
Os arquivos HTML contêm "elementos HTML" que são marcados por tags (pares de tags). Quase
todos os elementos HTML são marcados por uma tag introdutória “<” e uma tag final “</”. O
conteúdo intermediário é o "escopo de aplicação" do elemento correspondente.
Exemplo: parágrafos de texto são marcados por <p>

marcação.<p> Este é um texto. </p>
As tags são cascateadas e podem ser aninhadas.

ID de entrada: 68011496, V1.0, 02/2014 4
Tags típicas
A tabela a seguir fornece uma visão geral das tags mais importantes para estruturar
informações, que também são usadas neste aplicativo de exemplo:
Tabela 1-1
Representação Função Exemplo

<! -… -> Comente <! - Este é um
Comente! ->
<a href= Budap… Budap>… </a> Ligação
<b>… </b> Negrito <b> Este texto é

negrito </b>.
<body>… </body> O conteúdo é exibido no navegador
da web
<div>… </div> Agrupamento de outros elementos
<form>… </form> Define um formulário
<h1>… </h1> Título de texto

<head>… </head> Área principal de um arquivo HTML
<html>… </html> Tag de página da web fundamental
<iframe>… </iframe> Define uma janela embutida

<img src = “…“> Integração de uma imagem
<input> Cria um elemento de formulário
<link> Define uma relação lógica com outros

arquivos
<meta> Define metadados

<p>… </p> Parágrafo de texto
<script>… </script> Define uma área para scripts (por

exemplo, JavaScript)
<style>… </style> Domínio de definição para formatação de

folha de estilo
<table>… </table> Mesa

Cria uma tabela em combinação
com<tr> e <td>
<td>… </td> Coluna da tabela
<th>… </th> Cabeça de mesa
<tr>… </tr> Linha da tabela

ID de entrada: 68011496, V1.0, 02/2014 5
1.1.2 Usando formulários
Para interagir com o aplicativo, use formulários em HTML.

Por exemplo, você pode preencher os campos de entrada em um formulário e enviar o formulário
clicando em um botão. Isso envia o conteúdo do formulário para o servidor da web.
Com o método "POST", o conteúdo do formulário é transferido do navegador da web para

o servidor da web com uma solicitação POST especial.
Observação Não use os formulários em páginas que são atualizadas automaticamente. Suas entradas
serão substituídas quando atualizadas.
1.1.3 Noções básicas sobre folhas de estilo em cascata (CSS)
CCS é uma linguagem de formatação para elementos HTML. Com a ajuda de folhas de estilo, por
exemplo, fonte, tamanho da fonte, cores, borda, altura, largura, etc. são especificados para os
elementos HTML.
Você pode definir formatos centrais para todos, por exemplo, títulos de primeira ordem, células de tabela, etc.
Os formatos CSS têm a seguinte

estrutura:Seletor {propriedade: valor}
Um seletor pode conter várias declarações (propriedade: valor).
Propriedades CSS típicas

A tabela a seguir fornece uma visão geral das propriedades mais importantes para a
formatação de elementos HTML que também são usados neste aplicativo de exemplo:
Tabela 1-2
Propriedade CSS Função Exemplos de valores
posição Tipo de posição estático, relativo,

absoluto, fixo
principal Posição inicial da parte superior 10px, 2%
deixou Posição inicial da esquerda
fundo Posição inicial da parte inferior
direito Posição inicial da direita
largura Largura 100px, 20%

altura Altura
direção Direção de escrita ltr, rtl
z-index Posição da camada para sobreposição 1, 2
família de fontes Fonte Arial, Helvetica
estilo de fonte Estilo de fonte itálico, oblíquo, normal
tamanho da fonte Tamanho da fonte 20px, 100%, pequeno,
médio Grande
espessura da fonte Peso da fonte / tipo de fonte negrito, normal, mais forte,
mais leve, 100 a 900

ID de entrada: 68011496, V1.0, 02/2014 6
Propriedade CSS Função Exemplos de valores
decoração de texto Decoração de texto sublinhar, piscar, nenhum

transformação de texto Transformação de texto minúsculas letras maiúsculas
cor Cor do texto rgb (51,102,170), #FFFFFF
alinhamento vertical: Alinhamento vertical topo, meio, fundo
alinhamento de texto Alinhamento horizontal esquerda, centro, direita,
justificar
margem Margem (geral) 10px, 5%
margem superior Margem superior
margem direita Margem certa

margem inferior Margem inferior
margem esquerda Margem esquerda
preenchimento Preenchimento geral 10px, 5%

tampo de enchimento Top de acolchoamento
padding-right Preenchimento certo
acolchoamento inferior Fundo acolchoado

padding-left Preenchimento esquerdo
fronteira [-top, -direito, - Fronteira geral 2px branco sólido

inferior esquerdo]
fronteira [-top, -direito, - Espessura da borda 2px, 1%, fino, médio, espesso
inferior esquerdo]
fronteira [-top, -direito, - Cor da borda # FFFF00, branco
inferior esquerdo]
fronteira [-top, -direito, - Tipo de borda nenhum, escondido, pontilhado,
inferior esquerdo] sólido, tracejado, duplo
colapso da fronteira Modelo de borda separar, colapso
fundo Cor de fundo e cor de fundo Image.png sem repetição
cor de fundo da imagem rgb (51,102,170), #FFFFFF
imagem de fundo Imagem de fundo Image.png
fundo de repetição Efeito de repetição repetir, não repetir,
repeat-x, repeat-y
anexo de fundo Efeito de marca d'água scroll, fixed
posição de fundo Posição de fundo 10px 10px, superior, inferior,
central, esquerda, direita
tipo de estilo de lista Tipo de estilo de lista nenhum, quadrado, círculo,
disco
células vazias Exibição de células vazias aparecer esconder

ID de entrada: 68011496, V1.0, 02/2014 7
Integração de Cascading Style Sheets (CSS) em HTML

Existem várias maneiras de integrar folhas de estilo em um arquivo HTML:
• dentro de um elemento HTML
• entre o <estilo> e </estilo> Tag

• em um arquivo CSS externo
Defina as folhas de estilo em um arquivo CSS separado se quiser usar formatos uniformes em
vários arquivos HTML. Este arquivo CSS é simplesmente integrado ao arquivo HTML. A sintaxe é a
seguinte:
<link rel = "stylesheet" type = "text / css" href = "<Formate> .css">
As folhas de estilo definidas são endereçadas com o Eu iria e classe atributos das tags
HTML. CSS fornece opções de formatação extensas e a visão geral em arquivo HTML é
mantida.
1.1.4 Princípios de JavaScript
JavaScript permite avaliar as interações do usuário e alterar, recarregar ou empacotar

conteúdos; portanto, ele expande as possibilidades de HTML / CSS.
Integração de JavaScript em HTML

Existem várias maneiras de integrar comandos JavaScript em um arquivo HTML:
• entre o <script> e </script> Tag

• para referências
• como parâmetro de uma tag HTML
• em um arquivo JS externo
Defina o código JavaScript em um arquivo separado se quiser usar as mesmas funções em vários
arquivos HTML. Como resultado, você só precisa inserir o código uma vez e pode fazer
referência a ele em vários arquivos HTML.
A sintaxe é a seguinte:
<script src = "<Script> .js" type = "text / javascript"> </script>

ID de entrada: 68011496, V1.0, 02/2014 8
1.1.5 Atualização automática da página da web
Duração da velocidade de carregamento da página
O tempo de atualização de uma página da web depende do conteúdo da página. As partes

estatísticas e as partes dinâmicas (variáveis) devem ser atualizadas.
Tempo de transmissão variável para CPU 1516-3 PN / DP

O tempo de transmissão interna entre a CPU e o servidor web integrado depende do
número de variáveis a serem transferidas. O tamanho das variáveis é virtualmente
irrelevante. A taxa de transmissão pode ser aumentada por uma carga de comunicação
mais alta às custas do tempo de ciclo do programa.
Você pode encontrar uma visão geral do tempo de transmissão na tabela abaixo, dependendo do
número de variáveis e da carga de comunicação configurada:
Tabela 1-3
Número de variáveis Carga de comunicação Tempo de atualização
[%] [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
Observação Exclua as variáveis de suas páginas HTML que não são usadas para aumentar a
taxa de transmissão. Comentar variáveis não é suficiente.
Opções
A configuração para “atualização automática” nas propriedades do PLC, só é válida para páginas da
web padrão e não para páginas da web definidas pelo usuário.
Em princípio, o HTML é estático e não responde a modificações do conteúdo.

Portanto, se os valores mudam no programa S7, é útil ter os valores alterados
exibidos no navegador da web.
Existem várias maneiras de atualizar a exibição da página da web:
• Atualização manual com <F5>
• Atualização automática com uma meta data no cabeçalho do arquivo HTML
• Atualização automática com JavaScript

Para a escrita de variáveis na CPU, uma página HTML separada sem função de atualização
automática deve ser criada. Isso evita que as entradas que ainda não foram concluídas sejam
sobrescritas quando a página for atualizada automaticamente.

ID de entrada: 68011496, V1.0, 02/2014 9
Atualização manual
Pressione <F5> (Internet Explorer: "Exibir> Atualizar") para atualizar a exibição no
navegador da web.
Atualizando com HTML

Com a seguinte linha de código no cabeçalho do arquivo HTML, a exibição no navegador da
web é atualizada ciclicamente:
<meta http-equiv = "atualizar" content = "10; URL = Exemplo.html">
O ciclo de atualização é inserido em segundos. Com "conteúdo = "10;", o ciclo de atualização é de

10 segundos. O ciclo de atualização real depende da quantidade de dados da página.
Entre na página da web a ser atualizada por meio de "URL = ". No exemplo do aplicativo, é
"Overview.html".
Atualizando com JavaScript

No corpo do arquivo HTML, o seguinte JavaScript atualiza a exibição no navegador
da web a cada 10 segundos:
<script type = "text / javascript"> setInterval

("document.location.reload ()", 10000); </script>

ID de entrada: 68011496, V1.0, 02/2014 10
1,2 Princípios de páginas da web padrão
Requisitos
No PASSO 7, as seguintes configurações são necessárias nas propriedades do PLC:
• O servidor web deve estar ativado.

• Se você precisar de acesso seguro às páginas da web padrão, marque a caixa de seleção
"Permitir acesso apenas com HTTPS".
• A atualização automática das páginas da web padrão está ativada. O intervalo

de atualização é predefinido para 10 se pode ficar na faixa de 1 a 999.
Acesso via HTTP ou HTTPS

Com o URL "http: //ww.xx.yy.zz" ou "https: //ww.xx.yy.zz", você obtém acesso às
páginas da web padrão. "ww.xx.yy.zz" corresponde ao endereço IP da CPU S7-1500.
HTTPS é usado para a criptografia e autenticação da comunicação entre o navegador e o

servidor web. Quando a caixa de seleção "Permitir acesso apenas com HTTPS" está
habilitada, a chamada das páginas da web da CPU S7-1500 só é possível via HTTPS.
Conecte-se
O usuário com o nome "Qualquer pessoa" é a configuração padrão na lista de usuários. Este
usuário tem direitos de acesso mínimos (acesso de leitura à introdução e página inicial). Os
direitos de acesso do usuário “Todos” podem ser estendidos. O usuário “Todos” foi definido
sem senha.
Para usar todas as funcionalidades das páginas da web, você precisa estar logado. Faça login
com um nome de usuário e senha definidos na configuração da web do STEP 7. Em seguida,
você pode acessar as páginas da web habilitadas para este usuário com o apropriado
direitos de acesso.
Os campos de entrada para login podem ser encontrados no canto superior esquerdo de cada página da web
padrão.
Figura 1-1 Janela de login

ID de entrada: 68011496, V1.0, 02/2014 11
Páginas da web padrão do SIMATIC S7-1500

O servidor web do S7-1500 já oferece muitas informações sobre o respectivo CPU por meio
de páginas da web padrão integradas. Essas páginas da web padrão são listadas
individualmente na tabela:
Tabela 1-4
Nome Contente
Introdução
Página introdutória para as páginas da web padrão
Página inicial A página inicial oferece uma visão geral das informações gerais da
CPU, o nome da CPU, o tipo da CPU e informações básicas sobre o
estado operacional atual.
Identificação Exibição das informações de identificação estáticas, como número de série,

pedido e versão
Buffer de diagnóstico Exibição do conteúdo do buffer de diagnóstico com as entradas mais recentes primeiro
Módulo Exibição simbólica do status de um módulo com comentários

em formação
Mensagens Exibição do conteúdo do buffer de mensagem

Comunicação Visualização das informações nas interfaces PROFINET da UCP;

exibição da demanda de recursos da conexão
Topologia Exibição da configuração topológica e status dos dispositivos PROFINET do

sistema PROFINET IO em um gráfico e tabela
Páginas do usuário Nas “Páginas do usuário” do servidor web, você pode carregar as páginas
HTML criadas para ler os dados do sistema de destino.
Navegador de arquivos O navegador de arquivos lista todos os arquivos de dados e diretórios existentes no
cartão de memória SIMATIC. Os arquivos podem ser baixados, excluídos, renomeados
ou carregados. Os diretórios podem ser recriados, excluídos ou renomeados.
Uma descrição detalhada da configuração das páginas da web padrão está disponível noManual
de função do servidor Web S7-1500; não é assunto deste documento de aplicação.

ID de entrada: 68011496, V1.0, 02/2014 12
1,3 Princípios de páginas da web definidas pelo usuário
Os capítulos a seguir fornecem conhecimento básico de páginas da web definidas pelo usuário
em relação ao aplicativo.
Informações relacionadas ao contexto podem ser encontradas na ajuda online do

SIMATIC STEP 7 V12 e, entre outras, na instrução “WWW” (SFC 99).
Vantagens
A criação de uma página da web definida pelo usuário é vantajosa se nenhum sistema HMI
permanente for necessário, mas informações de diagnóstico e visualizações são ocasionalmente
necessárias. Como as tecnologias padrão da web são usadas, nenhum hardware e software de
visualização adicional é necessário.
Uma solução com AWP é razoável para aplicações simples e a página da web pode ser
projetada individualmente de acordo com seus requisitos.
1.3.1 Criação de páginas da web definidas pelo usuário
Figura 1-2 Visão geral da criação de páginas da web definidas pelo usuário
Cliente com navegador
-
PROFINET
Solicitar
página da web
Industrial
Ethernet
SIMATIC STEP 7
V12 -
Blocos CPU 1516-3 PN / DP como
- OB1 servidor web
SIMATIC STEP 7 LIGUE “WWW“ -
V12 -…
Editor HTML DB333 / 334
- Símbolos
-
editor
- Arquivo HTML
imagens

ID de entrada: 68011496, V1.0, 02/2014 13
Procedimento
Tabela 1-5
Não. Instrução
1 Crie o arquivo HTML para a CPU com um editor de HTML. Todo o aplicativo da web
consiste em arquivos de origem individuais, por exemplo, * .html, * .png, * .js,
*. css, etc. Para poder acessar as variáveis da CPU, uma sintaxe de comando
correspondente (comandos AWP) é fornecida.
2 Gere blocos de dados (banco de dados de controle da web e bancos de dados de fragmento) com o STEP 7 a partir
dos arquivos de origem. Os números do banco de dados podem ser configurados livremente (padrão: DB 333 e de
DB334). Os bancos de dados são armazenados em “Blocos de programa> Blocos de sistema> Servidor Web” na
navegação do projeto. Esses blocos de dados consistem em um bloco de dados de controle que controla a exibição
das páginas da web e um ou vários fragmentos de blocos de dados com as páginas da web compiladas.
3 Atribua um nome simbólico no STEP 7 às variáveis que deseja usar na página da

web.
4 Com o STEP 7, você cria um programa S7. Para a sincronização entre o programa do
usuário e o servidor web, mas também para a inicialização, você deve chamar a instrução
WWW (SFC 99) no programa do usuário.
5 Transfira todos os blocos para a CPU com o STEP 7.

6 Abra um navegador da web e digite o URL "http: //ww.xx.yy.zz" ou "https: //

ww.xx.yy.zz". "ww.xx.yy.zz" corresponde ao endereço IP da CPU S7-1500.
O navegador web solicita a página web da CPU via protocolo http; a CPU fornece a
página da web como servidor da web.
O acesso ao servidor web da CPU é possível independentemente do computador de

configuração; cada dispositivo de saída com um navegador da web integrado e acesso à
interface PN da CPU pode exibir a página da web.
Para obter acesso de gravação à página da web, você deve estar conectado.

ID de entrada: 68011496, V1.0, 02/2014 14
1.3.2 Blocos necessários para páginas da web definidas pelo usuário
WWW (SFC99)
Com a ajuda da instrução “WWW” (SFC99), a CPU interpreta os blocos de dados e
pode usá-los como páginas da web definidas pelo usuário.
Banco de dados de controle da Web e bancos de dados de fragmento
A base da página da web projetada por você é um arquivo HTML (ou vários arquivos HTML
conectados com imagens):
Para permitir que a CPU interprete o arquivo HTML, ele é armazenado em blocos de dados junto com
outros arquivos necessários. Use o PASSO 7 para este propósito:
O banco de dados de controle da web (padrão: DB333) contém o seguinte:
• Variáveis de status e controle da página da web
• Status de comunicação (por exemplo, se uma solicitação do navegador da web para o servidor
da web está pendente)
• Informação de erro
Além do banco de dados de controle da web, também existem “bancos de dados de fragmento”, começando por padrão com o
DB334. Esses bancos de dados contêm as páginas da web codificadas e os dados de mídia (por exemplo, imagens).
Todos os bancos de dados de controle da web estão localizados no arquivo “Blocos de programa / Blocos do
sistema / servidor da Web” da navegação do programa do STEP 7.
O tamanho das páginas da web definidas pelo usuário, portanto, também determina o tamanho do
programa do usuário. O tamanho do programa do usuário, os dados e a configuração são limitados
pela memória de carga disponível e pela memória principal da CPU.
Observação Se você precisar reduzir o espaço para suas páginas da web definidas pelo usuário, remova algumas
das imagens inseridas, quando aplicável.

ID de entrada: 68011496, V1.0, 02/2014 15
1,4 Exibindo variáveis da CPU na página da web

Uso típico de variáveis
No sopro da tabela, você pode encontrar uma visão geral para o uso de variáveis:
Tabela 1-6
Representação Função Exemplo Informa-

ção
: = "<Nome>" Exibir variável de CPU : = "TankLevelMinimum": Chapt. 1,4
<! - AWP_In_Variable Configuração para poder <! - AWP_In_Variable Chapt. 1,5

Nome = '"<Nome>"' -> escrever uma variável na CPU Nome = '"OpenValve"' ->
com um método "POST"
separado
<! - AWP_Enum_Ref Atribuição de <! - AWP_Enum_Ref Chapt. 1,6

Nome = '"<Nome>"' enumerações (textos) para o Nome = '"Alarme"'
Enum = "<Variable>" -> valor de uma variável Enum = "AlarmValue" ->
1.4.1 Requisitos
Para ser capaz de exibir variáveis da CPU na página web, o seguintepré-

requisitos Aplique:
Tabela 1-7
Programa S7 Arquivo HTML
• Cada variável deve receber um nome simbólico. A • Não é necessário declarar variáveis por meio de
variável só pode ser exibida na página da web por um comando AWP no arquivo HTML.
meio de nomes simbólicos.
• Uma chamada cíclica da instrução
“WWW” (SFC99) é necessária se as variáveis são
pré-processadas no programa S7.
• Para variáveis, os tipos de dados padrão, tipos de
dados PLC gerados pelo usuário e estruturas são
permitidos.

ID de entrada: 68011496, V1.0, 02/2014 16
1.4.2 Interação entre navegador da web e CPU
Figura 1-3 Interação entre o navegador da web e a CPU ao ler as variáveis
S7-CPU Navegador da web
- - - -
OB1 DB333 / DB334 Servidor web com Navegador da web
página da web
MW14 = 5 … … …
… Taxa de fluxo = 5 Taxa de fluxo = 5 5
Ligar “ WWW “
… … …
…
Memória de trabalho
…
MW14
…
-
Símbolos
…
Taxa de fluxo: MW14
Tabela 1-8
Não. Descrição
7 As variáveis que são exibidas ou escritas na página da web devem ter um nome simbólico. Uma variável
em um banco de dados, por exemplo, é acessada com "DB_name ".Variablen_name.
8 No programa S7, a instrução “WWW” (SFC99) é chamada.
9 Ao chamar a instrução “WWW” (SFC99), o banco de dados de controle da web (padrão: DB333) é inicializado.
10 O servidor web da CPU converte os dados com a ajuda das informações do banco de dados de controle
web (padrão: DB333) em um formato (= página web) que pode ser interpretado por um navegador web.
A página da web da CPU é chamada em um navegador da web através do endereço IP da CPU.
11 Com cada solicitação do navegador da web, a página da web é atualizada (manual ou automaticamente).
Informações sobre a atualização de uma página da web podem ser encontradas no capítulo1.1.5
Atualização automática da página da web.
Uma solicitação ao servidor web também pode ser criada com o método "Post" ao escrever uma
variável para a CPU. Depois de ter "enviado" a página da web, toda a página da web é atualizada.

ID de entrada: 68011496, V1.0, 02/2014 17
1.4.3 Procedimento
Programa S7:
No programa S-7, nenhuma programação é necessária.
Arquivo HTML:
Uma variável pode ser exibida em qualquer posição na página HTML. A sintaxe é a
seguinte:
: = "<Variable>":
Exemplo da variável "TankLevelMaximum":
<p>: = "TankLevelMaximum": </p>
A exibição da variável é realizada independentemente do tipo de dados. A atualização da

variável é descrita no capítulo1.1.5 Atualização automática da página da web.
1,5 Escrevendo variáveis na CPU com a ajuda da página

web
1.5.1 Requisitos
Para poder escrever variáveis na CPU por meio da página da web, os seguintes pré-
requisitos se aplicam:
Tabela 1-9
• Cada variável deve receber um nome simbólico. Uma • As variáveis devem ser declaradas por meio do
variável só pode ser endereçada por meio de nomes comando AWP (<! - AWP_In_Variable… -
simbólicos. > no arquivo HTML.
• A instrução “WWW” (SFC99) deve ser • As variáveis devem ser transferidas para a CPU (por
chamada ciclicamente. exemplo, método POST no arquivo HTML).
• Para variáveis, os tipos de dados padrão, tipos de
dados PLC gerados pelo usuário e estruturas são
permitidos.

ID de entrada: 68011496, V1.0, 02/2014 18
Figura 1-4 Interação entre o navegador da web e a CPU ao escrever variáveis
OB1 DB333 / DB334

- -
página da web Navegador da web
MW14 = 5 … …
Solicitar Taxa de fluxo = 10
… Taxa de fluxo = 10 Taxa de fluxo = 10
Ligar “WWW “
… …
…
Taxa de fluxo = 10
…
MW14
…
-
Símbolos
…
Taxa de fluxo: MW14
…
Tabela 1-10
Não. Descrição
1 Através da página web, o usuário altera a variável "Flowrate" para o valor "10".
2 O navegador da web relata uma solicitação (método "POST").
3 O programa S7 aceita a variável "Flowrate" alterada, a exibição no navegador da web é

atualizada e os novos valores são exibidos.

ID de entrada: 68011496, V1.0, 02/2014 19
1.5.3 Procedimento
Programa S7:
A instrução “WWW” (SFC99) deve ser chamada ciclicamente.
Arquivo HTML:
O comando AWP por meio do qual as variáveis podem ser escritas na CPU é o
seguinte:<! - AWP_In_Variable Name = '"Variable"' ->
Exemplo de como escrever a variável "Flowrate":<! -
AWP_In_Variable Name = '"Flowrate"' ->
Normalmente, o comando AWP está na primeira instrução no arquivo HTML em que a

variável é usada.
Transferindo as variáveis do navegador da web

Ao chamar o formulário, o método POST é selecionado para transferir os dados do navegador
da web para o servidor da web. O formulário consiste em duas unidades:
• Um campo para inserir o valor:

O campo é nomeado por meio de uma variável e designa a variável do comando AWP,
por exemplo
<! - AWP_In_Variable Name = '"Flowrate"' ->.
• Um botão com o qual a entrada do valor é confirmada. Os dados do
formulário são transferidos por meio de "enviar".
Exemplo:
Aparência na página da web:
Código:
<form method = "post" action = "" onsubmit = "return check ();">

<input type = "text" name = '"Flowrate"' size = "2"> <input type =
"submit" value = "Definir um novo Flowrate"> </form>

ID de entrada: 68011496, V1.0, 02/2014 20
1,6 Vinculando variáveis com textos no arquivo HTML
Em alguns casos, faz sentido em uma página da web gerar mensagens diretamente como um
texto e não como uma variável. Para este propósito, o STEP 7 fornece enumerações. Com uma
enumeração, você pode vincular valores a textos concretos. Esses textos podem ser criados em
um ou vários idiomas. Nosso aplicativo contém mensagens de texto em um único idioma.
1.6.1 Requisitos
Para enviar indicações como texto, os seguintes pré-requisitos se aplicam:
Tabela 1-11
• Cada variável deve receber um nome simbólico. Uma • Isto é não necessário declarar variáveis por meio de
variável só pode ser endereçada por meio de nomes um comando AWP no arquivo HTML, porque elas são
simbólicos. apenas lidas, mas não escritas.
• Uma chamada cíclica da instrução • Todos os arquivos dependentes do idioma incl. o arquivo
“WWW” (SFC99) é necessária se as variáveis são HTML deve ser armazenado no mesmo diretório.
pré-processadas no programa S7.
• Para variáveis, todos os tipos de dados numéricos são
aprovados.

ID de entrada: 68011496, V1.0, 02/2014 21
O gráfico a seguir ilustra a interação entre o navegador da web e a CPU:

Figura 1-5 Interação entre o navegador da web e a CPU ao converter variáveis em texto
- - - -
OB1 DB333 / DB334 página da web Navegador da web
Alarmvalue =
MW12 = 1 Alarme = 1 Alarme = 1
… ≙ Nível do tanque
Nível do tanque
1 = Nível do tanque abaixo
Ligue para “WWW“ abaixo
…
abaixo
mínimo! mínimo!
mínimo!
…
…
MW12
…
Símbolos
…
Alarme: MW12
…
Tabela 1-12
Não. Descrição
1 O programa S7 chama a instrução “WWW” (SFC99) e define o valor de MW12 ("Alarme") para "1".
2 Devido à chamada cíclica da instrução “WWW” (SFC99), a variável "Alarme" em DB333 / 334 também
é atualizada.
3 O servidor da web vincula o valor "Alarme" ao texto relacionado.
4 No navegador da web, o texto relacionado é gerado em vez do valor "Alarme".

ID de entrada: 68011496, V1.0, 02/2014 22
1.6.3 Procedimento
Criando ENUM TYPE

O comando AWP, por meio do qual os tipos ENUM são definidos, é:
<! - AWP_Enum_Def Name = "<Name des Enum Typs>" Values = '0: "<Text_1>",
1: "<Text_2>", ..., x: "<Text_x>"' ->
Exemplo para o tipo ENUM "AlarmValue":

<! - AWP_Enum_Def Name = "AlarmValue" Values = '0: "Tanque vazio!", 1: "Nível
do tanque abaixo do mínimo!", 2: "Nível do tanque entre o mínimo e o meio!", 3:
"Nível do tanque entre o meio e máximo! ", 4:" Nível do tanque acima do
máximo! ", 5:" Excesso do nível do tanque! "'->
Normalmente, o comando AWP está na primeira instrução no arquivo HTML em que a

variável é usada.
Atribuindo ENUM TYPE

A sintaxe para a exibição de texto em vez do valor é a seguinte, por exemplo, para a
variável "Alarme":
<! - AWP_Enum_Ref Name = '"Alarm"' Enum = "AlarmValue" ->: =

"Alarme":

ID de entrada: 68011496, V1.0, 02/2014 23
1,7 Criação de páginas HTML otimizadas para o tempo (opcional)
A criação de páginas HTML otimizadas para o tempo não é descrita nos manuais do
S7-1500. A ideia por trás da atualização via JavaScript é a de uma subpágina da web sendo
integrada à página da web definida pelo usuário. Isso é feito com o chamado “quadro
embutido” (iFrame). Para buscar novos valores do controlador, não a página da web
completa é recarregada, mas apenas a subpágina da web no quadro embutido. Isso tem a
vantagem de que apenas alguns dados precisam ser chamados pelo controlador. Se, por
exemplo, forem utilizadas imagens na página principal, elas não precisam ser solicitadas ao
controlador para cada atualização, o que acontece em ambos os outros mecanismos
introduzidos. A atualização via JavaScript, portanto, causa uma baixa transmissão de dados,
o que também pode ter um efeito positivo na carga da rede, bem como no tempo de ciclo
do controlador.
Figura 1-6 Variável de leitura / gravação
Update_DataOpti.html
Variável de leitura
DataOpti.html
Start_Stop_buttons.html
Variável de escrita

ID de entrada: 68011496, V1.0, 02/2014 24
Tabela 1-13
Não. Descrição
1 Há uma página HTML definida pelo usuário (abaixo chamada de página principal) a ser
exibida. Neste aplicativo, é a página HTML “DataOpti.html”. Não é atualizado.
2 Esta página principal não inclui variáveis. Todas as variáveis de controle a serem lidas ou
gravadas são compactadas em arquivos HTML adicionais (aqui “Update_DataOpti.html” e
“Start_Stop_buttons.html“), que por sua vez são incorporados como frames (iframe) na
página principal. Apenas os quadros individuais são atualizados.
3 O arquivo “Update_DataOpti.html” contém duas tabelas. Na segunda linha da primeira

tabela, o tempo de atualização é dado em milissegundos (por exemplo, 1000). A partir da
segunda linha da segunda tabela, a coluna da esquerda contém os comandos AWP da
variável a ser lida (por exemplo: = "Data_Buffer ".Data [1] .Data_Struct.TimeStamp :).A coluna
da direita contém os respectivos IDs (por exemplo TimeId1). Os IPs devem ser exclusivos. A
página principal “DataOpti.html” contém os IDs inseridos em vez dos comandos AWP da
variável a ser lida. Ou seja, para usar um elemento para a atualização, os atributos "ID"
devem ser inseridos e pré-atribuídos com o respectivo nome de ID (por exemploid =
"TimeId1"). O arquivo HTML separado
“Update_DataOpti.html” é incorporado como quadro (iframe, ver ponto 2) na página
principal “DataOpti.html”. A respectiva sintaxe é a seguinte:
<iframe src = "Update_DataOpti.html" style = "display: none;" />
O "Mostrar nenhum" A propriedade CSS, indicada para o quadro, impede sua exibição na página
principal.
4 As funções JavaScript (veja Figura 1-7 funções JavaScript) no arquivo “Update_DataOpti.html”

determina automaticamente o tamanho atual da segunda tabela. Os elementos HTML com
o ID são determinados na página principal. O código do programa JavaScript substitui todo
o conteúdo desse elemento HTML pelo conteúdo da coluna esquerda da segunda tabela.
Por fim, é definido um tempo de espera a partir do tempo definido na primeira tabela e a
atualização é então renovada.
5 Para variáveis de entrada (veja o capítulo 1.5 Escrevendo variáveis na CPU com a ajuda da página web)
os formulários são inseridos em arquivos HTML separados. Os arquivos HTML são incorporados como
quadros na página principal. Vários formulários podem ser escritos em um arquivo HTML.

ID de entrada: 68011496, V1.0, 02/2014 25
Figura 1-7 funções JavaScript

Observação O arquivo “Update_DataOpti.html” pode ser adaptado ao seu aplicativo com pouco
esforço. Você só precisa inserir sua variável com o respectivo ID na segunda tabela. Em
sua página principal, você substitui a variável pelo respectivo ID. Isso não requer
nenhuma mudança no JavaScript.
Mais informações sobre este tópico estão disponíveis nas seguintes perguntas frequentes:
Como as páginas da web definidas pelo usuário e as páginas da web padrão podem ser atualizadas automaticamente no
STEP 7 (Portal TIA)?

ID de entrada: 68011496, V1.0, 02/2014 26
1,8 Princípio funcional do arquivo HTML

O capítulo a seguir fornece uma explicação detalhada das seções individuais do arquivo
HTML. Para a criação das páginas HTML, apenas valores fixos são usados para a posição e
o tamanho dos elementos. Isso evita que os elementos se movam e se sobreponham
quando a janela do navegador fica menor.
1.8.1 Comandos AWP
Fundamentos
Os comandos AWP são inseridos como comentários HTML em arquivos HTML. Os comandos
AWP podem ser localizados em qualquer posição no arquivo HTML. No entanto, por razões de
clareza, é apropriado listar os comandos AWP centrais no início do arquivo HTML.
Figura 1-8 Comandos AWP

Explicações
Tabela 1-14
Código Explicação
<! - AWP_In_Variable Todas as variáveis transferidas para a CPU devem ser
Nome = '"Iniciar"' -> identificadas como AWP_In_Variable.
Observação: lembre-se de que as aspas estão
aninhadas. A variável é escrita entre aspas e
delimitada por uma vírgula invertida ('"…"').
<! - AWP_Enum_Def Os tipos ENUM são definidos com AWP_Enum_Def.

Name = "AlarmValue"
Valores = '0: "Tanque vazio!", 1:
"Nível do tanque abaixo
mínimo! ", 2:" Nível do tanque entre
mínimo e meio! ", 3:" Nível do tanque
entre meio e máximo! ", 4:" Nível do
tanque acima do máximo! ", 5:" Excesso
do nível do tanque! "'->
<! - AWP_Enum_Ref Os tipos ENUM são atribuídos a variáveis com

Nome = '"Alarme"' AWP_Enum_Ref.
Enum = "AlarmValue" -
>: = "Alarme":

ID de entrada: 68011496, V1.0, 02/2014 27
1.8.2 Informações sobre doctype e cabeçalho do arquivo HTML
Fundamentos
As informações a seguir devem estar contidas em cada arquivo HTML para que seja
compatível com HTML. A única exceção é o "<meta http-equiv = "atualizar"…> " tag: se
você não atualizar a página automaticamente e trabalhar com <F5>, poderá omitir
essa tag. O <link ...> e <script ...> tags também são opcionais.
Figura 1-9 Informações sobre doctype e cabeçalho do arquivo HTML

Explicações
Tabela 1-15
<! DOCTYPE HTML PUBLIC "- // Especificando o tipo de documento HTML: o
W3C // DTD HTML 4.01 tipo de documento é HTML na versão de
Transicional // PT "> idioma V4.01 na variante "transicional". O
código de idioma "EN" refere-se ao idioma
das tags, ou seja, inglês.
O tipo de documento sempre fica antes do "<
html> " marcação.
<html>… </html> Contém o conteúdo HTML.
<title> Site definido pelo usuário - Título da página da web que será exibido
Visão geral do aplicativo </title> posteriormente no cabeçalho do navegador da web.
<meta http-equiv = "Content- Idioma do conteúdo do arquivo

Language" content = "en">
<meta http-equiv = "Content-Type" content Com "content = "text / html", o tipo MIME é
= "text / html; charset = utf-8"> especificado, seguido pelo conjunto de caracteres
UTF-8 usado.
MIME significa Multipurpose Internet Mail
Extensions. O tipo MIME descreve o tipo dos
dados transferidos.

ID de entrada: 68011496, V1.0, 02/2014 28
<meta http-equiv = "atualizar" content = Metatata opcional: com este comando, a página da
"1; URL = Visão geral.html"> web é atualizada a cada segundo. Especialmente
para monitoramento de processos, é apropriado ter
a página da web
atualizado ciclicamente. Para páginas com campos
de entrada, a atualização cíclica pode causar
problemas.
Mais informações sobre a atualização da página da
web podem ser encontradas na Seção 1.1.5
Atualização automática da página da web.
<link rel = "folha de estilo" Via <link ...>, um arquivo CSS é referenciado, o qual
type = "text / css" contém todas as informações sobre o design óptico da
href = "Folha de estilo / siemens_Stylesh página da web, por exemplo, branco
eet.css"> cor de fundo, etc.
<script A área para scripts (por exemplo,

src = "Script / siemens_script.js" type = JavaScript) é definida entre <script ...> e</
"text / javascript"> script>. Anote as instruções dentro da área
</script> na linguagem do script ou integre um
arquivo separado com o seu script com
src.
<body>… </body> Contém o corpo do texto.


ID de entrada: 68011496, V1.0, 02/2014 29
1.8.3 Exibição de áreas
Fundamentos
Três áreas são usadas no arquivo HTML:

• Área do cabeçalho (cabeçalho)
• Barra de navegação (navi)
• Área de dados (página)
Explicações
A figura abaixo mostra as áreas no arquivo HTML:
Figura 1-10 Áreas do arquivo HTML
Copyright - Siemen

ID de entrada: 68011496, V1.0, 02/2014 30
A formatação das áreas é definida centralmente em um arquivo CSS separado:
Figura 1-11 Formatando as áreas no arquivo CSS

Policial
Tabela 1-16
# página { Os formatos CSS têm a seguinte estrutura:
POSIÇÃO: absoluta; Seletor {Propriedade: valor}
esquerda: 150px;
topo: 0; Em nosso exemplo, page é o seletor com
várias declarações (propriedade: valor):
altura: 800px;
largura: 920px;
Mais informações sobre a formatação de elementos
acolchoamento superior: 180px;
HTML podem ser encontradas no capítulo 1.1.3
padding-left: 30px; Noções básicas sobre folhas de estilo em cascata (CSS).
padding-right: 30px;
alinhamento de texto: esquerda;
cor da borda: branco;

estilo de borda: sólido;
largura da borda: 1px;
cor de fundo:
rgb (208,211,218);
colapso da fronteira: separado;
índice z: 1;
}

ID de entrada: 68011496, V1.0, 02/2014 31
1.8.4 Exibição de imagens
Fundamentos
Existem várias imagens usadas no arquivo HTML:

• Imagens estáticas
• Imagem de fundo
• Imagem com altura variável
• Imagem dinâmica que é alterada dependendo de um bit de status na CPU.
Explicações
Figura 1-12 Representação de imagens no arquivo HTML

Copyright - Siemens AG 2014 Al
Tabela 1-17
<img src = "Images / SIEMENS_Logo.PNG"> As imagens são integradas por meio do "img " marcação.
background = "Images \ TankExample.PNG" "fundo" especifica a imagem de fundo com

style = "background-repeat: no-repeat; suas propriedades.
background-position: bottom left"
<img src = "Imagens \ blue.png" alt Para imagens com altura variável, como, por exemplo,
= "Nível" indicador de nível, um "TankLevelScal "variável é
largura = "56px" especificada com ":" e uma unidade de medida, por exemplo
height = ": = TankLevelScal: px"> "px " em vez de um valor para "altura".
<img Esta imagem depende da variável "StatusValveCPU".

src = "Imagens \ Valve: =" StatusValveCPU ":. png" Esta variável pode adotar os estados "0" e "1".
nome = "Válvula" As imagens armazenadas têm a designação Valve0.png

"StatusValveCPU = 0" (válvula fechada) e Valve1.png (válvula aberta).
id = "StatusValveCPU"
alt = "Válvula">
Quando a válvula está fechada, "StatusValveCPU" tem o
valor 0: a chamada de imagem consiste em:
"Valve" + "0" + ".png" = Valve0.png
Com "alt ", você especifica um texto que será exibido se a
imagem não puder ser chamada pela página da web.

ID de entrada: 68011496, V1.0, 02/2014 32
1.8.5 Criação de uma tabela com textos
Fundamentos
Recomenda-se o uso de uma tabela para evitar que o conteúdo da página web seja
movido, dependendo do tamanho da janela.
Claro, você também pode definir uma tabela centralmente para sua página da web via
CSS (Cascading Style Sheet).
Explicações
Na figura a seguir, apenas o cabeçalho e a primeira e a última linha da tabela são
mostrados por razões de clareza.
Figura 1-13 Representação da tabela no arquivo HTML

Copyright - Siem
Tabela 1-18
<table border = "1"> A largura do traço (fronteira) da tabela é "1". Crie
… uma mesa sem moldura (mesa invisível) com
</ mesa) fronteira = "0".
<tr> <tr> representa a linha da tabela.

<td O conteúdo de uma célula está entre <td> (dados da
class = "static_field_headline_small"> Dados </ tabela) e </td>.
td>
Os formatos, por exemplo
<td "static_field_headline_small” dos dados da tabela
class = "static_field_headline_left"> Tempo </td>
são definidos no arquivo CSS.
"classe =“ <nome> “" atribui os formatos do arquivo CSS
<td aos elementos do arquivo HTML. Isso atinge uma
class = "static_field_headline_left"> Valor </td> aparência uniforme para todos, por exemplo, tabelas.
</tr>

ID de entrada: 68011496, V1.0, 02/2014 33
1.8.6 Saída de variáveis de CPU
Explicações
As variáveis da CPU são sempre exibidas por meio do nome do símbolo:
Figura 1-14 Representação de tags no arquivo HTML
Ao invés de "TankLevel", sempre o valor atual da CPU é enviado para a página da

web.
1.8.7 Envio de textos por meio de enumerações
Explicações
Por meio de enumerações, os textos podem ser atribuídos aos valores individuais de uma variável da CPU.
Figura 1-15 Representação de enumerações no arquivo HTML
Em vez dos valores individuais de "Alarme", os textos previamente atribuídos em HTML são
produzidos. Esses textos são armazenados como tipo enum "AlarmValue" e são transferidos para a
página da web via DB333.

ID de entrada: 68011496, V1.0, 02/2014 34
1.8.8 Configurando variáveis na CPU com valor e botão
Fundamentos
Para poder transferir variáveis para a CPU através da página web, é necessário trabalhar
com formulários e, por exemplo, o método "POST".
Explicações
Figura 1-16 Representação de entradas no arquivo HTML
Tabela 1-19
<form method = "post" action = "" Chamando o formulário com o publicar método.
onsubmit = "return check ();"> Debaixoaçao, nenhum detalhe é necessário, pois
<input type = "text" id = "wert1" name = comaçao a página atual é chamada por padrão.
'"Flowrate"' size = "2" style = "height: 45px; width: Com a chamada onsubmit manipulador de eventos, o
50px; font-size: 21px; text-align: center; padding:
Verifica() função é executada que é definida no
8px ; ">
arquivo JS. Com um clique emenviar, a função verifica
se a entrada está no intervalo de 1 a 10. Se esta
<input type = "enviar"
condição for atendida, o Verifica() a função relata
valor = "Definir uma nova taxa de fluxo" style =
TRUE, caso contrário, o valor de retorno é FALSE e
"altura: 45px; largura: 200px">
uma mensagem adicional é gerada.
</form>
Com tipo de entrada = "texto", um campo de entrada está
vinculado, cujo conteúdo é enviado ao servidor web da CPU com
enviar (somente se verificar () = VERDADEIRO). enviaré controlado
por meio de um botão denominado "Definir uma nova taxa de
fluxo".

ID de entrada: 68011496, V1.0, 02/2014 35
1.8.9 Configurando variáveis na CPU via botão apenas
Fundamentos
Para atribuir às variáveis na CPU um valor predefinido, é necessário trabalhar com um

formulário, o método "POST" e um valor oculto.
Explicações
Figura 1-17 Representação de botões no arquivo HTML
Copyright - Siemens AG 2014 Todos os direitos re
Tabela 1-20
<form method = "post" action = ""> Chamando o formulário com o publicar método.
<input type = "enviar" Debaixoaçao, nenhum detalhe é necessário, pois
value = "OpenValve"> comaçao a página atual é chamada por padrão.
<input type = "oculto" Com tipo de entrada = "oculto", a variável
name = '"OpenValve"' size = "20px" value "OpenValve" recebe o valor 1, e a variável
= "1"> "CloseValve" o valor 0.
<input type = "oculto" Com enviar, os valores das variáveis são enviados
name = '"CloseValve"' size = "20px" value = para o servidor web da UCP.
"0">
</form>
<form method = "post" action = ""> Ação reversa para a linha acima: chamando o
<input type = "enviar" formulário para atribuir o valor 1 a "CloseValve" e o
value = "CloseValve"> valor 0 a "OpenValve".
<input type = "oculto"
name = '"CloseValve"' size = "20px" value =
"1">
<input type = "oculto"
name = '"OpenValve"' size = "20px" value
= "0">
</form>

ID de entrada: 68011496, V1.0, 02/2014 36
1.8.10 Fazer logon diretamente em páginas da web definidas pelo usuário
Fundamentos
Para escrever variáveis na CPU, geralmente você deve estar logado no servidor web da CPU. O
login não é necessário se você deseja conceder direitos de gravação às páginas definidas pelo
usuário para o usuário “Todos”. No entanto, isso não pode ser recomendado do ponto de vista
da segurança da planta. A janela de login está disponível no canto superior esquerdo das
páginas da web padrão. A janela de login foi integrada nas páginas da web definidas pelo
usuário, então você não precisa mudar para as páginas da web padrão para o login.
Explicações
Figura 1-18 Login em páginas da web definidas pelo usuário no arquivo HTML

ID de entrada: 68011496, V1.0, 02/2014 37
Tabela 1-21
<body onload = "loginCheck ()"> Para cada atualização da página da web, a

função JavaScript loginCheck () é executado
automaticamente.
<iframe id = "WebserverIFrame" name = Na página definida pelo usuário, um iframe é

"WebserverIFrameName" src = "../../ definido que contém a página da web padrão.
Portal / Portal.mwsl" style = "display: oiframe torna-se invisível com ostyle = "display:
none"> </iframe> none" atributo.
<div id = "logForm" class = "Login_Area" colspan class = "Login_Area" atribui os formatos do

= "2"> </div> arquivo CSS para a janela de login com
id = "logForm". O ID é definido no
loginCheck () função.
função loginCheck () A função JavaScript loginCheck () pesquisa no iFrame na

página da web padrão se o formulário para efetuar login
ou logout existe. O respectivo formulário de login ou
logout é adicionado, respectivamente, na página da web
definida pelo usuário.
Observação Mais informações sobre este tópico estão disponíveis nas seguintes perguntas frequentes:Como você
pode acessar as páginas da web definidas pelo usuário do S7-1200 diretamente?

ID de entrada: 68011496, V1.0, 02/2014 38
2 Glossário
2 Glossário
AWP
Programação da Web de automação
Comando AWP
Um comando AWP é entendido como a sintaxe de comando especial com a qual os
dados são trocados entre a CPU e o arquivo HTML.
CSS
CSS (Cascading Style Sheets) define como uma seção ou conteúdo marcado em HTML
é exibido.
Firewall
O firewall é usado para restringir o acesso à rede com base no remetente ou endereço de
destino e serviços usados. Para o tráfego de dados tratado via firewall, ele decide com
base em regras fixas se determinados pacotes de rede são transportados ou não. Dessa
forma, o firewall tenta impedir o acesso não autorizado à rede.
A função de um firewall não é detectar ataques. Implementa exclusivamente as regras
para a comunicação da rede.
Arquivo HTML
Os arquivos HTML são a base da World Wide Web e são exibidos por um navegador
da web.
Neste documento, nos referimos ao arquivo HTML quando você está editando a página da web, por exemplo,
com o Frontpage. No navegador da web, nos referimos a esta página como página da web.
HTTP
O protocolo de transferência de hipertexto (HTTP) é um protocolo para transferência de dados em
uma rede.
HTTPS
O Hypertext Transfer Protocol Secure é um protocolo de comunicação usado para a
troca de dados confidenciais.
Tipo MIME
Com a ajuda do padrão Multipurpose Internet Mail Extensions (MIME), o navegador da web é
informado - por exemplo, durante uma transferência HTTP - quais dados o servidor da web envia,
por exemplo, se é um texto não criptografado, um documento HTML ou uma imagem PNG.

ID de entrada: 68011496, V1.0, 02/2014 39
2 Glossário
UTF-8
UTF-8 (Formato de Transformação UCS de 8 bits) é a codificação mais amplamente usada para
caracteres Unicode.
Cada caractere Unicode é atribuído a uma cadeia de bytes especialmente codificada de

comprimento variável. UTF-8 suporta até quatro bytes nos quais todos os caracteres Unicode
podem ser exibidos.
Navegador da web
Os navegadores da web são programas de visualização de páginas da web e podem se comunicar com
servidores da web.
Os navegadores da web típicos são:
• Microsoft Internet Explorer

• Mozilla Firefox
página da web
Veja o arquivo HTML.
servidor web
Um servidor da web armazena páginas da web e as disponibiliza. Um servidor da web é um programa

de software que transfere documentos com a ajuda de protocolos de transferência padronizados (http,
HTTPS) para um navegador da web.
Um servidor web que pode ser expandido com páginas web definidas pelo usuário está integrado em
uma CPU com interface PROFINET.

ID de entrada: 68011496, V1.0, 02/2014 40
3 Literatura Relacionada
3 Literatura relacionada
3,1 Bibliografia
Esta tabela oferece uma variedade de literatura pertinente.
Tabela 3-1
Tema Título
/1/ HTML HTML und CSS, Praxisrezepte für Einsteiger

[HTML e CSS, receitas práticas para iniciantes]
Robert R. Agular
mitp
ISBN 978-3-8266-1779-9
/2/ HTML Handbuch HTML

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

[JavaScript e Ajax, O manual abrangente]
Christian Wenz
Galileo Press
ISBN 978-3-8362-1128-4
3,2 Especificações do link da Internet
Esta tabela contém uma seleção de links para mais informações.

Tabela 3-2
Tema Título
/1/ Link para isto http://support.automation.siemens.com/WW/view/de/68011496

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

Suporte online
/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/en/59193560

função de servidor
manual
/5/ S7-1500 http://support.automation.siemens.com/WW/view/en/59191792
Manual do Sistema
/6/ Programação http://support.automation.siemens.com/WW/view/en/81318674

diretriz para
S7-1200 / 1500

ID de entrada: 68011496, V1.0, 02/2014 41
4 História
4 História
Tabela 4-1
Versão Encontro Modificações

V1.0 02/2014 Primeira versão

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

HTML Basics For Simatic Cpus PORTUGUES

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML Basics For Simatic Cpus PORTUGUES

Enviado por

Direitos autorais:

Formatos disponíveis

Traduzido do Inglês para o Português - www.onlinedoctranslator.

Descrição do aplicativo - 02/2014

Noções básicas de criação de HTMLs

Não aceitamos qualquer responsabilidade pelas informações contidas neste documento.

de uma condição que está na origem do contrato (“wesentliche Vertragspflichten”).

Qualquer forma de duplicação ou distribuição desses exemplos de aplicação ou trechos deste

Noções básicas de criação de HTMLs

1 Noções básicas para criar páginas da Web ............................................. .......................... 4

1,1 Princípios gerais de páginas da web ............................................. ............. 4

1.6.3 Procedimento ................................................. .......................................... 23

2 Glossário ................................................. .................................................. ........ 39

3,1 Bibliografia................................................. ....................................... 41

4 História................................................. .................................................. ............ 42

Noções básicas de criação de HTMLs

1 Noções básicas para criar páginas da web

1,1 Princípios gerais de páginas da web

Se você já tem conhecimento básico de HTML, pode pular este capítulo e

1.1.1 Princípios de HTML

usa loops e variáveis e, portanto, não é uma linguagem de programação.

• Corpo HTML para informações que são exibidas no navegador da web.

Elementos HTML (tags)

Exemplo: parágrafos de texto são marcados por <p>

Noções básicas de criação de HTMLs

Representação Função Exemplo

<b>… </b> Negrito <b> Este texto é

<form>… </form> Define um formulário

<h1>… </h1> Título de texto

<html>… </html> Tag de página da web fundamental

<iframe>… </iframe> Define uma janela embutida

<input> Cria um elemento de formulário

<link> Define uma relação lógica com outros

<meta> Define metadados

<script>… </script> Define uma área para scripts (por

<style>… </style> Domínio de definição para formatação de

<table>… </table> Mesa

<th>… </th> Cabeça de mesa

<tr>… </tr> Linha da tabela

Noções básicas de criação de HTMLs

1.1.2 Usando formulários

Para interagir com o aplicativo, use formulários em HTML.

Com o método "POST", o conteúdo do formulário é transferido do navegador da web para

1.1.3 Noções básicas sobre folhas de estilo em cascata (CSS)

Os formatos CSS têm a seguinte

estrutura:Seletor {propriedade: valor}

Um seletor pode conter várias declarações (propriedade: valor).

Propriedades CSS típicas

Propriedade CSS Função Exemplos de valores

posição Tipo de posição estático, relativo,

largura Largura 100px, 20%

Noções básicas de criação de HTMLs

Propriedade CSS Função Exemplos de valores

decoração de texto Decoração de texto sublinhar, piscar, nenhum

margem direita Margem certa

preenchimento Preenchimento geral 10px, 5%

padding-right Preenchimento certo

acolchoamento inferior Fundo acolchoado

fronteira [-top, -direito, - Fronteira geral 2px branco sólido

Noções básicas de criação de HTMLs

Integração de Cascading Style Sheets (CSS) em HTML

• dentro de um elemento HTML

• entre o <estilo> e </estilo> Tag

1.1.4 Princípios de JavaScript

JavaScript permite avaliar as interações do usuário e alterar, recarregar ou empacotar