ProgramaciónSiemens

Formación sobre automatismos PLC Siemens a tu ritmo y sin horarios

Cómo crear páginas de usuario para un S7-1200: conocimientos previos

Cómo crear páginas de usuario para un S7-1200: conocimientos previos

por · 9 comentarios

Para crear páginas de usuario en un autómata Siemens S7-1200 vas a necesitar una serie de conocimientos mínimos en la creación de páginas web.

En la entrada de hoy vamos a ver los conceptos básicos de creación de páginas disponibles en los PLC Siemens.

¿Qué se usa para crear las páginas de usuario?

Dentro de las herramientas que podrás usar están:

  • HTML
  • CSS
  • JAVASCRIPT

A decir verdad, en la creación de páginas web potentes hay lenguajes de mucha mayor potencia como pueden ser PHP, Asp.net, Python, Rubi, entre otros.

Digamos que las web que podemos crear en nuestro PLC son clásicas (por no llamarlo viejunas).

El hecho de que no podamos crear webs con lenguajes potentes como PHP no quiere decir que no vayamos poder realizar páginas muy dignas y funcionales, por lo que no te me vengas abajo.

Ahora bien, repasemos cada uno de los puntos que hemos listado más arriba.

Uso de HTML en las páginas de usuario

Si tomamos como referencia lo que nos cuenta Wikipedia:

HTML, sigla en inglés de HyperText Markup Language (lenguaje de marcas de hipertexto), hace referencia al lenguaje de marcado para la elaboración de páginas web.

Esta frase tan chula que seguramente te ha dejado exáctamente igual, lo que viene a decir es que es un lenguaje en el que cada elemento está definido mediante unas etiquetas que indican qué es y qué queremos que haga.

Así por ejemplo, si queremos definir un párrafo de texto, etiquetaremos este texto que forma el párrafo entre dos etiquetas o tags:

  • <p> Indicando que arranca el texto del párrafo
  • </p> Indicando que termina el texto del párrafo.

Realmente todas las páginas web independientemente del lenguaje usado, están traducidas a HTML.

La explicación que te voy a dar, es de andar por casa, pero para que se entienda el concepto, creo que puede valer.

Una página web puede estar programada en PHP (por ejemplo programacionsiemens.com). Si vieras el código serían cientos de líneas sin un solo meta HTML.

Lo que hace el servidor cuando se realiza la petición de llamada, es ejecutar ese código.

Como resultado, el servidor lo que construye es la página web con los metas HTML que es enviada al navegador cliente.

Luego, el navegador lo que hace es interpretar estas etiquetas para mostrar la web que ves cuando navegas por internet.

La estructura básica de una pagina web en HTML

La estructura mínima que suele tener una web es la que sigue:

<!DOCTYPE HTML> 
<html>
  <head>
    <title>Ejemplo1</title>
  </head>
  <body>
    <p>Párrafo de ejemplo</p>
  </body>
</html>

Como ves, la estructura con etiquetas de apertura y cierre es muy marcado si bien hay también etiquetas que no llevan apertura y cierre.

Dónde encontrar información

Como entenderás no puedo realizar una explicación de cómo usar el HTML para crear las páginas de usuario ya que son muchas etiquetas y sería muy largo de explicar.

Bien es cierto que no vamos a usar todas las etiquetas en nuestras páginas de usuario, pero sí unas cuantas que deberás conocer.

Para que te formes mínimamente en HTML, puedo darte algunos enlaces al respecto:

Hay más sitios y si googleas un poco, seguro que encuentras sitios chulos que te invito a que compartas con el resto de lectores.

Uso de CSS en las páginas de usuario

Si nos vamos nuevamente a la definición de la wikipedia:

Hojas de estilo en cascada (o CSS, siglas en inglés de Cascading Stylesheets) es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado2 .

Vamos, que los archivos CSS son archivos donde se definen los estilos de la web. Es decir, cosas como qué fuente tipográfica vas a usar, el tamaño de la letra, colores, etc.

¿Cómo funciona?

CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más elementos. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento HTML o XML. La regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne.

h1 {color: red;}

h1 es el selector

{color: red;} es la declaración

Con este pequeño ejemplo, lo que definimos es que el color de la letra de los títulos enmarcados con H1 sean de color rojo.

Más información

Este pequeño ejemplo lo he sacado de w3c.es.

