Web & Cloud Development

Web & Cloud Development

1. Websites

   • To enter a website you will have to enter a browser where you will put the URL address, after that the browser will request the information that makes up the website to the server.
   • Elements
     • HTML: Which defines the structure of the page CSS: Which adds styles and flair to the page Javascript: Which adds dynamic content.
     • Static
       • Elements displayed by the website that was previously saved on the server.
     • Dynamic
       • Generated each time they are requested by the client Involve data comming from other systems and apps such as databases. 
   • Design-type
     • Reactive: display the version of the website designed for a specific screen size. It provides more information when opened on a PC than when opened a Mobile device.
     • Responsive: Will automatically resize to the device. If you open up a products website on your mobile device, it will adapt itself to the small size of the screen and still show you all the features.

2. Cloud Apps

   • Built to work seamlessly with a cloud-based backend infrastructure. Cloud Apps use cloud-based data storage and data processing, making them very scalable and resilient.

3. Front-end

   • Deals with everything that happens at client-side. Everything the use can see and interact with.
   • Specialists in front-end coding, using HTML, CSS, JavaScript and related frameworks, libraries and tools.
   • HTML
     • Language use to create the structure of a webpage Stands for HyperText Markup Language that enables documents to be displayed as web pages on the internetThe language of the internet
     • Elements: Building blocks of an HTML page Pieces of content such as a paragraph, list and tables represented by tags. Browsers use tags to render the content but do not display them
     • HTML5
       • Objectives: Defines a single language which can be written in HTML syntax or in XML syntax. Interoperability with earlier HTML implementations Improves markup for documents Includes markup and APIs for idioms, such as web apps.
       • The terms HTML and HTML5 are used interchangeably the term HTML implies HTML5 
       • https://learning.edx.org/course/course-v1:IBM+CAD101EN+2T2020/block-v1:IBM+CAD101EN+2T2020+type@sequential+block@225239620bd140aa804238f4b8bd3941/block-v1:IBM+CAD101EN+2T2020+type@vertical+block@f7d08e2f0b7e4170978d28b7d823a8a7
       • To reference the CSS file to style your HTML, you need to use the tag <style> or the <link> tag. The recommended one is the link tag since you dont stain your HTML code with non-HTML code. Also, you got to reference it once in the head part.
       • Key Themes
         • Syntax compatible with HTML4 and XHTML1 Separates conformance requirements for user agents and authors HTML5 includes APIs that help in creating web apps (Video and audio elements, API that supports offline web apps & API for drag and drop).
       • Benefits
         • Modern browsers support full range of HTML5 features (Use style sheets to display pages on different browsers or mobile devices) APIs for enhanced user experience (features for advanced animation, drawings, audio and video)
         • Improved page load times (efficient use of HTML and CSS leads to faster load times for web pages) Search index indexing (meta tags can provide keywords for Google and other search engines)
       • Elements
         • Structural elements (section, article, header, footer, figure, ...) - these markup elements help you define logically the web page structure. Graphics and embedded content (canvas, audio, video, track, ...)
         • Input elements (tel, email, datetime, number, range, color, ..)  - the browser automatically validates the data without the need for script. Web Storage (localStorage, sessionStorage) you can store data in the browser. Web workers can be used for non interactive processing. they provide a way to run processing-intensive tasks without blocking the user interactions to the current page.
       • Browser Support
         • Not all browsers fully support all HTML5 and CSS3 capabilities Currently Google Chrome support most features Support tables show features supported by different browsers (caniuse.com)
         • Also you can use javaScript telling the code to create the element and the browser will create it even if it not support it. After that check the object for a known property or method, if the broswer supports the element, it will be displayed.
     • Features
       • Categorize web pages into different sections (tools for data management, drawing, video and audio) Cross-browser apps for the web and portable devices Greater flexibility (Exciting and interactive websites) Help to create a more engaging user experience (HTML5 pages provide an experience similar to desktop apps). Allow for enhanced, multiple-platform dev.
     • DOM Tree
       • Hierarchical Tree being the representation of a document file where you have the  Head: Title, scripts, meta information, initialization Body: All content that is displayed on the webpage
     • HTML VS XML
       • If you are using XSLT (Extensible Style Sheet Language Transformations) HTML & XHTML use the same tags but XML tags all need to be in lowercase and must be well-formed (Every element must have an end tag, aside from other things) HTML is less rigorous than XML
     • Scripting
       • Scripting provides a more interactive user experience when browsing websites. Scripting can be disabled, so the recommendation is to use scripting but not to rely on it Scripting is enabled when certain browser conditions are met
       • Sandboxes enable you to manage iframe mash ups; web pages that pull content from more than one site HTML documents loaded into a browser page become Document objects, which you can access through scripts.
   • CSS
     • Its used to design it and make it appealing, also used to create websites that have cross browser compatibility such as PC, mobile devices, IPads, etc.
     • SASS
       • An extension of CSS that is compatible with all versions of CSS. SASS enables you to use things like variables, nested rules, inline imports to keep things organized. It also allows you to create style sheets faster and more easily.
     • LESS
       • Enhances CSS, adding more styles and functions.
     • Base Style
       • Defining a base style for the rest of the elements in a CSS file
       • https://learning.edx.org/course/course-v1:IBM+CAD101EN+2T2020/block-v1:IBM+CAD101EN+2T2020+type@sequential+block@19504674ccde4f8882d5824f66e819be/block-v1:IBM+CAD101EN+2T2020+type@vertical+block@1968b563dee245399d413fcd9d943268
       • Layout
         • Fluid: Elements are flexible and can expand or contract based on the browser Fixed: We specify the height and width of elements.
   • JavaScript
     • Is an object-oriented programming language that is used in conjuction with HTML and CSS to add interactivity to a website.

