• Skip to primary navigation
  • Skip to main content

ProgramaciónSiemens

Cursos online de automatización industrial con PLC Siemens

  • Cursos
  • Mi cuenta
    • Mi cuenta
    • Blog
    • Foros
    • Curso de AWL
    • Curso de iniciación a la Industria 4.0
    • Curso Express de TIA Portal
    • Curso de WinCC Flexible 2008
    • Crear HMI con OPC y VB.NET
    • Crear HMI con Snap7 y VB.NET
    • Curso ViSnap7
    • Curso de TIA Portal para CPU 1200
    • Curso de Step 7 V5.x
    • Curso de comunicaciones IE y Profinet
  • Contacto & Faq

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 Iñigo Gútiez · 9 Comments

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.

Contenido

  • 1 ¿Qué se usa para crear las páginas de usuario?
  • 2 Uso de HTML en las páginas de usuario
    • 2.1 La estructura básica de una pagina web en HTML
    • 2.2 Dónde encontrar información
  • 3 Uso de CSS en las páginas de usuario
    • 3.1 ¿Cómo funciona?
    • 3.2 Más información
  • 4 Uso de Javascript en las páginas de usuario
    • 4.1 Ejemplo
    • 4.2 ¿Dónde encontrar información?
  • 5 Herramientas
    • 5.1 Editores de código
    • 5.2 Servidor donde hacer tus pruebas
  • 6 ¿Y ahora qué?

¿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:

  • Crear una página web desde cero (vídeos en Youtube)
  • W3schools.com
  • Aulaclic.es
  • Curso de HTML

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:

  • W3schools.com
  • Curso básico de CSS (Vídeos en Youtube)

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:

  • Curso básico de Javascript (en vídeos de Youtube)
  • Guía de Javacript

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:

  • Notepad++ (sirve para esto y para muchas cosas. Yo es el que uso)
  • Sublime Text
  • Atom

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:

  • XAMPP

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.

Recuerda que puedes apuntarte en Guorker.com donde por una cuota mensual, tendrás tarifa plana en todos los cursos disponibles en la plataforma.

 

Iñigo Gútiez
Iñigo Gútiez

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

Puedes seguirme en cualquiera de las siguientes redes sociales.

Filed Under: blog, TIA Portal Tagged With: HTML, S7-1200, TIA portal, webserver

Reader Interactions

    Deja un comentario Cancelar

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

    9 Comentarios

  1. hector perez says

    20 abril, 2017 at 14:27

    saludo a todos, excelente, como siempre puntual conciso.

    Responder
  2. Guillermo Garbaty says

    20 abril, 2017 at 15:41

    Desde Argentina, como siempre un genio!! Excelentes los post!

    Responder
  3. Marco Polo says

    20 abril, 2017 at 16:47

    Muy bueno, todo explicado y referenciado excelente.

    Saludos desde México.

    Responder
  4. Cesar Alonso Castillo Pelayo says

    20 abril, 2017 at 17:50

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

    Gracias Iñigo

    Responder
  5. Nelson Colmenares says

    21 abril, 2017 at 14:21

    Gracias Iñigo, esta intro a los HTML está genial.

    Responder
    • Iñigo Gútiez says

      22 abril, 2017 at 21:15

      La semana que viene más!

      Responder
  6. kalfayate says

    22 abril, 2017 at 11:16

    Muchas gracias Iñigo como siempre gran trabajo

    Saludos

    Responder
  7. Ricardo says

    22 abril, 2017 at 11:41

    Excelente !!!!! ahora a ponerme a trabajar
    Saludos desde Argentina

    Responder
  8. Miguel Angel says

    25 junio, 2018 at 11:17

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

    Responder
  • Aviso Legal y Política de Privacidad
  • Condiciones de Venta
  • Política de cookies
  • Contacto & Faq
  • Blog

Copyright © 2022 · Programación Siemens · Todos los derechos reservados

· ¿Quién soy? · Misión, Visión y valores