Week 1

Here at the fablab puebla the instructors teach us how to use adobe muse for the web development, we use it because of its simplicity for designing web pages, we thought that muse is a time saver, thanks to it's graphical interface we can make web pages fast and document all our progress easily.

For beginning making the web page i started by clicking on the file button and then choosing new site

then i choose the size, resolution, margins and language for the text corrector

FIrst i check the fabacademy pages of the previous generations to have an idea of what i wanted to do and how it could look, i look for different icons , the logos of the idit and fablab puebla, a personal picture and a repetitive pattern image for the background, this image must have forms that finish in the four edges. this kind of image wont look cut if the size of the page changes as we add information and images.

for adding the menu, buttons, google maps places, contact options and social links i used the widgets library. i just had to drag and drop the desired widget

to add text boxes i use the text tool, i must drag with the mouse to draw a rectangle containing the text, it is important to drag the mouse and draw because if we only click, the size of the text box could not be the correct.

After i used all these tools i arrive to finish my master page. I click on the plan label to return to the page manager and add more sub-pages.

Finally to edit all the visual characteristics like color, fonts, width and shape of of buttons, images, text and widgets i use the top toolbar

$<html> <head> <title> About me </title> </head> <body> <body background="C:\Users\Xpere\Desktop\fabacademy\week1 25.01.2017\pagina\capturas week1\animus-mix.gif"> <h2 align = "center"> <p style="color:#ffffff";> ABOUT ME <h2> <IMG SRC="C:\Users\Xpere\Desktop\fabacademy\week1 25.01.2017\pagina\capturas week1\FB_IMG_1485385032746.jpg" ALT="some text" WIDTH=200 HEIGHT=256> <DIV ALIGN=center> <div style="width:700px;height:200px;border:1px solid black;"> <P style="COLOR:#ffffff; BACKGROUND-COLOR: #999999"> My name is Carlos Pérez Ramírez, I'm Mexican and i live in Puebla <br/> one of the most beautiful cities in México, here i studied <br/> mechatronics, electricity an electronics, now I'm an engineer in <br/> automation and i work at the IDIT (technological and innovation <br/> institute of design) and here i develop some of the technological <br/> projects for different clients, enterprises and the Universidad <br/> Iberoamericana that is the university which lodge the IDIT . </P> </div> </DIV> <h4 align = "center"> <p style="color:#ffffff";> CARLOS PEREZ RAMIREZ <h4> <div align = "left"> <a title="idit" href="http://www.iberopuebla.mx/IDIT/iditpublico/index.php/home"><img src="C:\Users\Xpere\Desktop\fabacademy\week1 25.01.2017\pagina\capturas week1\idit.png" width="100" height="100" alt="idit" /></a></div> <div align = "right"> <a title="fablabpuebla" href="https://www.fablabs.io/labs/fablabpuebla"><img src="C:\Users\Xpere\Desktop\fabacademy\week1 25.01.2017\pagina\capturas week1\Logo-Fab-Lab-Puebla-FINAL.jpg" width="200" height="100" alt="fablabpuebla" /></a></div> </body> </html>$ how to update files to the archive

1we must download the git bash software and install it

2 we have to create an ssh key using the command ssh-keygen-trsa-c"email"

3 we use the cat command to read our key

5 in the gitlab page we have to add the key to the account

6 using the clone command we copy the repository to our pc

as we see next now we can do all the updates to upload the archives

7 in git bash we move to the folder that we cloned whit the new archives

8 we use the add command to add the new archives to our git

9 we do a commit to test the upload of the archives

10 finally we do a push where all the updates in the pc will be seen in the repository

at the fablab we have one computer already configured to push the files of everyone so we work in our pc then the guru checks the assignments and if everything is correct we can now push our files to the git lab using that pc thats why i hide the administrator name of the screenshots

i will do all the process with my pc to proof that i can push files in to the git lab from my account and pc, in the screenshots it will be shown my emailx.perez@hotmail.com and i will push the two presentation files to the root student folder, in my case the 244 folder.

muse creates a master page, this master page is going to work as a template for all the next pages that we are going to create

i fill the master page with the pattern selected by clicking on the orange label "fill", and then in the "add image" option also in orange.

to test the html code i will do the about me page writing in html language the page and tying to make it like the one that i made in muse. i will use note pad ++ to code the page

you can download the html file clciking here

PRINCIPLES & PRACTICES project management

this is a screen shot of my actual master page and how it looks in muse, to arrive there i used different tools in the software

to add images i clicked on file and then place, a file manager appears for select the image after choosing it must drag the image to place it in the place and size desired.

this is how the page look building it in html code

this is how the page look building it in muse

this is the html code that i use to create the page

to change the widget we click on the blue arrow and a configuration menu appears

After i add the necessary pages i edit them the same way i did with the master page. i add the hyper links to the buttons and the images that i wanted to make links to other pages like the fablab puebla web page.