• Web Design and Development - WWW-suunnittelu ja -kehittäminen

    #wip

  • MarkUp & Coding

    #wip

  • Esiintyminen

    #wip

  • MarkDown

  • Projektit ja prosessit

    #wip

  • Sekalaista

    Materiaalia, joka ei sovi minkään tai sopisi useamman otsikon alle.

    #wip

  • Käyttämistäni työkaluista

    Lista paljon käyttämistäni työkaluista ja kenties tietoa niiden käytöstä.

    #wip

  • CMS

    #wip

  • Käyttöliittymä (UI) ja käyttäjäkokemus (UX)

  • PECHA KUCHA

  • Dropbox

    Otsikossa on suosituslinkki, jonka kautta rekisteröitymällä saat 500 Mt ekstratallennustilaa ja minä saisin 1Gt, jollen olisi jo Premium-käyttäjä. #dropbox #win #mac #web #ios #android
  • Evernote

    Otsikossa on referral- eli suosituslinkki, jonka kautta rekisteröityessäsi saat käyttöösi Evernote Premiumin kuukaudeksi. Lisäksi minä saan suosituspisteitä, joilla voin saada jotakin, jos niitä kertyy tarpeeksi. #evernote #win #mac #web #ios #android
  • Gingko TÄMÄ SOVELLUS!

    Offline-tila Gingkosta vielä puuttuu, mutta tulossa sen pitäisi olla. Kenties ainoa merkittävä puute muutoin hyvin vahvassa sovelluksessa. Toisena ehkä deep linking eli linkittäminen julkisen puun yksittäiseen korttiin. #gingko #web
  • Google Drive

    #googledrive #win #mac #web #ios #android
  • IFTTT

    #web #ios
  • Trello

    Otsikossa on suosituslinkki, jonka kautta sain Trello Goldin kaikkiaan 12 kuukaudeksi, kun käyttäjiä rekisteröityi sen kautta. Enempää en voi saada, mutta on kiva tietää, jos joku rekisteröityy minun suosituksestani. #trello #win #mac #web #ios #android
  • Quip

    #quip #win #mac #web #ios #android
  • MODX

  • WordPress

    #wordpress
  • W3C:n training-materiaalia

  • Linkkien muotoileminen

    http://www.w3schools.com/css/css_link.asp #css

  • Elementtien keskittäminen CSS:llä

    Centering in CSS: A Complete Guide
    Published September 2, 2014 by Chris Coyier

    Centering things in CSS is the poster child of CSS complaining. Why does it have to be so hard? They jeer. I think the issue isn’t that it’s difficult to do, but in that there so many different ways of doing it, depending on the situation, it’s hard to know which to reach for.

    So let’s make it a decision tree and hopefully make it easier.

    #css

  • All About Floats
    July 8, 2009 by Chris Coyier

    Float is a CSS positioning property. To understand its purpose and origin, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. This is commonly and appropriately called “text wrap”. - -

    In page layout programs, the boxes that hold the text can be told to honor the text wrap, or to ignore it. Ignoring the text wrap will allow the words to flow right over the image like it wasn’t even there. This is the difference between that image being part of the flow of the page (or not). Web design is very similar.

    #css

  • Box Model

    #css
  • DOM

  • Border

    #css
  • Mini CSS-harjoitukset

    Tee jokaisesta tehtävästä oma sivu työhakemistoon ja linkitä sivut keskenään niin, että jokaiselta sivulta pääsee mille tahansa muulle sivulle. Toteuta sivut lisäämällä seuraava tehtävä edellisen koodiin. Kaiken html -koodin tulee olla XHTML:n mukaista ja visuaaliset tyylit toteutettu CSS:llä. CSS-koodista voit tehdä erilliset tiedostot tai sisällyttää html-sivuun tageilla.

    #css
  • 2. VALITSE AIHE

    • Sellainen, joka inspiroi sinua
    • Sellainen, josta on liikaa sanottavaa
  • 3. KÄYTÄ PAPERIA

    • Unohda tietokone, suunnittele rakenne paperille
    • Miksi?

    http://blog.mural.ly/6-tips-for-storyboarding-a-presentation-in-under-10-minutes/

  • 4. BRAINSTORMING

    • Kerää ideoita, keywordejä, lauseita jne, kirjoita kaikki ylös
    • Organisoi laput
    • Leikkaa palasiksi - fyysisiksi slideiksi

    http://blog.mural.ly/why-brainstorming-is-only-half-the-battle/

  • 5. JÄRJESTÄ IDEAT RYHMIKSI (SLIDEIKSI)

    • Muista että 5 diaa on jo 1/4 koko esityksestä
  • 6. KAIKEN EI TARVITSE NÄKYÄ/LUKEA DIOISSA

  • 7. DIOJEN DESIGN

    • Isoja kuvia
    • Vähän tekstiä
    • Vähemmän kuin 4 kuvaa per slide
    • Pidä design yhteneväisenä koko esityksen matkalta
  • 8. KUVAT

    • Mistä kuvia löytää?
  • 9. MUIDEN EDESSÄ

    • Älä lue. ESIINNY!
    • Välitä energiaa, välitä inspiraatiosi ja kiinnostuksesi
    • More fire!
  • 10. TREENI, TREENI, TREENI

    • Harjoittele ohjelman kanssa (PP ja Keynote mahdollistavat slidejen ajastuksen)
    • Katse. Anna katseen vaeltaa. Katso jotakuta vierasta silmiin.
    • “Fillerit” - ööö, tota, niin, totanoinni
    • Anna kuvien puhua: “Tässä on kuva minusta nuorena vs. Rakastuin ensi kertaa 10-vuotiaana”
    • Treenaa kuulokkeet päässä, musiikki päällä
    • Käy läpi presentaatio ensimmäisenä aamulla
  • EKSTRAA

    Eri järjestyksessä - dia tulee ensin, asia vasta sitten
    Diat jaottavat esityksen
    Näytä konkreettista - aivot
    Huumori
    Ruumiinkieli
    Metaforat - balloon
    Inspiration - yhdistäminen johonkin tuttuun
    Kysy yleisöltä
    TED-treenaus ja käsikirjoitus

  • Dokumentit, kuvat ja monet muuta tiedostot on helppo pitää aina saatavilla, kun niistä on kopio Dropboxissa tai jossakin muussa verkkotallennuspalvelussa. Muita palveluita ovat esimerkiksi Box.com, Google Drive ja Microsoft OneDrive.

  • Gingkoapp – A Revolutionary Editor For Writers
    June 10, 2014 9:00 am by Matthew Setter

    Looking for an application giving you the ability to organize your writing like sheets of paper, with the power of a web-based app? If so, I’ve got the answer!

    #gingko
  • Gingko Usage Examples

    Gingko is a very versatile tool, and has been used for everything from writing physics papers, drafting novels, and planning baby purchases.

    These are just some examples of its uses.

    #gingko
  • Gingko is not (just) an outliner
    July 19, 2014 Gingko Blog

    I find that it sometimes takes a while for new users to get used to Gingko.

    I always say there’s no “right” way to use Gingko. But there is one point that might help you see your trees differently. And it might make the difference between getting stuck on an idea, and having it just flow onto the page.

    First of all, think about the phrase “flow onto the page”. It implies that there is a stream of information that begins in your mind, and needs to pass through a very narrow channel (your typing fingers), to emerge on a Gingko tree.

    Thinking of writing as information flow brings in a few analogies from the field of communication theory, which I find helps explain why a Gingko tree is not just an outline.

    When arranging and organizing a tree, you shouldn’t be thinking in terms of categories (“Where should this go?”), but in terms of lossy compression and a sum of parts.

    #gingko
  • Mindset: From “To Do” to “Could Do”
    July 4, 2014 Gingko Blog

    Reframing your lists slightly can make a tremendous psychological difference. Here’s why.

    The “Must Do” list is a list of promises (to yourself, to your partner, to anyone you respect). As with all promises, you shouldn’t make them unless you are sure you can deliver. And every item added to a “Must Do” list is deliberated on carefully, because adding too much to a “Must Do” list will lead to a complete breakdown of the system.

    A “Could Do” list, on the other hand, is a list of all the possible paths you could take next (some of which may be mutually exclusive). There’s no fear of adding things to a “Could Do” list. And instead of approaching the list with dread, with a little practice you can learn to approach it with curiosity and excitement. (“Ooh, look at all the things I could be doing!”).

    However, there is one more caveat: the “Could Do” list can (and should) become very large. So how do you prevent information overload, and actually choose from this list?

    #gingko
  • Gingko for Goal-setting & Journaling
    September 24, 2013 Gingko Blog

    The greatest challenge in any large project, is keeping the daily tasks aligned with the long term goal.

    It’s very easy to get lost in the details and the daily grind, and forget the big picture. Then you look up after two weeks of “hard work” to see where you’re at, and find you are no closer to your goal.

    As with many challenges we all face in life, it’s partly due to a fundamental limitation of the human brain. We simply can’t keep our mind on the big picture, while we’re working on the details. And since we can only make progress by doing the daily detailed tasks, it’s very easy to get overwhelmed or lost.

    With Gingko, we have an alternative approach: hierarchical goals. While not a new idea, Gingko is better suited to displaying these goals than most other software out there.

    #gingko
  • Planning a PowerPoint presentation in Gingko
    March 9, 2014 by Dr Andus

    #gingko
  • Aloita tekemällä harjoituksille työkansio portfolio.omnia.fi -sivustollesi.

    1. Tee sivu jonka sisältö pysyy aina keskellä selainikkunan leveydestä huolimatta. Voit määrittää sivulle taustavärin.
    2. Tee neljä 100 x 50px (w x h) div:iä ja laita ne vierekkäin ilman position:relative tai position:absolute - määritystä. Voit määritellä div:eille taustavärin.

      • Muokkaa sivua niin että siirrät div:t sivun oikeaan reunaan niin, että oikeanpuoleinen on 150px päässä sivun reunasta. Tämä myös ilman position:relative tai position:absolute -määritystä.
    3. Valitse (etsi googlesta) jokin kuva, lisää se web-sivulle ja lisää kuvaan linkki Googlen kuvahakuun. Poista CSS:llä linkistä johtuva sininen reunus (reunus näkyy ainakin IE:llä). Sijoita kuva 100x50px div:n viereen.

    4. Lisää sivulle viisi riviä lorem ipsumia. Kavenna tekstialueen koko 300px leveäksi ILMAN div -tägejä.
    5. Tee lista (<ul> / <li>) HTML:llä. Vaihda CSS:n avulla listan edessä olevien pallojen tilalle mikä tahansa pieni kuva.
    6. Muokkaa sivun linkkejä niin, että tavalliset linkit, vieraillut linkit ja linkit, joiden päällä hiiren kursori on, näyttävät erilaisilta.
    7. Tee pieni lomake (html-form), jossa on kaksi erilaista tekstikenttää, kaksi checkboxia, kaksi radio-buttonia ja lähetä -nappi. Muokkaa CSS:llä lomake-elementtien ulkonäköä (esim. tekstiboxien taustaväri tai fontti jne.)
    8. Tee sivulle CSS:llä toteutettu rollover -kuva. Voit muokata aiempaa kuvaa.
    9. Lisää sivulle toinen kuva. Muokkaa CSS:llä ensimmäisen kuvan leveydeksi 200px ja toisen 300px.
    10. Tee sivulle kolme kappaletta tekstiä. Sisennä keskimmäisen kappaleen ensimmäinen rivi CSS:llä.
    11. Tee 200px korkea ja 400px leveä div. Laita sen sisälle reilusti tekstiä. Lisää tekstille vierityspalkki (scroll bar), jotta saat kaiken tekstin näkyviin.
  • Extratehtävät

    1. Tee linkeistä navigaatiopalkki sivujen yläreunaan, vaakariviin vierekkäin. Vinkki: w3schools.com, css navigation.
    2. Kokeile w3.orgin html/css validatoreita (http://validator.w3.org ja http://jigsaw.w3.org/css-validator). Jos saat virheilmoituksia, selvitä miksi ja yritä korjata niistä ainakin yksi.ilman että sivun layout oleellisesti muuttuu. Kommentoi korjaukset koodiin.
    3. Jos kirjoitit css-koodin html-sivulle <style> -tageihin, käytä Dreamweaveria apuna ja muunna html-sivun css-tyylit ulkoiseksi css-tiedostoksi.
  • Hello Dolly

    wordpress.org / Plugin Directory / Hello Dolly

    This is not just a plugin, it symbolizes the hope and enthusiasm of an entire generation summed up in two words sung most famously by Louis Armstrong: Hello, Dolly. When activated you will randomly see a lyric from Hello, Dolly in the upper right of your admin screen on every page.

    #wordpress #plugin

    #wip

  • Allekirjoitus (muokatusta Hello Dollysta)

    http://trello.com/artomnia > Verkkoviestintä 6

    Harjoituksen kuvaus

    Harjoituksessa voi hyödyntää aiemmin muokattua versiota Hello Dolly -pluginista.

    Luo uusi plugin nimellä “Oma nimi allekirjoitus”.

    Esimerkkinä toimii Taavetin tekemä harjoitus eli “Taavetin allekirjoitus”

    Tiedostonimeksi siis taavetin-allekirjoitus.php ja tiedoston alkuun kommentiksi:

    Plugin Name: Taavetin allekirjoitus
    Plugin URI: http://portfolio.omnia.fi/~tlehtoma/vv6/medp13sab/
    Description: VV6-kurssin harjoitusplugin.
    Version: 0.2
    Author: Taavetti Lehtomäki
    Author URI: http://ope.teevati.net

    Lisää pluginiin funktiot:

    function taavetin_allekirjoitus_vaihtoehdot($valinta) {
    // Tutkitaan, minkä allekirjoituksen käyttäjä haluaa näyttää ja palautetaan se allekirjoitus-funktiolle
    }
    
    function taavetin_allekirjoitus($valinta) {
    // Otetaan vastaan shortcoden parametrit ja välitetään ne allekirjoitus_vaihtoehdot -funktiolle
    }

    Toteuta funktio siten, että valitsemallasi shortcodella (esim. [ak]) saadaan näkyviin jokin kolmesta vaihtoehtoisesta allekirjoituksesta (esim. Taavetti tai Taavetti Lehtomäki tai Taavetti Lehtomäki, lehtori)

    Palautuksena linkki sivulle, jossa pluginin toimivuus kaikilla tavoilla näkyy (lisää viestiin tai sivustolle tarvittaessa selitys, jotta tiedän, mitä katsoa) sekä pluginin hakemisto pakattuna zip-tiedostoon.

    Harjoituksen palauttaminen

    Katso kortti https://trello.com/c/RoU81Zbc.


    Materiaalia

  • hello.php

    #wordpress #plugin

    Hello Dollyn lähdekoodi tiedostosta wp-content/plugins/hello.php

    <?php
    /**
     * @package Hello_Dolly
     * @version 1.6
     */
    /*
    Plugin Name: Hello Dolly
    Plugin URI: http://wordpress.org/plugins/hello-dolly/
    Description: This is not just a plugin, it symbolizes the hope and enthusiasm of an entire generation summed up in two words sung most famously by Louis Armstrong: Hello, Dolly. When activated you will randomly see a lyric from <cite>Hello, Dolly</cite> in the upper right of your admin screen on every page.
    Author: Matt Mullenweg
    Version: 1.6
    Author URI: http://ma.tt/
    */
    
    function hello_dolly_get_lyric() {
        /** These are the lyrics to Hello Dolly */
        $lyrics = "Hello, Dolly
    Well, hello, Dolly
    It's so nice to have you back where you belong
    You're lookin' swell, Dolly
    I can tell, Dolly
    You're still glowin', you're still crowin'
    You're still goin' strong
    We feel the room swayin'
    While the band's playin'
    One of your old favourite songs from way back when
    So, take her wrap, fellas
    Find her an empty lap, fellas
    Dolly'll never go away again
    Hello, Dolly
    Well, hello, Dolly
    It's so nice to have you back where you belong
    You're lookin' swell, Dolly
    I can tell, Dolly
    You're still glowin', you're still crowin'
    You're still goin' strong
    We feel the room swayin'
    While the band's playin'
    One of your old favourite songs from way back when
    Golly, gee, fellas
    Find her a vacant knee, fellas
    Dolly'll never go away
    Dolly'll never go away
    Dolly'll never go away again";
    
        // Here we split it into lines
        $lyrics = explode( "\n", $lyrics );
    
        // And then randomly choose a line
        return wptexturize( $lyrics[ mt_rand( 0, count( $lyrics ) - 1 ) ] );
    }
    
    // This just echoes the chosen line, we'll position it later
    function hello_dolly() {
        $chosen = hello_dolly_get_lyric();
        echo "<p id='dolly'>$chosen</p>";
    }
    
    // Now we set that function up to execute when the admin_notices action is called
    add_action( 'admin_notices', 'hello_dolly' );
    
    // We need some CSS to position the paragraph
    function dolly_css() {
        // This makes sure that the positioning is also good for right-to-left languages
        $x = is_rtl() ? 'left' : 'right';
    
        echo "
        <style type='text/css'>
        #dolly {
            float: $x;
            padding-$x: 15px;
            padding-top: 5px;        
            margin: 0;
            font-size: 11px;
        }
        </style>
        ";
    }
    
    add_action( 'admin_head', 'dolly_css' );
    
    ?>
  • taavetin-allekirjoitus.php

    #wordpress #plugin
    <?PHP
    /*
    Plugin Name: Taavetin allekirjoitus
    Plugin URI: http://portfolio.omnia.fi/~tlehtoma/vv6/medp13sab/
    Description: VV6-kurssin harjoitusplugin.
    Version: 0.2
    Author: Taavetti Lehtomäki
    Author URI: http://ope.teevati.net
    */
    
    function taavetin_allekirjoitus_vaihtoehdot($valinta) {
        // Tutkitaan, minkä allekirjoituksen käyttäjä haluaa
        // näyttää ja palautetaan se allekirjoitus-funktiolle
    
        if($valinta == "tyo") {
            $valinta = "Taavetti Lehtomäki, lehtori";
        } elseif ($valinta == "koti") {
            $valinta = "Taavetti Lehtomäki";
        } else {
            $valinta = "Taavetti";
        }
    
        return wptexturize($valinta);
    
        }
    
        function taavetin_allekirjoitus($valinta) {
        // Otetaan vastaan shortcoden parametrit ja välitetään
        // ne allekirjoitus_vaihtoehdot -funktiolle
    
        $valinta = shortcode_atts(
                array(
                    'valinta' => 'ei valintaa', // nimi => arvo eli attribuutti => parametri
                ), $valinta, 'ak' );
    
        // Välitetään valinta vaihtoehdot -funktiolle
        $chosen = taavetin_allekirjoitus_vaihtoehdot($valinta);
    
        //Palautetaan allekirjoitus siihen kohtaan, jossa shortcode on.
        return "<p class='allekirjoitus'>$chosen</p>";
        }
    
        add_shortcode( 'ak', 'taavetin_allekirjoitus' );
    ?>
  • header.php

    #wordpress

    Header.php toteuttaa jokaisen näytettävän sivun yläosan.

    Alkuosan voi käyttää sellaisenaan:

    <!DOCTYPE html>
    
    <html <?php language_attributes(); ?>>
    
    <head>
    
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    
    <meta name="viewport" content="width=device-width" />
    
    <title><?php wp_title( ' | ', true, 'right' ); ?></title>
    
    <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" />
    
    <?php wp_head(); ?>
    
    </head>
    
    <body <?php body_class(); ?>>

    Bodyn sisällä olevaa osuutta voi olla tarpeen muokata vastamaan oman layoutin HTML-markupia:

    <div id="wrapper" class="hfeed">
    
    <header id="header" role="banner">
    
    <section id="branding">
    
    <div id="site-title"><?php if ( ! is_singular() ) { echo '<h1>'; } ?><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php esc_attr_e( get_bloginfo( 'name' ), 'blankslate' ); ?>" rel="home"><?php echo esc_html( get_bloginfo( 'name' ) ); ?></a><?php if ( ! is_singular() ) { echo '</h1>'; } ?></div>
    
    <div id="site-description"><?php bloginfo( 'description' ); ?></div>
    
    </section>
    
    <nav id="menu" role="navigation">
    
    <div id="search">
    
    <?php get_search_form(); ?>
    
    </div>
    
    <?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) ); ?>
    
    </nav>
    
    </header>
    
    <div id="container">
  • The Loop

    #worpress

    Sivun sisältöalueen toteuttava tiedosto riippuu siitä, minkä tyyppisellä sivulla ollaan. Siksi tästä kohdasta käytetään yleisnimitystä The Loop eli silmukka. Nimi on kuvaava siinäkin mielessä, että mm. oletusetusivun ja arkiston sekä kategoria- ja tagilistausten tapauksessa näytetään silmukassa niin monta viestiä kuin tietokannasta löytyy tai asetuksissa on maksimimääräksi määritelty.

  • footer.php

    #wordpress

    Footer.php toteuttaa jokaisen näytettävän sivun alaosan.

    Alkuosassa on osuus, joka täytyy muokata vastamaan omaa teemaa:

    <div class="clear"></div>
    
    </div>
    
    <footer id="footer" role="contentinfo">
    
    <div id="copyright">
    
    <?php echo sprintf( __( '%1$s %2$s %3$s. All Rights Reserved.', 'blankslate' ), '&copy;', date( 'Y' ), esc_html( get_bloginfo( 'name' ) ) ); echo sprintf( __( ' Theme By: %1$s.', 'blankslate' ), '<a href="http://tidythemes.com/">TidyThemes</a>' ); ?>
    
    </div>
    
    </footer>
    
    </div>

    Aivan lopussa oleva wp_footer()-kutsu sekä body:n html:n lopetukset ovat pakollisia sellaisinaan.

    <?php wp_footer(); ?>
    
    </body>
    
    </html>
  • <?php
    /**
     * @package Hello_Dolly
     * @version 1.6
     */
  • /*
    Plugin Name: Hello Dolly
    Plugin URI: http://wordpress.org/plugins/hello-dolly/
    Description: This is not just a plugin, it symbolizes the hope and enthusiasm of an entire generation summed up in two words sung most famously by Louis Armstrong: Hello, Dolly. When activated you will randomly see a lyric from <cite>Hello, Dolly</cite> in the upper right of your admin screen on every page.
    Author: Matt Mullenweg
    Version: 1.6
    Author URI: http://ma.tt/
    */
  • function hello_dolly_get_lyric() {
  • /** These are the lyrics to Hello Dolly */
        $lyrics = "Hello, Dolly
        Well, hello, Dolly
        It's so nice to have you back where you belong
        You're lookin' swell, Dolly
        I can tell, Dolly
        You're still glowin', you're still crowin'
        You're still goin' strong
        We feel the room swayin'
        While the band's playin'
        One of your old favourite songs from way back when
        So, take her wrap, fellas
        Find her an empty lap, fellas
        Dolly'll never go away again
        Hello, Dolly
        Well, hello, Dolly
        It's so nice to have you back where you belong
        You're lookin' swell, Dolly
        I can tell, Dolly
        You're still glowin', you're still crowin'
        You're still goin' strong
        We feel the room swayin'
        While the band's playin'
        One of your old favourite songs from way back when
        Golly, gee, fellas
        Find her a vacant knee, fellas
        Dolly'll never go away
        Dolly'll never go away
        Dolly'll never go away again";
  • // Here we split it into lines
        $lyrics = explode( "\n", $lyrics );
  • // And then randomly choose a line
        return wptexturize( $lyrics[ mt_rand( 0, count( $lyrics ) - 1 ) ] );
  • }
  • // This just echoes the chosen line, we'll position it later
    function hello_dolly() {
        $chosen = hello_dolly_get_lyric();
        echo "<p id='dolly'>$chosen</p>";
    }
  • // Now we set that function up to execute when the admin_notices action is called
    add_action( 'admin_notices', 'hello_dolly' );
  • // We need some CSS to position the paragraph
    function dolly_css() {
        // This makes sure that the positioning is also good for right-to-left languages
        $x = is_rtl() ? 'left' : 'right';
    
        echo "
        <style type='text/css'>
        #dolly {
            float: $x;
            padding-$x: 15px;
            padding-top: 5px;        
            margin: 0;
            font-size: 11px;
        }
        </style>
        ";
    }
  • add_action( 'admin_head', 'dolly_css' );
    
    ?>
  • index.php

    #wordpress

    Toteuttaa etusivun oletusrakenteen (joko uusimmat postaukset tai asetuksissa valitun sivun) näyttämisen.

    Ensimmäinen rivi on pakollinen, koska get_header() -funktio ottaa header.php:n käyttöön:

    <?php get_header(); ?>

    Sen jälkeen olevaa osuutta voi olla tarpeen muokata vastamaan oman layoutin HTML-markupia:

    <section id="content" role="main">

    If-rakenne hakee oletuksena blogipostaukset etusivun sisällöksi:

    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    
    <?php get_template_part( 'entry' ); ?>
    
    <?php comments_template(); ?>
    
    <?php endwhile; endif; ?>
    
    <?php get_template_part( 'nav', 'below' ); ?>

    Sitten päätetään markup-rakenne:

    </section>

    Ja kutsutaan tarvittaessa sidebar()-funktiota:

    <?php get_sidebar(); ?>

    Sekä lopuksi pakollista get_footer() -funktiota, joka ottaa footer.php:n käyttöön:

    <?php get_footer(); ?>
  • page.php

    #wordpress

    Page.php toteuttaa kaikkien sivujen oletusrakenteen.

  • Tarkempi kuvaus etusivun sisällön tuottavasta koodista:

    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    
    <?php get_template_part( 'entry' ); ?>
    
    <?php comments_template(); ?>
    
    <?php endwhile; endif; ?>
    
    <?php get_template_part( 'nav', 'below' ); ?>
{"cards":[{"_id":"4c7f91725a0437483b000075","treeId":"4c4830c7676f43cc820001a2","seq":1113289,"position":1.001953125,"parentId":null,"content":"# Web Design and Development - WWW-suunnittelu ja -kehittäminen\n\n## `#wip`\n\n[ ] Olisiko tämä parempi otsikko kokoamaan CMS, UI, UX, ja MarkUp -materiaalit?"},{"_id":"4c485e26676f43cc820001aa","treeId":"4c4830c7676f43cc820001a2","seq":1146571,"position":1,"parentId":"4c7f91725a0437483b000075","content":"# CMS\n\n## `#wip`\n[ ] Mikä on CMS?\n[ ] Miksi CMS?"},{"_id":"4c48ac9d676f43cc820001c1","treeId":"4c4830c7676f43cc820001a2","seq":1063120,"position":1,"parentId":"4c485e26676f43cc820001aa","content":"# MODX"},{"_id":"4c48b6c2614665d2f9000022","treeId":"4c4830c7676f43cc820001a2","seq":1140827,"position":1,"parentId":"4c48ac9d676f43cc820001c1","content":"http://www.siteground.com/tutorials/modx/\n\n##### `#modx`"},{"_id":"4c486818676f43cc820001b3","treeId":"4c4830c7676f43cc820001a2","seq":1112481,"position":3,"parentId":"4c485e26676f43cc820001aa","content":"# WordPress\n\n##### `#wordpress`\n\n[ ] Lisää tähän tiivis kuvaus WordPressista"},{"_id":"4c7c4029faf902c4de000054","treeId":"4c4830c7676f43cc820001a2","seq":1122472,"position":1.25,"parentId":"4c486818676f43cc820001b3","content":"- [Brad Williams: WordPress Multisite (WordPress.tv, October 12, 2012)](http://wordpress.tv/2012/10/12/brad-williams-wordpress-multisite/)"},{"_id":"4c7c3ed8faf902c4de00004e","treeId":"4c4830c7676f43cc820001a2","seq":1140829,"position":1.5,"parentId":"4c486818676f43cc820001b3","content":"## Asentaminen ja ylläpito\n\n- [Suzette Franck: Setting Up And Maintaining Your WordPress Site (WordPress.tv, February 1, 2014)](http://wordpress.tv/2014/02/01/suzette-franck-setting-up-and-maintaining-your-wordpress-site/) \n*This session is for beginners that are new to WordPress and would like to learn the essentials of how to setup a website utilizing WordPress’ awesome built-in features such as the blog, themes, widgets, and plugins. I will also cover the basics of what you need to do to maintain and manage your site, as well as resources for where to get help in the community and online.*\n\n##### `#wordpress` `#video`"},{"_id":"4c7c3fd7faf902c4de000051","treeId":"4c4830c7676f43cc820001a2","seq":1140830,"position":1.625,"parentId":"4c486818676f43cc820001b3","content":"## Käytettävyys ja saavutettavuus (Usability and Accessibility)\n\n- [Joe Dolson: Accessibility And WordPress: Developing For The Whole World (WordPress.tv, November 19, 2013)](http://wordpress.tv/2013/11/19/joe-dolson-accessibility-and-wordpress-developing-for-the-whole-world/) \n*This presentation covers accessibility topics including implementing best practice accessibility for theme and plug-in developers, discussing current progress and goals from the WordPress Accessibility P2 group, and addresses general principles of accessibility useful for every WordPress developer and designer.*\n\n##### `#wordpress` `#video`"},{"_id":"4c7c400bfaf902c4de000053","treeId":"4c4830c7676f43cc820001a2","seq":1140831,"position":1.65625,"parentId":"4c486818676f43cc820001b3","content":"## Mobiili\n\n- [Steve Zehngut: WordPress Mobile (WordPress.tv, June 28, 2013)](http://wordpress.tv/2013/06/28/steve-zehngut-wordpress-mobile/) \n*This presentation discusses the current state of the the WordPress mobile plugins and what drawbacks you need to be aware of. It also looks at popular responsive themes and discusses XML-RPC and how it is used to develop native mobile apps.*\n- [James Banks: Mobile First Development and Design for WordPress (WordPress.tv, May 22, 2013)](http://wordpress.tv/2013/05/22/james-banks-mobile-first-development-and-design-for-wordpress/) \n*There has been an explosion in smartphone and tablet adoption and huge usage growth for mobile web traffic. This presentation shares the speakers experience and findings with the WordPress community in hope that we can design and develop better websites for the ever-increasing mobile market.*\n\n##### `#wordpress` `#video`"},{"_id":"4c89c6a5abe91c52a40000f2","treeId":"4c4830c7676f43cc820001a2","seq":1122485,"position":1.671875,"parentId":"4c486818676f43cc820001b3","content":"## Pluginit (plugins)\n\n## `#wip`\n[ ] Lisää tähän perustietoa plugineista."},{"_id":"4c89c87babe91c52a40000f3","treeId":"4c4830c7676f43cc820001a2","seq":1122506,"position":1,"parentId":"4c89c6a5abe91c52a40000f2","content":"## [Hello Dolly](https://wordpress.org/plugins/hello-dolly/)\n*[wordpress.org](https://wordpress.org) / [Plugin Directory](https://wordpress.org/plugins) / [Hello Dolly](https://wordpress.org/plugins/hello-dolly/)*\n>This is not just a plugin, it symbolizes the hope and enthusiasm of an entire generation summed up in two words sung most famously by Louis Armstrong: Hello, Dolly. When activated you will randomly see a lyric from *Hello, Dolly* in the upper right of your admin screen on every page.\n\n### `#wordpress` `#plugin`\n\n## `#wip`\n[X] Lisää tähän lyhyt kuvaus Hello Dollysta.\n[ ] Kommentoi lähdekoodia.\n[ ] Linkitä lisäinformaatiota.\n[ ] Linkitä varitaatioita?"},{"_id":"4c89cb99abe91c52a40000f4","treeId":"4c4830c7676f43cc820001a2","seq":1125225,"position":1,"parentId":"4c89c87babe91c52a40000f3","content":"## hello.php\n\n##### `#wordpress` `#plugin`\n\nHello Dollyn lähdekoodi tiedostosta `wp-content/plugins/hello.php`\n\n <?php\n\t/**\n\t * @package Hello_Dolly\n\t * @version 1.6\n\t */\n\t/*\n\tPlugin Name: Hello Dolly\n\tPlugin URI: http://wordpress.org/plugins/hello-dolly/\n\tDescription: This is not just a plugin, it symbolizes the hope and enthusiasm of an entire generation summed up in two words sung most famously by Louis Armstrong: Hello, Dolly. When activated you will randomly see a lyric from <cite>Hello, Dolly</cite> in the upper right of your admin screen on every page.\n\tAuthor: Matt Mullenweg\n\tVersion: 1.6\n\tAuthor URI: http://ma.tt/\n\t*/\n\n\tfunction hello_dolly_get_lyric() {\n\t\t/** These are the lyrics to Hello Dolly */\n\t\t$lyrics = \"Hello, Dolly\n\tWell, hello, Dolly\n\tIt's so nice to have you back where you belong\n\tYou're lookin' swell, Dolly\n\tI can tell, Dolly\n\tYou're still glowin', you're still crowin'\n\tYou're still goin' strong\n\tWe feel the room swayin'\n\tWhile the band's playin'\n\tOne of your old favourite songs from way back when\n\tSo, take her wrap, fellas\n\tFind her an empty lap, fellas\n\tDolly'll never go away again\n\tHello, Dolly\n\tWell, hello, Dolly\n\tIt's so nice to have you back where you belong\n\tYou're lookin' swell, Dolly\n\tI can tell, Dolly\n\tYou're still glowin', you're still crowin'\n\tYou're still goin' strong\n\tWe feel the room swayin'\n\tWhile the band's playin'\n\tOne of your old favourite songs from way back when\n\tGolly, gee, fellas\n\tFind her a vacant knee, fellas\n\tDolly'll never go away\n\tDolly'll never go away\n\tDolly'll never go away again\";\n\n\t\t// Here we split it into lines\n\t\t$lyrics = explode( \"\\n\", $lyrics );\n\n\t\t// And then randomly choose a line\n\t\treturn wptexturize( $lyrics[ mt_rand( 0, count( $lyrics ) - 1 ) ] );\n\t}\n\n\t// This just echoes the chosen line, we'll position it later\n\tfunction hello_dolly() {\n\t\t$chosen = hello_dolly_get_lyric();\n\t\techo \"<p id='dolly'>$chosen</p>\";\n\t}\n\n\t// Now we set that function up to execute when the admin_notices action is called\n\tadd_action( 'admin_notices', 'hello_dolly' );\n\n\t// We need some CSS to position the paragraph\n\tfunction dolly_css() {\n\t\t// This makes sure that the positioning is also good for right-to-left languages\n\t\t$x = is_rtl() ? 'left' : 'right';\n\n\t\techo \"\n\t\t<style type='text/css'>\n\t\t#dolly {\n\t\t\tfloat: $x;\n\t\t\tpadding-$x: 15px;\n\t\t\tpadding-top: 5px;\t\t\n\t\t\tmargin: 0;\n\t\t\tfont-size: 11px;\n\t\t}\n\t\t</style>\n\t\t\";\n\t}\n\n\tadd_action( 'admin_head', 'dolly_css' );\n\n\t?>"},{"_id":"4c8ddc540e40f2c97f00007a","treeId":"4c4830c7676f43cc820001a2","seq":1125222,"position":1,"parentId":"4c89cb99abe91c52a40000f4","content":" <?php\n\t/**\n\t * @package Hello_Dolly\n\t * @version 1.6\n\t */"},{"_id":"4c8ddde40e40f2c97f00007c","treeId":"4c4830c7676f43cc820001a2","seq":1125221,"position":1.5,"parentId":"4c89cb99abe91c52a40000f4","content":" /*\n\tPlugin Name: Hello Dolly\n\tPlugin URI: http://wordpress.org/plugins/hello-dolly/\n\tDescription: This is not just a plugin, it symbolizes the hope and enthusiasm of an entire generation summed up in two words sung most famously by Louis Armstrong: Hello, Dolly. When activated you will randomly see a lyric from <cite>Hello, Dolly</cite> in the upper right of your admin screen on every page.\n\tAuthor: Matt Mullenweg\n\tVersion: 1.6\n\tAuthor URI: http://ma.tt/\n\t*/"},{"_id":"4c8ddd2c0e40f2c97f00007b","treeId":"4c4830c7676f43cc820001a2","seq":1125266,"position":2,"parentId":"4c89cb99abe91c52a40000f4","content":" function hello_dolly_get_lyric() {"},{"_id":"4c8decae0e40f2c97f000081","treeId":"4c4830c7676f43cc820001a2","seq":1125287,"position":2.5,"parentId":"4c89cb99abe91c52a40000f4","content":" /** These are the lyrics to Hello Dolly */\n $lyrics = \"Hello, Dolly\n Well, hello, Dolly\n It's so nice to have you back where you belong\n You're lookin' swell, Dolly\n I can tell, Dolly\n You're still glowin', you're still crowin'\n You're still goin' strong\n We feel the room swayin'\n While the band's playin'\n One of your old favourite songs from way back when\n So, take her wrap, fellas\n Find her an empty lap, fellas\n Dolly'll never go away again\n Hello, Dolly\n Well, hello, Dolly\n It's so nice to have you back where you belong\n You're lookin' swell, Dolly\n I can tell, Dolly\n You're still glowin', you're still crowin'\n You're still goin' strong\n We feel the room swayin'\n While the band's playin'\n One of your old favourite songs from way back when\n Golly, gee, fellas\n Find her a vacant knee, fellas\n Dolly'll never go away\n Dolly'll never go away\n Dolly'll never go away again\";"},{"_id":"4c8ded770e40f2c97f000082","treeId":"4c4830c7676f43cc820001a2","seq":1125273,"position":2.75,"parentId":"4c89cb99abe91c52a40000f4","content":" // Here we split it into lines\n $lyrics = explode( \"\\n\", $lyrics );"},{"_id":"4c8deed90e40f2c97f000083","treeId":"4c4830c7676f43cc820001a2","seq":1125277,"position":2.875,"parentId":"4c89cb99abe91c52a40000f4","content":" // And then randomly choose a line\n return wptexturize( $lyrics[ mt_rand( 0, count( $lyrics ) - 1 ) ] );"},{"_id":"4c8def730e40f2c97f000084","treeId":"4c4830c7676f43cc820001a2","seq":1125276,"position":2.9375,"parentId":"4c89cb99abe91c52a40000f4","content":" }"},{"_id":"4c8de0b60e40f2c97f00007d","treeId":"4c4830c7676f43cc820001a2","seq":1125239,"position":3,"parentId":"4c89cb99abe91c52a40000f4","content":" // This just echoes the chosen line, we'll position it later\n\tfunction hello_dolly() {\n\t\t$chosen = hello_dolly_get_lyric();\n\t\techo \"<p id='dolly'>$chosen</p>\";\n\t}"},{"_id":"4c8de4480e40f2c97f00007e","treeId":"4c4830c7676f43cc820001a2","seq":1125242,"position":4,"parentId":"4c89cb99abe91c52a40000f4","content":" // Now we set that function up to execute when the admin_notices action is called\n\tadd_action( 'admin_notices', 'hello_dolly' );"},{"_id":"4c8de4f20e40f2c97f00007f","treeId":"4c4830c7676f43cc820001a2","seq":1125246,"position":5,"parentId":"4c89cb99abe91c52a40000f4","content":" // We need some CSS to position the paragraph\n\tfunction dolly_css() {\n\t\t// This makes sure that the positioning is also good for right-to-left languages\n\t\t$x = is_rtl() ? 'left' : 'right';\n\n\t\techo \"\n\t\t<style type='text/css'>\n\t\t#dolly {\n\t\t\tfloat: $x;\n\t\t\tpadding-$x: 15px;\n\t\t\tpadding-top: 5px;\t\t\n\t\t\tmargin: 0;\n\t\t\tfont-size: 11px;\n\t\t}\n\t\t</style>\n\t\t\";\n\t}"},{"_id":"4c8de5db0e40f2c97f000080","treeId":"4c4830c7676f43cc820001a2","seq":1125245,"position":6,"parentId":"4c89cb99abe91c52a40000f4","content":" add_action( 'admin_head', 'dolly_css' );\n\n\t?>"},{"_id":"4c8bbaf3865a42205c0000f5","treeId":"4c4830c7676f43cc820001a2","seq":1125234,"position":2,"parentId":"4c89c6a5abe91c52a40000f2","content":"## Allekirjoitus (muokatusta Hello Dollysta)\n\n### http://trello.com/artomnia > [Verkkoviestintä 6](https://trello.com/#b/B0RhMSfe/verkkoviestinta-6)\n\n## Harjoituksen kuvaus\n\n*Harjoituksessa voi hyödyntää aiemmin muokattua versiota Hello Dolly -pluginista.*\n\nLuo uusi plugin nimellä \"Oma nimi allekirjoitus\".\n> Esimerkkinä toimii Taavetin tekemä harjoitus eli \"Taavetin allekirjoitus\"\n\nTiedostonimeksi siis taavetin-allekirjoitus.php ja tiedoston alkuun kommentiksi: \n \n Plugin Name: Taavetin allekirjoitus\n Plugin URI: http://portfolio.omnia.fi/~tlehtoma/vv6/medp13sab/\n Description: VV6-kurssin harjoitusplugin.\n Version: 0.2\n Author: Taavetti Lehtomäki\n Author URI: http://ope.teevati.net\n \nLisää pluginiin funktiot:\n\n function taavetin_allekirjoitus_vaihtoehdot($valinta) {\n // Tutkitaan, minkä allekirjoituksen käyttäjä haluaa näyttää ja palautetaan se allekirjoitus-funktiolle\n }\n \n function taavetin_allekirjoitus($valinta) {\n // Otetaan vastaan shortcoden parametrit ja välitetään ne allekirjoitus_vaihtoehdot -funktiolle\n }\n \n \nToteuta funktio siten, että valitsemallasi shortcodella (esim. [ak]) saadaan näkyviin jokin kolmesta vaihtoehtoisesta allekirjoituksesta (esim. *Taavetti* tai *Taavetti Lehtomäki* tai *Taavetti Lehtomäki, lehtori*)\n\nPalautuksena linkki sivulle, jossa pluginin toimivuus kaikilla tavoilla näkyy (lisää viestiin tai sivustolle tarvittaessa selitys, jotta tiedän, mitä katsoa) sekä pluginin hakemisto pakattuna zip-tiedostoon.\n\n## Harjoituksen palauttaminen\n\nKatso kortti https://trello.com/c/RoU81Zbc.\n\n---\n\n## Materiaalia\n\n..."},{"_id":"4c8bc780865a42205c0000f6","treeId":"4c4830c7676f43cc820001a2","seq":1125235,"position":1,"parentId":"4c8bbaf3865a42205c0000f5","content":"## taavetin-allekirjoitus.php\n##### `#wordpress` `#plugin`\n\t<?PHP\n\t/*\n\tPlugin Name: Taavetin allekirjoitus\n\tPlugin URI: http://portfolio.omnia.fi/~tlehtoma/vv6/medp13sab/\n\tDescription: VV6-kurssin harjoitusplugin.\n\tVersion: 0.2\n\tAuthor: Taavetti Lehtomäki\n\tAuthor URI: http://ope.teevati.net\n\t*/\n\n\tfunction taavetin_allekirjoitus_vaihtoehdot($valinta) {\n\t\t// Tutkitaan, minkä allekirjoituksen käyttäjä haluaa\n\t\t// näyttää ja palautetaan se allekirjoitus-funktiolle\n\n\t\tif($valinta == \"tyo\") {\n\t\t\t$valinta = \"Taavetti Lehtomäki, lehtori\";\n\t\t} elseif ($valinta == \"koti\") {\n\t\t\t$valinta = \"Taavetti Lehtomäki\";\n\t\t} else {\n\t\t\t$valinta = \"Taavetti\";\n\t\t}\n\n\t\treturn wptexturize($valinta);\n\n\t\t}\n\n\t\tfunction taavetin_allekirjoitus($valinta) {\n\t\t// Otetaan vastaan shortcoden parametrit ja välitetään\n\t\t// ne allekirjoitus_vaihtoehdot -funktiolle\n\n\t\t$valinta = shortcode_atts(\n\t\t\t\tarray(\n\t\t\t\t\t'valinta' => 'ei valintaa', // nimi => arvo eli attribuutti => parametri\n\t\t\t\t), $valinta, 'ak' );\n\n\t\t// Välitetään valinta vaihtoehdot -funktiolle\n\t\t$chosen = taavetin_allekirjoitus_vaihtoehdot($valinta);\n\n\t\t//Palautetaan allekirjoitus siihen kohtaan, jossa shortcode on.\n\t\treturn \"<p class='allekirjoitus'>$chosen</p>\";\n\t\t}\n\n\t\tadd_shortcode( 'ak', 'taavetin_allekirjoitus' );\n\t?>"},{"_id":"4c7c3fecfaf902c4de000052","treeId":"4c4830c7676f43cc820001a2","seq":1140832,"position":1.6875,"parentId":"4c486818676f43cc820001b3","content":"## Rajapinnat (APIs)\n\n- [Ben Lobaugh: Interacting With External APIs (WordPress.tv, January 10, 2014)](http://wordpress.tv/2014/01/10/ben-lobaugh-interacting-with-external-apis-2/) \n*Leveraging resources available in external APIs is a hot topic in today’s web world, however how to leverage those resources from WordPress is not well known. This presentation walks you through the API functionality built-into WordPress and shows you how to retrieve information from an existing popular API.*\n- [Daniel Jalkut: Exercising APIs (WordPress.tv, January 23, 2010)](http://wordpress.tv/2010/01/23/daniel-jalkut-apis-boston10/) \n*Daniel Jalkut presents a high-level overview of the two major APIs that WordPress supports for remote integration: XML-RPC and AtomPub. He discusses a variety uses for these APIs ranging from desktop apps to cross-site integration to specialized iPhone clients. This talk is aimed at designers and plugin developers who might get use out of the API, or whose knowledge of it might help them make better implementation choices.*\n- [Aaron Campbell: Integration of WordPress With External APIs (WordPress.tv, October 15, 2012)](http://wordpress.tv/2012/10/15/aaron-campbell-integration-of-wordpress-with-external-apis/)\n- [David Tufts: Beyond the Theme – WordPress as an API (WordPress.tv, December 2, 2011)](http://wordpress.tv/2011/12/02/david-tufts-beyond-the-theme-wordpress-as-an-api/)\n- [Eric Mann: Integrating with External APIs (WordPress.tv, September 1, 2012)](http://wordpress.tv/2012/09/01/eric-mann-integrating-with-external-apis/)\n- [Colin Loretz: Consuming Web APIs within WordPress (WordPress.tv, June 18, 2013)](http://wordpress.tv/2013/06/18/colin-loretz-consuming-web-apis-within-wordpress/) \n*This presentation explores how to pull in data from 3rd party web services such as Dribbble, Google or your own private servers to create data powered WordPress plugins to pull in information like weather, social media and much more.*\n\n##### `#wordpress` `#video`"},{"_id":"4c7c3f86faf902c4de00004f","treeId":"4c4830c7676f43cc820001a2","seq":1140833,"position":1.75,"parentId":"4c486818676f43cc820001b3","content":"## Teemat\n\n- [Konstantin Kovshenin: What I Wish I Had Known Before Developing a WordPress Theme (WordPress.tv, August 1, 2013)](http://wordpress.tv/2013/08/01/konstantin-kovshenin-what-i-wish-i-had-known-before-developing-a-wordpress-theme/) \n*Theme developers tend to overlook some of the APIs, principles and WordPress best practices. This talk covers a few of them in detail, and includes the reasons behind each one.*\n\n##### `#wordpress` `#video`"},{"_id":"4c7df5a6c484328c06000061","treeId":"4c4830c7676f43cc820001a2","seq":1125356,"position":0.75,"parentId":"4c7c3f86faf902c4de00004f","content":"## Esimerkkiteema: [Blank Slate](https://quip.com/7JNPAHPWTICb)\n\n##### Jaettu dokumentti Quipissa. `#wordpress` `#quip`\n\n## `#wip`\n[ ] Lisää tiivistetty kuvaus Blank Slatesta tähän korttiin.\n[ ] Lisää page.php:n koodi ja selitys.\n[ ] Laajenna selityksiä.\n[ ] Linkitä esimerkkimateriaalia?\n[ ] Kuvita ohjetta?"},{"_id":"4c7dfe9ac484328c06000062","treeId":"4c4830c7676f43cc820001a2","seq":1112000,"position":1,"parentId":"4c7df5a6c484328c06000061","content":"### header.php\n\n##### `#wordpress`\n\nHeader.php toteuttaa jokaisen näytettävän sivun yläosan.\n\nAlkuosan voi käyttää sellaisenaan:\n\n <!DOCTYPE html>\n\n <html <?php language_attributes(); ?>>\n\n <head>\n\n <meta charset=\"<?php bloginfo( 'charset' ); ?>\" />\n\n <meta name=\"viewport\" content=\"width=device-width\" />\n\n <title><?php wp_title( ' | ', true, 'right' ); ?></title>\n\n <link rel=\"stylesheet\" type=\"text/css\" href=\"<?php echo get_stylesheet_uri(); ?>\" />\n\n <?php wp_head(); ?>\n\n </head>\n\n <body <?php body_class(); ?>>\n\nBodyn sisällä olevaa osuutta voi olla tarpeen muokata vastamaan oman layoutin HTML-markupia:\n\n <div id=\"wrapper\" class=\"hfeed\">\n\n <header id=\"header\" role=\"banner\">\n\n <section id=\"branding\">\n\n <div id=\"site-title\"><?php if ( ! is_singular() ) { echo '<h1>'; } ?><a href=\"<?php echo esc_url( home_url( '/' ) ); ?>\" title=\"<?php esc_attr_e( get_bloginfo( 'name' ), 'blankslate' ); ?>\" rel=\"home\"><?php echo esc_html( get_bloginfo( 'name' ) ); ?></a><?php if ( ! is_singular() ) { echo '</h1>'; } ?></div>\n\n <div id=\"site-description\"><?php bloginfo( 'description' ); ?></div>\n\n </section>\n\n <nav id=\"menu\" role=\"navigation\">\n\n <div id=\"search\">\n\n <?php get_search_form(); ?>\n\n </div>\n\n <?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) ); ?>\n\n </nav>\n\n </header>\n\n <div id=\"container\">"},{"_id":"4c8df59f0e40f2c97f000085","treeId":"4c4830c7676f43cc820001a2","seq":1125333,"position":2.25,"parentId":"4c7df5a6c484328c06000061","content":"### The Loop\n##### `#worpress`\nSivun sisältöalueen toteuttava tiedosto riippuu siitä, minkä tyyppisellä sivulla ollaan. Siksi tästä kohdasta käytetään yleisnimitystä `The Loop` eli silmukka. Nimi on kuvaava siinäkin mielessä, että mm. oletusetusivun ja arkiston sekä kategoria- ja tagilistausten tapauksessa näytetään silmukassa niin monta viestiä kuin tietokannasta löytyy tai asetuksissa on maksimimääräksi määritelty. "},{"_id":"4c7dff1dc484328c06000063","treeId":"4c4830c7676f43cc820001a2","seq":1125305,"position":2,"parentId":"4c8df59f0e40f2c97f000085","content":"### index.php\n\n##### `#wordpress`\n\nToteuttaa etusivun oletusrakenteen (joko uusimmat postaukset tai asetuksissa valitun sivun) näyttämisen.\n\nEnsimmäinen rivi on pakollinen, koska get_header() -funktio ottaa header.php:n käyttöön: \n\n<?php get_header(); ?>\n\nSen jälkeen olevaa osuutta voi olla tarpeen muokata vastamaan oman layoutin HTML-markupia:\n\n <section id=\"content\" role=\"main\">\n\nIf-rakenne hakee oletuksena blogipostaukset etusivun sisällöksi:\n\n <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>\n\n <?php get_template_part( 'entry' ); ?>\n\n <?php comments_template(); ?>\n\n <?php endwhile; endif; ?>\n\n <?php get_template_part( 'nav', 'below' ); ?>\n\nSitten päätetään markup-rakenne:\n\n </section>\n\nJa kutsutaan tarvittaessa sidebar()-funktiota:\n\n <?php get_sidebar(); ?>\n\nSekä lopuksi pakollista get_footer() -funktiota, joka ottaa footer.php:n käyttöön:\n\n <?php get_footer(); ?>"},{"_id":"4c7e2a77c484328c06000066","treeId":"4c4830c7676f43cc820001a2","seq":1125288,"position":1,"parentId":"4c7dff1dc484328c06000063","content":"Tarkempi kuvaus etusivun sisällön tuottavasta koodista:\n\n <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>\n\n <?php get_template_part( 'entry' ); ?>\n\n <?php comments_template(); ?>\n\n <?php endwhile; endif; ?>\n\n <?php get_template_part( 'nav', 'below' ); ?>\n"},{"_id":"4c7e000cc484328c06000065","treeId":"4c4830c7676f43cc820001a2","seq":1125306,"position":3,"parentId":"4c8df59f0e40f2c97f000085","content":"### page.php\n\n##### `#wordpress`\n\nPage.php toteuttaa kaikkien sivujen oletusrakenteen."},{"_id":"4c7dffa1c484328c06000064","treeId":"4c4830c7676f43cc820001a2","seq":1112002,"position":3,"parentId":"4c7df5a6c484328c06000061","content":"### footer.php\n\n##### `#wordpress`\n\nFooter.php toteuttaa jokaisen näytettävän sivun alaosan.\n\nAlkuosassa on osuus, joka täytyy muokata vastamaan omaa teemaa: \n\n <div class=\"clear\"></div>\n\n </div>\n\n <footer id=\"footer\" role=\"contentinfo\">\n\n <div id=\"copyright\">\n\n <?php echo sprintf( __( '%1$s %2$s %3$s. All Rights Reserved.', 'blankslate' ), '&copy;', date( 'Y' ), esc_html( get_bloginfo( 'name' ) ) ); echo sprintf( __( ' Theme By: %1$s.', 'blankslate' ), '<a href=\"http://tidythemes.com/\">TidyThemes</a>' ); ?>\n\n </div>\n\n </footer>\n\n </div>\n\nAivan lopussa oleva wp_footer()-kutsu sekä body:n html:n lopetukset ovat pakollisia sellaisinaan.\n\n <?php wp_footer(); ?>\n\n </body>\n\n </html>"},{"_id":"4c7c3fb3faf902c4de000050","treeId":"4c4830c7676f43cc820001a2","seq":1140834,"position":1,"parentId":"4c7c3f86faf902c4de00004f","content":"## Child Themes\n\n- [Alex Vasquez: Choosing The Right Tool For The Job: Child Themes, Starter Themes And Frameworks. OH MY!\n(WordPress.tv, March 30, 2014)](http://wordpress.tv/2014/03/30/alex-vasquez-choosing-the-right-tool-for-the-job-child-themes-starter-themes-and-frameworks-oh-my/)\n\n- [Russell Fair: Child Themes\n (WordPress.tv, May 3, 2013)](http://wordpress.tv/2013/05/23/russell-fair-child-themes/) \n*Russell Fair tells us what’s what on child themes at the Atlanta WordPress: Hands On Learning Meetup.*\n\n- [Paul Bearne: WordPress Child Themes (WordPress.tv, July 17, 2013)](http://wordpress.tv/2013/07/17/paul-bearne-wordpress-child-themes/) \n*This presentation talks about how to safely tweak your child theme while still getting updates from the parent theme.*\n\n- [Utsav Singh Rathour: Working With Child Themes (WordPress.tv, December 5, 2013)](http://wordpress.tv/2013/12/05/utsav-singh-rathour-working-with-child-themes/) \n*Utsav talks about child themes and explains why it is important. A WordPress child theme is a theme that inherits the functionality of the parent theme. A child theme is the best and easiest way to modify an existing theme, whether you want to make a few tiny changes or extensive changes.*\n\n- [Tom Jenkins: Understanding the Relationship Between Parent & Child Themes in WordPress. (WordPress.tv, December 2, 2011)](http://wordpress.tv/2011/12/02/tom-jenkins-understanding-the-relationship-between-parent-child-themes-in-wordpress/)\n\n\n##### `#wordpress` `#video`"},{"_id":"4c484095676f43cc820001a6","treeId":"4c4830c7676f43cc820001a2","seq":1146577,"position":3,"parentId":"4c7f91725a0437483b000075","content":"# Käyttöliittymä (UI) ja käyttäjäkokemus (UX)"},{"_id":"4c4866e9676f43cc820001af","treeId":"4c4830c7676f43cc820001a2","seq":1072760,"position":1,"parentId":"4c484095676f43cc820001a6","content":"## Asiakaskokemus\n[Don’t treat your customers badly when they hit limits](https://community.uservoice.com/blog/feature-limits/) (usercentered 11.9.2013) `#ux`"},{"_id":"4c485ddb676f43cc820001a9","treeId":"4c4830c7676f43cc820001a2","seq":4018854,"position":1.0048828125,"parentId":null,"content":"# MarkUp & Coding\n\n## `#wip`\n\n[ ] Organisointi?","deleted":false},{"_id":"4c4868cb676f43cc820001b5","treeId":"4c4830c7676f43cc820001a2","seq":1072791,"position":2,"parentId":"4c485ddb676f43cc820001a9","content":"## HTML + CSS"},{"_id":"4c48a33c676f43cc820001b7","treeId":"4c4830c7676f43cc820001a2","seq":1072808,"position":1,"parentId":"4c4868cb676f43cc820001b5","content":"## W3C:n training-materiaalia"},{"_id":"4c48a2cd676f43cc820001b6","treeId":"4c4830c7676f43cc820001a2","seq":1132177,"position":0.5,"parentId":"4c48a33c676f43cc820001b7","content":"[W3C - HTML Training](http://www.w3.org/community/webed/wiki/HTML/Training) `#html`"},{"_id":"4c54d8afd81dd2338a0000b6","treeId":"4c4830c7676f43cc820001a2","seq":1132180,"position":0.75,"parentId":"4c48a33c676f43cc820001b7","content":"[W3C - HTML Elements](http://www.w3.org/community/webed/wiki/HTML/Elements) `#html`"},{"_id":"4c54d8d4d81dd2338a0000b7","treeId":"4c4830c7676f43cc820001a2","seq":1132182,"position":0.875,"parentId":"4c48a33c676f43cc820001b7","content":"[W3Schools HTML](http://www.w3schools.com/html/) `#html`"},{"_id":"4c54d70cd81dd2338a0000b5","treeId":"4c4830c7676f43cc820001a2","seq":1132184,"position":1,"parentId":"4c48a33c676f43cc820001b7","content":"http://www.w3.org/community/webed/wiki/CSS/Training `#css`"},{"_id":"4c54d8ffd81dd2338a0000b8","treeId":"4c4830c7676f43cc820001a2","seq":1132185,"position":2,"parentId":"4c48a33c676f43cc820001b7","content":"http://www.w3.org/community/webed/wiki/Main_Page `#css`"},{"_id":"4c48a3d2676f43cc820001b8","treeId":"4c4830c7676f43cc820001a2","seq":1072770,"position":2,"parentId":"4c4868cb676f43cc820001b5","content":"## Linkkien muotoileminen\nhttp://www.w3schools.com/css/css_link.asp `#css`"},{"_id":"4c48a4a1676f43cc820001b9","treeId":"4c4830c7676f43cc820001a2","seq":1072776,"position":3,"parentId":"4c4868cb676f43cc820001b5","content":"## Elementtien keskittäminen CSS:llä\n[Centering in CSS: A Complete Guide](http://css-tricks.com/centering-css-complete-guide/)\n*Published September 2, 2014 by Chris Coyier*\n> Centering things in CSS is the poster child of CSS complaining. Why does it have to be so hard? They jeer. I think the issue isn't that it's difficult to do, but in that there so many different ways of doing it, depending on the situation, it's hard to know which to reach for.\n>\n> So let's make it a decision tree and hopefully make it easier.\n\n`#css`"},{"_id":"4c98c57415a0ab02eb000104","treeId":"4c4830c7676f43cc820001a2","seq":1132045,"position":3.5,"parentId":"4c4868cb676f43cc820001b5","content":"[All About Floats](http://css-tricks.com/all-about-floats/)\n*July 8, 2009 by Chris Coyier*\n\n> Float is a CSS positioning property. To understand its purpose and origin, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. This is commonly and appropriately called \"text wrap\". - - \n\n> In page layout programs, the boxes that hold the text can be told to honor the text wrap, or to ignore it. Ignoring the text wrap will allow the words to flow right over the image like it wasn't even there. This is the difference between that image being part of the flow of the page (or not). Web design is very similar.\n\n`#css`"},{"_id":"4c48a63e676f43cc820001ba","treeId":"4c4830c7676f43cc820001a2","seq":1132172,"position":4,"parentId":"4c4868cb676f43cc820001b5","content":"## Box Model\n\n##### `#css`"},{"_id":"4c54d331d81dd2338a0000b2","treeId":"4c4830c7676f43cc820001a2","seq":1072785,"position":1,"parentId":"4c48a63e676f43cc820001ba","content":"- [The CSS Box Model](http://css-tricks.com/the-css-box-model/)\n*Published June 1, 2009\tby Chris Coyier* \n>[E]very element in web design is a rectangular box. This was my ah-ha moment that helped me really start to understand CSS-based web design and accomplish the layouts I wanted to accomplish. We've talked about the positioning of these boxes a bit, and about their behavior. \n>\n> What we haven't talked about much is the box itself. How is the size of the box calculated exactly?\n\n`#html` `#css`"},{"_id":"4c54d377d81dd2338a0000b3","treeId":"4c4830c7676f43cc820001a2","seq":1072788,"position":2,"parentId":"4c48a63e676f43cc820001ba","content":"- https://developer.mozilla.org/en-US/docs/Web/CSS/box_model `#html` `#css`"},{"_id":"4c54d3f4d81dd2338a0000b4","treeId":"4c4830c7676f43cc820001a2","seq":1072789,"position":3,"parentId":"4c48a63e676f43cc820001ba","content":"- https://www.addedbytes.com/articles/for-beginners/the-box-model-for-beginners/ `#html` `#css`"},{"_id":"4c48a6e1676f43cc820001bb","treeId":"4c4830c7676f43cc820001a2","seq":1073543,"position":5,"parentId":"4c4868cb676f43cc820001b5","content":"## DOM"},{"_id":"4c55b7b0d81dd2338a0000b9","treeId":"4c4830c7676f43cc820001a2","seq":1073544,"position":1,"parentId":"4c48a6e1676f43cc820001bb","content":"- http://css-tricks.com/dom/ `#css`"},{"_id":"4c55b7e9d81dd2338a0000ba","treeId":"4c4830c7676f43cc820001a2","seq":1073545,"position":2,"parentId":"4c48a6e1676f43cc820001bb","content":"- http://www.w3.org/DOM/ `#css`"},{"_id":"4c55b891d81dd2338a0000bb","treeId":"4c4830c7676f43cc820001a2","seq":1073546,"position":3,"parentId":"4c48a6e1676f43cc820001bb","content":"- http://www.w3.org/TR/DOM-Level-2-HTML/ `#css`"},{"_id":"4c55b8abd81dd2338a0000bc","treeId":"4c4830c7676f43cc820001a2","seq":1073547,"position":4,"parentId":"4c48a6e1676f43cc820001bb","content":"- http://en.wikipedia.org/wiki/Document_Object_Model `#css`"},{"_id":"4c49bf2b614665d2f9000038","treeId":"4c4830c7676f43cc820001a2","seq":1132169,"position":6,"parentId":"4c4868cb676f43cc820001b5","content":"## Border\n\n##### `#css`"},{"_id":"4c55b90fd81dd2338a0000bd","treeId":"4c4830c7676f43cc820001a2","seq":1073549,"position":1,"parentId":"4c49bf2b614665d2f9000038","content":"- [Understanding border-image](http://css-tricks.com/understanding-border-image/) `#css`"},{"_id":"4c98d59315a0ab02eb00018a","treeId":"4c4830c7676f43cc820001a2","seq":1132170,"position":7,"parentId":"4c4868cb676f43cc820001b5","content":"# Mini CSS-harjoitukset\n\nTee jokaisesta tehtävästä oma sivu työhakemistoon ja linkitä sivut keskenään niin, että jokaiselta sivulta pääsee mille tahansa muulle sivulle. Toteuta sivut lisäämällä seuraava tehtävä edellisen koodiin. Kaiken html -koodin tulee olla XHTML:n mukaista ja visuaaliset tyylit toteutettu CSS:llä. CSS-koodista voit tehdä erilliset tiedostot tai sisällyttää html-sivuun tageilla.\n\n##### `#css`"},{"_id":"4c98e40615a0ab02eb00018c","treeId":"4c4830c7676f43cc820001a2","seq":1132160,"position":1,"parentId":"4c98d59315a0ab02eb00018a","content":"### Aloita tekemällä harjoituksille työkansio portfolio.omnia.fi -sivustollesi.\n\n1. Tee sivu jonka sisältö pysyy aina keskellä selainikkunan leveydestä huolimatta. Voit määrittää sivulle taustavärin.\n2. Tee neljä 100 x 50px (w x h) div:iä ja laita ne vierekkäin ilman position:relative tai position:absolute - määritystä. Voit määritellä div:eille taustavärin.\n * Muokkaa sivua niin että siirrät div:t sivun oikeaan reunaan niin, että oikeanpuoleinen on 150px päässä sivun reunasta. Tämä myös ilman position:relative tai position:absolute -määritystä.\n\n3. Valitse (etsi googlesta) jokin kuva, lisää se web-sivulle ja lisää kuvaan linkki Googlen kuvahakuun. Poista CSS:llä linkistä johtuva sininen reunus (reunus näkyy ainakin IE:llä). Sijoita kuva 100x50px div:n viereen.\n4. Lisää sivulle viisi riviä lorem ipsumia. Kavenna tekstialueen koko 300px leveäksi ILMAN div -tägejä.\n5. Tee lista (`<ul>` / `<li>`) HTML:llä. Vaihda CSS:n avulla listan edessä olevien pallojen tilalle mikä tahansa pieni kuva.\n6. Muokkaa sivun linkkejä niin, että tavalliset linkit, vieraillut linkit ja linkit, joiden päällä hiiren kursori on, näyttävät erilaisilta.\n7. Tee pieni lomake (html-form), jossa on kaksi erilaista tekstikenttää, kaksi checkboxia, kaksi radio-buttonia ja lähetä -nappi. Muokkaa CSS:llä lomake-elementtien ulkonäköä (esim. tekstiboxien taustaväri tai fontti jne.)\n8. Tee sivulle CSS:llä toteutettu rollover -kuva. Voit muokata aiempaa kuvaa.\n9. Lisää sivulle toinen kuva. Muokkaa CSS:llä ensimmäisen kuvan leveydeksi 200px ja toisen 300px.\n10. Tee sivulle kolme kappaletta tekstiä. Sisennä keskimmäisen kappaleen ensimmäinen rivi CSS:llä.\n11. Tee 200px korkea ja 400px leveä div. Laita sen sisälle reilusti tekstiä. Lisää tekstille vierityspalkki (scroll bar), jotta saat kaiken tekstin näkyviin."},{"_id":"4c98e6d115a0ab02eb00018d","treeId":"4c4830c7676f43cc820001a2","seq":1132152,"position":2,"parentId":"4c98d59315a0ab02eb00018a","content":"## Extratehtävät\n\n1. Tee linkeistä navigaatiopalkki sivujen yläreunaan, vaakariviin vierekkäin. Vinkki: [w3schools.com](http://w3schools.com), css navigation.\n2. Kokeile [w3.org](http://w3.org)in html/css validatoreita ([http://validator.w3.org](http://validator.w3.org) ja [http://jigsaw.w3.org/css-validator](http://jigsaw.w3.org/css-validator)). Jos saat virheilmoituksia, selvitä miksi ja yritä korjata niistä ainakin yksi.ilman että sivun layout oleellisesti muuttuu. **Kommentoi korjaukset koodiin.**\n3. Jos kirjoitit css-koodin html-sivulle `<style>` -tageihin, käytä Dreamweaveria apuna ja muunna html-sivun css-tyylit ulkoiseksi css-tiedostoksi."},{"_id":"4cda3abb7c9def6ac5000097","treeId":"4c4830c7676f43cc820001a2","seq":1163295,"position":8,"parentId":"4c4868cb676f43cc820001b5","content":"[UI Design: Applying CSS Based on Screen Orientation](http://www.hongkiat.com/blog/css-orientation-styles/)\n*By [Thoriq Firdaus](http://www.hongkiat.com/blog/author/thoriq/)*"},{"_id":"4c48a765676f43cc820001bc","treeId":"4c4830c7676f43cc820001a2","seq":1063102,"position":3,"parentId":"4c485ddb676f43cc820001a9","content":"## JavaScript + jQuery"},{"_id":"4c48a7f4676f43cc820001bd","treeId":"4c4830c7676f43cc820001a2","seq":1063105,"position":1,"parentId":"4c48a765676f43cc820001bc","content":"## JavaScript \n[W3 Schools JavaScript Tutoriaali](http://www.w3schools.com/js/)"},{"_id":"4c48a8df676f43cc820001be","treeId":"4c4830c7676f43cc820001a2","seq":1063100,"position":2,"parentId":"4c48a765676f43cc820001bc","content":"## jQuery, jQuery UI & jQ Mobile\n- [W3 Schools jQuery Tutoriaali](http://www.w3schools.com/jquery/)\n- [jQuery](http://jquery.com)\n- [jQuery UI](http://jqueryui.com)\n- [jQuery mobile](http://jquerymobile.com)"},{"_id":"4ca6912519229119d500008d","treeId":"4c4830c7676f43cc820001a2","seq":1141866,"position":4,"parentId":"4c485ddb676f43cc820001a9","content":"[How Browsers Work: Behind the scenes of modern web browsers](http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/)\n*August 5th, 2011 by Tali Garsiel and Paul Irish*\n\n##### `#selain`"},{"_id":"4d01d2e982f28fb480000099","treeId":"4c4830c7676f43cc820001a2","seq":1186807,"position":5,"parentId":"4c485ddb676f43cc820001a9","content":"[How To Write Code Comments Well - Aj Freelancer](http://antjanus.com/blog/daily-gibberish/best-comment-separator/)"},{"_id":"4c4860de676f43cc820001ab","treeId":"4c4830c7676f43cc820001a2","seq":1113276,"position":1.0078125,"parentId":null,"content":"# Esiintyminen\n\n## `#wip`\n\n[ ] Otsikon relevanssi?"},{"_id":"4c48b7aa614665d2f9000023","treeId":"4c4830c7676f43cc820001a2","seq":1113204,"position":2,"parentId":"4c4860de676f43cc820001ab","content":"## PECHA KUCHA"},{"_id":"4c48b80e614665d2f9000024","treeId":"4c4830c7676f43cc820001a2","seq":1063125,"position":1,"parentId":"4c48b7aa614665d2f9000023","content":"### 1. HISTORIA JA AJATUS\n\n- 20x20\n- 6min 40sec\n\n\n[A Pecha Kucha about Pecha Kucha](https://www.youtube.com/watch?v=jJ2yepIaAtE)\n\n[Pecha Kucha on presenting a Pecha Kucha](https://www.youtube.com/watch?v=L31SwpN1dAc)"},{"_id":"4c48b899614665d2f9000025","treeId":"4c4830c7676f43cc820001a2","seq":1063128,"position":2,"parentId":"4c48b7aa614665d2f9000023","content":"### 2. VALITSE AIHE\n- Sellainen, joka inspiroi sinua\n- Sellainen, josta on liikaa sanottavaa"},{"_id":"4c48b915614665d2f9000026","treeId":"4c4830c7676f43cc820001a2","seq":1063130,"position":3,"parentId":"4c48b7aa614665d2f9000023","content":"### 3. KÄYTÄ PAPERIA\n- Unohda tietokone, suunnittele rakenne paperille\n- Miksi?\n\nhttp://blog.mural.ly/6-tips-for-storyboarding-a-presentation-in-under-10-minutes/"},{"_id":"4c48b95c614665d2f9000027","treeId":"4c4830c7676f43cc820001a2","seq":1063132,"position":4,"parentId":"4c48b7aa614665d2f9000023","content":"### 4. BRAINSTORMING\n- Kerää ideoita, keywordejä, lauseita jne, kirjoita _kaikki_ ylös\n- Organisoi laput\n- Leikkaa palasiksi - fyysisiksi slideiksi\n\nhttp://blog.mural.ly/why-brainstorming-is-only-half-the-battle/"},{"_id":"4c48b98c614665d2f9000028","treeId":"4c4830c7676f43cc820001a2","seq":1063134,"position":5,"parentId":"4c48b7aa614665d2f9000023","content":"### 5. JÄRJESTÄ IDEAT RYHMIKSI (SLIDEIKSI)\n- Muista että 5 diaa on jo 1/4 koko esityksestä"},{"_id":"4c48b9a5614665d2f9000029","treeId":"4c4830c7676f43cc820001a2","seq":1063136,"position":6,"parentId":"4c48b7aa614665d2f9000023","content":"### 6. KAIKEN EI TARVITSE NÄKYÄ/LUKEA DIOISSA"},{"_id":"4c48b9d5614665d2f900002a","treeId":"4c4830c7676f43cc820001a2","seq":1063138,"position":7,"parentId":"4c48b7aa614665d2f9000023","content":"### 7. DIOJEN DESIGN\n- Isoja kuvia\n- Vähän tekstiä\n- Vähemmän kuin 4 kuvaa per slide\n- Pidä design yhteneväisenä koko esityksen matkalta"},{"_id":"4c48b9f7614665d2f900002b","treeId":"4c4830c7676f43cc820001a2","seq":1063140,"position":8,"parentId":"4c48b7aa614665d2f9000023","content":"### 8. KUVAT\n- Mistä kuvia löytää?"},{"_id":"4c48ba11614665d2f900002c","treeId":"4c4830c7676f43cc820001a2","seq":1063142,"position":9,"parentId":"4c48b7aa614665d2f9000023","content":"### 9. MUIDEN EDESSÄ\n- Älä lue. ESIINNY!\n- Välitä energiaa, välitä inspiraatiosi ja kiinnostuksesi\n- More fire!"},{"_id":"4c48ba45614665d2f900002d","treeId":"4c4830c7676f43cc820001a2","seq":1063144,"position":10,"parentId":"4c48b7aa614665d2f9000023","content":"### 10. TREENI, TREENI, TREENI\n- Harjoittele ohjelman kanssa (PP ja Keynote mahdollistavat slidejen ajastuksen)\n- Katse. Anna katseen vaeltaa. Katso jotakuta vierasta silmiin.\n- \"Fillerit\" - ööö, tota, niin, totanoinni\n- Anna kuvien puhua: \"Tässä on kuva minusta nuorena vs. Rakastuin ensi kertaa 10-vuotiaana\"\n- Treenaa kuulokkeet päässä, musiikki päällä\n- Käy läpi presentaatio ensimmäisenä aamulla"},{"_id":"4c48ba83614665d2f900002e","treeId":"4c4830c7676f43cc820001a2","seq":1063148,"position":11,"parentId":"4c48b7aa614665d2f9000023","content":"### EKSTRAA\n\nEri järjestyksessä - dia tulee ensin, asia vasta sitten\nDiat jaottavat esityksen\nNäytä konkreettista - aivot\nHuumori\nRuumiinkieli\nMetaforat - balloon\nInspiration - yhdistäminen johonkin tuttuun\nKysy yleisöltä \nTED-treenaus ja käsikirjoitus"},{"_id":"4c9917de15a0ab02eb00018e","treeId":"4c4830c7676f43cc820001a2","seq":1132375,"position":1.013671875,"parentId":null,"content":"# MarkDown\n"},{"_id":"4c99187e15a0ab02eb00018f","treeId":"4c4830c7676f43cc820001a2","seq":1132376,"position":1,"parentId":"4c9917de15a0ab02eb00018e","content":"[HTML to MarkDown Converter](http://domchristie.github.io/to-markdown/)"},{"_id":"4c486412676f43cc820001ac","treeId":"4c4830c7676f43cc820001a2","seq":1113272,"position":1.015625,"parentId":null,"content":"# Projektit ja prosessit\n\n## `#wip`\n\n[ ] Organisointi?"},{"_id":"4c4867c7676f43cc820001b2","treeId":"4c4830c7676f43cc820001a2","seq":1113183,"position":1,"parentId":"4c486412676f43cc820001ac","content":"## Trello"},{"_id":"4c7c4477faf902c4de000055","treeId":"4c4830c7676f43cc820001a2","seq":1110278,"position":1,"parentId":"4c4867c7676f43cc820001b2","content":"[ ] Minne tallennetaan kaikki kuvat?\n\nJulkaisuun tarkoitetut kuvat voidaan tallentaa Trelloon mutta ei kannata käyttää yleisenä kuvagalleriana. \n\n[ ] Mitä toimisto-ohjelmistoja käytetään?\n\nKäytetäänkö Microsoft Officea vai muita ilmaisohjelmia toimisto-ohjelmana (minimoimaan kuluja ja mahdollistamaan yhtenäisten ohjelmistojen käyttö kautta linjan)? \n\n- Trello ja Google Docs toimisivat hyvin yhteen. \nJopa skriptien kautta automatisointi esim. raportointia tai tiettyjen toimenpiteiden formalisointia varten onnistuu (ks. esim. [Pimp Your Trello Cards](http://www.littlebluemonkey.com/blog/pimp-your-trello-cards)).\n\n[ ] Miten määritellään käyttöoikeudet ja niiden ylläpitovastuut?\n\nKäyttöoikeudet pitää miettiä - esim. kuka on vastuussa poistamaan jäsen boardista kun/jos tämä lopettaa?\n\n- Tästä on jo käytänteitä, mutta prosessi pitää kirjoittaa auki ja käyttöoikeuksien rakenne kuvata havainnollisesti.\n\n[ ] Due Daten käyttö (kalenterifeed?)\n\n[ ] Säilytetäänkö kaikki arkistoidut kortit/listat vai poistetaanko sieltä jotain tietoa?\n\nToteutuneen jälkeen voidaan tieto arkistoida (Archive)."},{"_id":"4c54c0cfd81dd2338a0000af","treeId":"4c4830c7676f43cc820001a2","seq":1113184,"position":2,"parentId":"4c4867c7676f43cc820001b2","content":"[How we use Trello to produce our blog](http://royal.pingdom.com/2013/07/30/trello-blog/) ([Royal Pingdom](http://royal.pingdom.com/)) `#trello`"},{"_id":"4c7f7c3d5a0437483b00006e","treeId":"4c4830c7676f43cc820001a2","seq":1113185,"position":3,"parentId":"4c4867c7676f43cc820001b2","content":"[How the Trello Team uses Trello](http://danlec.com/blog/how-the-trello-team-uses-trello) `#trello`"},{"_id":"4c7f7c7f5a0437483b00006f","treeId":"4c4830c7676f43cc820001a2","seq":1113186,"position":4,"parentId":"4c4867c7676f43cc820001b2","content":"[How we use Trello & Google Docs to make UserVoice better every day](http://community.uservoice.com/blog/trello-google-docs-product-management/) `#trello` `#googledocs`"},{"_id":"4c7f7d315a0437483b000070","treeId":"4c4830c7676f43cc820001a2","seq":1113187,"position":5,"parentId":"4c4867c7676f43cc820001b2","content":"[Agile software development with Trello and Google Docs](http://barryfrost.tumblr.com/post/58357464842/agile-software-development-with-trello-and-google-docs) `#trello` `#googledocs`"},{"_id":"4c7f7d635a0437483b000071","treeId":"4c4830c7676f43cc820001a2","seq":1113189,"position":6,"parentId":"4c4867c7676f43cc820001b2","content":"[Trello Resources](https://trello.com/b/nPNSBZjB/trello-resources) `#trello`"},{"_id":"4c7f7d8b5a0437483b000072","treeId":"4c4830c7676f43cc820001a2","seq":1113190,"position":7,"parentId":"4c4867c7676f43cc820001b2","content":"[Does Trello Work to Run Your Business?](http://curtismchale.ca/2013/06/04/does-trello-work-to-run-your-business/) `#trello`"},{"_id":"4c48bf0e614665d2f9000033","treeId":"4c4830c7676f43cc820001a2","seq":1113156,"position":2.625,"parentId":"4c486412676f43cc820001ac","content":"## KanBan\n`#kanban`"},{"_id":"4c54c331d81dd2338a0000b1","treeId":"4c4830c7676f43cc820001a2","seq":1072731,"position":1,"parentId":"4c48bf0e614665d2f9000033","content":"- [Elements of KanBan](http://www.personalkanban.com/pk/primers/13-elements-of-kanban-the-july-personal-kanban-series/) `#kanban`"},{"_id":"4d44040ae9868aaea700009b","treeId":"4c4830c7676f43cc820001a2","seq":1251805,"position":2,"parentId":"4c48bf0e614665d2f9000033","content":"[Kanban Calendar: task management at its simplest — Productivity Mashup](http://www.productivitymashup.com/blog/2014/7/17/kanban-calendar-preamble)"},{"_id":"4c48bedc614665d2f9000032","treeId":"4c4830c7676f43cc820001a2","seq":1113159,"position":2.75,"parentId":"4c486412676f43cc820001ac","content":"## Getting Things Done (GTD)\n`#gtd`"},{"_id":"4c54c2add81dd2338a0000b0","treeId":"4c4830c7676f43cc820001a2","seq":1072729,"position":1,"parentId":"4c48bedc614665d2f9000032","content":"- [How to be prolific: Guidelines for getting it done from Joss Whedon](http://www.fastcocreate.com/1683167/how-to-be-prolific-guidelines-for-getting-it-done-from-joss-whedon) `#gtd`\n- [Why You're 2 Steps Away From a More Productive Day](http://www.entrepreneur.com/article/229723) `#gtd`"},{"_id":"4c48be43614665d2f9000030","treeId":"4c4830c7676f43cc820001a2","seq":1072709,"position":3,"parentId":"4c486412676f43cc820001ac","content":"## Time Tracking\n\n- [Reports for Trello](http://reportsfortrello.com) `#trello` \n- [BoardTrail](https://www.boardtrail.com) `#trello`\n- [Trello Times - From Comments](https://trello.com/b/MDFLKs0I/trello-times-from-comments)\n - https://github.com/brad7928/trellocommenttimes `#trello`"},{"_id":"4c48bf2c614665d2f9000034","treeId":"4c4830c7676f43cc820001a2","seq":1113177,"position":5,"parentId":"4c486412676f43cc820001ac","content":"[Flexible Trello Backup and Story Card Printing](http://www.littlebluemonkey.com/blog/flexible-trello-backup-and-story-card-printing) `#trello` `#googledocs` `#backup`"},{"_id":"4c7f82d35a0437483b000073","treeId":"4c4830c7676f43cc820001a2","seq":1113180,"position":1,"parentId":"4c48bf2c614665d2f9000034","content":"Ks. myös [Pimp Your Trello Cards](http://www.littlebluemonkey.com/blog/pimp-your-trello-cards) `#trello` `#googledocs`"},{"_id":"4c7f83505a0437483b000074","treeId":"4c4830c7676f43cc820001a2","seq":1113182,"position":2,"parentId":"4c48bf2c614665d2f9000034","content":"Ks. myös [Online Scrum Tools – Part 4 – Trello Backup](http://www.littlebluemonkey.com/blog/online-scrum-tools-part-4-trello-backup) `#trello` `#googledocs` `#backup`"},{"_id":"4c492984614665d2f9000036","treeId":"4c4830c7676f43cc820001a2","seq":1112999,"position":1.03125,"parentId":null,"content":"# Sekalaista\nMateriaalia, joka ei sovi minkään tai sopisi useamman otsikon alle.\n\n## `#wip`\n[ ] Siirrä nämä parempiin paikkoihin ja/tai otsikoi uudelleen."},{"_id":"4d43e9b8e9868aaea700009a","treeId":"4c4830c7676f43cc820001a2","seq":1251651,"position":0.125,"parentId":"4c492984614665d2f9000036","content":"[The Non-Writer’s Guide to Writing for the Web](http://www.sitepoint.com/non-writers-guide-writing-web/)"},{"_id":"4cdacd6d7c9def6ac5000098","treeId":"4c4830c7676f43cc820001a2","seq":1251654,"position":0.25,"parentId":"4c492984614665d2f9000036","content":"http://www2.arcticlightphoto.no/pano/tos52/"},{"_id":"4cb17ca11fc015119200008e","treeId":"4c4830c7676f43cc820001a2","seq":1145879,"position":0.5,"parentId":"4c492984614665d2f9000036","content":"[A Concept Art Approach to Software | Gingko Blog](http://blog.gingkoapp.com/essays/concept-art-approach-software)\n*November 27, 2014 Gingko Blog*"},{"_id":"4cb186fd1fc015119200008f","treeId":"4c4830c7676f43cc820001a2","seq":1145888,"position":1,"parentId":"4cb17ca11fc015119200008e","content":"[Some Things Can't Be Wireframed - Inside Intercom](http://blog.intercom.io/things-cant-wireframed/)\n*[Des Traynor](http://blog.intercom.io/author/des/)*"},{"_id":"4c4929c0614665d2f9000037","treeId":"4c4830c7676f43cc820001a2","seq":1145880,"position":1,"parentId":"4c492984614665d2f9000036","content":"[Running a software startup, an eCommerce site, finishing a PhD, and raising son: What I don’t do, to make it all work. | Gingko Blog](http://blog.gingkoapp.com/essays/essentialism)\n*November 19, 2014 Gingko Blog*\n##### `#gingko` `#essentialism`"},{"_id":"4c54b049d81dd2338a0000ae","treeId":"4c4830c7676f43cc820001a2","seq":1112991,"position":2.03125,"parentId":"4c492984614665d2f9000036","content":"[FBI, here I am!](http://www.ted.com/talks/hasan_elahi)\n*Hasan Elahi*\n#####`#ted` `#video` `#some`"},{"_id":"4c54b01dd81dd2338a0000ad","treeId":"4c4830c7676f43cc820001a2","seq":1112992,"position":2.0625,"parentId":"4c492984614665d2f9000036","content":"[The beauty of data visualization](http://www.ted.com/talks/david_mccandless_the_beauty_of_data_visualization)\n*David McCandless*\n##### `#ted` `#video`"},{"_id":"4c54afefd81dd2338a0000ac","treeId":"4c4830c7676f43cc820001a2","seq":1112993,"position":2.125,"parentId":"4c492984614665d2f9000036","content":"[The art of asking](http://www.ted.com/talks/amanda_palmer_the_art_of_asking)\n*Amanda Palmer*\n##### `#ted` `#video`"},{"_id":"4c54af76d81dd2338a0000ab","treeId":"4c4830c7676f43cc820001a2","seq":1112994,"position":2.25,"parentId":"4c492984614665d2f9000036","content":"[How to truly listen](http://www.ted.com/talks/evelyn_glennie_shows_how_to_listen) \n*Evelyn Glennie*\n#####`#ted` `#video`"},{"_id":"4c486848676f43cc820001b4","treeId":"4c4830c7676f43cc820001a2","seq":1112995,"position":2.5,"parentId":"4c492984614665d2f9000036","content":"[404, the story of a page not found](http://www.ted.com/talks/renny_gleeson_404_the_story_of_a_page_not_found)\n*Renny Gleeson*\n##### `#ted` `#video` `#html`"},{"_id":"4cb33bc11fc0151192000090","treeId":"4c4830c7676f43cc820001a2","seq":1146443,"position":4,"parentId":"4c492984614665d2f9000036","content":"[You are how you eat | Emilie Baltz | TEDxYouth@Omaha - YouTube](https://www.youtube.com/watch?v=_RtYkICtYjs)"},{"_id":"4cb3b0c71fc0151192000096","treeId":"4c4830c7676f43cc820001a2","seq":1146560,"position":4.5,"parentId":"4c492984614665d2f9000036","content":"[The Green Couch Project | Welcome](http://www.thegreencouchproject.com/)"},{"_id":"4cb3674d1fc0151192000091","treeId":"4c4830c7676f43cc820001a2","seq":1146478,"position":5,"parentId":"4c492984614665d2f9000036","content":"## LEARNING"},{"_id":"4cb367851fc0151192000092","treeId":"4c4830c7676f43cc820001a2","seq":1146562,"position":1,"parentId":"4cb3674d1fc0151192000091","content":"[Forget what you know | Jacob Barnett | TEDxTeen - YouTube](https://www.youtube.com/watch?v=Uq-FOOQ1TpE)\n\n##### `#ted` `#video`"},{"_id":"4cb39b041fc0151192000093","treeId":"4c4830c7676f43cc820001a2","seq":1146563,"position":2,"parentId":"4cb3674d1fc0151192000091","content":"[How to become more confident -- lay down on the street for 30sec | Till H. Groß | TEDxDonauinsel - YouTube](https://www.youtube.com/watch?v=HtDkg3Xwn7U)\n\n##### `#ted` `#video`"},{"_id":"4cb39bc41fc0151192000094","treeId":"4c4830c7676f43cc820001a2","seq":1146570,"position":3,"parentId":"4cb3674d1fc0151192000091","content":"[How to learn any language in six months | Chris Lonsdale | TEDxLingnanUniversity - YouTube](https://www.youtube.com/watch?v=d0yGdNEWdn0)\n\n## `#wip`\n[ ] katso tämä\n\n##### `#ted` `#video`"},{"_id":"4cb3a63d1fc0151192000095","treeId":"4c4830c7676f43cc820001a2","seq":1146539,"position":4,"parentId":"4cb3674d1fc0151192000091","content":"[What Connected Educators Could Learn from Bloggers • Heck Awesome](http://carriebaughcum.com/connected-educators-learn-bloggers/)"},{"_id":"4c7c8944faf902c4de000056","treeId":"4c4830c7676f43cc820001a2","seq":1113000,"position":3,"parentId":null,"content":"# Käyttämistäni työkaluista\n##### Lista paljon käyttämistäni työkaluista ja kenties tietoa niiden käytöstä.\n\n## `#wip`\n[ ] Onko tämä relevanttia? (Eli pitäisi hierarkian olla toisenlainen?)"},{"_id":"4c7c9f5afaf902c4de00005c","treeId":"4c4830c7676f43cc820001a2","seq":1110913,"position":0.25,"parentId":"4c7c8944faf902c4de000056","content":"## [Dropbox](https://db.tt/f7p50K4)\n\n##### Otsikossa on suosituslinkki, jonka kautta rekisteröitymällä saat 500 Mt ekstratallennustilaa ja minä saisin 1Gt, jollen olisi jo Premium-käyttäjä. `#dropbox` `#win` `#mac` `#web` `#ios` `#android`"},{"_id":"4c7ca8b6faf902c4de00005d","treeId":"4c4830c7676f43cc820001a2","seq":1110826,"position":1,"parentId":"4c7c9f5afaf902c4de00005c","content":"Dokumentit, kuvat ja monet muuta tiedostot on helppo pitää aina saatavilla, kun niistä on kopio Dropboxissa tai jossakin muussa verkkotallennuspalvelussa. Muita palveluita ovat esimerkiksi [Box.com](box.com), [Google Drive](drive.google.com) ja [Microsoft OneDrive](onedrive.live.com)."},{"_id":"4c7c8c94faf902c4de00005a","treeId":"4c4830c7676f43cc820001a2","seq":1110930,"position":0.5,"parentId":"4c7c8944faf902c4de000056","content":"##[Evernote](https://www.evernote.com/referral/Registration.action?uid=102928&sig=17ec5fb0cbbae03884bcc4b9ccfb7045)\n\n##### Otsikossa on referral- eli suosituslinkki, jonka kautta rekisteröityessäsi saat käyttöösi Evernote Premiumin kuukaudeksi. Lisäksi minä saan suosituspisteitä, joilla voin saada jotakin, jos niitä kertyy tarpeeksi. `#evernote` `#win` `#mac` `#web` `#ios` `#android`"},{"_id":"4c7c89d4faf902c4de000057","treeId":"4c4830c7676f43cc820001a2","seq":1111212,"position":1,"parentId":"4c7c8944faf902c4de000056","content":"## [Gingko](http://gingkoapp.com) `TÄMÄ SOVELLUS!`\n\n##### Offline-tila Gingkosta vielä puuttuu, mutta tulossa sen pitäisi olla. Kenties ainoa merkittävä puute muutoin hyvin vahvassa sovelluksessa. Toisena ehkä deep linking eli linkittäminen julkisen puun yksittäiseen korttiin. `#gingko` `#web`"},{"_id":"4c7d0700c484328c0600005f","treeId":"4c4830c7676f43cc820001a2","seq":1112742,"position":1,"parentId":"4c7c89d4faf902c4de000057","content":"[Gingkoapp – A Revolutionary Editor For Writers](http://www.matthewsetter.com/gingkoapp-review/)\n*June 10, 2014 9:00 am by Matthew Setter*\n> Looking for an application giving you the ability to organize your writing like sheets of paper, with the power of a web-based app? If so, I’ve got the answer!\n\n##### `#gingko`"},{"_id":"4c7eca275a0437483b000069","treeId":"4c4830c7676f43cc820001a2","seq":1112898,"position":1.5,"parentId":"4c7c89d4faf902c4de000057","content":"[Gingko Usage Examples](https://gingkoapp.com/p/examples/)\n> Gingko is a very versatile tool, and has been used for everything from writing physics papers, drafting novels, and planning baby purchases.\n\n> These are just some examples of its uses.\n\n##### `#gingko`"},{"_id":"4c7e9a035a0437483b000067","treeId":"4c4830c7676f43cc820001a2","seq":1112744,"position":2,"parentId":"4c7c89d4faf902c4de000057","content":"[Gingko is not (just) an outliner](http://blog.gingkoapp.com/essays/799)\n*July 19, 2014 Gingko Blog*\n> I find that it sometimes takes a while for new users to get used to Gingko.\n\n>I always say there’s no “right” way to use Gingko. But there is one point that might help you see your trees differently. And it might make the difference between getting stuck on an idea, and having it just flow onto the page.\n\n>First of all, think about the phrase “flow onto the page”. It implies that there is a stream of information that begins in your mind, and needs to pass through a very narrow channel (your typing fingers), to emerge on a Gingko tree.\n\n>Thinking of writing as information flow brings in a few analogies from the field of communication theory, which I find helps explain why a Gingko tree is not just an outline.\n\n>When arranging and organizing a tree, you shouldn’t be thinking in terms of categories (“Where should this go?”), but in terms of lossy compression and a sum of parts.\n\n##### `#gingko`"},{"_id":"4c7eb05e5a0437483b000068","treeId":"4c4830c7676f43cc820001a2","seq":1112797,"position":3,"parentId":"4c7c89d4faf902c4de000057","content":"[Mindset: From “To Do” to “Could Do”](http://blog.gingkoapp.com/essays/mindset)\n*July 4, 2014 Gingko Blog*\n> Reframing your lists slightly can make a tremendous psychological difference. Here’s why.\n\n>The “Must Do” list is a list of promises (to yourself, to your partner, to anyone you respect). As with all promises, you shouldn’t make them unless you are sure you can deliver. And every item added to a “Must Do” list is deliberated on carefully, because adding too much to a “Must Do” list will lead to a complete breakdown of the system.\n\n>A “Could Do” list, on the other hand, is a list of all the possible paths you could take next (some of which may be mutually exclusive). There’s no fear of adding things to a “Could Do” list. And instead of approaching the list with dread, with a little practice you can learn to approach it with curiosity and excitement. (“Ooh, look at all the things I could be doing!”).\n\n>However, there is one more caveat: the “Could Do” list can (and should) become very large. So how do you prevent information overload, and actually choose from this list?\n\n##### `#gingko`"},{"_id":"4c7ece235a0437483b00006a","treeId":"4c4830c7676f43cc820001a2","seq":1112902,"position":4,"parentId":"4c7c89d4faf902c4de000057","content":"[Gingko for Goal-setting & Journaling](http://blog.gingkoapp.com/uses/gingko-for-goal-setting-journaling)\n*September 24, 2013 Gingko Blog*\n>The greatest challenge in any large project, is keeping the daily tasks aligned with the long term goal.\n\n>It’s very easy to get lost in the details and the daily grind, and forget the big picture. Then you look up after two weeks of “hard work” to see where you’re at, and find you are no closer to your goal.\n\n>As with many challenges we all face in life, it’s partly due to a fundamental limitation of the human brain. We simply can’t keep our mind on the big picture, while we’re working on the details. And since we can only make progress by doing the daily detailed tasks, it’s very easy to get overwhelmed or lost.\n\n>With Gingko, we have an alternative approach: hierarchical goals. While not a new idea, Gingko is better suited to displaying these goals than most other software out there.\n\n##### `#gingko`"},{"_id":"4c7f10d75a0437483b00006d","treeId":"4c4830c7676f43cc820001a2","seq":1113025,"position":5,"parentId":"4c7c89d4faf902c4de000057","content":"[Planning a PowerPoint presentation in Gingko](http://drandus.wordpress.com/2014/03/09/planning-a-powerpoint-\npresentation-in-gingko/)\n*March 9, 2014 by Dr Andus*\n##### `#gingko`"},{"_id":"4c7cc9c3faf902c4de00005f","treeId":"4c4830c7676f43cc820001a2","seq":1110933,"position":1.5,"parentId":"4c7c8944faf902c4de000056","content":"## [Google Drive](http://drive.google.com)\n##### `#googledrive` `#win` `#mac` `#web` `#ios` `#android`"},{"_id":"4c7ccaf1faf902c4de000060","treeId":"4c4830c7676f43cc820001a2","seq":1110937,"position":1.75,"parentId":"4c7c8944faf902c4de000056","content":"## [IFTTT](http://ifttt.com)\n##### `#web` `#ios`"},{"_id":"4c7c8a66faf902c4de000058","treeId":"4c4830c7676f43cc820001a2","seq":1110919,"position":2,"parentId":"4c7c8944faf902c4de000056","content":"## [Trello](http://trello.com/tvti/recommend)\n\n##### Otsikossa on suosituslinkki, jonka kautta sain Trello Goldin kaikkiaan 12 kuukaudeksi, kun käyttäjiä rekisteröityi sen kautta. Enempää en voi saada, mutta on kiva tietää, jos joku rekisteröityy minun suosituksestani. `#trello` `#win` `#mac` `#web` `#ios` `#android`"},{"_id":"4c7c8aa8faf902c4de000059","treeId":"4c4830c7676f43cc820001a2","seq":1111082,"position":3,"parentId":"4c7c8944faf902c4de000056","content":"## [Quip](http://quip.com)\n\n##### `#quip` `#win` `#mac` `#web` `#ios` `#android`"},{"_id":"4c7ce6d9c484328c0600005e","treeId":"4c4830c7676f43cc820001a2","seq":1111089,"position":0.5,"parentId":"4c7c8aa8faf902c4de000059","content":"## [Code Blocks in Quip](https://quip.com/blog/code-blocks)\n\n##### `#quip`"},{"_id":"4c7cc276faf902c4de00005e","treeId":"4c4830c7676f43cc820001a2","seq":1110903,"position":1,"parentId":"4c7c8aa8faf902c4de000059","content":"## Spreadsheets\n\n##### `#quip`\n\n- [Introducing Quip Spreadsheets](https://quip.com/blog/spreadsheets)\n- [Spreadsheets FAQ and Upcoming Features](https://quip.com/bruuADgdBKvr)\n- [Quip Spreadsheet Functions](https://quip.com/4PwFADor2VYB)"}],"tree":{"_id":"4c4830c7676f43cc820001a2","name":"opehei","publicUrl":"opehei"}}