Tag Archives: HTML

HTML5, Javascript and CSS3 training videos for Uniface developers on Uniface.info

The Web capabilities of Uniface have increased year over year. At the moment there are at least six different architectures to integrate Web technology in Uniface or build full Web applications in Uniface.  The HTML5 Widget, Uniface Anywhere and DSPs are obvious examples. In an upcoming blog post, I will go into more detail comparing all options.

Developing modern enterprise applications also requires more Web knowledge for Uniface Developers.

To facilitate this we made a special series of training videos on Web topics for Uniface developers. This series is available on Uniface.info and consists of Introduction and Advanced videos on HTML5, Javascript and CSS3.

The Introduction videos assume zero existing knowledge of the technology. The Advanced Topics can be played in any order and assume the Introduction as pre-requisite. Some videos come with demo material which is available as a download.

To make it easy, I’ve listed all the available videos:

HTML:

Hello World:  http://unifaceinfo.com/html-hello-world/

This session is an introduction to the Hyper Text Markup Language (HTML). We will be creating our first website and use a couple of HTML elements to display some simple text and an image.

Introduction: http://unifaceinfo.com/html5-introduction/

This session discusses the basics of HTML5. It introduces a lot of new HTML elements to give a clear structure to your website. Why are semantics are important?

Canvas: http://unifaceinfo.com/html5-canvas/

This session discusses the HTML5 canvas. We’ll create a simple Uniface graphic by ourselves, and have a look at some more complex examples.

SVG & Multimedia: http://unifaceinfo.com/html5-svg-multimedia/

This session is all about the HTML5 SVG, audio and video elements. We’ll discuss the differences between a Canvas and SVG, and see how we can incorporate a video and mp3 without using Flash or third party libraries.

Geolocation & Storage: http://unifaceinfo.com/html5-geolocation-storage/

This session is about using getCurrentPosition() to obtain the GPS coordinates of the user. Afterwards we’ll store this information in the localStorage object so it is remembered.

Javascript:

Introduction 1: http://unifaceinfo.com/javascript-introduction/

This session is an introduction to JavaScript. Its main characteristics will be discussed, and we will be looking at an example. Moreover we will have a quick glance at its connection with HTML.

Introduction 2: http://unifaceinfo.com/javascript-introduction-ii/

This session is part II of the introduction JavaScript session. We will be looking at some more useful functions, types, objects and arrays.

D3: http://unifaceinfo.com/javascript-d3/

This is a short session about D3. We’ll discuss some use cases and see how it works through the use of some examples. 

JSON: http://unifaceinfo.com/javascript-json/

This is a short session about JSON. We’ll quickly see what it is, how it works, and how you can actually use it.

Advanced Javascript: http://unifaceinfo.com/javascript-advanced/

This is an in-depth session about JavaScript. We’ll go through different ways of using events, and see how the only option of executing things in parallel in Javascript is using callbacks.

 

CSS3:

Introduction: http://unifaceinfo.com/css-introduction/

In this session we’ll explore the new possibilities of CSS3. It provides a lot of new features that make the life of the developer and designer a lot easier.

Advanced CSS3: http://unifaceinfo.com/css3-advanced/

This is a follow-up of the CSS3 – Introduction session. Transformations allow you to modify the appearance of any HTML to your liking. Be it rotated, translated or skewed. Transformations and animations make HTML elements move around and respond to events.

If you have a question about any of the videos just open a topic on the forum.

 

Polymer: Getting a closer look

Last week, a few of us from the mobile scrum team attended the first ever Polymer summit organized by Google. Amsterdam was chosen as the perfect location for the international conference, since it is has an “incredibly strong developer community in Europe”. 

20150915_090354

The event is fully devoted to Polymer: a new web library fully developed by Google and widely supported by the WebKit-based browsers (i.e. Chrome, Opera) and Microsoft Edge. With Polymer, users can create composable and modularized web applications that make use of a new web standard, called web components. Web Components are currently being produced by Google engineers as a W3C standard. They are built on four basic foundations: (1) native client-side templating; (2) shadow DOM scoping and composition; (3) custom elements to create your own HTML DOM elements; and (4) HTML imports to load web components.

20150915_172332

Polymer web components architecture is already used by many companies and users. One user was quoted at the event: “We no longer build applications. We have and are enriching, a module market sourced from industry and the ING global community. Modules are assembled into applications as the business requires,” ING – one of the first users of web components – quoted in one of the presentations.

