Juglar

Motor de juegos narrativos y educativos
para aprender programación web

Personalizar la portada

En el archivo index.html podrás personalizar varios detalles de tu juego. El título, el logo, los creadores o el texto del botón de inicio.

¿Qué significa html? html son las siglas de hyper text markup language (lenguaje de etiquetado de hiper texto). Es un formato que permite crear documentos en donde los elementos se definen con etiquetas y que permite enlazar a otros documentos (por eso hiper texto).

En html encontrarás los elementos señalados con etiquetas delante y detrás, como el siguiente botón:

 <button>Comenzar</button>

A continuación puedes ver todo el archivo, y en verde los textos que puedes modificar fácilmente para personalizar tu juego:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content=
  "width=device-width, initial-scale=1.0, user-scalable=yes">
  
  <title>Demo Juglar</title>
  
  <link rel="stylesheet" href="motor/general.css">
  <link rel="stylesheet" href="estilo.css">
</head>
<body>

  <escenas-juego>
    <portada-juego escena-actual>
		
      <h1><img src="img/juglar.png" title="Demo Juglar"/>Aprendiendo con Juglar</h1>
			
      <lista-creadores>
        <h2>Créditos</h2>
          <ul>
          <li>Guionista: Deva</li>
        </ul>
      </lista-creadores>
			
      <button data-diálogo="intro">Comenzar</button>
			
      <script src="motor/juglar.js"></script>
    </portada-juego>
		
    <paisaje-montañoso>
    </paisaje-montañoso>
  </escenas-juego>
  
  
  <diálogo-personajes>
    <personaje-actual></personaje-actual>
    <opciones-diálogo></opciones-diálogo>
    <globo-frase>
      <nombre-personaje>Nombre</nombre-personaje>
      <texto-frase>Texto</texto-frase>
      <button>►</button>
    </globo-frase>
    
    <link rel="stylesheet" href="motor/actividad_diálogos.css">
    <script src="motor/actividad_diálogos.js"></script>
    <script src="diálogos.js"></script>
  </diálogo-personajes>
  
</body>
</html>

Más adelante se explicarán más detalles sobre el lenguaje html y como lo usaremos para hacer estos juegos. Pero de momento puedes fijarte que tenemos las siguientes partes: