HTML en Dash

Creación de paneles con Dash y Plotly

Alex Scriven

Data Scientist

HTML: recordatorio

 

  • HTML = lenguaje para estructurar contenido web
    • Usa "etiquetas" como Div, H1>H6
  • Dash usa componentes de dash.html
    • La etiqueta H1 es .H1()
    • La etiqueta Div es .Div()
<div>
  <div style=
       "background-color: red; 
        width:250; height:250;">
  </div>
  <div style=
       "background-color: lightblue; 
        width:250; height:250;">
    <h1>This box</h1>
  </div>
</div>
Creación de paneles con Dash y Plotly

Etiquetas de estructura

 

  • Lista de etiquetas HTML disponibles: documentación
  • Etiquetas de estructura importantes:
    • .Br() = Salto de línea
    • .Img() = Insertar imagen
Creación de paneles con Dash y Plotly

Listas en Dash HTML

 

  • .Ul() \ .Ol() y .Li() = Crear listas
    • .Ul() para listas sin orden (viñetas, como estas)
    • .Ol() para listas ordenadas (numeradas)
    • .Li() para cada elemento
Creación de paneles con Dash y Plotly

Insertar el logo de la empresa

 

app.layout = [

  html.Img(src='www.website.com/logo.png'),
  html.H1("Our Sales Dashboard")

]

 

Captura de la parte superior izquierda de un navegador Chrome con la URL del servidor. Se ve el logo de la empresa, un rombo rosa con el texto E-com global. Debajo, el título "Our Sales Dashboard"

Creación de paneles con Dash y Plotly

Etiquetas de texto

 

Definir y dar formato al texto

  • .P() o .Span() = Insertar texto sin formato
    • Aceptan el argumento children (lista de texto, .P() o .Span())
  • .B() = Texto en negrita
  • .I() = Texto en cursiva
Creación de paneles con Dash y Plotly

Etiquetas de texto HTML en Dash

 

Formato más complejo:

app.layout = [
   html.H1("Our Sales Dashboard"),

   html.Span(children=[

   f"Prepared: {datetime.now().date()}",

   " by ", html.B("Jessie Parker, "),

   html.I("Data Scientist")

   ])

]

 

Captura de la esquina superior izquierda de Chrome con la URL del servidor visible. Hay un título grande "our sales dashboard"; debajo, una línea: "Prepared: 2021-06-27 by Jessie Parker, data scientist". "Jessie Parker," está en negrita y "data scientist" en cursiva

Creación de paneles con Dash y Plotly

Dividir el texto

$$

app.layout = [
   html.H1("Our Sales Dashboard"),
   html.Span(children=[
   f"Prepared: {datetime.now().date()}", 
   html.Br(),
   " by ", html.B("Jessie Parker, "),
   html.Br(),
   html.I("Data Scientist")])
    ]

 

Captura del mismo panel que en la diapositiva anterior: esquina superior izquierda de Chrome con la URL del servidor. Título grande "our sales dashboard"; debajo, "Prepared: 2021-06-27 by Jessie Parker, data scientist". "Jessie Parker" en negrita y "data scientist" en cursiva. Ahora hay saltos de línea tras la fecha y el nombre.

Creación de paneles con Dash y Plotly

¡Vamos a practicar!

Creación de paneles con Dash y Plotly

Preparing Video For Download...