Juan Santacruz

CODE ACADEMY

I used for web page CODE ACADEMY My friend says that anybody knows how you feel when use something for first time. It’s a good course to learn.

Code Academy is a platform to learn to program from scratch, easily and in an interactive way.

The mechanics of the site is quite simple and if You register You can have a control of the contents already seen, a score according to our performance and a series of badges that we will gain as we advance in our learning.

You need registered and it opened in home screen.

When you start your project, you can view two dialog boxes:

In left box, you can learn the lesson and explain in it, you can see what each code means. You need follow the instruction and Code Academy detect if you made a mistake or not and if you did well. You need complete the instructions for to activate "run" button.

In the middle box, you can put or modify the HTML codes of lesson. In the window you have two tabs: ïndex.html" and "main.css". Index.html has information about your web page. In main.css has the format: fonts, color, sizes, etc. In the botton side you can "run" the code and view changes.

In the right box, you can previsualize your web page advances.

In the botton side, you can click in "next" botton for advance when you understood the lesson and followed the instructions (you need make it!) of lesson. When you finished the lesson, you can get badgets.

ADVANTAGES

There is no setup required. Just open a browser and go.

Lessons are broken up into small chunks, often individual lines of code. You can run your code as soon as you write it and get feedback from the learning framework.

Badges and streaks are a fun way to keep track of progress.

DESADVANTAGES

You can learn only in internet. If you don't know the lesson, You don't have another one for to ask.

Each step in a lesson is so specific, the standards for completing the step correctly are also very narrow. If the lesson content isn’t written carefully, students can have a hard time figuring out exactly what the lesson is asking for.

A more serious problem with the interactive approach is that students can become accustomed to being told exactly what to do next. Sample code is usually provided, so that the student only has to copy, paste, and change a few characters. Sometimes even the character changes are optional.

ATOM

Atom https://github.com/atom was my the second progran that I used for to buil my Web Page.

When you launch Atom for the first time, you should get a screen that looks like this:

COMMAND PALETTE

In that screen, you are introduced to the Command Palette. If you press Ctrl+Shift+P, the command palette will pop up.

PACKAGES

The package manager is installed by default and to make things even better, all packages are hosted on Github.

SETTINGS AND PREFERENCES

Atom has a number of settings and preferences you can modify in the Settings View.

This includes things like changing the theme, specifying how to handle wrapping, font settings, tab size, scroll speed and much more. You can also use this screen to install new packages and themes, which we'll cover in Atom Packages.

OPENING DIRECTORIES

To open a directory, choose the menu item File > Open Folder and select a directory from the dialog. You can also add more than one directory to your current Atom window, by choosing File > Add Project Folder from the menu bar or pressing Ctrl+Shift+A.

The Tree View allows you to explore and modify the file and directory structure of your project. You can open, rename, delete and create new files from this view.

ADVANTAGES

Extensibility (packages and themes).

Active community (A LOT of support from Github crew).

Design and usability of the editor.

Completely open source and hackability.

DESADVANTAGES

Atom's startup time is slower than other text editors.

Once in awhile the editor freezes during usage.

Most of the core is written in coffeescript, but the team at Github is transitioning to ES6 (the modern edition of javascript).

SUBLIME TEXT

Sublime Text 3 is a clean, functional, and fast code editor. Not only does it have incredible built in features (multi-edit and vim mode), but it has support for plugins, snippets, and many other things.

INSTALL THE PACKAGES IN SUBLIME TEXT

Is importan install some util packages like: LiveReload, code-peak (You see color in time), highligh-selected (When You selected, the real code color apperars) etc,.

Install these packages through Package Control by opening up the Command Pallette >ctrl + shift + p, selecting “Package Control: Install Package”, and searching for the package by its name.

The command palette let's you access pretty much anything in the settings menus, call your package commands, change file syntax, handle Sublime projects, and so much more. To Use: ctrl + shift + p

COLUMN AND ROW WORKSPACE PANES

allows you to see files side by side, so that you won’t be switching back and forth between an HTML file and its CSS document:

To view two column (vertical) panes side-by-side use "View>Layout" menu or the shortcut alt+shift+2. Replace the last stroke with “3” or “4” to view three or four panes respectively. Using “5” produces a 4 pane grid.