Échale un vistazo porque es una buena guía resumen y vas a pillar el mecanismo rápidamente.

Pero puedes encontrar muchas más fuentes de información para crear tus CSS para crear las páginas de usuario de los PLC de Siemens:

Uso de Javascript en las páginas de usuario

Volvamos nuevamente a lo que dice la wiki:

JavaScript (abreviado comúnmente JS) es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos,3 basado en prototipos, imperativo, débilmente tipado y dinámico.

Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas4 aunque existe una forma de JavaScript del lado del servidor(Server-side JavaScript o SSJS). Su uso en aplicaciones externas a la web, por ejemplo en documentos PDF, aplicaciones de escritorio (mayoritariamente widgets) es también significativo.

Vale. Traducido, lo que viene a decir es que Javascript es un lenguaje de programación que se ejecuta en el lado del cliente.

Deciamos que las webs son creadas del lado del servidor y que este manda la web con sus etiquetas HTML a tu navegador y este interpreta el archivo.

Bien, esto es cierto en general, pero hay la posibilidad de ejecutar código del lado del cliente.

Es decir, que hay código que se puede ejecutar del lado del navegador.

Consecuentemente, vamos a lograr que la web sea mucho más dinámica y que no necesite comunicarse con el servidor para realizar ciertas acciones como ya veremos más adelante.

Ejemplo

En la propia página web de la wiki, viene un ejemplo para que veas qué pinta coge:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo sencillo</title>

<h1 id="header">Esto es JavaScript</h1>

<script>
    document.body.appendChild(document.createTextNode('Hola Mundo!'));

    var h1 = document.getElementById('header'); // contiene la referencia al tag <h1>
    h1 = document.getElementsByTagName('h1')[0]; // accediendo al mismo elemento <h1>
</script>

<noscript>Tu navegador no admite JavaScript, o JavaScript está deshabilitado.</noscript>

</head>
<body>/*...*/</body>
</html>

¿Dónde encontrar información?

Lo primero que te he de decir es que programar en javascript no es tan sencillo como HTML, y si no sabes programar ningún lenguaje de programación de alto nivel, puede hacerse un poco cuesta arriba.

Es un lenguaje con todas las letra y se pueden hacer un montón de cosas. Esto implica que su aprendizaje no es cosa de una tarde.

La parte positiva es que para realizar tus primeras páginas de usuario no vas a necesitar en absoluto conocer nada de Javascript.

Ahora bien, conociendo Javascript y aplicándolo debidamente puedes lograr cosas super chulas y potentes.

Por tanto aquí te dejo unas cuantas referencias:

Herramientas

Editores de código

Para escribir el código HTML, CSS o Javascript lo puedes escribir directamente con el Notepad, pero puedes descargarte algún programa gratuito que te ayude a formatear de una forma más sencillo el código:

Servidor donde hacer tus pruebas

Estas nuevas habilidades que vas a adquirir no solamente te van a valer para realizar páginas de usuario para tus autómatas Siemens.

También podrás usarlo en cualquier tipo de páginas web que quieras hacer. Por tanto montar tu servidor local para realizar pruebas te puede venir bien:

El servidor que te montará es Apache y podrás programar en PHP y jugar con Bases de datos.

Pero no te quiero agobiar. Con que crees tus primeras páginas estáticas en html y las hagas correr en él, será suficiente.

¿Y ahora qué?

Ahora de momento, empápate bien de todo lo que hemos visto, que no es moco de pavo y realizar las páginas de usuario lleva tiempo y dedicación.

Desenvolverse bien con HTML es fundamental para poder realizarlas con solvencia y no es cosa de 10 minutos si no tienes estos conocimientos previos.

La semana que viene comenzaremos con la parte del PLC.

Pero verás que si has jugueteado un poco. luego todo será mucho más sencillo de seguir y de entender.

 

Iñigo Gútiez

Enseño a programar PLC de Siemens a través de mis cursos.
Más información sobre mi aquí

Interacciones del lector

    Deja un comentario

    Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

    9 Comentarios

  4. Excelente información a pegarle duro a todos los conceptos básicos para poder lograr el resultado esperado……

    Gracias Iñigo

    Responder

  8. Iñigo……eres un fenómeno.
    Continua así……que nosotros te seguiremos siguiendo.
    Muchas gracias por tu trabajo.

    Responder
>