mirror of
https://github.com/webslides/WebSlides.git
synced 2025-08-24 13:53:21 +02:00
2 new demos: longform and interviews
This commit is contained in:
José Luis Antúnez
committed by
GitHub
GitHub
parent
e12bb58d10
commit
adfe0e98bc
336
demos/interviews.html
Normal file
336
demos/interviews.html
Normal file
@@ -0,0 +1,336 @@
|
||||
<!doctype html>
|
||||
<html lang="en" prefix="og: http://ogp.me/ns#">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- CLEAN MARKUP = GOOD KARMA.
|
||||
Hi source code lover,
|
||||
|
||||
you're a curious person and a fast learner ;)
|
||||
Let's make something beautiful together. Contribute on Github:
|
||||
https://github.com/webslides/webslides
|
||||
|
||||
Thanks!
|
||||
-->
|
||||
|
||||
<!-- SEO -->
|
||||
<title>WebSlides Demo: Longform Interviews</title>
|
||||
<meta name="description" content="WebSlides is about telling stories. Create longform interviews with ease.">
|
||||
|
||||
<!-- URL CANONICAL -->
|
||||
<!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
|
||||
|
||||
<!-- Google Fonts -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&subset=latin-ext" rel="stylesheet">
|
||||
|
||||
<!-- CSS Base -->
|
||||
<link rel="stylesheet" type="text/css" media="all" href="../static/css/base.css">
|
||||
|
||||
<!-- CSS Colors -->
|
||||
<link rel="stylesheet" type="text/css" media="all" href="../static/css/colors.css">
|
||||
|
||||
<!-- Optional - CSS SVG Icons (Font Awesome) -->
|
||||
<link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
|
||||
|
||||
<!-- SOCIAL CARDS (ADD YOUR INFO) -->
|
||||
|
||||
<!-- FACEBOOK -->
|
||||
<meta property="og:url" content="http://your-url.com/permalink"> <!-- EDIT -->
|
||||
<meta property="og:type" content="article">
|
||||
<meta property="og:title" content="WebSlides Demo: Longform Interviews" /> <!-- EDIT -->
|
||||
<meta property="og:description" content="Create longform interviews with ease. Just the essentials."> <!-- EDIT -->
|
||||
<meta property="og:updated_time" content="2017-03-28T12:17:24"> <!-- EDIT -->
|
||||
<meta property="og:image" content="https://webslides.tv/static/images/share-interviews.jpg" > <!-- EDIT -->
|
||||
<meta property="og:image:width" content="800">
|
||||
<meta property="og:image:height" content="429">
|
||||
|
||||
<!-- TWITTER -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@webslides"> <!-- EDIT -->
|
||||
<meta name="twitter:creator" content="@jlantunez"> <!-- EDIT -->
|
||||
<meta name="twitter:title" content="WebSlides Demo: Longform Interviews"> <!-- EDIT -->
|
||||
<meta name="twitter:description" content="Create longform interviews with ease. Just the essentials."> <!-- EDIT -->
|
||||
<meta name="twitter:image" content="https://webslides.tv/static/images/share-interviews.jpg"> <!-- EDIT -->
|
||||
|
||||
<!-- FAVICONS -->
|
||||
<link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
|
||||
<link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
|
||||
<link rel="apple-touch-icon icon" sizes="76x76" href="../static/images/favicons/favicon-76.png">
|
||||
<link rel="apple-touch-icon icon" sizes="120x120" href="../static/images/favicons/favicon-120.png">
|
||||
<link rel="apple-touch-icon icon" sizes="152x152" href="../static/images/favicons/favicon-152.png">
|
||||
<link rel="apple-touch-icon icon" sizes="180x180" href="../static/images/favicons/favicon-180.png">
|
||||
<link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">
|
||||
|
||||
<!-- Android -->
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="theme-color" content="#333333">
|
||||
</head>
|
||||
<body>
|
||||
<header role="banner">
|
||||
<nav role="navigation">
|
||||
<p class="logo"><a href="https://webslides.tv" title="WebSlides">WebSlides</a></p>
|
||||
<ul>
|
||||
<li class="github">
|
||||
<a rel="external" href="https://github.com/webslides/webslides" title="Github">
|
||||
<svg class="fa-github">
|
||||
<use xlink:href="#fa-github"></use>
|
||||
</svg>
|
||||
<em>WebSlides</em>
|
||||
</a>
|
||||
</li>
|
||||
<li class="twitter">
|
||||
<a rel="external" href="https://twitter.com/webslides" title="Twitter">
|
||||
<svg class="fa-twitter">
|
||||
<use xlink:href="#fa-twitter"></use>
|
||||
</svg>
|
||||
<em>@WebSlides</em>
|
||||
</a>
|
||||
</li>
|
||||
<!-- <li class="dribbble"><a rel="external" href="http://dribbble.com/webslides" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>webslides</em></a></li> -->
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main role="main">
|
||||
<article>
|
||||
|
||||
<section class="bg-black">
|
||||
<!-- Overlay/Opacity: [class*="bg-"] > .background.dark or .light -->
|
||||
<span class="background-bottom" style="background-image:url('https://source.unsplash.com/p3UCTiZIU6M/1600x800')"></span>
|
||||
<!--.wrap = container width: 90% -->
|
||||
<div class="wrap">
|
||||
<p class="text-subtitle">Powered by <a href="https://webslides.tv">WebSlides</a></p>
|
||||
<h1>
|
||||
<strong>Designing Interviews</strong>
|
||||
</h1>
|
||||
<p class="text-intro">All content is for demo purposes only.
|
||||
</p>
|
||||
<p><img class="avatar-40" src="../static/images/avatar.jpg" alt="Avatar David González"> By David González. Nov 8th, 2024.</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-white">
|
||||
<!--.wrap.longform (width:72rem=720px) = Better reading experience (90-95 characters per line) -->
|
||||
<div class="wrap longform">
|
||||
<h2><strong>The Art of the Interview</strong></h2>
|
||||
<p class="text-intro">The stories you tell, whether in text form, by way of video or through audio, are only as good as the information you gather.</p>
|
||||
<p>Interviewing is the cornerstone of journalism. Interviews usually take place face to face and in person, although modern communications technologies such as the Internet have enabled conversations to happen in which parties are separated geographically, such as with videoconferencing software, and of course telephone interviews can happen without visual contact.</p>
|
||||
<hr>
|
||||
<dl class="text-interview">
|
||||
<dt>David:</dt>
|
||||
<dd>
|
||||
<p><strong>Hi, this is a WebSlides Demo, where we interview the people who make us happy. I’m your host, David González. This week I interviewed lawyer Sheryl Hadid. Hi Sheryl!</strong></p>
|
||||
</dd>
|
||||
<dt>Sheryl:</dt>
|
||||
<dd>
|
||||
<p>Hi David!</p>
|
||||
</dd>
|
||||
<dt>David:</dt>
|
||||
<dd>
|
||||
<p><strong><a href="http://www.newmediarights.org/are_interviews_copyrighted" target="_blank">Are interviews copyrighted?</a> When does an interview become copyrightable?</strong></p>
|
||||
</dd>
|
||||
<dt>Sheryl:</dt>
|
||||
<dd>
|
||||
<p>The answer is it depends. Copyright of speech given during an interview relies heavily on the "fixation" element of copyright law. When a work is fixed in a copy or recording, the work is created. This gives the work its copyright. Therefore, when an interview is physically recorded it becomes copyrighted.</p>
|
||||
</dd>
|
||||
<dt>David:</dt>
|
||||
<dd>
|
||||
<p><strong>How could the person being interviewed own the copyright to an interview?</strong></p>
|
||||
</dd>
|
||||
<dt>Sheryl:</dt>
|
||||
<dd>
|
||||
<p>This may be a surprise but there are moments when the person being interviewed could in fact have copyright ownership in their words. For example, if the person being interviewed receives a list of questions from the interviewer and records their calculated responses, they could have copyright ownership in their answers because they not the interviewer actually wrote down or otherwise recorded their response.</p>
|
||||
</dd>
|
||||
<dd>
|
||||
<blockquote class="text-quote">
|
||||
<p>People want to be smart. So, if you ask smart questions and show an interest in a particular subject they love sharing their insight.<code>.text-quote</code>.</p>
|
||||
</blockquote>
|
||||
</dd>
|
||||
<dd>
|
||||
<p>However, courts are hesitant to apply this concept broadly to spoken interviews because of the impact it could have on the First Amendment and the heavy caseload it would bring to an already overloaded court system. See Falwell v. Penthouse Intern., Ltd. This also opens the door for other legal arguments such as fair use. Furthermore, there are times when contractual releases could affect the copyright and alter default copyright rules. </p>
|
||||
</dd>
|
||||
</dl>
|
||||
<hr>
|
||||
<div class="text-pull embed">
|
||||
<iframe width="800" height="450" src="https://www.youtube.com/embed/7xYZ3rMT8_A?rel=0&controls=0" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
<!--.text-pull.embed (responsive video) -->
|
||||
<hr>
|
||||
<dl class="text-interview">
|
||||
<dt>David:</dt>
|
||||
<dd>
|
||||
<p><strong>What are some methods to record an interview and what should the person being interviewed do?</strong></p>
|
||||
</dd>
|
||||
<dt>Sheryl:</dt>
|
||||
<dd>
|
||||
<p>Most often when problems with interview ownership arise it’s because persons being interviewed are unhappy with the way an interviewer uses their responses during interviews to mislead readers or viewers of a broadcast. This causes interviewees to claim their copyright was infringed because they claim to own the copyright to their speech during the interview.</p>
|
||||
</dd>
|
||||
<dt>David:</dt>
|
||||
<dd>
|
||||
<p><strong>When do problems with interview ownership arise, and who usually owns the copyright?</strong></p>
|
||||
</dd>
|
||||
<dt>Sheryl:</dt>
|
||||
<dd>
|
||||
<p>The most successful way to fix an interview is for interviewers to audio record or hand write the responses of the person being interviewed. If the interview is recorded by hand, it is helpful if the writing is legible and clearly communicates the conversation because it may help solve questions about fixation. Short hand that only describes excerpts from the interview typically are not enough to constitute fixation and copyright ownership. So please remember, if there is no fixation of the interview then no copyright exists in that interview.</p>
|
||||
</dd>
|
||||
<dd>
|
||||
<p>Further, if you are being interviewed please be aware that you do not possess ownership over your responses in most situations. It is always best to briefly think about your answer before you respond to avoid the misuse of your words by others. And if you truly don’t feel comfortable being interviewed by a particular media source, remember you always have the power to say no to doing the interview.</p>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<!--.wrap = container width: 90% -->
|
||||
<div class="wrap size-50 aligncenter">
|
||||
<h3><strong>Things you can do with WebSlides</strong></h3>
|
||||
<p class="text-intro"><a href="/demos/why-webslides" title="Why WebSlides?">Presentations</a>, <a href="/demos/landings" title="Landings">landings</a>, <a href="/demos/portfolios" title="Portfolios">portfolios</a>, and <a href="/demos/longforms" title="Longforms">longforms</a>.</p>
|
||||
<div class="bg-white shadow">
|
||||
<ul class="flexblock reasons">
|
||||
<li>
|
||||
<h2>An opportunity to engage.</h2>
|
||||
<p><a href="https://webslides.tv" title="WebSlides">WebSlides</a> is about good karma. This is about telling the story, and sharing it in a beautiful way. HTML and CSS as narrative elements.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h2>Work better, faster.</h2>
|
||||
<p>Designers, marketers, and journalists can now focus on the content. Simply <a href="https://webslides.tv/demos" title="WebSlides Demos">choose a demo</a> and customize it in minutes.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- .end .bg-white shadow -->
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-white">
|
||||
<!--.wrap = container width: 90% -->
|
||||
<div class="wrap longform">
|
||||
<dl class="text-interview">
|
||||
<dt>David:</dt>
|
||||
<dd>
|
||||
<p><strong>What are some methods to record an interview and what should the person being interviewed do?</strong></p>
|
||||
</dd>
|
||||
<dt>Sheryl:</dt>
|
||||
<dd>
|
||||
<p>Most often when problems with interview ownership arise it’s because persons being interviewed are unhappy with the way an interviewer uses their responses during interviews to mislead readers or viewers of a broadcast. This causes interviewees to claim their copyright was infringed because they claim to own the copyright to their speech during the interview.</p>
|
||||
</dd>
|
||||
<dt>David:</dt>
|
||||
<dd>
|
||||
<p><strong>When do problems with interview ownership arise, and who usually owns the copyright?</strong></p>
|
||||
</dd>
|
||||
<dt>Sheryl:</dt>
|
||||
<dd>
|
||||
<p>The most successful way to fix an interview is for interviewers to audio record or hand write the responses of the person being interviewed. If the interview is recorded by hand, it is helpful if the writing is legible and clearly communicates the conversation because it may help solve questions about fixation. Short hand that only describes excerpts from the interview typically are not enough to constitute fixation and copyright ownership. So please remember, if there is no fixation of the interview then no copyright exists in that interview.</p>
|
||||
</dd>
|
||||
<dd>
|
||||
<p>Further, if you are being interviewed please be aware that you do not possess ownership over your responses in most situations. It is always best to briefly think about your answer before you respond to avoid the misuse of your words by others. And if you truly don’t feel comfortable being interviewed by a particular media source, remember you always have the power to say no to doing the interview.</p>
|
||||
</dd>
|
||||
</dl>
|
||||
<hr>
|
||||
<h3 class="aligncenter"><strong>Stories that stay with you</strong></h3>
|
||||
<p class="aligncenter">Subscribe to our newsletter. All content is for demo purposes only.</p>
|
||||
<form action="/" class="bg-light user" method="post">
|
||||
<input type="email" name="email" tabindex="1" autocomplete="off" placeholder="your@email.com" required>
|
||||
<button type="submit" tabindex="2" title="Subscribe">Subscribe ›</button>
|
||||
</form>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<!-- .wrap = container width: 90% -->
|
||||
<div class="wrap aligncenter">
|
||||
<h2><strong>Ready to start?</strong> </h2>
|
||||
<p class="text-intro">Create your stories instantly.</p>
|
||||
<p>
|
||||
<a href="https://webslides.tv/webslides-latest.zip" class="button ga-track" data-ga-text="Download WebSlides (last slide interviews)" title="Download WebSlides">
|
||||
<svg class="fa-cloud-download">
|
||||
<use xlink:href="#fa-cloud-download"></use>
|
||||
</svg>
|
||||
Free Download
|
||||
</a>
|
||||
<span class="try">
|
||||
<a href="https://www.paypal.me/jlantunez/8" title="Thanks :)">
|
||||
<svg class="fa-paypal">
|
||||
<use xlink:href="#fa-paypal"></use>
|
||||
</svg>
|
||||
Pay what you want.
|
||||
</a>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
<!--main-->
|
||||
|
||||
<footer role="contentinfo">
|
||||
<div class="wrap">
|
||||
<div class="grid">
|
||||
<div class="column">
|
||||
<h3>Company</h3>
|
||||
<ul>
|
||||
<li><a href="">About</a></li>
|
||||
<li><a href="">Team</a></li>
|
||||
<li><a href="">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- .end .column -->
|
||||
<div class="column">
|
||||
<h3>Support</h3>
|
||||
<ul>
|
||||
<li><a href="">Shipping & Returns</a></li>
|
||||
<li><a href="">FAQ</a></li>
|
||||
<li><a href="">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- .end .column -->
|
||||
<div class="column">
|
||||
<h3>Legal</h3>
|
||||
<ul>
|
||||
<li><a href="">Terms of Service</a></li>
|
||||
<li><a href="">Privacy Policy</a></li>
|
||||
<li><a href="">Cookies</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- .end .column -->
|
||||
<div class="column">
|
||||
<h3>Community</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="">
|
||||
<svg class="fa-facebook">
|
||||
<use xlink:href="#fa-facebook"></use>
|
||||
</svg>
|
||||
Facebook
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<svg class="fa-youtube">
|
||||
<use xlink:href="#fa-youtube"></use>
|
||||
</svg>
|
||||
YouTube
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<svg class="fa-twitter">
|
||||
<use xlink:href="#fa-twitter"></use>
|
||||
</svg>
|
||||
Twitter
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- .end .column -->
|
||||
</div>
|
||||
<!-- .end .grid -->
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</footer>
|
||||
|
||||
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
|
||||
<script defer src="../static/js/svg-icons.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user