20150914_180650

I also speak on behalf of my colleagues who also attended, when I say it was an interesting and well organized event full of useful information and examples of what is coming our way regarding web and mobile development. In case you are interested, the whole event was recorded and can be viewed on their YouTube page.

 

HTML Widget with a Java Applet: How to stop security warnings

Security warnings are hindering the end user when starting a Java applet in the Uniface HTML widget. This document provides a step-by-step guide on how to stop the security warning and even block them with a so called “rule set”.

Security warnings the old way

According to the documentation of Oracle, the end user will in almost all cases be presented with a warning when starting a Java applet in the browser for the first time. Even the lowest possible security setting in the Java console explains:

Medium – All applications are allowed to run with security prompts.

See http://docs.oracle.com/javase/7/docs/technotes/guides/jweb/jcp/jcp.html

Also the list of exceptions shows in the java console that you can be prompted by a security warning:

Image 1

By switching the cache ON in the Java console the warning is only displayed once. After this the application runs without warnings and can even be re-started.

Image 2

Other options

Keep the security settings in the Java console on High which by default blocks the applet completely.

Image 3

Add the URL to the list of exceptions:

Image 4

In my case this was:

file:///D:\usys91\HTML_JavaApplet\mx04\dynamic\applet_ComponentArch_DynamicTreeDemo\build\classes\AppletPage_WithAppletTagUsingJNLP.html

Including the page name!

This means that the security is not compromised and the warning is only shown once when the cache is on.

Rule set and no warnings at all

As explained earlier, you can run a java applet without security warnings by using a rule set however the applet must be signed for this and a so called deployment rule set jar file must be added. In the following places you can find some documentation. In the next chapters I describe a step by step process to get the Java applet running in a UNIFACE html widget without warnings.

https://blogs.oracle.com/java-platform-group/entry/introducing_deployment_rule_sets

http://wraithhacker.com/java-deployment-rule-set/

How to stop the security warnings for a known applet

In the following chapters I will take a step by step approach to make it possible to run a known applet in the UNIFACE html widget without bothering the end user with security warnings. The applet JAR file, in this sample, is on the end user computer as well as the html file referring to this applet. Of course the file:/// can be replaced by a server site location like http://

This small manual on how to get the “rule set” working is based on the Dynamictree sample of Oracle. You can find this sample on the following address:

http://docs.oracle.com/javase/tutorial/deployment/applet/examplesIndex.html

Download the zip file with all the bits and pieces you need:

http://docs.oracle.com/javase/tutorial/deployment/applet/examples/zipfiles/applet_ComponentArch_DynamicTreeDemo.zip

Before you start, be sure that you have your path variable set to the java bin folder otherwise the command lines shown in the steps won’t work.

Used command line tools

Command Description
Jar Creates a Jar archive
Keytool To create a keystore, certificate
Jarsigner To sign a jar archive with a keystore file.

 

Download the step-by-step document

Uniface web workshops, closing the generation gap

In March and April this year, a new initiative–the Uniface Plusprogram ran in the Amsterdam Uniface Lab. The Plusprogram originated from the Benelux user group Face to Face to deliver Uniface / Web workshops for Uniface developers. A special so-called PlusMembership allows Face to Face members to participate in the program which consisted of two parts:

  • HTML5 CSS3 and Javascript concepts
  • Uniface web components like HTML5 widget and Uniface Dynamic Server pages

The workshops were given 8 weeks in a row on Tuesday and Thursday evenings from 5:30 PM unitil 9:00 PM including a “light” Pizza or Sandwich dinner. Participants could choose to go on Tuesday or Thursday as the content for each evening was the same.

Tons blog

Five evenings were all about Web basics and the latest and greatest in HTML5/CSS3 and Javascript technology. These workshops were done by a young Master in Computer Science (Tim–who also happens to be my son) and has a lot of both hands-on as well as theoretical web knowledge. During those evenings it was very nice to watch a 24 year old teaching a class room full of very experienced Uniface developers Modern Deployment using Git.  Looking at the evaluation we held afterwards, the students very much appreciated and learned a lot from these sessions. Every evening consisted of 90 minutes theory, 60 minutes “hands-on” and a quiz. Having a quiz at the end of each session is quite common for Web trainings these days, but for most of the students is was pretty new. I think this a little “generation gap” between a “raised with gaming and Google generation” and a more traditional “schoolbook” generation.

