Topic outline

  • General

    • How to follow webinars in this course


      • How to follow webinars in this course (webinar) SCORM package

        This course is made up of some units. Each of these units contains one or more webinars. Each webinar must be completed to get the final certificate. To complete a webinar we have to do actions required by the webinar, mainly  clicking and typing. You have a couple of attempt for each action. If both goes wrong you fail that action. You can fail up to 20% of all actions in each webinar. It is quite difficult not to pass a webinar at the first try but, if this happens, you must redo the webinar from the very beginning.  Furthermore, actually clicking and typing  is neither interesting nor profitable. You are supposed to try the actions you see in the webinar in a parallel, real, environment on your computer. So, if you cannot understand how to follow a webinar, after following this webinar, you will be able to follow a webinar.

    • Get some web space


      • Get some web space (webinar) SCORM package

        A web space is made up of some disk space on a machine connected to the internet plus some programs that runs for you on that machine. Surprisingly this comes for free.... Let's see how to grab some free webspace.

    • Install Portable Apps onto a USB 3.0 key


      • Portable Apps (webinar) SCORM package

        Most teachers swap classrooms several times during the day. In each classroom they have to log in into a different computer and find a slightly different environments. Most of them do not control these environments. They do not have admin privileges and therefore  they cannot install programs.

        They try to keep afloat putting some data (e.g. videos) on a usb key or onto a cloud. Very often the network is down or extremely slow so the usb key is, by far, the most reliable solution. In this webinar you will see how to install a shell that provides a wealth of useful free programs that can be installed onto a usb key without admin privileges.  This shell is called Portable Apps.

        Portable Apps programs do not save information outside the usb key and therefore you can install Mozilla from Portable Apps and save your passwords and personal data when at school or in class. Your sensitive data will remain on the usb key.  This solution will enable us to show, later in this course, how to save all your materials onto the cloud and make them available, selectively, to students. 

        The downside of this approach is that programs runs from the usb key. Usb memories are slower than hard disks but, nowadays, the difference in speed is not so disturbing if you use a usb 3.0 pen plugged into a usb 3.0 port.. So take care to find a usb 3.0 pen. Usb 3.0 plugs are usually blue.

         

    • Install Eclipse on a USB key with Portable Apps

      • Install Eclipse on a USB key with Portable Apps (webinar) SCORM package

        In this webinar we show how install Eclipse onto a USB 3.0 key with Portable Apps. Eclipse NEEDS a 3.0 KEY or it will be by far too slow and unstable.  The proposed installation is useful when you drop in a school laboratory, you have never been before, and your next lesson is on coding. Alternatively you can use this to  fix a bug without your laptop in an internet cafe. The usual activities, including installing plugins and even upgrading Eclipse version are supported. Furthermore all this runs without admin privileges. This webinar include the installation of JPortable (the portable JAVA64 support) the installation of Eclipse for PHP developers. A plugin is installed too (the Marketplace client). The webinar ends with the installation of some Autoit wrapper to define local variables in a .bat before starting Eclipse. The workspace is placed in Z:/. The URL of  32 and 64 bit  packaged installs ready to be copied to your USB pen are provided too.

    • Download and archive an Eclipse Plugin as a zip

    • XAMPP server on a USB 3.0 pen without Admin privileges with Portable Apps

      • XAMPP server on a USB 3.0 pen without Admin privileges with Portable Apps (webinar) SCORM package

        In this webinar we show how to install XAMPP server onto a USB key. A USB 3.0 key is needed. Installation support the development of Web App in PHP+SQL out of a USB key and without Admin  privileges.  This is the basis for any further development either for developing plugin for Wordpress, Moodle or Nextcloud.  This server is considerably slows down page rendering. Possibly, if you have admin privileges, you can exclude the server installation folder from antivirus protection domain, to get some speedup.

    • Install Git from GitHub as a Portable App

      • Install Git from GitHub as a Portable App (optional webinar) SCORM package

        In this webinar we demonstrate how to install Git and how to clone a Web application from GitHub and start modifying it. 

        Git is a SCCS  (Source Code Control System). A SCCS mirrors  and merge source code in a  multi developer software project.  An online repository is maintained by Git for all developers.

        GitHub is just  a commercial website running Git. There are other commercial SCCS services, e.g. GitLab or SourceForge. 

        Instead of using the usual Hello World example, in this webinar, we will use Git to clone the whole Wordpress code  as if we were about to  patch it.

        Indeed, in Web development, Git FOSS projects are popular and  Web development is often copy, modify and paste some FOSS code into your project.

        In this webinar, to run this example with Wordpress, we will install Git, register to GitHub, clone the Wordpress official codebase and start local development, patch it and send the changes to the repository for other developers.

        In another webinar we will mirror this modified local copy onto a free web space with Jenkins.

    • Egit is Git in Eclipse: Clone, Commit and Push to GitHub

      • Egit is Git in Eclipse: Clone, Commit and Push to GitHub (webinar) SCORM package


        In this In this webinar we continue our presentation of Git. We will switch to the Git instance integrated within Eclipse that is called EGit. In this webinar we first install Egit in Eclipse and then we clone a repository from a remote GitHub site  to a local repository. Then we wrap the local repo in an Eclipse project. Next we will do some edits and commit them to the local copy. Then we will push the new version to the  remote GitHub repo. We imagine that we had a break while others fix a bug and so we will see how to update our local copy with fixed code.

    • Front End prototyping using Wysiwyg design with Bootstrap blocks

      • Front End prototyping using Wysiwyg design with Bootstrap blocks (webinar) SCORM package


        In this webinar we show how to build a prototype of your front end. There is no magic in building front ends. This is a boring activity and very often you have to dig into HTML to obtain the desired interface. Sometimes you wonder if everything could not fit into some CMS (Joomla, Drupal or Wordpress) enhanced with a good array of appropriate plugins. If you really feel that a general purpose CMS is not your solution, still, you can adopt some HTML template and use Javascript libraries like Bootstrap or GrapesJS. At the end of this webinar you will be able to design your front end with this process in mind:

        1. select a Template page from a good number of options;
        2. fill the template with blocks by drag and drop wysiwyg design;
        3. find and extend a library of blocks based on Javascript libraries (GrapesJS and Boostrap)
        4. create new blocks by some (limited) editing in HTML, Javascript and CSS
        5. integrate this design with back end design

    • Front End prototyping using Wysiwyg design with Bootstrap and GrapesJS blocks

      • Edit Front End prototyping using Wysiwyg design with Bootstrap and GrapesJS blocks (webinar) SCORM package


        In this webinar we show how to build a prototype of your front end, mixing Bootstrap and GrapesJS. This will introduce some in-deep HTML and CSS editing to create new blocks. The framework is the same of the previous webinar. So we will learn how to add blocks based on GrapesJS library and mix them with Boostrap based blocks.  As a by product of this procedure we will learn how to install on GitHub pages  the Gramateria editor.  For web applications that do not use a database  GitHub pages are a really handy solution for Continuous Development/Continuous Integration.

    • Front End development with Chrome Developer Tools

      • Front End development with Chrome Developer Tools (webinar) SCORM package


        In this webinar we show how to edit HTML and CSS code for a block using Chrome Developer Tool (CDT). A web page editor is available both in Chrome and Firefox pressing F12 and can be used to master the complex relation between HTML and CSS with a decent level of abstraction. In this course we do not pretend to teach neither HTML nor CSS. Lots of excellent resources can be found online. Basically we are interested not to mess with them at all. That's by far too complex and too detailed to be interesting. We feel that a decent front end can be put together using some rapid prototyping tools like those we introduced in previous webinars.  Nevertheless In this webinar we show how you can dwell into HTML and CSS (if you feel you really need this) and customize your block. At least, working on blocks your work will be re-usable.

    • HTML and CSS editing with BlueGriffon

    • Debug PHP in Eclipse with XAMPP and XDebug (part 1)

      • Debug PHP in Eclipse with XAMPP and XDebug (part 1) (webinar) SCORM package

        In this webinar we show how to Install XDebug in a local XAMPP server stack. XDebug that is the FOSS debugger for PHP in Eclipse. Eclipse support PHP with PDT. PDT supports both XDebug and Zend debugger the latter being a commercial product. XDebug is free and open source therefore we go for XDebug. In this webinar we assume that you have installed Portable Apps, Eclipse and XAMPP. To install XDebug in Windows we simply have to download the appropriate dll to a certain location. The dll must be selected considering the PHP version in XAMPP. This can be found in the XAMPP server main page in the  PHP-Info tab. This webinar will show how to get there and  find the PHP version. Actually the webinar uses the environment set up in previous webinars in this course so you will receive instructions for PHP 7.3. For XDebug for other versions of PHP see for instance here for XAMPP 3 for PHP 8.0. Note that this webinar gives you links to download and configure an outdated version of  XAMPP i.e. XAMPP 2. If you want to use XAMPP 3  everything is fine but editing php.ini that require some modifications. Could be that your downloaded copy of XAMPP already includes XDebug. See the details in the Summary section below. XDebug seems to slow down normal operations. Could be of some help procedures suggested in this page.

    • Debug PHP in Eclipse with XAMPP and XDebug (part 2)

    • Contribute to FOSS in GitHub with Git and Eclipse

      • Contribute to FOSS in GitHub with Git and Eclipse (webinar) SCORM package


        In this webinar we continue our presentation of EGit,  the Git instance integrated within Eclipse. We show how to contribute to a FOSS project stored in GitHub. As a test case we take the FOSS Silex drag and drop front end HTML editor  and add some contribution i.e. we add the files that makes Silex a project compatible with Nodeclipse project (i.e. a Node.js projects in Eclipse).

        In this webinars we see what it takes in Egit to contribute to the Silex FOSS project. Basically one has to fork Silex in GitHub,  clone a local copy of our fork, locally create a branch, do some work for this contribution, commit and push contributions to our GitHub fork and then  finally, from GitHub, prepare a pull request for the Silex developers.

    • QEmu Virtualization

      • QEmu virtualization (webinar) SCORM package

         In this webinar we show how to install QEmu on a Windows 10 machine WITHOUT using ADMIN privileges. This yields a rather slow wirtualization that can be used in your lessons when you drop in a new lab where no virtualization support is available, This can run toy examples for Docker and Kubernetes on Windows.

    • Hyper-V

      • Hyper-V (webinar) SCORM package

         In this webinar we show how to install Hyper-V on a Windows 10 Pro machine. You need ADMIN privileges for this.  May be this is already installed or your system manager can do that for you. When Hyper-V is on you can use accelerated QEMU even WITHOUT admin privileges. This yields a fast wirtualization that can be used in your lessons when you drop in a new lab and your students have a USB pen with QEMU and your favourite desktop OS on it. In this webinar we do not use QEMU. We explore the Hyper-V toolkit and run two Linux virtual machines: Ubuntu and Tiny Core Linux (TCL). On the latter we install Firefox and our feeling is that, being TCL  lightweight, this copy of Mozilla is faster than the W10 running on the host at the same time,

    • K3sOS from Rancher can run Kubernetes without admin privileges

      • K3sOS from Rancher can run Kubernetes without admin privileges (webinar) SCORM package

        With QEmu we can run, on a Windows 10 machine, the K3sOS ISO distribution WITHOUT using ADMIN privileges. This yields a (rather slow) Kubernetes server that can run out of your USB 3.x key in Windows with no admin privileges. This possibility can be used in your lessons when you swap a classroom and drop in a new lab where no virtualization support is available, This can run toy  Kubernetes examples on a guest login in Windows.

    • Free Hosting DevOps

      This section simply lists references to useful services that can be deployed to free servers. They are NOT PHP SCRIPTS and therefore undergo different installation procedures. You can take then as meaninigful examples of DevOps and could be a good starting point to see how to use those free providers.

      • Summary

        In this webinar we first show Web application development in Eclipse using the old school Javascript, Php and MySQL for AMP server.  Then we tackle development using Javascript for the server side using Node.js server. Finally we build containers for Docker and link them with Kubernetes in K3sOS. For development we use Eclipse and  QEmu virtualization in Windows. QEmu supports running Docker and Rancher K3sOS without Admin privileges. This is extremely slow but toy examples for your class can run in any laboratory you drop in.  What is the blade server in the figure for this course. It is the first server used to run Google.

        The following note was written in March 2022. Most of the links to software to download here could work but, as well, could be updated. Therefore we suggest to and  run startP.bat (archived here) and then install Portable Apps selecting the particular folder Z:/ . Then download  Eclipse (the package Eclipse IDE for Enterprise Java and Web Developers) and unzip the zip file into the Z:/PortableApps folder. Then you must install Java 64 bit from here and add the line

         

        -vm

        Z:/PortableApps/CommonFiles/Java-11/app/bin

        in file Z:/PortableApps/Eclipse/ Eclipse.ini. Then, in that folder,  you can unpack the file Eclipse.zip and run EclipsePortable.exe  The Eclipse.zip file is archived here.   Then we extend Eclipse capabilities by installing a range of plugins. The most relevant plugins are

        • the Eclipse Marketplace;
        • the PDT (PHP)
        Beside that we must install an AMP server.  the XAMPP server from here will do the job and also provide Tomcat. Simply unzip the file into Z:/ to get Z:/xampp.

        Next step is to provide debugging facilities for PHP. At the time of writing this XAMPP offered PHP 8.4 therefore XDebug
        for this PHP is here. Note that there is a wizard that tells you a lot about the XDebug installation. You just have to paste the php.info output into the wizard (there is a link to it in the localhost server main page). For this XAMPP it says:

        • Move the downloaded file to \xampp\php\ext, and rename it to php_xdebug.dll
        • Update Z:\xampp\php\php.ini and add the line: zend_extension = xdebug
        • Restart the Apache Webserver
        We also add the lines  output_buffering = Off
        and add a section [XDebug] to php.ini file. The code below is specific to the latest version of XDebug, i.e. XDebug 3. XDebug 3  has a redesigned initialization parameters interface. Use the code below  if you have downloaded the XDebug latest version as suggested in this summary. The two webinars above, on the other hand, use the old XDebug 2.  Note that XDebug 3 uses port 9003 by default for communication with Eclipse. The code below set it to the old 9000 port not to change all the settings in Eclipse.

        [XDebug]
        zend_extension = "z:\xampp\php\ext\php_xdebug.dll"
        xdebug.mode=debug,develop,profile
        xdebug.client_port = 9000
        ;xdebug.remote_port = 9003
        xdebug.start_with_request=trigger
        xdebug.output_dir = "z:\xampp\tmp"
        xdebug.client_host=localhost
        xdebug.log = "z:\xampp\tmp\xdebug.txt"
        xdebug.log_level=0
        xdebug.remote_cookie_expire_time = 36000
        xdebug.discover_client_host=true
        xdebug.show_local_vars=0
        xdebug.idekey=ECLIPSE_DBGP
        xdebug.connect_timeout_ms=2000

         After this ask for Help>Check for updates in Eclipse