+ - 0:00:00
Notes for current slide
Notes for next slide

Clase 7:

 

Front-end básico

Autor: Lucio Cornejo

1 / 7

Front-end

  • Front-end sirve para crear la parte de la página web que el usuario puede ver e interactuar.

  • Consiste de tres herramientas fundamentales:

    • HTML
      • Define el contenido de la página web.
    • CSS
      • Estiliza el sitio web.
    • JavaScript
      • Añade interactividad a la página.
2 / 7

HTML

  • Hyper Text Markup Language

  • Consiste en el uso de etiquetas/elementos para estructurar el contenido del sitio web.

  • En realidad ya estamos familiarizados con varios elementos HTML, debido a nuestro conocimiento de Markdown.

  • Exploremos algunos paralelos entre HTML y R Markdown, creando una página web simple, desde cero.

3 / 7

  • Recordar instalar la extension Live Server y activar Toggle Auto Save en VS Code.

  • Guardar en una nueva carpeta los archivos por crear en esta sesión.

CSS

  • Sirve para estilizar el contenido de la página web.

Potencial

Google fonts

Clases e identificadores

4 / 7

JavaScript

  • Es un lenguaje de programación que puede emplearse en los navegadores web (Chrome, Firefox, Safari, etc) para añadir interactividad y reactividad al sitio web.

  • Inputs para añadir interactividad a la página.

5 / 7

Front-end + R Markdown

  • Exploremos primero el contenido HTML del archivo ejemplo proporcionado por R Studio para un documento R Markdown.
6 / 7

HTML + R Markdown

  • Programar vía R Markdown la creación de elementos HTML.
    • results='asis'
    • cat(...)

CSS + R Markdown

  • Personalizar el estilo de los documentos creados con R Markdown.

  • Uso de variables de lenguajes de programación, dentro de texto de CSS.

JavaScript + R Markdown

  • Arreglar errores de R Markdown o potenciar algunos de sus paquetes.
7 / 7

Front-end

  • Front-end sirve para crear la parte de la página web que el usuario puede ver e interactuar.

  • Consiste de tres herramientas fundamentales:

    • HTML
      • Define el contenido de la página web.
    • CSS
      • Estiliza el sitio web.
    • JavaScript
      • Añade interactividad a la página.
2 / 7
Paused

Help

Keyboard shortcuts

↑, ←, Pg Up, k Go to previous slide
↓, →, Pg Dn, Space, j Go to next slide
Home Go to first slide
End Go to last slide
Number + Return Go to specific slide
b / m / f Toggle blackout / mirrored / fullscreen mode
c Clone slideshow
p Toggle presenter mode
t Restart the presentation timer
?, h Toggle this help
eShow TOC with height equal to the page's
dShow TOC with half the page's height
rMove all the slides to the right side of the page
oTile View: Overview of Slides
Alt + fFit Slides to Screen
Esc Back to slideshow