Tons blog 2

The final Web Workshop evening explained modern Javascript libraries like Node.js and NoSQL databases like Mongodb. The other 3 evenings were given by Uniface consultants and developers and explained the concepts of the new Uniface HTML5 widget, DSPs and responsive Web programming which is a “must have” for deployment of Mobile Websites. These workshops showed that Uniface already has many possibilities to use the Web technologies which were showed in the first part of the program. The PlusProgram was very successful. During the 8 weeks over 90% of the participants showed up and we also got requests from other countries to organize the same program locally. For now we are almost ready to organize the same program in Belgium after the summer holidays.  For other countries we will determine on a case by case basis if/when/how the program will be presented. If you have any questions about the Plusprogram please feel free to contact me!

The future has arrived but has the enterprise?

By Clive Howard, Principal Practitioner Analyst, Creative Intellect Consulting

We recently spoke with John Gledhill, Group Director of Strategy & Innovation at Tribal a global provider of products and services to the international education, training and learning markets. When asked about the key trends within software development he answered, “the obvious one is mobility: so responsive design, HTML 5 and effectively all of that driven by customers who want their applications deployed via mobile technologies is a key element in development today and for the foreseeable future”.

John has seen first-hand the challenges that developing for the native mobile platform (e.g. Apple’s iOS or Google’s Android) poses, “every time iOS gets updated, a new phone comes out with different screen dimensions, we have to go and check that the app works on that.”

To him the benefits of a hybrid approach are clear: “why as an enterprise vendor would you want to spend half your budget trying to keep on top of the proliferation of platforms and platform sizes, 8 inch tablets now, 5 inch phones, what’s this 6 inch phones, is that a tablet or not?”

Common to both hybrid mobile development and Responsive Web Design (RWD), where the web design adapts automatically to fit to the device display, is the use of frameworks such as jQuery, Bootstrap and Angular.js. These frameworks help developers to create responsive UI that contains many of the interaction features familiar to mobile device users. Such frameworks make for faster and more reliable development which can be deployed across various different scenarios.

As John told us “what you actually want is somebody doing that, and saying we have got it covered, you can put your concept inside our framework, we will take care of the native controls, and we will make sure that the screen size is alright”.

The challenge with all of this is that it requires skills that many organisations simply do not have because they’ve not cultivated them. Where organisations have invested in such skills they have a clear competitive advantage whether developing for the web or mobile and for B2C, B2B or B2E.

Recognising the value in the user experience

Underpinning all of this is the desire to create better user experiences for all. Customers demand great experiences and have done for some time. Now employees are demanding them as well within the applications that they use at work. If the organisation does not provide them then they will go elsewhere just as customers do. Recent years have seen a flood of B2B orientated web based applications often referred to as Software as a Service (SaaS). These applications allow some groups within organisations to use them as alternatives to those provided by their employer. The danger is that data and processes move outside of the organisation. Some call this the “consumerisation” of IT. The Bring Your Own Device (BYOD) movement means that employees are bringing a variety of form factors into the workplace and expecting the software provided by the employer to work just as well across all of them. We are now seeing Bring Your Own App which extends the SaaS issue to mobile.

Modern web frameworks and HTML5 can enable this but the technology can only do so much. Experts in user experience and user centric processes are needed within the development lifecycle. This goes deeper than just UI design but extends into performance, reliability, scalability and security of applications. Client applications whether in the browser or running as apps on devices must be both easy to use and performant. That means the backend services supplying them must be fast and the data travelling over the network (Wi-Fi and cellular) needs to be lightweight. This not only improves speed of transfer but also reduces cost of transfer.

The smoke and mirrors of HTML5

From the volume of coverage that HTML5 has received you would be forgiven for thinking that it is fast becoming a ubiquitous skill within application development. However you would be wrong. In many lists of the most in demand skills for 2013, HTML5 did not feature.

Surprising as this may seem, there are reasons for this: two key ones to be precise. The first is that HTML5 is still very new and support amongst web browsers is not universal. For example amongst Internet Explorer users only a small percentage have a version which is HTML5 compatible. The second is that most developers still do not code for the browser.

It is no surprise that of the most in demand languages the old names like Java, C, C++, C# and T-SQL still dominate the market. In fact JavaScript fares better than HTML because it has spread beyond the web browser into other areas of programming. Node.js has become a popular backend solution especially within organisations looking to rapidly deploy lightweight web services for use by mobile apps.