4. Back-End

   • Back-end deals with the server before the code and data are sent to the client. Also handles the logic and functionality that make the webiste or app work.
   • Back-end developers may also work with relational or noSQL databases.
   • Functions include: Managing user accounts Authentication and authorization Secure storage and handling of sensitive data Working with databases, retrieving, processing and storing data.
   • Languages and Frameworks
     • JavaScript: Node.js & express Python: Django, Flask
   • Databases
     • Languages and tools for working with databases includes: Structured Query Language (SQL) Object-Relational Mapping (ORM) - Its useful to understand the fundamentals of databases even if ORM hides some of it complexity.

5. FULL-STACK

   • Full-stack developers have skills, knowledge and experience in both front-end and back-end enviroments.

6. Tools

   • A cloud app developers workbench includes: Version Control (Github) Libraries Frameworks
   • Frameworks
     • Provide a standard way to build and deploy apps. it act as a skeleton you extend by adding your own code.
     • You must choose a framework before you start working on an app since it will dictate the architecture of said app and wont led you add another framework. They allow you less control than libraries.
     • Examples: Vue.js, React.js, Angular.js and Django (Python)
     • Angular.js
       • Is an open-source framework maintained by Google. It allows websites to render HTML pages quickly and efficiently. It has built-in tools for routing and form validation.
     • React.js
       • Has been developed and maintained by Facebook. It is a JavaScript library that builds and renders components for a web page. Routing is not a part of this framework and will need to be added using a third-party tool.
     • Vue.js
       • Maintained by the community and its main focus is the view layer which includes user interface, buttons and visual components.
       • It is flexible, scalable and integrates well with other frameworks. It is very adaptable - it can be a library, or it can be the framework.
     • Inversion of Control
       • Frameworks define the workflow that you must follow this is defined as inversion of control. This makes the framework extensible.
       • Frameworks that have a lot of control are called opinionated and remove a lot of the decisions about how code is written, among other things.
       • Allows you to create standarized apps and takes away a lot of the tedious configuration part.
   • Version Control
     • Keep track of the changes that were made, when were they made and by whom.
   • Libraries
     • Collection of reusable code Multiple code libraries can be integrated into a project Call from you code when required. Used to solve a specific problem or add a specific feature.
     • Examples: jquery, email validator or apache commons.
   • Other Tools
     • CI/CD
       • Best practice for DevOps Continous Integration with Continuous Delivery or Deployment. Enables deelopers to deliver frequent changes reliably Implemented through a build-automation server.
       • CI automatically builds and test code CD deploys the change
     • Builds
       • Transform source code into binaries into installation Important in enviroments with many inter-connected projects and multiple developers. Aumate tasks like: downloading dependencies, compiling source code into binary code, packaging that binary code, running tests. deployment to production systems.
       • Examples: WebPack / Bable
     • Packages
       • Packages make apps easy to install. They bundle app files, instructions for installation and metadata.
       • Package Managers
         • Make working with packages easier. Coordinate with file archives to extract package archives Verify checksums and digital certificates to ensure the integrity and and authenticity of the package
         • Locate, download, install or update existing software from a software repository. Manage dependencies to ensure a package is installed with all packages it requires.
         • Examples: Linux - Debian, Red Hat Windows: Chocolatey Android: Package Manager macOS: Homebrew, MacPorts.
         • Cloud app package Managers include: Node.js/JavaScript: npm Java: Gradle, Maven Ruby: RubyGems Python: Pip, Conda