<?php require 'header.php'; ?>
<main>
    
    <section class="row">
        <article class="col-md-10 col-md-offset-1">
            <h1 class="intro">HOTGLUE, a Content Manipulation System</h1>
            <br>
        </article>
    </section>
    
<section class="row">
        <article class="col-md-10 col-md-offset-1">
            <div class="col-md-5 col-md-offset-1">
            <h3>Introduction</h3>
            <p><i>HOTGLUE</i> is a visual online tool that allows the construction of websites directly in a web-browser. Multiple pages can be easily created and images and other elements can be placed anywhere on the page by using drag and drop. Although HOTGLUE has its advantages, some limitations can also be found.</p>
            <p>An introduction to this tool was made and this portfolio is built using it with the purpose of documenting my learning experience throughout the Web Design Studio module.</p>
            <div class="vimeo43">
                <iframe src="https://player.vimeo.com/video/17924249" width="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="https://vimeo.com/17924249">HOTGLUE content manipulation system</a> from <a href="https://vimeo.com/hotglue">hotglue</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
            </div>

            </div>
            <div class="col-md-5">
            <h3>First Steps</h3>
            <figure class="img-thumbnail center-block">
                <img src="images/f75ac2e.png" class="img-responsive center-block" title="Hotglue canvas with multiple elements and graphics.">
                <figcaption><i><b>A first attempt of placing elements and linking to pages.</b></i></figcaption>
            </figure>
            <p>After creating an account the user is left with a blank canvas, to place elements in. With a single click opens a set of creation tools while a double click gives access to page specific features and the possibility to edit overall settings of the website.</p>
            <figure class="img-thumbnail center-block">
                <img src="images/tools2.png" class="img-responsive center-block" title="Set of tools that can be accessed by a single click on the canvas.">
                <figcaption><i><b>Set of tools that can be accessed by a single click on the canvas.</b></i></figcaption>
            </figure>
            </div>
        </article>
    </section>
    <section class="row">
        <article class="col-md-10 col-md-offset-1">
            <div class="col-md-5 col-md-offset-1">
            <h3>Pros ans Cons</h3>
            <p>Proved to be a great tool to quickly create visual compositions:</p>
                <ul>
                    <li><p><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> <b>Visual tool</b>, elements can be easily placed anywhere on the canvas.</p></li>
                    <li><p><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> <b>Free server space</b>, multiple pages can be created and are automatically published on the internet.</p></li>
                    <li><p><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> <b>Can be enhanced with code.</b> Includes a tool that parses HTML, CSS and JavaScript but scripts need to be used with caution.</p></li>
                    <li><p><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> <b>Good for sketching</b> layouts and study a web space structure.</p></li>
                </ul>
                <p>Although it has it's benefits, after creating a few pages with HOTGLUE significant limitations where noted as well:</p>
            </div>
            <div class="col-md-5">
                <br>
                <br>
                <ul>
                    <li><p><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> <b>Limited element styling.</b> Unless tags with CSS classes or id's are wrapped around the text when creating text elements, it's not possible to style the elements with advanced styling options.</p></li>
                    <li><p><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> <b>Cannot access created files.</b> There is no way to access the files for the created pages or uploaded resources such as images which can cause issues when creating a website of larger complexity.</p></li>
                    <li><p><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> <b>Non-responsive.</b> The content does not adapt in any way, as it seems the elements are using <code>position: absolute</code> and don't respect the size of the browser window.</p></li>
                </ul>
            </div>
        </article>
    </section>
        <section class="row">
        <article class="col-md-10 col-md-offset-1">
            <div class="col-md-10 col-md-offset-1">
                <h3>Conclusion</h3>
                <p>Overall, HOTGLUE is a great tool to quickly sketch a layout and create web content without knowing any markup or programming language. The tools are no more than two clicks away and there are many useful <a href="https://vimeo.com/hotglue/videos" title="HOTGLUE tutorials on Vimeo." target="_blank">tutorial videos</a> to get users started. However, it is not a friendly tool for creating web content that is semantic, responsive and user-friendly, definitely raises questions about whether using visual web tools or custom code is best when creating good quality web documents.</p>
            </div>
        </article>
    </section>
    <br>
</main>
<?php require 'footer.php' ?>