Skip to content

Commit 7c5e937

Browse files
author
Sebastian Flores
committed
organized version
1 parent beaeace commit 7c5e937

2 files changed

Lines changed: 229 additions & 64 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@ Personally, I think that fade and simple are the best combination.
3333
Screen size is set by the variables height and width on my-slides.qmd
3434
Change the images for the images you need
3535

36-
3736
## html and pdf Outputs
3837

3938
Executing the makefile should produce the html. Make sure to read the terminal output, the errors tend to be descriptive enough to fix or google them.
@@ -44,7 +43,7 @@ To create the pdf, open the html file and press the "E" key. Then, print the pag
4443

4544
The html presentation can be displayed directly from github, if you set the repo as a github page. You will need to set embed-resourses to true so the html page for the slides is self-contained and does not break any weird local dependency.
4645

47-
Additional advice: As a presenter, I prefer to use the options toc, controls, menu and slide number as false to avoid visual distractions. While sharing the presentation slides, I prefer to set them as true to facilitate the exploration of the slides (as the speaker won't be able to explain).
46+
Additional advice: As a presenter, I prefer to deactivate the options toc, controls, menu and slide number (value false) to avoid visual distractions. While sharing the presentation slides, I prefer to set them as true to facilitate the exploration of the slides (as the speaker won't be able to explain).
4847

4948
## Presenting
5049
Press "S" key to show speaker notes. They should be a new, separate tab on your browser.

‎my-slides.qmd‎

Lines changed: 228 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ execute:
33
echo: true
44
format:
55
revealjs:
6-
output-file: "my-slides"
6+
output-file: "slides-template-quarto"
77
width: 1245
88
height: 700
9-
embed-resources: true
9+
embed-resources: false
1010
preview-links: false
1111
toc: false
1212
menu: false
@@ -18,6 +18,8 @@ format:
1818
- style/style_background.scss
1919
auto-stretch: false
2020
center: true
21+
filters:
22+
- pyodide
2123
---
2224

2325
## Use the arrows to navigate the presentation.
@@ -43,33 +45,90 @@ This are the speaker notes. They are not shown. Press "S" to activate them.
4345

4446
---
4547

46-
## Slide with title
48+
## Requirements for conference slides
4749

48-
* Non
49-
* Incremental
50-
* Lists
50+
1. Slide theme & transitions
51+
2. Slide creation
52+
3. Text customization (color, size, fragments)
53+
4. Control on text alignment
54+
5. Images & videos
55+
6. Columns
56+
7. Export to pdf and html
57+
8. Displaying and executing code
58+
9. Speaker notes
59+
10. Background customization
5160

5261
---
5362

54-
## Another slide with title
63+
On quarto there are two important chars:
64+
65+
- Backtick (`) - Allow to define chars and blocks of markdown/code.
66+
- Dots (`:`) - Allow to define blocks and pass them attributes.
67+
68+
---
69+
70+
## 1. Slide theme & transitions
71+
72+
Easy! Right on the YAML header:
73+
74+
```yaml
75+
revealjs:
76+
...
77+
transition: fade
78+
theme: simple
79+
...
80+
```
81+
82+
Transition options: fade, slide, convex, concave, zoom
83+
84+
Theme options: simple, black, beige, blood, dark, default, league, moon, night, serif, simple, sky, solarized
85+
86+
---
87+
88+
## 2. Slide creation
89+
90+
Easy! Slides are separated by `---`.
91+
92+
Titles are created with `#` and section titles with `##`, and so on.
93+
94+
```markdown
95+
## A section without content
96+
97+
---
98+
99+
## Another slide with content
100+
101+
This is a very important content...
102+
```
103+
104+
---
105+
106+
## 3. Text customization: color, size, etc.
107+
108+
Use markdown and standard html/css properties to customize text.
109+
110+
```markdown
111+
[Text]{style="color: red"} can be [personalized]{style="font-size: 50px;"}
112+
with standard html/css properties
113+
```
114+
115+
[Text]{style="color: red"} can be [personalized]{style="font-size: 50px;"}
116+
with standard html/css properties
117+
118+
---
119+
120+
121+
## 3. Text customization: color, size, etc.
122+
123+
Use `incremental` and `fragment` to control the text flow.
124+
55125
::: {.incremental}
56126
* Items
57127
* Shown
58128
* Incrementally
59129
:::
60130

61-
---
62-
63-
## Yet another slide with title
64-
65-
::: {.fragment}
66-
* First
67-
* Second
68-
* Third
69-
* Fourth
70-
71-
(all at once)
72-
:::
131+
You can [use]{.fragment} [fragments]{.fragment} [within]{.fragment} [incrementals]{.fragment}.
73132

74133
---
75134

@@ -91,76 +150,183 @@ This are the speaker notes. They are not shown. Press "S" to activate them.
91150

92151
---
93152

94-
## Columns
153+
## 4. Control on text alignment: horizontal
95154

96-
::: columns
97-
::: {.column width="60%"}
98-
Some content (markdown, image, video)
155+
Use text-align to control the text horizontal alignment: left, center, right.
156+
157+
::: {style="text-align: left"}
158+
This is a left-aligned text.
99159
:::
100-
::: {.column width="40%"}
101-
Some content (markdown, image, video)
160+
161+
::: {style="text-align: center"}
162+
This is a centered text.
102163
:::
164+
165+
::: {style="text-align: right"}
166+
This is a right-aligned text.
103167
:::
104168

105169
---
106170

107-
## Columns and fragments
171+
## 4. Control on text alignment: vertical
172+
173+
<br><br><br><br><br>
174+
I have not found a better way than just inserting a lot of line breaks: `<br>`
175+
176+
---
177+
178+
## 5. Images & videos
179+
180+
Use markdown to insert images and videos.
181+
182+
---
183+
184+
## 6. Columns
185+
186+
You can have multiple columns in a single slide, with different widths.
108187

109188
::: columns
110-
::: {.column width="60%" .fragment}
111-
Some content (markdown, image, video)
189+
::: {.column width="60%"}
190+
Some content:
191+
192+
- markdown
193+
- image
194+
- video
195+
- etc.
112196
:::
113-
::: {.column width="40%" .fragment}
114-
Some content (markdown, image, video)
197+
::: {.column width="40%"}
198+
Some content:
199+
200+
- markdown
201+
- image
202+
- video
203+
- etc.
115204
:::
116205
:::
117206

118207
---
119208

120-
## Some text tricks 2
209+
## 7. Export to pdf and html
121210

122-
[Text]{style="color: red"} can be [personalized]{style="font-size: 50px;"}
123-
with standard html/css properties.
211+
- The html is generated by default when rendering the slides. Make sure to define to include/not include the resources to make it self-contained.
212+
- The pdf can be generated by opening the html file and pressing "E" to enable the print screen. Then, print the page and export as a pdf.
124213

125-
It is left-aligned by default.
214+
---
126215

127-
::: {style="text-align: center"}
128-
Use this trick to
216+
## 8. Displaying and executing code
129217

130-
horizontally center
218+
You have 3 options:
131219

132-
your text!
133-
:::
220+
- `python`
221+
- `{python}`
222+
- `pyodide-python`
223+
224+
## `python`
225+
226+
Just a regular block of markdown, highlighted with python syntax.
227+
The code must be wrapped between **&#96;&#96;&#96;python** and **&#96;&#96;&#96;**
228+
229+
```python
230+
def fib(a,b):
231+
return a+b
134232

233+
x = fib(2,2)
234+
print(x)
235+
```
236+
237+
It is not executed. It might contain errors!
135238

136239
---
137240

138-
::: columns
139-
::: {.column}
140-
ABCDEFGH IJKLMNÑOPQR STUVWXYZ ABCDEF GHIJKLMNÑO PQRSTUVW XYZ ABCD EFGHIJKLMNÑ OPQRS TUVW XYZ
141-
ABCD EFGHIJKLM NÑOPQR STUVW XYZ ABCDE GHIJ KLMNÑ OPQRS TUVWXYZ
142-
:::
143-
::: {.column}
144-
TUVW XYZ
145-
ABCD EFGHIJKLM
146-
:::
147-
:::
241+
## `{python}`
242+
243+
Executes the code when rendering on a python environment, and shows the results.
244+
The code must be wrapped between **&#96;&#96;&#96;{python}** and **&#96;&#96;&#96;**
245+
246+
```{python}
247+
def fib(a,b):
248+
return a+b
148249
149-
:(((( content within columns is not automatically centered
250+
x = fib(2,2)
251+
print(x)
252+
```
150253

254+
It's not interactive, but it's 100% python!
255+
It will be run before rendering the slides - if there are errors, there will be consequences...
151256

152257
---
153258

154-
::: columns
155-
::: {.column}
156-
ABCDEFGH IJKLMNÑOPQR STUVWXYZ ABCDEF GHIJKLMNÑO PQRSTUVW XYZ ABCD EFGHIJKLMNÑ OPQRS TUVW XYZ
157-
ABCD EFGHIJKLM NÑOPQR STUVW XYZ ABCDE GHIJ KLMNÑ OPQRS TUVWXYZ
158-
:::
159-
::: {.column}
160-
<br><br><br>
161-
TUVW XYZ
162-
ABCD EFGHIJKLM
163-
:::
164-
:::
259+
## `{pyodide-python}`
260+
261+
It's interactive using pyscript (javascript port).
262+
Setting up non-standard libraries can be tricky.
263+
It must be wrapped between **&#96;&#96;&#96;{pyodide-python}** and **&#96;&#96;&#96;**
264+
265+
```{pyodide-python}
266+
def fib(a,b):
267+
return a+b
268+
269+
x = fib(2,2)
270+
print(x)
271+
```
272+
273+
It will be executed when rendering the slides.
274+
275+
---
276+
277+
278+
## pyodide considerations
279+
280+
Must add 2 lines to the yaml header:
281+
282+
```yaml
283+
filters:
284+
- pyodide
285+
```
286+
287+
And must install with quarto:
288+
289+
```bash
290+
quarto add coatless-quarto/pyodide
291+
```
292+
293+
It's great to demo a library or function, and change some parameters while presenting.
294+
295+
It'st not a programming environment: large blocks or codes or complex libraries might break.
296+
297+
---
298+
299+
## 9. Speaker notes
300+
301+
To open the speaker notes, press "S" on the slides.
302+
303+
---
304+
305+
## 10. Background customization
306+
307+
You can customize the background of the slides, using regular html/css.
308+
309+
Example:
310+
311+
```html
312+
<style>
313+
.slide-background-content {
314+
background-image: none !important;
315+
background-color: #AA0000 !important;
316+
color: white !important;
317+
}
318+
</style>
319+
```
320+
321+
---
322+
323+
## 10. Background customization
324+
325+
This can be conveniently done in a css file, loaded into the yaml header, used when needed on a particular slide.
326+
327+
```yaml
328+
theme:
329+
- simple
330+
- style/style_background.scss
331+
```
165332
166-
:)))) but we can use some dirty html tricks

0 commit comments

Comments
 (0)