net-history/index.html

Summary

Maintainability
Test Coverage
---
categories: [Extra, Notes]
---

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>History of the Internet</title>
    <!-- <link rel="stylesheet" href="css/timeliner.css" type="text/css" media="screen"> -->
    <link rel="stylesheet" href="css/timeliner-future.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/venobox.css" type="text/css" media="screen">
</head>
<body>
    <div class="container">
        <h1>The Internet</h1>
        <h2><span class="step1">1969</span> <span class="step2">into the </span> <span class="step3">Future</span></h2>

        <p class="lead">Blah blah demo of a timeline, Internet history. Also view the <a href="../timeliner.html">original demo</a>.</p>

        <div id="timeline" class="timeline-container">

            <button class="timeline-toggle">+ expand all</button>

            <br class="clear">

            <div class="timeline-wrapper">
                <h2 class="timeline-time"><span>1969</span></h2>
                <dl class="timeline-series">
                    <span class="tick tick-before"></span>
                    <dt id="robots" class="timeline-event"><a>ARPABogeys online</a></dt>
                    <span class="tick tick-after"></span>
                    <dd class="timeline-event-content" id="robotsEX">
                        <div class="media">
                            <a href="http://youtu.be/hUnibKe_o18" class="venobox" data-type="youtube" data-overlay="rgba(0,0,0,0.5)"><img src="img/event-robots.jpg" alt="singing robots"></a>
                            <p><a href="http://youtu.be/hUnibKe_o18" class="venobox" data-type="youtube" data-overlay="rgba(0,0,0,0.5)">Listen</a></p>
                        </div><!-- /.media -->

                        <blockquote>
                            <p>ARPA (Advanced Research Projects Agency) goes online in December, connecting four major U.S. universities. Designed for research, education, and government organizations, it provides a communications network linking the country in the event that a military attack destroys conventional communications systems.</p>
                        </blockquote>

                    <br class="clear">
                    </dd><!-- /.timeline-event-content -->


                </dl><!-- /.timeline-series -->
            </div><!-- /.timeline-wrapper -->


            <div class="timeline-wrapper">
                <h2 class="timeline-time"><span>1972</span></h2>
                <dl class="timeline-series">
                    <span class="tick tick-before"></span>
                    <dt id="cars" class="timeline-event"><a>Electronic Mail</a></dt>
                    <span class="tick tick-after"></span>
                    <dd class="timeline-event-content" id="carsEX">
                        <div class="media">
                            <a href="http://youtu.be/FyinD6ZDqeg" class="venobox" data-type="youtube" data-overlay="rgba(0,0,0,0.5)"><img src="img/event-cars.jpg" alt="flying car"></a>
                            <p><a href="http://youtu.be/FyinD6ZDqeg" class="venobox" data-type="youtube" data-overlay="rgba(0,0,0,0.5)">See it in Action</a></p>
                        </div><!-- /.media -->

                        <p>Electronic mail is introduced by Ray Tomlinson, a Cambridge, Mass., computer scientist. He uses the @ to distinguish between the sender's name and network name in the email address.
</p>

                    <br class="clear">
                    </dd><!-- /.timeline-event-content -->

                    <span class="tick tick-before"></span>
                    <dt id="urbanity" class="timeline-event"><a>Aged Urbanity</a></dt>
                    <span class="tick tick-after"></span>
                    <dd class="timeline-event-content" id="urbanityEX">
                        <div class="media">
                            <a href="http://discovermagazine.com/2012/oct/2062-the-state-of-the-world" class="venobox" data-type="iframe" data-overlay="rgba(0,0,0,0.5)"><img src="img/event-urbanity.jpg" alt="jam packed city fuels tempers"></a>
                            <p><a href="http://discovermagazine.com/2012/oct/2062-the-state-of-the-world" class="venobox" data-type="iframe" data-overlay="rgba(0,0,0,0.5)">read the predictions</a></p>
                        </div><!-- /.media -->

                        <p>From <i>Discover</i> magazine's "<a href="http://discovermagazine.com/2012/oct/2062-the-state-of-the-world" class="venobox" data-type="iframe">The State of the World: 2062</a>":</p>

                        <blockquote>
                            <p>6 billion people live in cities—the population of the entire world at the turn of the century.</p>
                        </blockquote>
                        <blockquote>
                            <p>Earth now home to 2 billion people age 60 and over.</p>
                        </blockquote>
                        <blockquote>
                            <p>Coastal cities go under. Renewable energy rules the day. Cows use up precious water and drive the ongoing greenhouse effect.</p>
                        </blockquote>
                        <blockquote>
                            <p>Incomes skyrocket in developing nations.</p>
                        </blockquote>
                        <blockquote>
                            <p>
