Pitbul 2008 2

Post on 29-Oct-2014

642 views 1 download

description

Slajdy z Praktika internetové tvorby 2

transcript

Opakování: „skenovatelný“ text• Využívat titulky, mezititulky atd.• Tučně

– Důležitá slova, jména• Kurzíva

– Citace, názvy děl, …• Odstavce

– Jedno téma = jeden odstavec. Ne moc dlouhé• Odrážky• Odkazy• Barvy

– výjimečně, ne modrou• Členění na víc stránek

Opakování: 10 tipů pro dobrý text

1. Text je rozhodující2. Pište stručně3. Používejte výstižné

titulky4. Dělejte krátké odstavce

s řádkovou mezerou5. Čleňte text do boxů a

výčtů

6. Používejte ztučnění7. Používejte kurzívu8. Nestřídejte divoce fonty

a barvy9. Používejte

hypertextové odkazy10. Vymýšlejte desatera

Opakování: Titulky

2

Napsáním textu to nekončí

• Multimedialita • Diskuse pod článkem• Diskuse mimo server (blogy)• Komunitní servery

Komunitní servery

• Digg.com• Reddit.com• Mixx.com• Yahoo! Buzz• StumbleUpon• Linkuj.cz• Vybrali.sme.sk• Del.icio.us• Jagg.cz

Co máme umět

Co se od online žurnalisty očekává?

• 94.9% Multitasking• 94.9% Cit pro detail• 94.9% Komunikační schopnosti• 94.9% Schopnost pracovat pod časovým tlakem

• 84.8% Povědomí o nových technologiích• 84.8% Týmová práce• 80.3% Schopnost učit se novým technologiím

• 57.8% Kultivovat online komunitu [trend]• 55.6% Rozumět obchodní stránce• 51% Pracovat s čtenářskými příspěvky [trend]

Co se od online žurnalisty očekává #2

• 88.4% Cit pro zprávu• 81.3% Jazyk a styl• 76.3% Umět psát dobré titulky• 64.1% Zkracovat a spojovat články• 64.1% Umět psát dobré perexy

Co se od online žurnalisty očekává #3

• 72.7% Umět pracovat s publikačním systémem• 71.7% znalost HTML• 55.6% ovládání Photoshopu• 44.4% Použitelnost webu• 38.4% Dreamweaver• 37.9% Web design• 32.8% Analýza návštěvnosti• 26.8% Práce s multimédii• 23.2% CSS• 15.7% skriptovací jazyky• 14.6% Flash• 14.6% Práce s databázemi• 13.6% Javascript

Tolarová zkouška

• Neumí popsat příběh• Neumí používat citace• Používá Komplikované věty• Přebírá odborné výrazy z tiskovek• Nadšený z plamenných projevů politiků• Kopíruje nelogické informace• Gramatika!• Neumí vytáhnout to důležité• Neumí titulky

Co dělá online žurnalista

Co dělá online žurnalista

• Práce s agenturními zprávami– překlápění x rozvíjení x inspirace

• Aktualizace článků z deníku• Vlastní články• Reportáže během zvláštních události

– Povodně– Velké sjezdy (MMF)– Sportovní online přenosy

Co dělá online žurnalista 2

• Vymýšlí ankety• Moderuje diskuse• Stará se o chaty s osobnostmi• Speciály• Slideshow / audio / foto • e-mail newslettery, SMS• nenovinářské texty

Konvergence médií

• Není žádné „internet x tisk“• Jsou jen mediální organizace, které touží po silné

přítomnosti ve všech médiích• Je jedno, jestli jakékoli médium umře

HTML v kostce• <html> - dokument začíná

• <head> - metadata začínají• ...• </head> - metadata končí

• <body> - „tvrdý“ obsah webu začíná• ...• </body> - „tvrdý“ obsah webu končí

• </html> - dokument končí

HTML v mikro-kostce<html> <head> <title>Má krásná webová stránka</title> </head>

<body> <h1>Titulek toliko hlavní</h1> <p>Odstavec s <strong>tučným textem</strong>, s <em>kurzivou</em>. <span style="color:

red;">Červený text.</span></p>

<h2>Nadpis druhé úrovně</h2> <p>Odstavec s <em><strong>tučnou kurzivou.</strong></em><br />Text po zalomení řádku patří do téhož odstavce.</p>

</body> </html>

Hlavní HTML tagy• Strong, b• Em, i, cite• P• Br• H1, h2, ...• Blockquote• Li• Ol• Ul• A• Img• Table• Tr• Td• embed

• Tučně• Kurzíva• Odstavec• Řádka• Titulek• Odsazený blok• Položka seznamu• Číslovaný seznam• Odrážkový seznam• Odkaz• Obrázek• Tabulka• Řádek• Buňka• vložení

„Novinářské tagy“• A

– <a href=http://www.google.com/>text odkazu</a>

• img– <img src=http://www.google.cz/intl/en_com/images/logo_plain.png”>logo gůglu

• Embed a spol.– <object width="425" height="355">

<param name="movie" value="http://www.youtube.com/v/4rb8aOzy9t4"></param><param name="wmode" value="transparent"></param>

<embed src="http://www.youtube.com/v/4rb8aOzy9t4" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>

CSS v nano-kostce

• V HTML jen jedna řádka v hlavičce:– <link rel="stylesheet" type="text/css" href="styly.css">

• Příklad:p {text-indent: 30px; margin: 0px 0px 0px 0px, }a {text-decoration: none}a:link {color: green}a:visited {color: navy}a:active {color: black}a:hover {color: red; text-decoration: underline}h2 {color: blue; font-style: italic}h1 {color: green; text-align: center}

Mikroformáty• <a href="http://mary.example.com/" rel="co-worker friend

met">Mary</a>

<h3><strong>Internet</strong> <strong>Info</strong>, s.r.o.</h3>

<p class="itAddrLine">Durychova 101/66, Praha-Lhotka, Praha 4</p>

<div class="vcard"><div class="fn org">Internet Info</div><div class="adr"><div class="street-address">Durychova 101/66</div><span class="locality">Praha 4</span><span class="country-name">Czech Republic</span> </div> </div>

“Hloupý“ zápis „Chytrý zápis“

HTML 5

• Dohánění vývoje webu• Bůhvíkdy (2012?)• Nové tagy (<footer>, <article>, <dialog>, ...)• Opuštění starých (strike, center, ...)• Canvas• Audio, video, web apps

SEO pro novináře

• Určete a používejte klíčová slova – Jména osobností, místní názvy– Oblíbená fráze

• Můžete-li změnit <title> stránky v HTML• Volte nadpisy H1-H6• Zvýrazněte důležitá sdělení <strong>• Budujte zpětné odkazy

– eticky