web
I write monthly newsletters to all editors at TU Wien, inform them about important notions including information about web accessibility and I wrote a manual on what to do to make the websites accessible. I try to stay in contact with the editors and figure out why they don’t do what they are required to do by law.
By that, I was able to figure out what some problems are. Many did not know how to begin, because when your division has a large amount of sites, this is a gigantic task. Others did not even know what accessibility in web means or they did not understand the descriptions in my manual. To solve these problems I tried to adapt the descriptions and expand the available knowledge base and provided them with help.
Another problem is that many editors simply do not have the time in their day to day work to edit their whole website. In these cases, I cannot come up with a solution, because that has to be made by their supervisors or even higher management.
The last and sadly most common problem is that many people just ignore the mails or facts like the existing laws and they do not reply or communicate in any other way. My solution for that is that my supervisor will talk to the Vice Rector Digitalisation and Infrastructure and he will send an email with work instructions to the concerned editors.
Taggings:
Accessible Websites
According to the web accessibility act (“Web-Zugänglichkeits-Gesetz” – WZG) of the Austrian government, the websites of all the institutions that are funded by the government, as is TU Wien, have to be accessible according to the Web Content Accessibility Guidelines (WCAG). While the technical aspects are almost done, most of the editors have done nothing to make their areas accessible.
Taggings:
How to connect to a database? How to read or write data?
How to make a website with dynamic content? We need to store the content somewhere. And a good, searchable storage is a database. Almost every webservice needs a database. But how do connect to the database? And how do we read and write the data?
Taggings:
Use automated UI Test, which is possible with the Selenium library and a browser driver. The browser driver allows us to run actions in a browser while writing code. The Selenium library is an interface to connect many browsers with the same code base. So now we are able to code a simple test, where a robot is automatically clicking through the website and trying out the login functionality. This technique may also apply to test other important and high priority UI features.
Test login functionality after every code change.
Testing the very common functionality of "login"/"sing in" might be exhausting if we have to test it after every change in the project. Entering the credentials every time, or even if they are stored in the browser, one has to click through it. There must be some better way...
How to disable the mobile version of a website when using a smartphone
In these days it is normal that many web pages have a computer version but also a mobile version.If a website has a mobile version, it is usually shown by default once it detects that the user is visiting from a mobile device, and it is very helpful because it will allow the web to be seen better, easier to navigate and much less resources to be downloaded . However, this is not always the case; Some mobile versions are worse, difficult to understand and take too many clicks to see some information. So, in some cases it will be better to go back to the desktop version.
Multiple websites on a single host with Docker
It is not possible to run multiple web applications in Docker at the same time. Since all of them use port 80, only one Docker instance is accessible.
Taggings:
Browsersync is an automation tool that can watch files for changes and inject them into a web page without reload.
Usage:
- Install Node.js
- Install Browsersync
npm install -g browser-sync - Start Browsersync
browser-sync start --proxy "myproject.dev" --files "css/*.css"
Browsersync will create a proxy that will wrap your vhost myproject.dev with a proxy URL.
It can also be used with gulp:
var browserSyncWatchFiles = [
'./style.css',
'./js/*.min.js',
'./*.php'
];
var browserSync = require('browser-sync').create();
var browserSyncOptions = {
proxy: "myproject.dev",
notify: false
};
gulp.task('browser-sync', function () {
browserSync.init(browserSyncWatchFiles, browserSyncOptions);
});
Taggings:
Speed up webpage testing time
Testing web pages can be really time consuming. Every CSS, HTML or image change needs a browser refresh. It would be way better if the reloads could be avoided.
Taggings:
Deployment using containers
This can be done by performing several steps:
1. Install Docker on local and remote machine
2. Create Dockerfile on local machine and set all enviroment dependencies/variables (and add website to resources)
3. Build Docker image from Dockerfile and run docker container from that image
4. Test website
Than transfer Dockerfile from local machine to remote machine and repeat steps 3. and 4.
Taggings:
Pages
