FSFE
/
fsfe-website
29
30
Fork 85
Code Issues 61 Pull Requests 14 Wiki Activity

Merge pull request 'Overhaul YH4F page' (#2066) from yh4f-restructure into master
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Max Mehl 2021-07-30 14:04:56 +00:00
parent 06fca83922 5e2f03516a
commit 2362a6dc03
8 changed files with 335 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
activities/yh4f/evaluation.en.xhtml Normal file
View File

@ -0,0 +1,142 @@
<?xml version="1.0" encoding="UTF-8" ?>
<html>
<version>1</version>
<head>
<title>Evaluation and jury for YH4F</title>
</head>
<body class="yh4f">
<p id="category"><a href="/activities/yh4f/index.html">Youth Hacking 4 Freedom</a></p>
<h1>Evaluation and jury for YH4F</h1>
<div id="introduction">
<p>
Participants in Youth Hacking 4 Freedom come from very different
background with different skills. Our jury takes care that every project
gets a fair rating. Read how we evaluate submissions and meet the jury.
</p>
</div>
<figure class="max-width-70">
<video crossorigin="crossorigin" poster="https://pics.fsfe.org/uploads/medium/a140bb548f4c4d936c592721cd7250de.png" controls="controls">
<source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="https://download.fsfe.org/videos/20years/matthias_kirschner/matthias_kirschner_en_desktop.mp4" />
<source type="video/webm; codecs=&quot;vp9, opus&quot;" src="https://download.fsfe.org/videos/20years/matthias_kirschner/matthias_kirschner_en_desktop.webm" />
</video>
<figcaption>
Ali explains how the jury rates your projects in a fair manner while
respecting the diversity of all participants.
</figcaption>
</figure>
<h2>The Diversity Track</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec
pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
mollis pretium.
</p>
<h2>The Jury</h2>
<div class="icon-grid">
<ul>
<li id="lequertier">
<img src="https://pics.fsfe.org/uploads/thumb/54f136a544ae095b158468244c98c30a.jpeg" class="img-circle" alt="Vincent Lequertier" />
<div>
<h3>Vincent Lequertier</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa.
</p>
</div>
</li>
<li id="person1">
<img src="https://pics.fsfe.org/uploads/thumb/54f136a544ae095b158468244c98c30a.jpeg" class="img-circle" alt="Vincent Lequertier" />
<div>
<h3>Vincent Lequertier</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa.
</p>
</div>
</li>
<li id="person2">
<img src="https://pics.fsfe.org/uploads/thumb/54f136a544ae095b158468244c98c30a.jpeg" class="img-circle" alt="Vincent Lequertier" />
<div>
<h3>Vincent Lequertier</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa.
</p>
</div>
</li>
<li id="person3">
<img src="https://pics.fsfe.org/uploads/thumb/54f136a544ae095b158468244c98c30a.jpeg" class="img-circle" alt="Vincent Lequertier" />
<div>
<h3>Vincent Lequertier</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa.
</p>
</div>
</li>
<li id="person4">
<img src="https://pics.fsfe.org/uploads/thumb/54f136a544ae095b158468244c98c30a.jpeg" class="img-circle" alt="Vincent Lequertier" />
<div>
<h3>Vincent Lequertier</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa.
</p>
</div>
</li>
<li id="person5">
<img src="https://pics.fsfe.org/uploads/thumb/54f136a544ae095b158468244c98c30a.jpeg" class="img-circle" alt="Vincent Lequertier" />
<div>
<h3>Vincent Lequertier</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa.
</p>
</div>
</li>
<li id="person6">
<img src="https://pics.fsfe.org/uploads/thumb/54f136a544ae095b158468244c98c30a.jpeg" class="img-circle" alt="Vincent Lequertier" />
<div>
<h3>Vincent Lequertier</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa.
</p>
</div>
</li>
<li id="person7">
<img src="https://pics.fsfe.org/uploads/thumb/54f136a544ae095b158468244c98c30a.jpeg" class="img-circle" alt="Vincent Lequertier" />
<div>
<h3>Vincent Lequertier</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa.
</p>
</div>
</li>
</ul>
</div>
</body>
</html>

102
activities/yh4f/faq.en.xhtml Normal file
View File

@ -0,0 +1,102 @@
<?xml version="1.0" encoding="UTF-8" ?>
<html>
<version>1</version>
<head>
<title>YH4F Frequently Asked Questions</title>
</head>
<body class="yh4f">
<p id="category"><a href="/activities/yh4f/index.html">Youth Hacking 4 Freedom</a></p>
<h1>Frequently Asked Questions</h1>
<div id="introduction">
<p>
You may have a lot of questions. Hopefully, we have answered yours on this
page. If not, please just <a href="/contact/">send us an email</a>.
</p>
</div>
<h2 id="general">General Questions</h2>
<h3 id="basics">Tell me again: what is all of this about?</h3>
<p>
Youth Hacking 4 Freedom is a hacking competition for teenagers from all over
Europe. You can submit software or other results of your hacking. The first
3 places in each category will win money, and there will be a ceremony in
Brussels (Belgium). All participants will be invited to a workshop to learn
more. The submissions will be evaluated by a jury.
</p>
<h3 id="hacking">Isn't hacking illegal?</h3>
<p>
Hacking is a word that is often misunderstood. It is not about breaking
illegally into systems of other people, stealing money or so. Instead,
hacking means that you think around the corner and make things with
computers that are innovative, meaningful, interesting or just fun. It is
about taking control over your technology and use it freely for your ideas.
</p>
<h3 id="software">What are the requirements for my submission?</h3>
<p>
Free Software, ...
</p>
<h2 id="evaluation">Evaluation and Jury</h2>
<h3 id="help">Can I receive help by others?</h3>
<h3 id="jury">Who will rate my submissions?</h3>
<p>
We have a large and diverse jury from different background. You can read
more about them and how they evaluate your submission on <a
href="/activities/yh4f/evaluation.html">this page</a>.
</p>
<h3 id="criteria">Which criteria will be evaluated?</h3>
<p>
The programs will be evaluated by the jury based on three levels: the idea,
the implementation, and the presentation. Read more about these criteria and
the people who will rate them <a
href="/activities/yh4f/evaluation.html">this page</a>
</p>
<h2 id="dates">Dates and Deadlines</h2>
<h3 id="timeine">What is the exact timeline?</h3>
<p>
Timeline graphic here
</p>
<h2 id="awards">Awards and Ceremony</h2>
<h3 id="prizes">What prizes can I win?</h3>
<h3 id="ceremony">Can I come to the ceremony?</h3>
<p>
Youth Hacking 4 Freedom will cover the accommodation and travel costs for
the winners and for one parent of each. Three additional participants will
be selected to join the ceremony with their costs covered. Every participant
will be invited to the ceremony.
</p>
<h2 id="other-question">My question has not been answered!</h2>
<p>
No problem, please just <a href="/contact/">send us an email</a>.
</p>
</body>
</html>

178
activities/yh4f/index.en.xhtml
View File

@ -8,101 +8,68 @@
<title>Youth Hacking 4 Freedom</title>
</head>
<body class="toplevel">
<body class="toplevel yh4f">
<h1>Youth Hacking 4 Freedom 2021/2022</h1>
<h1>Youth Hacking 4 Freedom</h1>
<div id="introduction">
<p>
If you like experimenting with software development, if you often start
coding and find yourself losing motivation halfway, if you want to meet
people of your age with the same interests, this winter just got way more
exciting.
Welcome to this hacking competition for young people from Europe! If you
like experimenting with software development, if you often start coding
and find yourself losing motivation halfway, if you want to meet people of
your age with the same interests, this winter just got way more exciting.
</p>
</div>
<p>
The FSFE organises a hacking competition for young people from Europe aged
from 13 to 19. Youth Hacking 4 Freedom wants to inspire young talented
minds and to support them in their first steps. During the competition, you
will have the opportunity to learn the values of Free Software. Our large
cash prizes will keep you focused, and, if won, they can be used to advance
your education on Computer Science, or in any other way you want. The first
places for women and men will be awarded with 4.096€, the second places with
2.048€, and the third places with 1.024€. All participants who submit a
program at the end of the round will get a participation certificate. The
submitted projects will be evaluated by our jury members, and the winners
will be awarded during a ceremony in Brussels in June 2022.
</p>
<figure class="fullwidth no-border">
<img src="https://pics.fsfe.org/uploads/big/5870c91585fd58415c4423129db0e38f.png" alt="A girl with a laptop standing in a cool room for hackers" />
</figure>
<h2>Facts and questions</h2>
<p>
You surely have a lot of questions already. Let's go through them!
</p>
<h3>What type of Software should I make?</h3>
<p>
The type of software project you will choose is up to you, the possibilities
are endless. The only condition for the competition is that the program
should be <a href="/freesoftware/freesoftware.html">Free Software</a>. We
will show you how to label your program as Free Software during the
beginning of the competition.
</p>
<h3>Can I receive help?</h3>
<p>
Yes. Exchanging ideas and seeking for help is encouraged in programming. You
can ask for help from your teachers, Linux user groups, friends, or anyone
you trust, and you will still be eligible for the competition. However, we
have to make sure that you had an active role in your project. At the end of
the competition, you will have to talk about the project in your own words,
and you should be in a position to explain to a jury member how you achieved
the final result, and to answer their questions.
</p>
<h3>How will my program be evaluated?</h3>
<p>
The programs will be evaluated by the jury based on three levels: the idea,
the implementation, and the presentation. The idea behind the program will
be evaluated based on its originality, its practical relevance, and its
aims. Does the program already exist? What does it offer? The implementation
of the program will be evaluated based on the self-reliance, the difficulty,
and the creativity of the program. Finally, the quality of presentation of
the program, especially the readability and clarity of the report and the
README file will be taken into account.
</p>
<h3>Can I come to the ceremony?</h3>
<p>
Youth Hacking 4 Freedom will cover the accommodation and travel costs for
the winners and for one parent of each. Three additional participants will
be selected to join the ceremony with their costs covered. Every participant
will be invited to the ceremony.
</p>
<div class="color-box" data-color="fsfe-blue">
<h3>What are the important dates?</h3>
<p>
Register until 10 October 2021. The coding phase begins at 15 October 2021
and ends at 30 April 2022. You are not expected to devote all this time into
your project; you have seven months so that you can be flexible in your
schedule. The Award Ceremony will take place in June 2022.
</p>
<div class="with-image-left small-img">
<img class="img-circle" src="https://pics.fsfe.org/uploads/big/18eb4cf16bee45358dfcf01af6208f64.jpg" alt="An award" />
<div>
<h3>What is this competiton about?</h3>
<p>
Every participant shall submit a software project. The possibilities are
endless! The only condition for the competition is that the program
should be <a href="/freesoftware/freesoftware.html">Free Software</a>.
We will show you how to label your program as Free Software during the
beginning of the competition.
</p>
</div>
</div>
<h3>My question wasn't answered!</h3>
<div class="with-image-left small-img">
<img class="" src="https://pics.fsfe.org/uploads/big/18eb4cf16bee45358dfcf01af6208f64.jpg" alt="An award" />
<div>
<h3>What can I win?</h3>
<p>
Our large cash prizes will keep you focused, and, if won, they can be
used to advance your education on Computer Science, or in any other way
you want. The first places for women and men will be awarded with
4.096€, the second places with 2.048€, and the third places with 1.024€.
All participants who submit a program at the end of the round will get a
participation certificate.
</p>
</div>
</div>
<p>
No problem, just <a href="/contact/contact.html">contact us via email</a>.
</p>
<div class="with-image-left small-img">
<img class="" src="https://pics.fsfe.org/uploads/big/18eb4cf16bee45358dfcf01af6208f64.jpg" alt="An award" />
<div>
<h3>How much time do I have?</h3>
<p>
Register until 10 October 2021. The coding phase begins at 15 October
2021 and ends at 30 April 2022. Then, our jury members will evaluate all
submission. You are not expected to devote all this time into your
project; you have seven months so that you can be flexible in your
schedule. The Award Ceremony will take place in June 2022 in Brussels
(Belgium).
</p>
</div>
</div>
<figure class="max-width-70">
<figure class="max-width-70" id="video">
<video crossorigin="crossorigin" poster="https://pics.fsfe.org/uploads/medium/a140bb548f4c4d936c592721cd7250de.png" controls="controls">
<source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="https://download.fsfe.org/videos/20years/matthias_kirschner/matthias_kirschner_en_desktop.mp4" />
<source type="video/webm; codecs=&quot;vp9, opus&quot;" src="https://download.fsfe.org/videos/20years/matthias_kirschner/matthias_kirschner_en_desktop.webm" />
@ -110,33 +77,17 @@
<figcaption>
Twenty years ago, Reinhard Wiesemann, the sponsor of Youth Hacking 4
Freedom, won a hacking competition for young people. Reinhard used the
money from his cash prize to advance his professional development. He
remembers that competition as a unique experience, fun as well as
rewarding.
money from his cash prize to advance his professional development.
</figcaption>
</figure>
<module id="banner-become-supporter"/>
<h2>Jury members</h2>
<div class="icon-grid">
<ul>
<li>
<img src="https://pics.fsfe.org/uploads/thumb/54f136a544ae095b158468244c98c30a.jpeg" class="img-circle" alt="Vincent Lequertier" />
<div>
<h3>Vincent Lequertier</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa.
</p>
</div>
</li>
</ul>
<div class="color-box background" data-color="android-blue">
<p>Do you have more questions before registering?</p>
<a href="/activities/yh4f/faq.html" class="btn btn-default">Go to our FAQ</a>
</div>
<div class="color-box" data-color="burnt-sienna">
<h2>Register your project!</h2>
<div class="color-box border" data-color="fsfe-blue">
<h2 id="register">Register your project!</h2>
<form class="form-horizontal" action="https://forms.fsfe.org/email" method="POST" >
<input type="hidden" name="appid" value="yh4f" />
@ -193,7 +144,7 @@
<textarea class="form-control" id="self_description" name="self_description" rows="5" required="required"></textarea>
</div>
<div class="col-sm-3 small">
For example, where do you live? What hobbys and interests do you have? What motivates you? Please limit it to 600 characters.
For example, where do you live? What hobbys and interests do you have? What motivates you?
</div>
</div>
@ -206,6 +157,21 @@
</form>
</div>
<h2 id="jury">The Jury</h2>
<div class="color-box background">
<a href="/activities/yh4f/evaluation.html" class="btn btn-primary">Get to know all jury members</a>
</div>
<div class="color-box background" data-color="dark-green">
<p>
Contribute to the development of young hackers in Europe
</p>
<fsfe-cd-donate-link class="btn btn-default">Become a supporter now</fsfe-cd-donate-link>
</div>
</body>
</html>

2
activities/yh4f/register-confirm.en.xhtml
View File

@ -7,7 +7,7 @@
<title>Confirmation required for your Youth Hacking 4 Freedom registration</title>
</head>
<body>
<body class="yh4f">
<p id="category"><a href="/activities/yh4f/index.html">Youth Hacking 4 Freedom</a></p>
<h1>Confirmation required for your Youth Hacking 4 Freedom registration</h1>

2
activities/yh4f/register-success.en.xhtml
View File

@ -7,7 +7,7 @@
<title>Youth Hacking 4 Freedom registration: confirmation successful</title>
</head>
<body>
<body class="yh4f">
<p id="category"><a href="/activities/yh4f/index.html">Youth Hacking 4 Freedom</a></p>
<h1>Registration successful</h1>

4
look/elements/color-box.less
View File

@ -49,6 +49,7 @@ div.color-box {
font-weight: 500;
text-align: center;
color: white;
padding: 15px;
// Move the headline closer to the box top, and thicker
h2, h3 {
@ -99,5 +100,8 @@ div.color-box {
&[data-color=android-blue] {
background-color: #4594C3;
}
&[data-color=dark-green] {
background-color: #6BB340;
}
}
}

1
look/fsfe.less
View File

@ -18,6 +18,7 @@
@import "pages/spreadtheword";
@import "pages/tags";
@import "pages/upcycling-android";
@import "pages/yh4f";
/* fsfe.org pages */

12
look/pages/yh4f.less Normal file
View File

@ -0,0 +1,12 @@
// ============================================================================
// Styles specific to the /activities/yh4f/ pages
// ============================================================================
body.yh4f {
// h2 like on overview pages: center, large margin
h2 {
text-align: center;
margin-top: 60px;
margin-bottom: 20px;
}
}