{
"cells": [
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"### Przygotowanie innowacyjnych materiałów szkoleniowych i dokumentacji wewnętrznych w obszarze IT\n",
"# 2. Tworzenie materiałów szkoleniowych w Jupyter Notebook - wzory, prezentacje, wykresy\n",
"### *Paweł Skórzewski*"
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"## 2.1. Umieszczanie wzorów matematycznych"
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "subslide"
}
},
"source": [
"W notatnikach Jupytera można umieszczać wzory matematyczne, korzystając z notacji LaTeX-a."
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "fragment"
}
},
"source": [
"Wszystko pomiędzy znakami `$$` wyświetli się jako wzór matematyczny:"
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "fragment"
}
},
"source": [
" $$ a^2 = b^2 + c^2 $$\n",
"\n",
"$$ a^2 = b^2 + c^2 $$"
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "subslide"
}
},
"source": [
"Wyrażenia matematyczne można wstawiać też wewnątrz tekstu - dokładnie tak, jak w LaTeX-u:"
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "fragment"
}
},
"source": [
" To jest tekst, w którym występują zmienne $x$, $y$ i $z$, przy czym $z = \\frac{x}{y}$.\n",
" \n",
"To jest tekst, w którym występują zmienne $x$, $y$ i $z$, przy czym $z = \\frac{x}{y}$. "
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"## 2.2. Wyświetlanie materiałów Jupyter Notebook w formie prezentacji multimedialnej"
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "subslide"
}
},
"source": [
"Materiały przygotowane w formacie `.ipynb` można wyświetlać w formie prezentacji multimedialnej.\n",
"\n",
"Jest to możliwe dzięki narzędziu [**RISE**](https://rise.readthedocs.io).\n",
"\n",
"RISE (*Reveal.js Ipython Slideshow Extension*) jest rozszerzeniem do Jupytera umożliwiającym wyświetlanie notatników w trybie prezentacji w oparciu o framework [**Reveal.js**](https://revealjs.com/)."
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "subslide"
}
},
"source": [
"***Uwaga:*** Rozszerzenie RISE działa tylko z klasycznym środowiskiem Jupyter Notebook. Nie zadziała, jeżeli notatnik otworzymy korzystajac z JupyterLab."
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"### Instalacja rozszerzenia RISE\n",
"\n",
"Rozszerzenie RISE można zainstalować na dwa sposoby:\n",
" * korzystając z menedżera pakietów Conda\n",
" * korzystając z menedżera pakietów PIP"
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "subslide"
}
},
"source": [
"Aby zainstalować rozszerzenie RISE za pomocą menedżera Conda, należy wpisać w konsoli:\n",
"\n",
" conda install -c conda-forge rise"
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "subslide"
}
},
"source": [
"Aby zainstalować rozszerzenie RISE za pomocą menedżera PIP, należy wpisać w konsoli:\n",
"\n",
" pip install RISE"
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"### Wyświetlanie prezentacji\n",
"\n",
"Po zainstalowaniu rozszerzenia RISE i uruchomieniu środowiska Jupyter Notebook (nie JupyterLab! - patrz uwaga powyżej) na pasku narzędzi pojawi się nowy przycisk *Enter/Exit RISE Slideshow*: ![](\"rise-przycisk.png\")
\n",
"\n",
"Naciśnięcie go uruchamia tryb prezentacji."
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "subslide"
}
},
"source": [
"Prezentację można również uruchomić za pomocą skrótu klawiszowego **Alt+R**."
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"### Poruszanie się po prezentacji\n",
"\n",
"Do następnego slajdu przechodzimy za pomocą spacji, a cofamy się naciskając Shift+spację."
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "fragment"
}
},
"source": [
"W trybie prezentacji po lewej stronie ekranu widać dwa przyciski: **X** zamyka prezentację, a po kliknięciu w **?** pokazuje się okienko pomocy z przydatnymi skrótami klawiszowymi. "
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"### Przygotowanie prezentacji\n",
"\n",
"Aby prezentacja poprawnie się wyświetlała, komórki notatnika powinny być odpowiednio oznaczone. Bez tego, cały notatnik wyświetli się na pojedynczym slajdzie, a jego zawartość będzie ucięta.\n",
"\n",
"W tym celu musimy wyświetlić pasek narzędzi prezentacji."
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "subslide"
}
},
"source": [
"#### Narzędzia prezentacji\n",
"\n",
"Aby wyświetlić narzędzia prezentacji, należy z menu wybrać *View*→*Cell Toolbar*→*Slideshow*.\n",
"\n",
"Wówczas przy każdej komórce pokaże się pole wyboru *Slide Type* (typ slajdu).\n",
"\n",
"W polu *Slide Type* możemy wybrać, czy i w jaki sposób dana komórka pojawi się w prezentacji."
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "subslide"
}
},
"source": [
"#### Typy slajdów\n",
"\n",
" * **Slide** - komórka pojawi się jako oddzielny slajd, rozpoczynający nową sekcję\n",
" * **Sub-Slide** - komórka pojawi się jako oddzielny slajd\n",
" * **Fragment** - komórka pojawi się jako kontynuacja poprzedniego slajdu (po animacji pauzy)\n",
" * **Skip** - komórka nie pojawi się w prezentacji\n",
" * **Notes** - komórka nie pojawi się w prezentacji, ale pojawi się w widoku prezentera (zobacz poniżej)"
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "subslide"
}
},
"source": [
"Jeżeli komórka nie ma wybranego typu, to wyświetli się ona w prezentacji tak, jakby miała przypisany typ *Fragment*.\n",
"\n",
"Jest to domyślne zachowanie dla każdej nowo utworzonej komórki."
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"### Widok prezentera\n",
"\n",
"Naciśnięcie klawisza **T** w widoku prezentacji uruchamia tzw. **widok prezentera** (*speaker view*), dzięki któremu w oddzielnym oknie można podejrzeć:\n",
" * bieżący slajd\n",
" * następny slajd\n",
" * notatki (komórki oznaczone jako *Notes*)"
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "notes"
}
},
"source": [
"To jest komórka z notatkami, które nie wyświetlą się w prezentacji, ale pokażą się w widoku prezentera."
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "skip"
}
},
"source": [
"To jest komórka, która nie pojawi się w prezentacji w ogóle."
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"### Dostosowywanie wyglądu prezentacji\n",
"\n",
"Rozszerzenie RISE pozwala na dostosowanie niektórych elementów wyglądu prezentacji, takich jak czcionki, kolory czy efekty przejścia."
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "subslide"
}
},
"source": [
"W tym celu należy z menu wybrać *Edit*→*Edit Notebook Metadata* i zmodyfikować plik JSON, który się wyświetli.\n",
"\n",
"Po odświeżeniu notatnika dokonane zmiany zostaną zastosowane."
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "subslide"
}
},
"source": [
"#### Przykład: zmiana motywu prezentacji\n",
"\n",
"Aby zmienić motyw prezentacji z domyślnego np. na taki z jasnoniebieskim tłem, należy w JSON-ie z metadanymi dopisać\n",
"```json\n",
" \"rise\": {\"theme\": \"sky\"}\n",
"```"
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "fragment"
}
},
"source": [
"Listę dostępnych motywów można znaleźć na stronie narzędzia Reveal.js: https://revealjs.com/themes"
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "subslide"
}
},
"source": [
"Więcej o personalizacji prezentacji, a także o samym rozszerzeniu RISE można przeczytać w [dokumentacji projektu](https://rise.readthedocs.io/)."
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"## 2.3. Tworzenie interaktywnych wykresów"
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "subslide"
}
},
"source": [
"Wykresy w notatnikach Jupyter Notebook można tworzyć, korzystając z odpowiednich narzędzi języka Python, np. z biblioteki `matplotlib`.\n",
"\n",
"Opis sposobu korzystania z biblioteki `matplotlib` wykracza poza ramy tego kursu.\n",
"\n",
"Informacje na ten temat można znaleźć w [dokumentacji biblioteki](https://matplotlib.org)."
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"### Umieszczanie wykresów `matplotlib` w komórkach notatnika\n",
"\n",
"Aby wykresy stworzone przy użyciu biblioteki `matplotlib` wyświetlały się bezpośrednio w komórkach notatnika, należy na jego początku dodać i wykonać kod:"
]
},