This document discusses HTML5 and web application development. It begins with an overview of the anatomy of a web app, including setting up the server, using data services, and device detection. It then covers HTML5 features like new semantic tags, forms, multimedia capabilities using audio, video, and canvas. JavaScript APIs are discussed for geolocation, web storage, web SQL, and web workers. The document emphasizes that the mobile web is the most viable platform for cross-device applications.
The Cordova framework
Recurrent app architecture
Cordova CLI
Debugging Cordova applications
My development environment
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2015.
http://www.ivanomalavolta.com
SPTechCon 2014 How to develop and debug client side code in SharePointMark Rackley
This document contains the presentation slides for a session titled "How to Develop and Debug Client Side Code" given by Mark Rackley at the SPTechCon San Francisco 2014 conference. The presentation provides an overview of tools and techniques for developing and debugging JavaScript and jQuery code in SharePoint, including jQuery, jQuery UI, DataTables, Bluff Charts, and REST/CSOM/SPServices. It also covers debugging basics, common issues, and best practices.
This document discusses how to create offline web applications using HTML5 application cache manifest files. It covers HTTP response headers, caching strategies, manifest file structure and directives, updating the cache, checking online/offline status, and the application cache API. The manifest file lists application assets to cache and supports caching, network, and fallback rules. Updates require modifying cache busting values or the manifest file itself.
Introduction to Client Side Dev in SharePoint WorkshopMark Rackley
The document is a presentation on client side development in SharePoint using jQuery. It begins with introductions and an agenda. The agenda covers deploying and referencing scripts, a jQuery primer, debugging techniques, modifying default SharePoint forms, REST/CSOM/SPServices, third party libraries, and SharePoint hosted apps. It then discusses why client side development is useful and challenges like browser inconsistencies. Best practices covered include avoiding global variables and writing performant code. Various development tools are presented. Finally, a demo is shown of building a simple contract management solution using the techniques discussed.
The document discusses HTML5 offline applications and the application cache API. It explains that the application cache allows caching of files locally using a cache manifest file to enable offline browsing, speed, reduced server load, and resilience. It outlines the anatomy of offline applications and describes the structure and sections of a cache manifest file, including CACHE, NETWORK, FALLBACK, and SETTINGS. It also lists the different application cache events.
This document provides an overview of various web development tools and technologies, including FTP, HTML, CSS, JavaScript, Flash, PHP, ASP, and content management systems. It discusses the purpose and basic usage of each tool. For example, it explains that FTP is used to transfer files between a local computer and web host, and that HTML is the underlying markup language that defines the structure and content of a web page. The document also provides learning resources and examples of text editors, FTP clients, and other tools.
The document provides 14 tips for optimizing website performance based on the 80/20 rule. The tips include minimizing HTTP requests by combining files, using a CDN, adding caching headers, gzipping files, optimizing CSS and JS placement, avoiding redirects and duplicate scripts, and making Ajax cacheable. Following these best practices can significantly improve page load times by reducing network requests and making better use of browser caching.
This document provides a tutorial with 15 exercises to teach how to create a basic ASP.Net web application with user authentication and authorization. The exercises guide the user to create web forms, configure authentication using web.config files, add a login page that authenticates against a SQL database, and customize the user experience including remembering user logins.
DevNext - Web Programming Concepts Using Asp NetAdil Mughal
This document provides an overview of web programming concepts using ASP.NET. It discusses HTTP requests and the difference between static and dynamic web pages. It also covers ASP.NET page lifecycles, client-side vs server-side processing, and state management using view state. The document includes demonstrations of ASP.NET web applications and key concepts.
This presentation was given at SharePoint Saturday Virginia Beach 2012. The topic covers some SharePoint based solutions that directly benefit from HTML5 features.
Overview of ASP.NET
An ASP.NET Page
Server Controls
User Controls
Validation
Master Pages
Themes & skins
Page Cycle Events
Menu, Navigation & Sitemaps
Some cool new ASP.NET 2 Server Controls
This document provides an overview and introduction to HTML5. It begins with a discussion of browser market share statistics and the birth of HTML5 by the WHATWG organization. It then outlines the wide range of new HTML5 markup, elements, events, APIs and technologies including forms, canvas, web sockets, and more. The remainder of the document discusses the status and implementation of these HTML5 features across modern browsers like Firefox, and provides references to HTML5 test suites, specifications, implementations and demos.
This document provides an overview of ASP.NET 4.0, including required lab setup, lecture outlines, and introductions to key ASP.NET concepts. The lab setup requires Windows 7, IIS 7+, MS SQL Server 2008+, and Visual Studio 2010+. Lecture topics include introductions to the web, ASP.NET overview, ASP.NET controls, and the page class. Key ASP.NET concepts explained include the client/server architecture, how ASP.NET works, the page lifecycle, and use of controls, view state, and events.
The professionals who just want to know about the topmost web application development frameworks must go through this blog. For the top 10 development Framework introduction, positive and negative aspects are clearly mentioned.
Codemotion 2013 - Designing complex applications using html5 and knockoutjsFabio Franzini
The document discusses tools and frameworks for building complex applications using HTML5 and JavaScript. It begins with introductions and background on the speaker. The rest of the document outlines various topics: HTML5 and its benefits, JavaScript and patterns like modularity, client-side frameworks like KnockoutJS, server-side tools like TypeScript, packaging apps with Cordova or AppJS, and demonstrates some of the frameworks.
Universal Java allows developers to write code once and run it anywhere, including on servers, desktops, mobiles, and IoT devices. Java code is portable because it compiles to bytecode that runs on the Java Virtual Machine (JVM), which exists for most platforms. Some key aspects that enable portability include:
1. Separating platform-independent business logic from platform-specific UI code
2. Using common language features and libraries for cross-platform code
3. Transpiling Java to other languages like JavaScript for web apps
4. Ahead-of-time compilation to native code for better performance on devices
The document discusses strategies for writing portable Java code and provides examples using shared business
Todd Anglin gave a presentation on HTML5 forms and input types. He discussed the new input types available like email, url, number and date/time. He demonstrated how to use these new input types and attributes like placeholder, required and pattern. Anglin also covered customizing the browser rendered inputs using shadow DOM and styling validation states with CSS. For older browsers without native support, he recommended polyfilling the new functionality with JavaScript.
SharePoint Saturday St. Louis - SharePoint & jQueryMark Rackley
This document provides an overview of jQuery and how it can be used to build interactive and usable applications in SharePoint. It discusses common myths about jQuery, how to deploy and maintain jQuery scripts, and how to use the SPServices library to interact with SharePoint lists and libraries. It also provides tips on jQuery development, debugging, and resources for learning more. Examples are demonstrated to show how jQuery can be used to add and update list items, hide/show elements, and interact with forms.
SPSDenver - SharePoint & jQuery - What I wish I would have knownMark Rackley
This document provides an overview of using jQuery with SharePoint. It discusses how jQuery can be used to resolve common SharePoint issues without extensive coding. Key points include how jQuery makes applications more usable, common myths about jQuery, deployment options, best practices for maintenance and upgrades, and how to interact with SharePoint lists and libraries using jQuery and the SPServices library. The document concludes with code examples and tips for debugging jQuery in SharePoint.
Tips for creating a Self Organizing TeamsYves Hanoulle
The presentation was delivered in
Kjiv (AgileEE)
Geneve (AgileTourGeneve),
Agilis2009 (Iceland)
Scandinavian Developer Conference 2010
Agile Tour Bordeaux 2010
The document outlines an agenda for learning how to build dashboards using the Dashing framework. The exercises include installing Dashing, adding and customizing widgets, updating widget data via REST API calls, and pulling data into widgets using jobs. Dashing allows creating customizable dashboards using premade or custom widgets that can be updated dynamically by connecting widget views to data through CoffeeScript.
Essa é uma apresentação que reúne algumas iniciativas e soluções que podem ser aplicadas no Governo Brasileiro e claro, serve para outros países também, pois a grande idéia é implementar alguns pontos do Governo Eletrônico, ou como prefiro chamar: Governo Aberto.
Comparing JVM Web Frameworks - Devoxx France 2013Matt Raible
A comparison on JVM Web Frameworks. Includes strategies for choosing and results from research by InfoQ and devrates.com. Also, lots of pretty graphs.
See blog post about this presentation at http://raibledesigns.com/rd/entry/devoxx_france_a_great_conference and video recording at http://raibledesigns.com/rd/entry/video_of_comparing_jvm_web
RequireJS & Handlebars
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2013.
http://www.ivanomalavolta.com
API Caching, why your server needs some restLuis Cipriani
The best HTTP request made to your server is that one that never reaches it. Do you know the life cycle time of your resources? How to be sure that the user never reaches an expired response without the need to open the connection door with the origin server? What kinds of caches do exist and when do I need to use each one of them? Why can I not be afraid to read the RFCs? This talk will present good practices on the usage of HTTP cache for APIs and web applications, turning your digital products to optimize the usage of machines and save money.
This document provides tips and best practices for creating effective presentations using visuals such as shapes, colors, images, and fonts. It recommends starting with a bold cover slide to grab attention, using visuals to highlight key points and sustain audience interest, and ending with a clear call to action. The overall message is that presentations should be visually appealing and easy to understand in order to effectively engage the audience.
7 Tips to Beautiful PowerPoint by @itseugenecEugene Cheng
Short talk about presentations given at Startup Dynamo, a workshop held by Startup@Singapore NUS using the Learn Startup Methodology.
My segment was on Presentation Design to make an impact on VCs. Many thanks to @ryanlou for the invite. And not to forget Emiland De Cubber for his amazing slide deck inspirations and invaluable advice. Disclaimer: this is a reimagination off some of Emiland's presentations. I do not make any money of this.
Download for just a tweet: http://goo.gl/fbM4j
Want something similar done for your next pitch? Contact me at my site: http://itseugene.me/contact/
Angular jS Introduction by Google
A to Z angular introduction about Angular Framework which is single page application.
Angular JS and angular is very important for single page applications.
Mobile applications Development - Lecture 10
HTML5 Refresher
This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy).
http://www.di.univaq.it/malavolta
This document provides best practices for building modern web applications. It discusses choosing server-side technologies like the LAMP stack (Linux, Apache, MySQL, PHP), which is a common and advantageous option. It also covers the Model-View-Controller design pattern, which separates an application into these components. Models manage data, Views handle presentation, and Controllers process user input and pass data between Models and Views. The document recommends unobtrusive JavaScript, CSS for layout, and implementing AJAX after non-script functionality is established on the client-side. Overall, it outlines strategies for architecting robust and maintainable web applications.
Building the next generation of browser apps todayRandy Williams
As browsers evolve and mobile devices proliferate, are your SharePoint applications keeping up? Are you still using old-school, server-side technologies in web parts or application pages? By unleashing the browser’s full potential, you can deliver unparalleled responsiveness and cross-device richness. In this session, come learn how HTML 5, jQuery, and SharePoint’s client object model can spice up your applications. We’ll also see how these technologies let you “break out of the sandbox”, enhancing both on premise and SharePoint Online solutions.
This document provides an overview of HTML5 and CSS3 concepts for building web applications. It begins with defining what a web app is and its basic anatomy. It then covers new HTML5 structural tags, forms, multimedia capabilities like audio and video, offline data storage, geolocation, and canvas/SVG graphics. For CSS3, it discusses new selectors, the box model, positioning, fonts, visual effects, and media queries. Key topics are presented at a high level with examples to illustrate the main capabilities and uses of HTML5 and CSS3 for mobile web development.
The document discusses four methods for mobile web development: 1) Do nothing and let browsers adapt content, 2) Reduce images and styling, 3) Use handheld style sheets, and 4) Create separate mobile content. It also covers challenges like small screens, latency issues, and the need for device detection. Key technologies mentioned include WURFL for device capability detection and WALL for delivering optimized content. The document advocates for mobile Ajax to provide rich apps without downloads, and lists browsers and frameworks that support it.
The document provides an overview of the key components that go into making a PHP and MySQL based web application. It discusses the use of HTML, CSS, JavaScript, jQuery, client-side and server-side scripting, AJAX, PHP, MySQL, code editors, tools for wireframing, image editing and more. It also covers aspects like hosting, version management, software deployment, traditional and agile development methodologies, and software documentation.
An introduction to HTML5 and its API's for the extream beginners those who already know what is HTML. Presentation also includes few features the CSS3.
HTML 5 is the 5th revision of the core HTML language specification defined by the W3C. It introduces many new features including native multimedia support through elements like <video> and <audio>, canvas element for 2D drawing, offline web applications, and more. The WHATWG and W3C jointly oversee the standardization process, with the specification being implemented across modern browsers though some features have uneven support. HTML5 aims to enhance the web platform with native functionality that was previously only available through plug-ins like Flash.
Web development concepts using microsoft technologiesHosam Kamel
This document summarizes a presentation about web development concepts using Microsoft technologies. It introduces ASP.NET as a framework for building web applications in C# or VB.NET using Visual Studio. It describes ASP.NET features like controls, page lifecycle, and different coding styles. It also discusses recent additions like AJAX, jQuery, LINQ, MVC, and the Microsoft web platform. The presentation aims to provide an overview of Microsoft web technologies and how they can help developers build web applications.
Presentation at TODCon 08 that takes about AJAX usage. As with any slides this doesn't tell the whole story... This is essentially a case for progressive enhancement without actually saying it.
I. ASP.NET is a web development platform from Microsoft used to build web applications. It provides advantages over classic ASP like separation of presentation and code for easier maintenance.
II. The ASP.NET architecture includes layers for the browser, web server, application server, business logic, and database. It uses HTTP for communication and HTML/XHTML pages.
III. Key challenges in designing web application interfaces include the stateless nature of the web, ensuring responsive and intuitive user interfaces, achieving scalability and performance, and addressing security issues.
This document provides an overview of front end development concepts including HTML5, JavaScript, frameworks like Angular and libraries like jQuery. It discusses HTML5 features like offline support and new elements. JavaScript evolution and MVC frameworks are explained. Development tools like Webstorm, Grunt, Bower and Sass are presented. Different platforms like desktop, mobile and frameworks are covered at a high level.
The document provides an overview of HTML5, including its history from 2004 to the present, widespread browser support, and new features such as semantic tags, simplified forms, 2D drawing, audio/video playback, device access APIs, offline storage, and performance improvements. It discusses HTML5's transition from a working group to recommendation status and references for further information.
Shailen Sukul is a senior SharePoint architect who works with latest web technologies and SharePoint. He specializes in SharePoint installation, configuration, development and training. In his personal projects he prefers AWS and ASP.Net MVC. He maintains several open source SharePoint projects on CodePlex. You can follow him on Twitter or check out his blog for more information.
The future of web development write once, run everywhere with angular.js and ...Mark Roden
This slide deck was used in support of BTE 102 - The future of web development write once, run everywhere with angular.js and domino at IBMConnectED 2015
Presentation was given with Mark Leusink
The future of web development write once, run everywhere with angular js an...Mark Leusink
This document provides a summary of a presentation on using AngularJS and IBM Domino to build modern web applications.
The presentation introduces AngularJS, an open-source JavaScript framework, and how it uses a model-view-controller architecture. It also discusses using IBM Domino as a RESTful backend service via Domino Access Services or a custom REST API.
The presentation demonstrates a sample conference scheduling app built with AngularJS, Bootstrap, and data from an IBM Domino database. The app runs entirely on the client-side and shows how AngularJS allows building portable web apps that can run on any device or platform.
This document introduces Oracle Application Express (APEX), which is Oracle's tool for quickly developing database-centric web applications without needing to know Java. APEX allows developers to build applications visually using wizards in a web browser. It provides features like SQL and data workshops, reporting, forms, and charts. The document discusses who APEX is suitable for, how to install and use it to build applications, and provides tips on things like debugging, help resources, and designing applications.
Similar to Workshop HTML5+PhoneGap by Ivano Malavolta (20)
Oltre l'hype: vulnerabilità e limiti dell'intelligenza artificiale.pdfCommit University
Non è tutto oro quello che luccica, in questa presentazione esploreremo le principali criticità e i rischi associati all'intelligenza artificiale (IA). Come si può attaccare un sistema informatico allo stesso modo esistono gli attacchi ai modelli di machine learning, come l'avvelenamento dei dati e gli esempi avversariali, che minano l'integrità dei sistemi. Inoltre, si evidenzia come i bias nei dati di addestramento possano portare a decisioni discriminatorie, influenzando settori cruciali come la giustizia e l'occupazione. La necessità di una spiegabilità nell'IA viene sottolineata per garantire trasparenza, fiducia e un uso etico della tecnologia. L'obiettivo è fornire una visione equilibrata, sottolineando l'importanza di una vigilanza continua e di miglioramenti costanti per sfruttare il potenziale dell'IA in modo responsabile.
Come funzionano i Retrieval-Augmented Generators (RAG) e quanto i database vettoriali sono fondamentali per poter memorizzare e utilizzare le sorgenti dati aziendali e personali?
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
Open source, in Python, compatibile con vari LLM ed estendibile tramite plugin: queste sono solo alcune delle potenzialità del framework Cheshire Cat AI!
Breaking REST Chains_ A Fastify & Mercurius Pathway to GraphQL Glory.pdfCommit University
This document contains slides from a presentation by Luca Del Puppo about building GraphQL servers using Fastify and Mercurius. The presentation introduces GraphQL and its advantages over REST APIs. It then discusses why Mercurius is a good choice for building GraphQL servers on Fastify and outlines some features it provides out of the box. The presentation concludes by providing resources for learning more about Fastify, Mercurius and building GraphQL servers.
Collaborazione, Decisionalità e Gestione della Complessità nel Tempo: cosa ...Commit University
Vuoi migliorare la gestione dei progetti a lungo termine con team multidisciplinari e prendere decisioni rischiose in modo sicuro e ponderato? Non perderti il nostro workshop gratuito!
Antonio Dell’Ava, Frontend Developer di eDreams Odigeo, condividerà strategie per aiutarti a ottimizzare la collaborazione nel tuo team, scegliere gli strumenti giusti per ogni situazione e garantire l’evoluzione del progetto nel tempo
A volte essere pigri è una qualità, evita (quasi) tutte le richieste di personalizzazioni lasciando "finestre aperte" nei tuoi componenti generici.
Gli slots sono un modo per passare il contenuto a un componente in Vue.js. Permettono di definire una sezione nel template di un componente che può essere sostituita dall'esterno.
È inoltre possibile assegnare un nome o uno "scope" agli slots, garantendo così maggiore controllo e personalizzazione sul contenuto. I "named slots" consentono di definire più slots nello stesso componente, assegnando dei nomi specifici.
Gli "scoped slots" ti consentono di accedere dall'esterno ai dati interni del componente.
Quante volte mi è capitato di migliorare applicazioni lente e difficili da ottimizzare, ma poi ho scoperto Qwik e tutto è cambiato.
Con il suo nuovo modello mentale è in grado di fare la differenza e scalare facilmente qualsiasi applicazione.
Non conosci questo framework? Nessuna paura...andiamo a scoprirlo assieme!
Backstage l'Internal Developer Portal Open Source per una migliore Developer ...Commit University
Backstage is an open source platform for building developer portals that unifies all tooling, services, apps, data, and documentation with a single consistent UI. It allows developers to focus on their work by providing a centralized location to create software, manage what they own, and explore the entire software ecosystem. Backstage has a customizable, extensible plugin architecture built with modern technologies to make it easy to develop for and contribute to developer portals in a cloud-agnostic, vendor-neutral way.
Nella giungla degli ORM node, Prisma sta prendendo sempre più piede. Ha migliorato la Developer Experience, si integra perfettamente con Typescript e funziona dannatamente bene con diversi provider. In questo talk, vedrai come Prisma può migliorare il tuo lavoro quotidiano e come ti permette di avere un maggior controllo della tua code base aiutandoti a prevenire fastidiosi errori nella tua applicazione nodejs.
Decision-making for Software Development Teams - Commit UniversityCommit University
Ti senti bloccato quando si tratta di prendere decisioni critiche su aspetti tecnologici? Vuoi conoscere i processi decisionali collaborativi e come applicarli al tuo team?
Francesco Strazzullo, Chief Operating Officer di Claranet Italia, ti insegnerà gli elementi chiave per prendere decisioni critiche su aspetti tecnologici, gestire i requisiti non funzionali e lavorare con processi decisionali collaborativi.
L’Advisor Leader dell’area Game di NABA, Marco Secchi, ti insegnerà come migliorare la gestione degli oggetti in-game e la loro comunicazione utilizzando Unity Engine e Design Pattern Component.
La prototipazione è un’attività fondamentale per “capire facendo”. Lo scopo della prototipazione non è costruire partendo da un progetto definito ma, piuttosto, acquisire dati preziosi per essere poi più consapevoli di prendere la giusta direzione. Alla base delle attività di prototipazione ci sono spesso strumenti low code e no code. Esistono ormai da diversi anni e ultimamente stanno guadagnando sempre più attenzione nella community per la loro immediatezza e velocità. Abbiamo definito meglio le loro qualità e le opportunità che ci sono nel loro utilizzo.
Durante il talk abbiamo approfondito perché è importante prototipare e come questa attività migliora i nostri progetti. In particolare, abbiamo approfondito l’utilizzo AWS Step Functions Workflow Studio, strumento low code prodotto da AWS. Workflow Studio ci permette di imbastire una state machine basata su step functions con uno strumento visuale drag & drop che semplifica moltissimo il nostro lavoro. Abbiamo analizzato cosa lo contraddistingue da altri strumenti e quali sono i suoi punti di forza. Infine siamo passati alla pratica facendo una piccola esercitazione con AWS Step Functions.
KMM survival guide: how to tackle struggles between Kotlin and SwiftCommit University
Kotlin Multiplatform Mobile (KMM) è un SDK per lo sviluppo di applicazioni Android ed iOS che consente agli sviluppatori di condividere la business logic mantenendo UI/UX native.
Ogni SDK/framework cross/multi platform ha i suoi pro ed i suoi contro, e purtroppo KMM non è l'eccezione che conferma la regola.
Se sei uno sviluppatore Android potresti pensare che tutto funzionerà correttamente, ma purtroppo non sarà così quando dovrai confrontarti con Swift.
Se sei uno sviluppatore iOS saprai che Swift è simile a Kotlin, ma non in tutto, dovrai quindi conoscere alcune sue caratteristiche.
In questo talk vedremo quali sono i problemi che si possono riscontrare nell'interoperabilità tra Kotlin e Swift, i motivi che li causano, e come risolverli.
Stai perdendo la testa cercando di convertire il tuo state manager da Vuex a Pinia?
Ecco una guida step-by-step per affrontare questo task senza difficoltà.
I micro-frontend sono uno degli argomenti più interessanti nel mondo frontend dell'ultimo periodo ma nonostante la loro popolarità, non esistono delle linee guida comuni per svilupparli. micro-lc risponde a questa esigenza e permette di raccogliere in un unico applicativo tanti micro-frontend, orchestrandoli e rendendoli parte della stessa applicazione e non più componenti singoli, scollegati e sconnessi.
Join educators from the US and worldwide at this year’s conference, themed “Strategies for Proficiency & Acquisition,” to learn from top experts in world language teaching.
The membership Module in the Odoo 17 ERPCeline George
Some business organizations give membership to their customers to ensure the long term relationship with those customers. If the customer is a member of the business then they get special offers and other benefits. The membership module in odoo 17 is helpful to manage everything related to the membership of multiple customers.
How to Add Colour Kanban Records in Odoo 17 NotebookCeline George
In Odoo 17, you can enhance the visual appearance of your Kanban view by adding color-coded records using the Notebook feature. This allows you to categorize and distinguish between different types of records based on specific criteria. By adding colors, you can quickly identify and prioritize tasks or items, improving organization and efficiency within your workflow.
How to Create Sequence Numbers in Odoo 17Celine George
Sequence numbers are mainly used to identify or differentiate each record in a module. Sequences are customizable and can be configured in a specific pattern such as suffix, prefix or a particular numbering scheme. This slide will show how to create sequence numbers in odoo 17.
How to Install Theme in the Odoo 17 ERPCeline George
With Odoo, we can select from a wide selection of attractive themes. Many excellent ones are free to use, while some require payment. Putting an Odoo theme in the Odoo module directory on our server, downloading the theme, and then installing it is a simple process.
Split Shifts From Gantt View in the Odoo 17Celine George
Odoo allows users to split long shifts into multiple segments directly from the Gantt view.Each segment retains details of the original shift, such as employee assignment, start time, end time, and specific tasks or descriptions.
How to Configure Time Off Types in Odoo 17Celine George
Now we can take look into how to configure time off types in odoo 17 through this slide. Time-off types are used to grant or request different types of leave. Only then the authorities will have a clear view or a clear understanding of what kind of leave the employee is taking.
AI Risk Management: ISO/IEC 42001, the EU AI Act, and ISO/IEC 23894PECB
As artificial intelligence continues to evolve, understanding the complexities and regulations regarding AI risk management is more crucial than ever.
Amongst others, the webinar covers:
• ISO/IEC 42001 standard, which provides guidelines for establishing, implementing, maintaining, and continually improving AI management systems within organizations
• insights into the European Union's landmark legislative proposal aimed at regulating AI
• framework and methodologies prescribed by ISO/IEC 23894 for identifying, assessing, and mitigating risks associated with AI systems
Presenters:
Miriama Podskubova - Attorney at Law
Miriama is a seasoned lawyer with over a decade of experience. She specializes in commercial law, focusing on transactions, venture capital investments, IT, digital law, and cybersecurity, areas she was drawn to through her legal practice. Alongside preparing contract and project documentation, she ensures the correct interpretation and application of European legal regulations in these fields. Beyond client projects, she frequently speaks at conferences on cybersecurity, online privacy protection, and the increasingly pertinent topic of AI regulation. As a registered advocate of Slovak bar, certified data privacy professional in the European Union (CIPP/e) and a member of the international association ELA, she helps both tech-focused startups and entrepreneurs, as well as international chains, to properly set up their business operations.
Callum Wright - Founder and Lead Consultant Founder and Lead Consultant
Callum Wright is a seasoned cybersecurity, privacy and AI governance expert. With over a decade of experience, he has dedicated his career to protecting digital assets, ensuring data privacy, and establishing ethical AI governance frameworks. His diverse background includes significant roles in security architecture, AI governance, risk consulting, and privacy management across various industries, thorough testing, and successful implementation, he has consistently delivered exceptional results.
Throughout his career, he has taken on multifaceted roles, from leading technical project management teams to owning solutions that drive operational excellence. His conscientious and proactive approach is unwavering, whether he is working independently or collaboratively within a team. His ability to connect with colleagues on a personal level underscores his commitment to fostering a harmonious and productive workplace environment.
Date: June 26, 2024
Tags: ISO/IEC 42001, Artificial Intelligence, EU AI Act, ISO/IEC 23894
-------------------------------------------------------------------------------
Find out more about ISO training and certification services
Training: ISO/IEC 42001 Artificial Intelligence Management System - EN | PECB
Webinars: https://pecb.com/webinars
Article: https://pecb.com/article
-------------------------------------------------------------------------------
No, it's not a robot: prompt writing for investigative journalismPaul Bradshaw
How to use generative AI tools like ChatGPT and Gemini to generate story ideas for investigations, identify potential sources, and help with coding and writing.
A talk from the Centre for Investigative Journalism Summer School, July 2024
Delegation Inheritance in Odoo 17 and Its Use CasesCeline George
There are 3 types of inheritance in odoo Classical, Extension, and Delegation. Delegation inheritance is used to sink other models to our custom model. And there is no change in the views. This slide will discuss delegation inheritance and its use cases in odoo 17.
Principles of Roods Approach!!!!!!!.pptxibtesaam huma
Principles of Rood’s Approach
Treatment technique used in physiotherapy for neurological patients which aids them to recover and improve quality of life
Facilitatory techniques
Inhibitory techniques
5. What is a Web App?
An application built with web technologies that is accessible via a mobile browser and
NOT EXCLUSIVELY through an app store
The browser may be either
the standard device browser
or an embedded browser
(Hybrid app)
7. Setting up the Server
As usual, it all starts with an HTTP request
Then you need:
• Data
• A device detection mechanism [optional]
• The app itself
8. Data
Usually mobile apps do not talk directly with the database
à do not even think about JDBC, drivers, etc!
à They pass through an application server and communicate via:
• standard HTTP requests for HTML content (eg PHP)
• REST-full services (XML, JSON, etc.)
• SOAP
9. Data
• Data can be stored in any classical way:
• Relational
• Graph
• Key-value
• Document-based
Latest trend à backend-as-a-service
10. BaaS
1. Developers build a visual model of their DB
2. The service generates APIs and client-side
libraries(compatible with Android, Windows
Phone, etc.)
3. The data produced/consumed in the app can be
pushed/pulled to their DB
• Communication is handled via REST-based
APIs
11. Example of Baas software: BaasBox
Main features:
• User management
• ACL
• Friendships
• Authentication via Facebook and Google+
• Document-based data manegement (via OrientDB)
• Assets management (fotos, documents, or files)
• Push notifications
The “Box” in BaasBox means that all the features are
in a standalone server, just like a box.
No Application Server, no Database Server, just a
JVM and nothing more
Rest API
Web
dashboard
http://www.baasbox.com/
12. Ok, but what about mobile apps?
BROWSER
<html>
<head>
<script src=” ...” />
</head>
<body>
...
NATIVE
WRAPPER
<html>
<head>
<script src=” ...” />
</head>
<body>
...
PLATFORM APIs
NATIVE
APP
01010101010101101010
1010101011011010
010101010101011101
010101010101011010
PLATFORM APIs
Native
Web
Hybrid
13. Native
http://bit.ly/GWOaP1
PRO
• Lets you create apps with rich user interfaces and/or heavy graphics
CONS
• Development Time
• Development Cost
• Ongoing Maintenance
• No portability (apps cannot be used on other platforms)
PRO
CONS
14. Examples of native apps
http://www.ea.com/it/ipad/nfs
http://www.whatsapp.com/
15. Web
http://bit.ly/GWOaP1
PRO
• Offers fast development, simple maintenance, and full application portability
• One mobile web app works on any platform
CONS
• Can’t handle heavy graphics
• Can’t access camera or microphone
PRO
CONS
17. Hybrid
http://bit.ly/GWOaP1
PRO
• Development speed of mobile web apps
• Device access and app store distribution of native apps
CONS
• Can’t handle heavy graphics
• Requires familiarity with a mobile framework
PRO
CONS
21. My vision
Mobile web seems to be the only long-term commercially viable platform for mobile
FRAGMENTATION
THE WEB
USER EXPECTATIONS
22. When you go native there are too many platforms to be supported
FRAGMENTATION
23. The web is the only platform that:
• works across devices
• apps share the same set of standards
• the same app can work also on a desktop
THE WEB
The web is an advanced technology:
• webGL
• Local storage management
• Positioning & mapping
• Real-time data
• Push, ...
24. Users expect things to just work
à they don’t care about what platform they have
àthey simply expect that your app will be available for their device
à YOU HAVE TO BE CROSS-PLATFORM
USER EXPECTATIONS
25. PhoneGap
You develop your app using the usual three guys
You use the same web view of the native OS
• iOS = UIWebView
• Android = android.webkit.WebView
http://phonegap.com/blog/2013/06/20/coming-soon-phonegap30
26. What is PhoneGap?
The UI layer is a web browser view
• 100% width
• 100% height
Headless web browser
• No URL bar
• No decorations
• No zooming
• No text selection
27. It looks very similar to Apache Cordova…
Adobe/Nitobi donated the PhoneGap codebase to the Apache foundation
à
wider audience and contributors
à
transparent governance
Better documentation
à
easier contributions for companies
Apache Licensing
There was only one problem....
trademark ambiguity
à CORDOVA
PhoneGap is a distribution of
Apache Cordova
29. HTML 5
HTML5 will be the new standard for HTML
HTML5 is still a work in progress
W3C final recomendation: 2020
Top browsers support many (not all) of the new HTML5 elements
http://mobilehtml5.org
http://caniuse.com
30. What is HTML5?
It is an extension of HTML/XHTML 4
• with new more semantically rich elements
<article>, <footer>, <header>, <nav>, <section>
• deprecating tags & attributes
<center>, <font>, <frame>, height, width
• introducing new attributes
placeholder, form
• additional APIs
geolocalization, video, audio
HTML5
Markup
JavaScript
CSS3
Multimedia
32. New Structural Tags
Main Goal: separate presentation from content
• Poor accessibility
• Unnecessary complexity
• Larger document size
Most of the presentational features from earlier versions of HTML are no longer supported
New structural tags
33. New Structural Tags
<header> header region of a page or section
<footer> footer region of a page or section
<nav> navigation region of a page or section
<section> logical region of a page
<article> a complete piece of content
<aside> secondary or related content
http://bit.ly/JCnuQJ
34. Custom Data Attributes
Can be used to add metadata about any element within an HTML5 page
They are ignored by the validator for HTML5 documents
They all start with the data- pattern
They can be read by any browser using Javascript via the getAttribute() method
These attributes are used by
many JavaScript frameworks
36. Form Input Types
Form input types degrade gracefully
à
Unknown input types are treated as text-type
http://bit.ly/I65jai
37. Audio
<audio> : a standard way to embed an audio file on a web page
<audio controls>
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Not Supported
</audio>
Multiple sources à the browser will use the first recognized format
Audio
38. Audio Javascript API
HTML5 provides a set of Javascript APIs for interacting with an audio element
For example:
play() pause() load() currentTime ended volume…
à http://www.w3.org/wiki/HTML/Elements/audio
39. Video
<video> : a standard way to embed a video file on a web page
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Not Supported
</video>
Multiple sources à the browser will use the first recognized format
Video
40. Video Javascript API
HTML5 provides a set of Javascript APIs for interacting with a video element
For example:
play() pause() load() currentTime ended volume…
à http://www.w3.org/wiki/HTML/Elements/video
41. Accelerometer
There are 4 ways to store data locally in Cordova:
• Web storage
• Local Storage
• Session Storage
• WebSQL
• Indexed DB
• File System Access
Local storage and file system access
Web storage, WebSQL, and IndexedDB
conform to W3C specifications and are
provided by the browser itself
File system access API conforms to its
corresponding W3C specification
42. Web Storage
LocalStorage
stores data in key/value pairs
persists across browser sessions
SessionStorage
stores data in key/value pairs
data is erased when a browser session ends
43. WebSQL
relational DB
support for tables creation, insert, update, …
transactional
persists across browser sessions
Its evolution is called IndexedDB
44. WebSQL
It provides you a structured SQL relational database
You have to setup a DB schema
You can then perform classical SQL queries
tx.executeSql("SELECT
*
FROM
User“,
[],
function(tx,
result)
{
//
callback
code
});
45. IndexedDB
• It tries to combine Web Storage and WebSQL
• You can save data as key/value pairs
• You can define multiple DBs
• Good Performance
data is indexed
asynchronous ! it does not block the UI
You can see a store as a big SQL table with only key/value pairs
à you don’t need to define a schema upfront
46. Considerations
You will likely use more than one API in combination
à Use the right API for the right job
Local Storage
• it is not transactional à race conditions
• very simple API, no schema
• only String data à performance issues for complex data due to JSON serialization
• session storage will be cleared after the app is closed
• limited quota
47. Considerations
WebSQL
• SQL-based à fast and efficient
• transactional à more robust
• asynchronous à does not block the UI
• rigid data structure à data integrity vs agility
• limited quota
48. Considerations
IndexedDB
• simple data model à easy to use
• transactional à more robust
• asynchronous à does not block the UI
• good search performance à indexed data
• data is unstructured à integrity problems
• limited quota
• not supported by every platform (e.g., iOS)
50. Geolocalization
Gets Latitude and Longitude from the user’s browser
There is also a watchPosition method wich calls a JS function every time the user moves
Geolocalization
51. Example
function getLocation() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
console.log(‘no geolocalization’);
}
}
function showPosition(position) {
console.log(position.coords.latitude);
console.log(position.coords.longitude);
}
52. WebSockets
Bidirectional, full-duplex communication between devices and server
Specifically suited for
chat, videogames, drawings sharing, real-time info
Requires a Web Socket Server to handle the protocol
Web sockets
53. WebSockets - Overview
1. Client notifies websocket server (EventMachine) of an event, giving ids of recipients
2. The server notifies all the active clients (subscribed to that type of event)
3. Clients process event
when given recipient Id
matches the client’s one
http://bit.ly/Ixcupi
54. Alternative - Polling via AJAX
+ Near real-time updates (not purely real-time)
+ easy to implement
+ no new technologies needed
- they are requested from the client and cause increased network traffic
- AJAX requests generally have a small payload and relatively high amount of http headers
(wasted bandwith)
55. Canvas
Canvas allows you to draw anything inside the browser
http://bit.ly/Ie4HKu
http://bit.ly/LUKXkr
http://bit.ly/LULa79
http://bit.ly/LC8AgY
Canvas
56. Canvas
It uses nothing more than JavaScript and HTML
à no external plugins, no libraries, etc.
You can create lines, use images, use text, apply transformations, etc.
http://bit.ly/KsKLv1
58. Web Workers
Javascript is a single-threaded language
à If a tasks take a lot of time, users have to wait
Web Workers provide background processing capabilities to web applications
They typically run on separate threads
à apps can take advantage of multicore CPUs
Web workers
59. Web Workers
Web Workers can be used to:
• prefetch data from the Web
• perform other ahead-of-time operations to provide a much more lively UI.
Precious on mobile Web applications because of the slow network speed
60. Web Workers
Any JS file can be launched as a worker
Example of Web Worker declaration:
var worker = new Worker(“worker.js”);
In order to be independent from other workers, each worker script cannot access the DOM
61. Web Workers
The main JS script can communicate with workers via postMessage() calls:
$(‘#button’).click(function(event) {
$(‘#output’).html(“starting”);
worker.postMessage(“start”);
});
worker.onmessage = function(event) {
$(‘#output’).html(event.data);
}
62. Web Workers
The web worker script can post back messages to the main script:
onmessage = function(event) {
if(event.data === “start”) {
var result;
// do something with result
postMessage(result);
}
}
64. The killer app!
• Check console
• Breakpoints
• Update the DOM at run-time
• Access to all local DBs
• Network profiling
• CPU and memory profiling
• Monitor event listeners
• Monitor elements’ rendering time
65. Desktop Browser
• very quick
• very handy functions
• see Chrome’s Web Development Tools
• Breakpoints
PRO
• browsers’ small differences and bugs
• cannot test all mobile-specific functionalities
• you need PhoneGap shims
CONS
67. Ripple
• very quick
• can use Chrome’s Web Development Tools
• You can test PhoneGap’s API from the Desktop
• browsers’ small differences and bugs
• cannot test the interaction with external apps
PRO
CONS
It is based on Ripple, a Chrome
plugin for mobile dev
from PhoneGap 3.0.0, you need to
use the Ripple available at Apache
npm
install
-‐g
ripple-‐emulator
ripple
emulate
69. Simulator
• Officially supported by platform vendors
• You use the “real” device’s browser
PRO
• device’s performance is not considered
• this is iOS-specific
• Android’s emulator is a joke
• device’s capabilities are only simulated
CONS
70. On device
• accurate
• still handy
• real performance tests
• real browser tests
PRO
• Deployment takes some time (~6 seconds for iOS)
CONS
71. Remote Debugging
From iOS 6, Apple provided Mobile Safari with a remote web inspector
à You can debug your app by using the classical web inspector of Desktop Safari
It can connect both to
• The iOS emulator
• The real device
Since Android 4.4, this feature is
available via Chrome’s web dev kit
72. Mobile debugging reference table
Make a favor to yourself,
don’t debug craftsman way:
console.log()
+
alert()
iOS
Android
Desktop Browser
Ripple
Device/emulator
Safari Web
Inspector
X
Chrome Web
Inspector
X
73. Roadmap
Anatomy of a web app
Debugging (mobile) web apps
HTML5
Maintainable web apps
75. Introduction
We are building apps, not web sites
If your code is not structured:
• it is extremely easy that your web app becomes a
big mess of HTML + CSS + JavaScript
• maintaining each part of your app asks for a
deep analysis of ALL its aspects (logic, presentation, etc.)
• you may waste a whole day due to a missing
<
76. What we want to avoid
Imagine yourself trying to change either:
• how a movie should be rendered in your app
• the REST API providing info about movies
82. Models
Models represent your data
Each model represents a data type in your app, together with the logic surrounding it, like:
• persistence
• conversions
• validation
• computed properties
• access control
MVC: Notify their observers about their
state using the Observer pattern
85. Collections
Collections are ordered sets of models
You can:
• bind change events to be notified when any model in the collection has been modified
• listen for add and remove events
• fetch the collection from the server (or other persistence layers)
• find models or filter collections themeselves
The model attribute of a collection represents the kind of model that can be stored in it
Any event that is triggered on a model in a collection
will also be triggered on the collection directly
MVC: Notify their observers
about state using the Observer
pattern (same as models)
88. Views
Views represent and manage the visible parts of your application
They are also used to
• listen to interaction events
• and react accordingly
views can be rendered at any time, and inserted into the DOM
you get high-performance UI rendering
with as few reflows and repaints as possible
MVC: observe models, and
update itself according to the
state of the models + manage
user inputs (it’s a controller, to
this sense)
89. Example of view
Events map
“event_name selector”: callback
Events callbacks
create the
DOM subtree
91. The router
Backbone.Router
provides methods for routing client-side pages,
and connecting them to actions and events
At a minimum, a router is composed of two main parts:
routes
an hash that pairs routes to actions
actions
JS functions triggered when certain routes are navigated
93. Backbone-based workflow
• You organize your interface into logical views backed by models
• Each view can be updated independently when the model changes,
without having to redraw the page
You can bind your view‘s
render() function to the
model‘s "change” event
à
now everywhere that
model data is displayed in the
UI, it is always up to date
95. Why Require JS
We are building apps, not website
We need well-specified and isolated JS files/modules
Code complexity grows as the app gets bigger
à we need some sort of #include/import/require
à ability to load nested dependencies
96. What we want to avoid
uncontrolled scripts
poor control flow understanding
97. Require JS
RequireJS is a JavaScript file and module loader
Using a modular script loader like Require JS will improve the modularity of your code:
à speed in implementing changes
à better undestanding of the code
Require JS allows modules to be loaded as fast as possible, even out of order, but evaluated in the
correct dependency order
It is built on the Module Pattern
JavaScript file and module loader
99. Module VS script files
A module is different from a traditional script file in that it defines a well-scoped object that avoids
polluting the global namespace à its retained objects can be deleted by the GC
It can explicitly list its dependencies and get a handle on those dependencies without needing to refer to
global objects, but instead receive the dependencies as arguments to the function that defines the
module
VS
100. Module definition
Required
modules (array)
References to required modules
Dependent module usage
This function is called when
zepto.js is loaded.
If zepto.js calls define(), then
this function is not fired until
also zepto’s dependencies
have loaded
101. Require JS under the hoods...
1. loads each dependency as a script tag, using head.appendChild() and waits for all dependencies to
load
2. computes the right order in which to call the functions that define the modules
3. calls the module definition functions of each dependency in the right order
main.js
jQuery
Backbone
SpinJS
MoviesCollection
MovieModel
MoviesView
1
2
3
4
5
6
7
103. Why Handlebars
We want to separate presentation from logic
TRANSLATE TO: we don’t want to put any HTML element into JavaScript code
separate logic from presentation
Imagine yourself trying to change how a movie should be rendered in
your app...
107. handlebars summary
Each Template can contain Expressions and Helpers operating on them
The main helpers are:
• with
• each
• if
/
else
/unless
You can define your own Helpers that operate on expressions, they return HTML code
A template can be (pre)-compiled and must be executed with a context in order to return the
final HTML fragment
108. Example of built-in helper
It renders the block if its argument is not equal to false,
undefined,
null,
[]
If / Else
<div
class="entry“>
<h1>{{title}}</h1>
{{#if
author}}
<h2>By
{{firstName}}
{{lastName}}</h2>
{{#else}}
<h2>Unknown
author</h1>
{{/if}}
{
title:
"My
first
post!",
author:
undefined
}
}
<div
class="entry“>
<h1>My
first
post!</h1>
<h2>Unknown
author</h2>
</div>
110. Combining Backbone, Require, and Handlebars
Handlebars templates can be seen as special Require modules
So we can have the following:
• a separate HTML5 file for each template
• a Backbone view can have a dependency to each template
• the template can be executed by using a JSON object of the Backbone model as context
113. I implemented all best practices and advices in this
presentation in a generic app template available here:
https://github.com/iivanoo/cordovaboilerplate