01. Principles and Practices, Project Management

Assignment

Build a personal site describing you and your final project.

Plan and sketch a potential semester project and add it to your website.

Web Development

this documentation is for the old website

I had a little bit of knowledge of web development, but I had few experience to build real website. So, it's a good challenge for me to make a website with somekind of originality. I made the concept for my website: "No Reloading". I don't want people to jump to other URL because it needs reloding and it takes time. For this concept I found a FullPage.js which is a simple and easy to use jQuery plugin to create fullscreen scrolling websites.

There are many Eamples in Fullpage.js. I tried all of them, then decided to use "FixedHeaders" example. I custamized the example html and css.

These are materials to learn CSS and HTML:

■ dotinstall (Japanese Only)

■ W3C school CSS Tutorial

■ a lot of googling

Tools

■ Fullpage.js

■ Atom >> open-source text editor developed by Github. It has many plugins that make me happy!

■ Emmet >> make html coding easy. For example: p+tab key then you can make <p>

atom

Fullpage.js

To Add a new section and slide: use this code:

                <div class="section" id="sectionN">
                  <div class="weekN">
                    <div id="tit">weekN</div>
                      <div class="slide" id="wNslideN">
                        <div id="content">
                            <div id=headline><u>weekN:</u></div>
                            <p>comming soon</p>
                        </div>
                      </div>
                  </div>
                </div>

Gitlab

1) using SourceTree which is a GUI git tool is easy way.

2) loggig in GitLab FabAcademy with fabble account.

3) create a SSH-Key on my laptop(OSX 10.9). When I typed "cat ~/.ssh/id_rsa.pub" on my terminal, I found I had ssh-key.

But I recreate it with "ssh-keygen -t rsa -C “email”"" command.

4) adding SSH key on GitLab: go to GitLab -> profile settings -> SSH Keys

and past my ssh-key("pbcopy < ~/.ssh/id_rsa.pub " is good way to copy ssh-ky on Terminal)

5) Create a new Repositry on SourceTree: resister git SSH address

:<git@git.fabacademy.org:fabacademy2016/fablabkyushu.git>>. when cloning is done,then I could use Git on SouceTree.

6) Try Git with SourceTree.

Git

There are 4 basic commands for this fab academy usage:

■Fetch: getting the changes on gloal repository.

■Pull: Get the last status on global repository. Do it before I do commit.

■Commit: adding latest status to local repository on git. it's like saving to my history.

■Push: Pushing latest status to global repository on git. saving to global history.

notes: with SourceTree "add " command is kind of wraped so it's easy. I have to try it with Terminal. "Merge " and "Brunch " concepts must be undertood.

Notes

■Using SyntaxHighlighter to show codes cleary on website.Like this:>> use it like this way: 

 <pre class="brush:html "> codes </pre>

■This tool is good to make espaped HTML code for SyntaxHighLighting

Troubles

■The width of each content on each section is wider than window

■sometime the content would go under header and footer.

■On iPhone the font size is not readable enough.

TODO

■To add somekind of animation (with jQuery processing.js or LazyLanePainter)

■To add SNS links on header or footer ✔DONE I used Font Awesome (2016/2/7)

■To add menu to move to specific page on header ✔DONE (2016/2/7)

■more responsive

■more readable // Use font "Lora " from Google Web Font(2016/2/7)

■To devide the each page, "Don 't make one big website" by Neil ✔DONE (2016/2/20)

My old documentation is here