
{
"cell_type": "code",
"execution_count": 1,
"metadata": {
"slideshow": {
"slide_type": "fragment"
}
},
"outputs": [],
"source": [
"%matplotlib inline\n",
"%config InlineBackend.figure_format = 'svg'"
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "subslide"
}
},
"source": [
"#### Przykład prostego wykresu"
]
},
{
"cell_type": "code",
"execution_count": 2,
"metadata": {
"slideshow": {
"slide_type": "fragment"
}
},
"outputs": [],
"source": [
"import matplotlib\n",
"import matplotlib.pyplot as plt\n",
"import numpy as np\n",
"\n",
"def plot_sine(amplitude=1, frequency=1):\n",
" # Dane do wykresu\n",
" x = np.arange(0.0, 10.0, 0.01)\n",
" y = amplitude * np.sin(frequency * x)\n",
"\n",
" fig, ax = plt.subplots()\n",
" ax.plot(x, y)\n",
"\n",
" ax.set_ylim([-5, 5])\n",
" ax.set(xlabel=r\"$x$\", ylabel=r\"$y$\",\n",
" title=\"Sinusoida\")\n",
" ax.grid()"
]
},
{
"cell_type": "code",
"execution_count": 3,
"metadata": {
"slideshow": {
"slide_type": "subslide"
}
},
"outputs": [
{
"data": {
"image/svg+xml": [
"\r\n",
"\r\n",
"\r\n",
"\r\n"
],
"text/plain": [
""
]
},
"metadata": {
"needs_background": "light"
},
"output_type": "display_data"
}
],
"source": [
"plot_sine() # Wykres z domyślnymi wartościami parametrów"
]
},