UOC Master's Degree Documentation & Projects by Course 💻 📚

The university master's degree in Website and Web Application Development trains professionals specialized in this field, capable of responding to the growing demand for professionals in web development and programming. This master's degree aims to cover the growing professional demand for front-end web developers, with in-depth knowledge of branding and layout, mastery of the tools used in production environments and back-end knowledge.

The Master's curriculum is structured in three main areas: web design fundamentals and layout (HTML and CSS and interface design), web development (JavaScript programming, front-end development and back-end development) and design and development tools.

This is the documentation for the UOC's Master's degree in website and web application development. I have collected all the documentation for each course and each of the projects carried out throughout the Master. You will find practices in HTML, CSS, Javascript, Tools, Angular JS, Laravel, Wordpress, Drupal, UI/UX and other examples. The content is arranged according to the subject matter taught by the Universitat Oberta de Catalunya (Open University of Catalonia, UOC)

List Of Contents (Spanish Course Content)

0. Introduction to programming in JavaScript
1. HTML, CSS
2. Design of interactive interfaces
3. JavaScript programming
4. Frontend Javascript Frameworks
5. Backend PHP
6. Advanced Frontend Development
7. HTML, CSS Tools I
8. HTML, CSS Tools II
9. Master's degree thesis

How to download this repository

1. Select your favorite folder. For example Documents, and open inside a terminal.

2. Copy and paste this:

   git clone https://github.com/ansango/Master-Websites-Applications-UOC.git
   

3. Done! 😁

🍼 Introduction to programming in JavaScript

In order to level the formative baggage, students without a recommended entrance profile must take 8 credits of formative complements.

The subjects foreseen for this purpose are the following:

Introduction to JavaScript I programming (4 ECTS credits) Introduction to JavaScript II programming (4 ECTS credits)

🍫 HTML & CSS

This subject is the basis of the Master's in Web Application Development and the other subjects use it as a basis. It is also offered as an optional subject in the Master's in Application Development for Mobile Devices, in which the combination of HTML and CSS, followed by JavaScript programming, is a very important technology for multiplatform development.

Contents:

1. Introduction and basic concepts
2. Fundamentals of (X)HTML and CSS
3. Lists, images, links, div, span and model boxes
4. Validation and accessibility
5. Tables
6. Forms
7. Layout

🍕 Design of interactive interfaces

This course deals with interface design and interaction. It is about how the features and functions of a product translate into something that people can use without obstacles, find useful and want to have. Although form and appearance are key, the subject content is not just about the visual interface. Now more than ever, for the user the visual interface is the machine. That's why interface design is so relevant and one of the main activities when developing a web product or application for a mobile device.

Contents:

1. Fundamentals of Interaction Design and User Experience
2. Interaction: models and typologies
3. Cognitive, social, and emotional aspects of interaction
4. Interfaces
5. Research: data collection, interpretation and presentation
6. Methods and processes of interaction design
7. Identification and collection of requirements
8. Prototyping
9. Evaluation

🍻 JavaScript programming

Currently JavaScript is the language used in the Front-end web. Either directly, either through frameworks such as jQuery, Angular, Vue, React or others of the many existing ones, or through super-sets such as TypeScript, in the end programmers use JavaScript to make that part of the web applications that runs in the client's browser.

This course makes an exhaustive review of the most recent version of JavaScript (ECMAScript more specifically) to give people with programming experience the necessary tools to make good Front-end web developments.

Contents:

1. Introduction to JavaScript. (Basic syntax. Data structures. Functions)
2. Higher-level functions
3. Object-oriented programming
4. Error handling
5. Regular Expressions
6. Modules
7. Asynchronous programming
8. DOM
9. Event handling
10. Canvas
11. HTTP & Forms

🍷 Frontend Javascript Frameworks