What, no HTML5? Why we are where we are today

At the height of the dotcom bubble, most organisations outsourced their websites to specialist agencies. Enterprise organisations especially took this decision as they felt that they did not have nor particularly wanted those skills (HTML) in-house. Their development teams were hired for Java, C or VB to work on legacy software built around these established technologies. The result was that web skills such as HTML, JavaScript and CSS were fostered within specialist service providers such as digital agencies whilst much of the traditional software development world continued to focus on the desktop. This was true not just within the enterprise but of many suppliers such as ISVs.

Then companies increasingly wanted more and more of their software to be web based but the teams responsible for that software lacked the skills and experience do this. The resulting frustration within parts of the organisation led to the proliferation of buying in software unbeknown to IT, known colloquially as “Shadow IT”. More recently the use of social networks and mobile apps has led to an expectation of user experience from software that their organisation often fails to provide.

The typical enterprise today will have a lot of grey screen applications which are almost impossible to use without training and experience. Into this landscape has come new pressures to deliver mobile apps which require skills that the organisation simply does not possess, or not in the right numbers or parts of the business.

The drums beating for HTML5

In the last 12 months we’ve heard a lot about the benefits of hybrid mobile development to enterprise. This is because the hybrid approach avoids the need to have numerous programming skills and multiple code bases to support apps that have to be built multiple times for each platform (Android, iOS and so on). With hybrid, a single codebase can be developed using a single technology platform and then deployed to a variety of device platforms. Whilst the business case is sound, a lot of hybrid development is based on web development skills.

A further significant change occurring in web development has been Responsive Web Design (RWD). With people now accessing websites from a variety of form factors such as phones and tablets of varying sizes websites need to adapt to the available real estate. What might work on a traditional desktop will not work so well on a 4inch mobile phone screen. Instead of building different sites to cater for these different scenarios RWD is a single site that adapts as screens get bigger or smaller. One of the foundation technologies behind RWD is HTML5. Even enterprises that have adopted some web capabilities are challenged by RWD.

Waking up to the challenge

As with HTML5 the UX skills are also missing because organisations have long ignored these issues. As John Gledhill told us “I think the biggest challenge for organisations like ours is actually design and UX expertise that is really irrespective of technology”.

Where organisations are recognising the UX issue it is often only cursory, as John explained “UX, I think, is still a bit of an afterthought. I have had people saying “can we borrow the UX guy for a week to test the application?”, and you think, well what happens when the UX guy tells you it is unusable? – you are just about to release it! You should have got the UX guy in at the beginning, not at the very end!”

The reason has historically been because development functions have not recognised or studied the value of UX.

As John points out, this is because “we don’t measure return on investment in the right place. We just assume that UX can take a back seat because people will just do what we tell them to do and lump it. But actually, if somebody was measuring productivity gain, if people were measuring time to completion of a particular task through a system, UX is hugely important. If you are looking at reduction in complexity, it really pays dividends when you think about it up front particularly when you have got very large numbers of end users, many of whom might be your customers (or their customers) and not your employees. But people just don’t think that way at the moment.”

Looking to the future and making up for a lost decade

The fact that people in John’s position are beginning to appreciate these issues and recognise that there are skills missing from the organisation is a promising sign. Therefore we can say that all is not lost. Developers can learn new technologies and programming languages. Vendors help through tools that: abstract away some of the HTML, JavaScript or CSS code; enable designer and developer workflows; and integrate the popular frameworks into their tools to make implementation easier.

In addition there is a new breed of developer being trained up by coding boot camps that can churn out web developers in 12 weeks. These folks may not be ready for any heavy backend lifting within complex legacy systems but for rapidly deploying frontends in HTML5 or JavaScript they are capable. Even companies like Google and Adobe are hiring these boot camp graduates.

UX is a fast growing industry and there are now a large number of training courses and resources. Smart businesses are embracing this skillset and in some cases experts are being poached from other industries such as gaming. We are also seeing UX processes being merged with new development methodologies such as Lean and Agile. Some organisations are even starting to reach levels of maturation in this area whereby UX is embedded into the approval and sign-off processes within ALM.

For many enterprise development and IT functions the beginning of this century has been a lost decade when it comes to the tools, technologies, skills and processes that they will need for the future. The time has come to catch-up and they need to begin investing in training, new hires and transformation programmes that will allow them to face the future with confidence.