
{
"cell_type": "code",
"execution_count": 4,
"metadata": {
"slideshow": {
"slide_type": "subslide"
}
},
"outputs": [
{
"data": {
"image/svg+xml": [
"\r\n",
"\r\n",
"\r\n",
"\r\n"
],
"text/plain": [
""
]
},
"metadata": {
"needs_background": "light"
},
"output_type": "display_data"
}
],
"source": [
"plot_sine(amplitude=2, frequency=3) # Wykres z określonymi parametrami"
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"### Interaktywne wykresy\n",
"\n",
"Wykresy w Jupyterze mogą posiadać elementy interaktywności, np. wartości parametrów regulowane suwakiem."
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "fragment"
}
},
"source": [
"W tym celu należy skorzystać z widżetów z biblioteki `ipywidgets`."
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "fragment"
}
},
"source": [
"Aby używać interaktywnych widżetów w środowiskach Jupyter Notebook (klasycznym) i JupyterLab, trzeba je najpierw zainstalować."
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "subslide"
}
},
"source": [
"#### Instalacja `ipywidgets` w klasycznym środowisku Jupyter Notebook\n",
"\n",
" conda install -c conda-forge ipywidgets"
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "fragment"
}
},
"source": [
"#### Instalacja `ipywidgets` w środowisku JupyterLab\n",
"\n",
" conda install -c conda-forge nodejs\n",
" jupyter labextension install @jupyter-widgets/jupyterlab-manager"
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "subslide"
}
},
"source": [
"Teraz możemy przystąpić do tworzenia widżetów:"
]
},
{
"cell_type": "code",
"execution_count": 5,
"metadata": {
"slideshow": {
"slide_type": "fragment"
}
},
"outputs": [],
"source": [
"import ipywidgets\n",
"\n",
"# Stworzenie widżetów\n",
"slider_amplitude = ipywidgets.FloatSlider(\n",
" min=0.0, max=5.0, step=0.1, value=1.0, description=\"amplituda\", width=300)\n",
"slider_frequency = ipywidgets.FloatSlider(\n",
" min=0.5, max=10.0, step=0.1, value=1.0, description=\"częstotliwość\", width=300)\n",
"\n",
"# Funkcja obsługi widżetów\n",
"def slider_handler(amplitude, frequency):\n",
" plot_sine(amplitude, frequency)"
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "subslide"
}
},
"source": [
"Wykres może zmieniać się od razu po przesunięciu suwaka:"
]
},
{
"cell_type": "code",
"execution_count": 6,
"metadata": {
"slideshow": {
"slide_type": "fragment"
}
},
"outputs": [
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "e7c538acb75c465486eae608cfa4f0a4",
"version_major": 2,
"version_minor": 0
},
"text/plain": [
"interactive(children=(FloatSlider(value=1.0, description='amplituda', max=5.0), FloatSlider(value=1.0, descrip…"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"text/plain": [
""
]
},
"execution_count": 6,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"ipywidgets.interact(\n",
" slider_handler, amplitude=slider_amplitude, frequency=slider_frequency)"
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "subslide"
}
},
"source": [
"...albo dopiero po zatwierdzeniu zmiany przyciskiem:"
]
},
{
"cell_type": "code",
"execution_count": 7,
"metadata": {
"slideshow": {
"slide_type": "fragment"
}
},
"outputs": [
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "03e5ed27e0ec4664aeb5f4454990f1c5",
"version_major": 2,
"version_minor": 0
},
"text/plain": [
"interactive(children=(FloatSlider(value=1.0, description='amplituda', max=5.0), FloatSlider(value=1.0, descrip…"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"text/plain": [
""
]
},
"execution_count": 7,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"ipywidgets.interact_manual(\n",
" slider_handler, amplitude=slider_amplitude, frequency=slider_frequency)"
]
}
],
"metadata": {
"celltoolbar": "Slideshow",
"kernelspec": {
"display_name": "Python 3",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.8.3"
},
"rise": {
"theme": "white"
}
},
"nbformat": 4,
"nbformat_minor": 4
}