In software design the front-end is the part of the software that interacts with the users. In web development, we can say that it is the part of the software that runs in the browser. The front-end is in charge of collecting user data, processing them, sending them to the server, receiving the response from the server and showing the results to the user. Although a few years ago there was hardly any programming on the front-end, today the interaction of web applications and the necessary good user experience requires that on the front-end there is a good combination of graphic design, interaction design, information architecture and programming.

Contents:

1. Introduction to front-end development (ES5)
2. Frontend programming languages (ES6/Typescript)
3. View (BOM/DOM)
4. Frameworks: Introduction to Angular
5. Angular: Routing
6. Angular: Working with Template-Driven Forms and Working with Reactive Forms
7. Angular: Services
8. Practice (Compilation of the course)

☕ Backend PHP

In this subject we will see the fundamentals of this work on the server. To do this, among the multiple solutions that exist, we will see two blocks, all based on the AMP platform (Apache, MySQL, PHP). Ordered from highest to lowest simplicity (and consequently, from lowest to highest power), it is the Drupal content manager, used as if it were an application framework, and Laravel, a PHP application framework that is probably the best alternative to Symfony, the PHP framework on which Drupal works.

Contents:

1. Content management systems:

   • Definition of CMS. Frameworks vs CMS
   • Use of CMS
   • Server components needed to install CMS
   • Characteristics of a good CMS
   • Other features of CMS
   • Types of CMS

2. WordPress:

   • Introduction Installation
   • The WordPress desktop
   • Configuration and security
   • Introduction to the topics
   • Shortcodes
   • Plug-ins

3. Drupal:

   • Introduction
   • Installation
   • Administration panel
   • Modules
   • Drupal vs WordPress
   • Integration with social networks
   • Themes

4. PHP Frameworks. Laravel:

   • Installation
   • Configuration
   • Architecture concepts
   • Fundamentals
   • Frontend
   • Security
   • Databases

🍹 Advanced Frontend Development

Contents:

1. Reactive Programming: Forms
2. Reactive Programming using RxJS + Redux Pattern (NgRx)
3. Layout: Angular Material
4. Tests
5. Progressive Web Apps (PWA)
6. Universal Angular (SEO)
7. Deploying a frontend application
8. Refactoring

🍣 HTML, CSS Tools I

The layout of web pages is a complex process where having a very good knowledge of HTML and CSS is essential to save time and achieve the desired results. Anyone who needs to work with HTML and CSS needs to keep their knowledge of CSS up to date to know all its possibilities and take advantage of them for your benefit.

Contents:

1. Tools for web developers of browsers.

2. A modern front-end development workflow.

3. Images and animations on the web.

   • Responsive images with art direction
   • Clip-path shapes
   • CSS transformations and animations

4. Front-end performance and tools to monitor and optimize.

🍜 HTML, CSS Tools II

Contents:

The layout of web pages is a complex process where having a very good knowledge of HTML and CSS is essential to save time and achieve the desired results. Anyone who needs to work with HTML and CSS needs to keep their knowledge of CSS up to date to know all its possibilities and take advantage of them for your benefit.

1. A modern front-end development workflow.

   • Use of the terminal.
   • Package managers. NPM.
   • Module bundlers. Parcel. UOC Boilerplate.
   • CSS pre and postprocessors. Sass / SCSS.
   • Git version control. Publication of the web.
   • CSS style guides and methodologies.

2. Style guides.

   • CSS methodologies: OOCSS, BEM, SMACSS, ITCs.
   • Tools: Stylelint.

3. Advanced layout.

   • Flex.
   • Grid.

4. Component Libraries and Utilities Libraries

   • Component libraries. Bootstrap.
   • Atomic CSS. Utilities libraries. Tailwind.

👑 Master's degree thesis

In the final master's work, students bring into play and demonstrate the knowledge acquired throughout the master's course. The student will be able to propose a project for the work, which will be reviewed by the faculty to ensure that it is feasible, meets the requirements and that its level of complexity is adequate. In the absence of a project proposal, the faculty will propose a series of projects to be carried out, from which the student will be able to choose the one that best suits their knowledge and preferences.