To view two row (horizontal) panes side-by-side use the shortcut shift+alt+8. Replace the last stroke with “9” to view three panes respectively.

SIDEBAR ENHANCEMENTS

Sidebar Enhancements extends the functionality of ST3’s sidebar by allowing you to run actions on files and folders not normally available. You’ll also be able to run these actions from the Command Palette with this package.

KEYBOARD SHORTCUTS

Multiple Cursors

Multiple cursors are a killer feature of Sublime Text. It allows you to type in multiple places at the same time, saving you development time. To trigger multiple cursors, put your cursor on the word you want highlighted and MOUSECLICK in all the places you want to have a cursor.

Goto Anything

Similar to the command palette, Sublime Text 3 has the Goto Anything feature that can take you to a specific file, line, or method definition.

Goto Line in File

If you want to go to a line in the current file, just bring up Goto Anything and type a colon followed by the line number (e.g. :18 for line 18). To go to a line in another file, type the file name and then a colon and the line number:

Switching Lines

ST3 has a time-saving shortcut that lets you move a given line up or down in a document. ctrl-shift-up moves a line up, whilectrl-shift-down moves a line down.

ADVANTAGES

The power to control aspects such as "save on lost focus", "trim whitespace" and more is available.

Sublime Text allows for all sorts of customization to help users change almost everything in the editor: Key Bindings, Menus, Snippets, Macros, Completions, and many more. Essentially, just about everything in Sublime Text is customizable with simple JSON files. This system gives the user flexibility as settings can be specified on a per-file type and per-project basis.

Well-executed cross-platform.

Easy to extend, plus the ability to change most things (if desired).

Attention to detail, such as rounded corners on text selections.

Sublime Text looks consistently the same across Windows, OS X, and Linux.

DESADVANTAGES

Sublime Text protects and copyrights its code and is thus not the freedom-ware some would like it to be.

Some plugins are quite buggy, meaning that installing many can become quite a problem regarding stability.

Sublime Text is more focused on keyboard users, meaning it doesn't come with a tool bar. Even plugins can't toggle bookmarks using the mouse.

LIVE RELOAD WEBPAGE

LiveReload is important plugin because you can see in web page the changes in HTML page in real time. When you are programming, it is very util to see your changes.

1. Instal Package "LiveReload" from Preferences/Package Control menu

2. Enable plug-in. Click on LiveReload: Enable/Disable plug-in.

3. Install extension "LiveReload" in google chrome and click on Enable icon.

Another web for to learn you can see in w3schools

MY WEB PAGE

HEAD

In head, I used Precolombian Images because in Ecuadorian culture, some cities, use indian iconography, and it's part of our ancient legacy.

CODE:

				<header id="title">
				<ul>
				<li class="ico1"><a href="../index.html"><img class="ico" src="images/index.png"></a></li>
				<li class="ico1"><a href="../iweeks.html"><img class="ico" src="images/iweeks.png"></a></li>
				<li class="ico1"><a href="../iproject.html"><img class="ico" src="images/iproject.png"></a></li>
				<li class="ico1"><a href="../ime.html"><img class="ico" src="images/ime.png"></a></li>
				</ul>
				</header>

Obs. For insert code HTML in text, you can copy the text and past in this web http://www.blogcrowds.com/resources/parse_html.php. Web return code in text.

NAV BAR

In the left side I create the content of page

CODE:

				<article class="menu">
				<ul> 
				<li><a href="#1">CODE ACADEMY</a></li>
				<li><a href="#2">ATOM</a><br>
				<li><a href="#3">SUBLIME TEXT</a></li>
				<li><a href="#4">LIVE RELOAD (Web Explorer)</a></li>
					<ul><a class="sub" href="#3.1">Live Reload (Web Explorer)</a></li></ul>
				<li><a href="#6">MY WEB PAGE</a></li>				
				<li><a" href="#8">INSERT SCREEN IMAGES</a></li>
				<li><a href="#9">INSERT VIDEO</a></li>
				<li><a href="#10">ME</a></li>
				<li><a href="#11">PROJECT</a></li>
				<li><a href="#12">UPLOAD FILEST</a></li>
				</ul> 
				</article>
				<article class="working">

FILES AND FOLDERS

1. I created archives for my web page:
a. Main: 4 HTML pages for ME, ASSIGMENTS, PROJECT and HOME
b. Folders: 3 Folders, IMAGES, PROJECT and WEEKS ASSIGMENTS