Ice caps melt. Industry booms at top of the world.</p>

                    <br class="clear">
                    </dd><!-- /.timeline-event-content -->


                </dl><!-- /.timeline-series -->
            </div><!-- /.timeline-wrapper -->

            <div class="timeline-wrapper">
                <h2 class="timeline-time"><span>2265</span></h2>
                <dl class="timeline-series">
                    <span class="tick tick-before"></span>
                    <dt id="teleport" class="timeline-event"><a>Teleportation</a></dt>
                    <span class="tick tick-after"></span>
                    <dd class="timeline-event-content" id="teleportEX">

                        <div class="media">
                            <a href="https://www.teliportme.com/view/446746" class="venobox" data-type="iframe" data-overlay="rgba(0,0,0,0.5)"><img src="https://raw.githubusercontent.com/roachhd/timeliner/net-history/demo-future/img//event-teleportation.jpg" alt="teleporting humans"></a>
                            <p><a href="https://www.teliportme.com/view/446746" class="venobox" data-type="iframe" data-overlay="rgba(0,0,0,0.5)">Try It Now</a></p>
                        </div><!-- /.media -->

                        <p>Teleportation, or Teletransportation, is the theoretical transfer of matter or energy from one point to another without traversing the physical space between them. It is a common subject of science fiction literature, film, and television.</p>

                        <p>The original Star Trek series is <a href="http://scifi.stackexchange.com/questions/12784/what-year-is-star-trek-the-original-series-set-in" target="_blank">reported</a> to have taken place from 2265 to 2271.</p>

                    <br class="clear">
                    </dd><!-- /.timeline-event-content -->
                </dl><!-- /.timeline-series -->

            </div><!-- /.timeline-wrapper -->

            <div class="timeline-wrapper">
                <h2 class="timeline-time"><span>2888</span></h2>
                <dl class="timeline-series">
                    <span class="tick tick-before"></span>
                    <dt id="singularity" class="timeline-event"><a>Singularity</a></dt>
                    <span class="tick tick-after"></span>
                    <dd class="timeline-event-content" id="singularityEX">

                        <div class="media">
                            <!-- <a href="img/event-singularity-woah.gif"></a> -->
                            <img src="https://raw.githubusercontent.com/roachhd/timeliner/net-history/demo-future/img/event-singularity.gif" alt="">
                        </div><!-- /.media -->

                        <p>The technological singularity hypothesis is that accelerating progress in technologies will cause a runaway effect wherein artificial intelligence will exceed human intellectual capacity and control, thus radically changing or even ending civilization in an event called the singularity.</p>

                    <br class="clear">
                    </dd><!-- /.timeline-event-content -->
                </dl>
            </div>

            <button class="timeline-toggle">+ expand all</button>

            <br class="clear">

        </div><!-- /#timeline -->

    </div><!-- /.container -->

    <!-- GLOBAL CORE SCRIPTS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/venobox.min.js"></script>
    <script type="text/javascript" src="js/timeliner.js"></script>
    <script>
        $(document).ready(function() {
            $.timeliner({
                timelineContainer:'#timeline',
            });
            $('.venobox').venobox();
        });

    </script>

</body>
</html>