In this week:

- Plan and sketch a potential final project

- Build a personal site describing you and your final project - Upload it to the class archive. Work through a git tutorial

Why Xara Web Designer?

Web  

Designer  

treats  

web  

page  

design  

just  

like  

print  

page  

layout.  

You  

can  

either  

create  

your  

own  

page  

and  

site  

designs  

from  

scratch  

with  

the  

power

-

ful  

page  

layout  

and  

design  

tools  

or  

simply  

1)  

pick  

your  

design  

from  

the  

templates  

2)  

customize  

it  

with  

complete  

freedom  

3)  

publish.  

What  

you  

see

on the page in Web Designer is exactly what you get on your site.

Total design freedom

Web   Designer   gives   you   total   design   freedom   -   using   drag   and   drop   you   can   literally   place   anything,   anywhere   on   the   page.   And   things   which   are normally   difficult   to   achieve   in   HTML   are   a   snap   in   Web   Designer   -   for   example   text   with   curved   edges,   text   or   graphics   at   an   angle,   text   flowing around objects - no problem!

WYSIWYG

Whether   you   customize   one   of   the   bundled   templates   or   create   your   own   graphics   or   animations,   it's   genuinely   WYSIWYG   -   what   you   see   in   Web Designer is exactly what you get on your website.

Clever stuff

But we have some clever tricks too, to make things easier for you - here's just a few of the things that will save you time and trouble: Liquid   text   flow   around   objects;   easy   mouseover,   thumbnail   and   pop-up   creation;   automatic   adjustment   of   photos   to   the   correct   web   resolution; one-click   change   of   site   wide   theme   colors   and   shades;   automatic   color   matching   of   imported   objects   such   as   buttons;   a   concept   of   'repeating objects'   such   as   headings   and   button   bars   -   edit   one   instance   and   they   all   update;   buttons   and   text   panels   that   automatically   stretch   as   you   change the   text;   smart   automatic   repositioning   of   objects   and   resizing   of   pages   as   you   add   new   text;   font   embedding   which   frees   you   from   the   restriction of 'web safe' fonts.

Compatibility

Working with industry standards is vital, so Web Designer sites are W3C compliant, cross browser compatible (IE 8+, Firefox, Safari, Chrome) and XHTML, CSS standards based.

Plan and sketch a potential final project

In the first week , I have been looking for a good idea for my project: something that could be useful, achievable and possibly sustainable ..and

finally the idea of a “Food Box Saver” came into my mind.

This is my first sketches of the “food box saver” In addition, I wrote list of needed components and planned a Bluetooth panel able to set time

storage of compartments and alarm management.

 Work through a git tutorial

To Upload my personal site to the class archive I need to Work through a git tutorial and learn about this software.

I never used this software and in the first contact...seems to be hardly to use, but I know the command line mode of git  like a the old dos system in the very old computers. The informations in the recitation of Fiore Basile are really useful http://fabacademy.org/2018/recitations/gitlab.html#1 but not everything is clear in my mind, so... I read the git official document  in the web site. https://docs.gitlab.com/ee/README.html I learnt using the Git platform  installing the software in my computer , with generated a ssh key security code,  username and user configuration of email . I control everything using git command :“ git config -l”

My problem with Git!

After   installation   of   git   software,   I   had   a   big   problem   because I   moved   the   hide   git   folder   to   root   of   my   hard   disk   drive   to understand   why   my   folder   is   very   big….and   git   software   tried to upload totally my hard drive! so...I   asked   help   to   the   fablabs   boys   and   they   helped   me   to delete   old   files   and   regenerate   a   git   repository,   after   this operation    everything    worked    correctly;    moreover    I    have been   resize   all   images   in   the   site   to   96   dpi   and   compress jpeg to 70% of original quality. I really want to say to everyone : Hey   boys!   please,   don't   move   the   hidden   git   files   to   any place!!!!

Build a personal site

To  

build  

my  

  

personal  

site  

,  

I  

would  

like  

to  

use  

a  

smart  

and  

powerful  

software

that  

permit  

me  

to  

  

made  

a  

nice  

site  

and  

work  

quickly.After  

research  

on  

internet,  

I

finally  

found  

Xara  

Web  

Designer

,  

this  

software  

really  

interesting  

offer  

to  

user  

a

friendly  

interface  

and  

complete  

tools  

to  

develop  

a  

site  

or  

a  

single  

page.Also  

I

read  

some  

different  

tutorial  

about  

HTML  

programming  

and  

I  

know  

the  

basic

structure  

of  

code.

Now  

I  

need  

a  

2D  

Software  

to  

edit  

and  

transform  

the  

images  

to

use  

in  

my  

site…

  

download  

“Gimp”  

because  

this  

software  

are  

powerful  

and  

free

-

ware , I like that.

Now I set my user name and email address. This is important because every Git commit uses this information, and it’s immutably baked into the commits I start creating:

Git commands sequence

My personal website site has been realized with “Xara web designer” (work in progress) and uploaded it to the class archive with this sequence of Git’s commands: git status (to see the start situation) git add . (to add the files) git commit -m “upload my site” (to commit the changes) git status (to control again if everything is ok) git push (to upload the files in the remote repository)

Git Bash

UTENTE@DESKTOP-O7AI50E MINGW64 ~ $ cd c:\\ UTENTE@DESKTOP-O7AI50E MINGW64 /c $ cd giuseppe* UTENTE@DESKTOP-O7AI50E MINGW64 /c/giuseppe-allocca (master) $ git add . warning: LF will be replaced by CRLF in index_html_files/jquery.js. The file will have its original line endings in your working directory. UTENTE@DESKTOP-O7AI50E MINGW64 /c/giuseppe-allocca (master) $ git commit -m "upload" UTENTE@DESKTOP-O7AI50E MINGW64 /c/giuseppe-allocca (master) $ git push Counting objects: 509, done. Delta compression using up to 4 threads. Compressing objects: 100% (509/509), done. Writing objects: 100% (509/509), 11.02 MiB | 142.00 KiB/s, done. Total 509 (delta 31), reused 2 (delta 0) remote: Resolving deltas: 100% (31/31), completed with 30 local objects. To gitlab.fabcloud.org:academany/fabacademy/2018/labs/fablabsiena/students/giuseppe-allocca.git    5fd8825..c1feb87  master -> master

Generating a new SSH key

to   get   permission   to   write   to   the   remote   git   folder,   I   need   to   generate   an   authentication   ssh   key.   Once   git   bash   is   started,   the   key   is   generated   with the   appropriate   command   ( $   ssh-keygen   -t   rsa )   .   Using   the   SSH   protocol,   I   can   connect   and   authenticate   to   remote   servers   and   services.   With   SSH keys, I can connect to GitHub without supplying my username or password at each visit. Following the sequence.

Adding a new SSH key to my GitHub account

The   next   step   is   to   copy   the   public   key   generated   ( PINOKEY.pub)    in   the   personal   profile   on   the   site   https://gitlab.fabcloud.org/profile/keys    from   git   bash   I digit : clip < ~/.ssh/PINOKEY.pub (Copies the contents of the PINOKEY.pub file to my clipboard and next paste in key field.So I  click on “Add key” button.

Verify the commits on gitlab site

to verify that the push of the files has gone well, I enter the address of my repository in the browser : https://gitlab.fabcloud.org/academany/fabacademy/2018/labs/fablabsiena/students/giuseppe-allocca