2. I create in WEEKS:
a. HTML page for each week
b. Folder for each week: Inside Images, Download and video folders

Inside the weeks folders

IMPORTANT: Is important to create a CSS archive for format HTML pages with color, fonts, padding, paragraphs, backgrouds, text align, etc

ME

I am a Electronic and Telecomunication Technic, I work in Computer Systems, Electronic design and I have skills in Art too.

Many years ago, I found an importan information about Agroecological farms and Vegetarian benefits, and I changed my life style. I started my own mini Agroecological fam and I begined to find information about it: seeds, control pests, growt time plants, etc.

My project is to design a system to help me for to control my mini farm, I forgot many times watering plants!. The system will include humidity control, watering and fumigation like a FarmBot.

PROJECT

The idea is create a CNC machine that it do the same work as farmer: watering plants, humidity control, pest control with fumigation and if possible, weeds control.

MOVEMENT

X AXIS: Two classes of movement my be possible. First, arm fix that mov ahead and back. Second, telescopic movement.
The first movement has a space problem and weight problem, but is the most simple form. The second will be more complex, because I need a mecanism for to elevate the arm and install in it a Z axes.

Y AXIS: Two forms may be. One, by tubes, and the second one by steel strings.
Tubes limit the extensión because it can bend. If the tubes are solid, cost is the problem.
Steel Strings can be the solution, cost and lenght.

USES

HUMIDITY SENSING: Machine will sense soil humidity, when soil need water, CNC watering it.

WATERING: The CNC will have a water adside and it have the same size as the seed box, when the Cnc machine mov, it will have always the box water. This eliminate the water recipient in CNC machine.

FUMIGATION: The CNC machine will have a container for fumigation. Arm fumigation is retractil but it is not the final idea. I will find another for more efficient.

PROJECT PLANNING

For my final project, I will split into several parts, some of them to be performed simultaneously, while others will be executed in a defined time.

The first will be to define the software that will be used for the project. Not only for the programming, but also the machine control software.

The second one, I will be to investigate the most appropriate hardware for the project. I will review other projects of the Fab Academy to have a guide as to the elements that will be needed.

The third will be the communication interface between software and hardware. I will try to investigate some protocols to implement them.

Tests and milling will be worked out simultaneously

The Spiral Model will be the metod that I will use. The planning method proceeds with evolving cycles that, one by one, enhance the starting prototype structure and functionality. This picture represents how the project grow as the process goes on.

CLONING GIT REPOSITORIES

To update the work, we need install git software https://git-scm.com/downloads

We need select folder to update and manage repository.

PROCESS

First of all, we need to clone the master repository using

git clone git@git.fabacademy.org:fabacademy2017/fablabyachay.git

then follow this steps

				1. git pull 
				2. git status
				3. git add ../
				4. git commit -m "any name"
				5. git push origin master

I can't access to repository. This is error screen. In this update (22/08/2-17) The Academy can't fixed

UPLOAD FILES

I have a problems with my Git, my instructor says that only one student can access it. We are waiting for that to be fixed

SECOND ATTEMPT

Finding in Student class, I found information about it. From Chandi and Silvia Pallazi

STEPS

1. Create account in NUEVAL and Fablab.io and login. You need download Git Software here

2. Access to your profile like this screen:



3. Create a Folder for Git. Inside, cicck right button and select Git Bash Here in menu.

4. Clone your repository with git clone http://git.fabacademy.org/fabacademy2017/fablabyachay.git 

5. Configure GIT: 
	a. git config --global user.name "username"
	b. git config --global user.email "email id"



6. Inside your number student, set Git Bash Here again.



7. Adding data  to the Global Repository
	a. ls
	b. git add -A or git add ../
	c. git status
	d. git commit -m "Website"
	e. git pull
	f. git push

ls means "list". This command lists down all the present files in the folder.
git status It is the files that are present in the local repository but have not yet been uploaded to the global repository. To upload these files command git add -A is used.
git command -m "Website" Commit these new changes.
git pullNow all files are first pulled by this command.
git push all files are pushed using this command and update all the new changes committed to the Global Repository.

Work it!

DOWNLOAD

All files download

1. PRINCIPLES AND PRACTICES, PROJECT MANAGEMENT