Skip to content
Snippets Groups Projects

Principles and practices

Last edited by Ivan Sanchez Milara

Welcome to the FabAcademy 2024 course!!! We are very glad of having you here and we will do our best to support you during the following 5 months.

Regarding the schedule, on Thursdays or Fridays you will have a local lecture in which instructors will provide some guidelines and provide practical knowledge so you can succeed when implementing your weekly project. The schedule depends on the instructor assigned to that week. You will have information regarding the schedule during the Wednesday lecture. I also recommend you that every week check the Assessment book (https://fabacademy.org/2024/nueval/) where you can find detailed information on how current week project will be evaluated.

During this week I will guide you through the process of creating the website and uploading it to the Fabacademy repository. One of your task for this week is to SKETCH YOUR FINAL PROJECT. IT SHOULD BE CLEAR WHAT IT WILL DO AND WHO IS GOING TO USE IT. You might even have 2 or 3 ideas to discuss before selecting one. In order to understand better what you should do I recommend you have a look to last year’s fabacademy documentation from our Fab Lab. You can also check the final project videos from Vimeo: www.vimeo.com/fablaboulu .

In Project Management, I will explain you how you can upload it to the FabAcademy repo. Remember that you should document everything you are doing during the Fab Academy. Hence, the website creation should also be documented.

REGARDING WEBSITE CREATION:

  • A website is formed basically by three different elements: HTML (content and structure), CSS (style, e.g. colors, elements positions, and text sizes) and Javascript (provide interaction with the users).
  • General information regarding HTML
    • Nice tutorial with“Hello World” example available from: https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
    • HTML reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element or https://www.w3schools.com/TAgs/default.asp
    • CSS tutorial and the list of selectors
    • Our recommendation is that you do not build a website from scratch but it is better to utilize an existing template that fits your needs. Usually, in previous years website you can find information on what template people have used (if any). If you want to build a very simple website you do not need to use a template. Simple websites are also valid, and sometimes are easier to navigate. Check for instance Yrjö’s site from previous year. Some links where you can find already made templates:
    • Majority of previous templates used bootstrap, a framework (set of HTML, CSS and Javascript code) that you can use to build fluid layouts. They are layouts that adapts to the size of the screen, so they are going to visualized correctly both in a computer and in a mobile phone.
    • You can utilize any text editor for writing your site (even Notepad). Some recommendations:
      • Notepad++ (simple an effective)
      • Sublime Text 3 (my preferred text editor for coding, useful when you need to program later in Python, for instance), or the Visual Studio Code
      • Brackets (just for web programming, it is a little bit heavy, but it allows to visualize in real time all the changes that you are doing to the website)
    • When you are editing your website, it is really useful to use Google Chrome development tools, that you can find from Chrome Menu>More tools > Developer tools. By pressing the arrow button (top left corner) you can select and modify dynamically any HTML element in your site (including CSS).

REGARDING PRACTICAL GUIDELINES

  • You must build your website in such a way that the following content is clearly visible and accessible:
    • About me: Information about you. This is the first page Neil is going to check when you have to present your weekly assignment on Wednesdays
    • Final project: A description of the final project (you should start with and introduction of what you are planning to do). Later you should provide detailed information on the different processes you have utilized. You should also mention how the different weekly assignments have contributed (if any) to the final project
    • Weekly assignment: You should list all weekly assignments and provide a unique webpage for each individual assignment.
  • THE TOTAL SIZE OF YOUR REPO IS AROUND 150 MB (Each week you should have ~10MB at maximum). INDIVUDAL COMMIT LIMIT IS 10MB
  • You should not upload big images. I was checking my images from last year and they occupy maximum 200, 300 KB. NEVER UPLOAD BIG IMAGES, but the average was just a few KB (20-30). Utililize JPEG for pictures and png for screenshots. Resolutions I utilized are 800x600 and 1024x768, 1280x720. Just consider using larger resolution if you want to provide really detailed view (and you need to do a lot of zoom).
  • NEVER UPLOAD BIG FILES. 3D models might become really huge but you need to manage to reduce the size to a few MB. Never upload a file that is more than 2 ~ 3 MB. Videos should also be small. For instance, restriction for each commit is 10MB so your final video cannot occuppy more than 10MB. We will provide adequate tools for compressing the video correctly. If you are not sure if a file can be uploaded or not to the repo, always consult with any of the instructors. Why is that? Well basically, you are using a Repository which keeps track of all the changes that you are making to your files. Even when you are removing one file from your project, the file stays in the history forever. So, the size of your repo become very large.
  • Your website should have all necessary content. You should not utilize external links to explain your processes. So please, do not upload picture or documents to external services. The idea is that if someone cannot connect to internet but has your documentation he/she should be able to replicate your processes, without needing any extra information. Only exception are videos that are not really crucial to explain your work.