This document provides an overview of HTML5, Backbone.js, and web development. It introduces key concepts like client-server architecture, APIs, databases, markup languages, and frameworks like jQuery, Bootstrap, and Backbone. It discusses modern front-end development practices and server-side programming. Mobile web development options like native, hybrid, and PhoneGap are also covered. The document emphasizes learning resources and stresses attention to details, user experience, and adaptability to new technologies in the field.
Intro to mobile web application developmentzonathen
Learn all the basics of web app development including bootstrap, handlebars templates, jquery and angularjs, as well as using hybrid app deployment on a phone.
Anatomy of a web app
HTML5
CSS3
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2016.
http://www.ivanomalavolta.com
PL/SQL applications do not live on an island - any longer. Increasingly, applications need relate to the rest of the world. Either to make themselves and the services they provide accessible to external parties - that may not speak PL/SQL at all - or to access information or enlist help from external services.
Fortunately, PL/SQL can do much more than invoke other PL/SQL applications or execute SQL. PL/SQL - sometimes in conjunctions with other components in the Oracle RDBMS - provides many inbound and outbound channels for such interactions. This session discusses and demonstrates a number of channels - when and why to use them and how to use them.
The presentation discusses how to publish data to consumers via HTTP, using both XMLDB and the Embedded PL/SQL Gateway - for example to deliver HTML, XML or RSS or to provide REST-style (web)services that are much in demand. The session also discusses the importance of email as a vehicle for human-application interaction, demonstrating how to send and how to act on received emails. An important topic is how to engage in queue based interactions (for example with a SOA infrastructure) and it concludes with how through utl_http or XMLDB and (simple) middleware, the world of SOA, REST and even the internet is ours as well. It includes a demo on 'chatting from the database' (database triggers that send out IM alerts to human agents).
Intro to mobile web application developmentzonathen
Learn all the basics of web app development including bootstrap, handlebars templates, jquery and angularjs, as well as using hybrid app deployment on a phone.
Anatomy of a web app
HTML5
CSS3
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2016.
http://www.ivanomalavolta.com
PL/SQL applications do not live on an island - any longer. Increasingly, applications need relate to the rest of the world. Either to make themselves and the services they provide accessible to external parties - that may not speak PL/SQL at all - or to access information or enlist help from external services.
Fortunately, PL/SQL can do much more than invoke other PL/SQL applications or execute SQL. PL/SQL - sometimes in conjunctions with other components in the Oracle RDBMS - provides many inbound and outbound channels for such interactions. This session discusses and demonstrates a number of channels - when and why to use them and how to use them.
The presentation discusses how to publish data to consumers via HTTP, using both XMLDB and the Embedded PL/SQL Gateway - for example to deliver HTML, XML or RSS or to provide REST-style (web)services that are much in demand. The session also discusses the importance of email as a vehicle for human-application interaction, demonstrating how to send and how to act on received emails. An important topic is how to engage in queue based interactions (for example with a SOA infrastructure) and it concludes with how through utl_http or XMLDB and (simple) middleware, the world of SOA, REST and even the internet is ours as well. It includes a demo on 'chatting from the database' (database triggers that send out IM alerts to human agents).
Sooner or later we all have to work with HTML, despite its verbosity. Those of us who claim to love HTML may just be victims of Stockholm Syndrome, both praising yet secretly loathing it.
Basho designer John Newman is making the trek from the swamps of Florida to show us the way. In the modern world of markup preprocessors, these alternative syntaxes allow you to write simpler, cleaner, more concise code in a shorter amount of time. Certain techniques can even allow your team members who may be less-tech-savvy to contribute content directly without forcing you to wire up a WYSIWYG style CMS.
This talk explores great alternatives to plain HTML and CSS, and covers how Basho put these tools together to facilitate a painless, team-oriented approach to building sites and web apps.
Today’s designers when asked about HTML5 do hesitate to answer because of the lack of knowledge about HTML5.A Free Ebook On HTML 5 Step by Step Guide..
Anatomy of a web app
HTML5
CSS3
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
My presentation about WordPress and caching from WordCamp Baltimore 2013.
See it with funny animated GIFs at http://kingkool68.com/wp-cream/
Fork my slides on GitHub https://github.com/kingkool68/WP-Cache-Rules-Everything-Around-Me
This guide will not bring you a magic formula to optimize critical render path. When the subject is web performance: there's no magic formula. Analyze performance is careful and meticulous process, and it can bring different results based on various existing variables.
HTML5 and the dawn of rich mobile web applicationsJames Pearce
HTML5 and its related technologies are enabling new ways to build beautiful sites and applications for contemporary mobile devices. Native mobile developers can now use web technologies to surmount cross-platform headaches, and desktop web developers can reach mobile users in familiar, app-like ways. This session explores the state of the art in HTML5-based mobile web frameworks, and demonstrates the practical possibilities that this powerful and standards-based approach can bring.
This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
Sooner or later we all have to work with HTML, despite its verbosity. Those of us who claim to love HTML may just be victims of Stockholm Syndrome, both praising yet secretly loathing it.
Basho designer John Newman is making the trek from the swamps of Florida to show us the way. In the modern world of markup preprocessors, these alternative syntaxes allow you to write simpler, cleaner, more concise code in a shorter amount of time. Certain techniques can even allow your team members who may be less-tech-savvy to contribute content directly without forcing you to wire up a WYSIWYG style CMS.
This talk explores great alternatives to plain HTML and CSS, and covers how Basho put these tools together to facilitate a painless, team-oriented approach to building sites and web apps.
Today’s designers when asked about HTML5 do hesitate to answer because of the lack of knowledge about HTML5.A Free Ebook On HTML 5 Step by Step Guide..
Anatomy of a web app
HTML5
CSS3
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
My presentation about WordPress and caching from WordCamp Baltimore 2013.
See it with funny animated GIFs at http://kingkool68.com/wp-cream/
Fork my slides on GitHub https://github.com/kingkool68/WP-Cache-Rules-Everything-Around-Me
This guide will not bring you a magic formula to optimize critical render path. When the subject is web performance: there's no magic formula. Analyze performance is careful and meticulous process, and it can bring different results based on various existing variables.
HTML5 and the dawn of rich mobile web applicationsJames Pearce
HTML5 and its related technologies are enabling new ways to build beautiful sites and applications for contemporary mobile devices. Native mobile developers can now use web technologies to surmount cross-platform headaches, and desktop web developers can reach mobile users in familiar, app-like ways. This session explores the state of the art in HTML5-based mobile web frameworks, and demonstrates the practical possibilities that this powerful and standards-based approach can bring.
This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
FE Colleges -Turning up the volume on businessDes Kennedy
The FE landscape is changing leaving many colleges facing an uncertain future. I believe that by reframing their offer they can deliver more compelling messages to both students and employers.
I felt necessity of creating this brief slideshow, so as to help PHP Developer interns and communicating the intricacies of development with my clients easier. I thought the more deeply clients understood what really went into translating their ideas to web applications under the hood, the better it could translate to
exchange of design issues,
appreciation of development process intricacies, resulting delivery time & cost issues.
So I quickly put together information that I found on internet & have tried to make an attempt. Hope this helps other developers too... Your comments & critique are welcome in terms of improving & simplifying this slide show.
Build a strong understanding of Java programming and web development technologies to become a Full-Stack Java Developer. Get hands-on experience with various Java frameworks for developing web applications. Create a portfolio of projects by developing end-to-end web applications using emerging frameworks.
Become a full stack developer with expertise on MERN Stack. Build strong web development fundamentals and problem solving skills. Architect end-to-end web applications using emerging frameworks and create a portfolio of projects.
An overview of web development essentials that will help you as a user experience designer to not only understand how to integrate designs with development components, but also to learn some tips on interacting effectively with developers.
Why and how is Seocrawler.co built, a talk for Webcamp Zagreb 2013 conference. Presented technical part of project with dev advices for building crawler/spider
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
Neuro-symbolic is not enough, we need neuro-*semantic*Frank van Harmelen
Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”.
All of this illustrated with link prediction over knowledge graphs, but the argument is general.
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Ramesh Iyer
In today's fast-changing business world, Companies that adapt and embrace new ideas often need help to keep up with the competition. However, fostering a culture of innovation takes much work. It takes vision, leadership and willingness to take risks in the right proportion. Sachin Dev Duggal, co-founder of Builder.ai, has perfected the art of this balance, creating a company culture where creativity and growth are nurtured at each stage.
"Impact of front-end architecture on development cost", Viktor TurskyiFwdays
I have heard many times that architecture is not important for the front-end. Also, many times I have seen how developers implement features on the front-end just following the standard rules for a framework and think that this is enough to successfully launch the project, and then the project fails. How to prevent this and what approach to choose? I have launched dozens of complex projects and during the talk we will analyze which approaches have worked for me and which have not.
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
Search and Society: Reimagining Information Access for Radical FuturesBhaskar Mitra
The field of Information retrieval (IR) is currently undergoing a transformative shift, at least partly due to the emerging applications of generative AI to information access. In this talk, we will deliberate on the sociotechnical implications of generative AI for information access. We will argue that there is both a critical necessity and an exciting opportunity for the IR community to re-center our research agendas on societal needs while dismantling the artificial separation between the work on fairness, accountability, transparency, and ethics in IR and the rest of IR research. Instead of adopting a reactionary strategy of trying to mitigate potential social harms from emerging technologies, the community should aim to proactively set the research agenda for the kinds of systems we should build inspired by diverse explicitly stated sociotechnical imaginaries. The sociotechnical imaginaries that underpin the design and development of information access technologies needs to be explicitly articulated, and we need to develop theories of change in context of these diverse perspectives. Our guiding future imaginaries must be informed by other academic fields, such as democratic theory and critical theory, and should be co-developed with social science scholars, legal scholars, civil rights and social justice activists, and artists, among others.
The Art of the Pitch: WordPress Relationships and SalesLaura Byrne
Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes?
All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.
JMeter webinar - integration with InfluxDB and GrafanaRTTS
Watch this recorded webinar about real-time monitoring of application performance. See how to integrate Apache JMeter, the open-source leader in performance testing, with InfluxDB, the open-source time-series database, and Grafana, the open-source analytics and visualization application.
In this webinar, we will review the benefits of leveraging InfluxDB and Grafana when executing load tests and demonstrate how these tools are used to visualize performance metrics.
Length: 30 minutes
Session Overview
-------------------------------------------
During this webinar, we will cover the following topics while demonstrating the integrations of JMeter, InfluxDB and Grafana:
- What out-of-the-box solutions are available for real-time monitoring JMeter tests?
- What are the benefits of integrating InfluxDB and Grafana into the load testing stack?
- Which features are provided by Grafana?
- Demonstration of InfluxDB and Grafana using a practice web application
To view the webinar recording, go to:
https://www.rttsweb.com/jmeter-integration-webinar
3. Coding House
Learn how to code 60 days of Intensive training
Physical activities and food provided
Full time immersion in coding environment
Hands on mentorship and career placement
Accessible to bart
First class in January
4. So you want to be a
web/ mobile developer?
Coding languages:
html/php/ruby/java/javascript/c
Design skills: user interface, photoshop,
illustrator, optimizing graphics
Business skills: communication,
group/team dynamics,
Everything else: optimization, seo, sem,
marketing, a/b testing, unit testing,
bugs, debugging, operating systems,
browser bugs/quirks, devices,
responsiveness, speed,
5. Why would you want to
do this? West days of the internet
Wild
Fun, creative
Fame and Fortune
Startups
Technology
Career
6. It’s actually not that hard
Today we will do a high level overview so you
are at least familiar with the concepts that a
web developer must deal with on a daily basis.
It’s the bigger picture that matters when dealing
with business people and engineers.
I’m here to show you the how to get it done
fast.
It’s important to know how to think like a
developer and use the resources that are
available to you including google
7. The web browser
Very complicated client software.
Lots of differences between
platforms (os) and rendering
engines: gecko (firefox), webkit
(safari/chrome)
Reads markup, css, and js to
combine to a web page
IE is the underdog now, always a
pain for web devs but getting
better slowly
http://en.wikipedia.org/wiki/Comparison_of_web_bro
8. How the web works
Client/Server (front vs back end), networking, ip
addresses, routers, ports, tcp/ip = stateless
protocol
Request/Response Life Cycle
DNS (translates readable requests to map to
servers)
API’s (rest, xml, json, etc)
Databases (mysql, mssql, mongodb)
Markup languages (html, xml, xhtml) Doctypes
9. Client/Server
Client requests data from a server, server
Communications
responds
Cloud based/virtualization = many servers on
one box sharing resources through software
virtualization
10. DNS requests
Browser requests to look up a website
address, hits the closest DNS server says yes I
know where that is it’s at this IP address.
Cacheing, propagation,
TTL
11. APIs
API = Application Programming Interface - good
for decoupling your application. Data access.
JSON = Preferred format for describing and
transferring data, also native js object, nested
attributes and values
XML = brackets and tags, old school and heavier
REST = (REpresentational State Transfer) - url
scheme for getting and updating/creating data
based on http requests
HTTP Requests: GET, POST, UPDATE, DELETE
Error codes: 200, 404, 500, etc
12. Databases
Like a big excel sheet, way to organize and
retrieve data through columns and rows
(schemas)
Runs on the server responds to requests for
data using specified syntax like SQL, JSON
Example SQL: “select type from cars where
color = blue”
Mysql, MSSQL = traditional relational database
MongoDB = schema-less, nosql database
13. Markup Languages
HTML5 - modern html lots of new features, not
even an official approved spec but browser
vendors started implementing them anyway.
W3C/standards
Doctype tells the browser what spec to adhere
to.
DOM = Document Object Model: tree of
elements in memory, accessible from javascript
and the browser
15. Let’s create a website
HTML
CSS
Javascript
General Programming Concepts
16. HTML
Descendant of xml so it relies on markup
<p>text inside</p>, a few are “self closing” like
<img />
Nesting Hierarchy: html, head, body - DOM
Can have values inside the tag or as attributes
like this: <p style=”....”>some value inside</p>
http://www.w3schools.com/html/html_quick.asp
18. CSS (Cascading Style
Sheets) for look and feel can be inline, in
Style definitions
a separate file, or in the <head> of the
document.
Describe color, size, font style and some
interaction now blurring the lines a bit
Media queries = responsive
Paths can be relative or absolute
Floating, scrolling, and centering.
Modern stuff, table layout, flexbox, not
supported yet everywhere
19. Javascript
(not java)
Most ubiquitous language, also can be inline, in the head,
or in a seperate file.
Similar to C syntax lots of brackets
Variables vs Functions vs Objects {}
Actually a lot of hidden features and very flexible
Scope is important concept, window object, event
propagation
Console, debugging with developer tools or firebug
Polyfills for patching older browsers to give them support
20. General coding tips syntax
Good editor with code completion and
highlighting (webstorm or rubymine
recommended)
Close all tags first then fill it in.
Test at every change in all browsers if possible.
Get a virtual box and free vm’s from ms:
modern.ie
Get a simulator, download xcode and android
simulator
Minimize the tags to only what you need.
Semantics: stick to what the tags are for
21. Jquery
Javascript framework, used everywhere. Free
and open source.
Simplifies common tasks with javascript and the
DOM
$ = get this element or group of elements using
a selector
Vast selection of Plugins
$.ready = when document (DOM) is completely
loaded and ready to be used
22. Bootstrap
CSS and JS Framework from Twitter for rapid
development of User Interfaces (Prototyping)
Include the CSS file and js file
Use the various components as needed.
Override styles as necessary
http://getbootstrap.com/
Available themes: wrapbootstrap.com (paid),
bootswatch.com (free)
23. Modern front end web
development
HAML and SASS, Compass, Less,
Static site generators: middleman, jekyll
Coffeescript (simpler syntax for javascript)
Grunt and Yeoman (build anddependency
management)
Node JS (back end or server side javascript)
MVC frameworks: backbone js, angular js
http://updates.html5rocks.com/2013/11/The-Landsca
24. Server side
Server sits and wait for requests. It responds with
some data depending on the type of the request
and what’s in it.
Port 80 is reserved for website traffic so anything
coming on that port is routed to the webserver on
the machine. Apache, Nginx
The server says oh this is a request for a rails page
so let’s hand this off to rails let it do its thing then
respond with the result.
Rails runs some logic based on the request
variables, session values and checks the database
if needed to look up more data
25. Basic Server Admin
Windows vs Linux
Terminal basics: cp, rm, cd, whoami, pwd
Services need to be running and healthy like
mail, bind (dns), os level stuff disk space etc
Security
Backups
http://community.linuxmint.com/tutorial/view/100
26. Version Control
Git/Github - distributed version control
SVN/CVS - older non distributed
Branching
Merging diffs
Pushing to master
https://www.atlassian.com/git/workflows
27. Backbone JS
Front End Framework loosely based on MVC
M = Model, V = View, C = Controller
Model = Data/Business Logic
View = Display/HTML
Controller = Handles site operational logic, pull
some data show a view
http://backbonejs.org/ (docs and annotated
source)
Requires underscore and jquery or equivalent $
function
28. Backbone Model
Ecapsulates an object’s data properties
and storage/retrieval methods
var myModel = Backbone.Model.extend({...})
myModel.on(“someEvent”, doSomething()) Listen to attribute
changes and update view
Getting/Setting properties:
myModel.get(“myPropertyName”)
myModel.set(“myPropertyName”, “someValue”)
myModel.set(“myPropertyName”, {various:”properties”, ...})
myModel.toJSON() - convert to json string
URL property - points to the url of the json data source
sync/fetch/save - pull and save data from the server
29. Backbone Collection
Ordered sets of Models - updating and
retrieving models from a set easier.
var Library = Backbone.Collection.extend({
model: Book
});
A lot of the same methods as models
Can sync them with data source just like
models
add - adds a model
remove - removes a model
30. Backbone View
Encapsulates a dom element on the
page
El property - dom element
If you don’t use El, it creates a div
unless you give the view “tagName”
Rendering - use render() function
Templates - reusable pieces of html
Events - trigger and listen to events
32. Backbone Events
Events is a module that can be mixed in to any object, giving the object the
ability to bind and trigger custom named events
_.extend(myObject, Backbone.Events);
myObject.on(“someEvent”, function(msg)
{alert(“msg: ”+msg)})
myObject.trigger(“someEvent”, msg)
Models, Views and Collections all extend from
events so you have them already.
33. Backbone Router
Manages urls and browser history
extend router then call Backbone.history.start()
extend router then call Backbone.history.start()
routes match url patterns:
var Workspace = Backbone.Router.extend({ routes: { "help":
"help", // #help "search/:query":
"search", // #search/kiwis
"search/:query/p:page": "search" // #search/kiwis/p7 }, help:
function() { ... }, search: function(query, page) { ... }});
35. Mobile web
development
HTML5 vs Native vs Hybrid
PhoneGap
Appgyver - fast way to get an app on the
phone and development
Objective C/xcode - Native Iphone
Android: Java
36. Key Takeaways
Don’t give up the more you see it the more it
will sink in
Do free/cheap work until you get good
Pay attention to the minor details
User experience is paramount
Always do what it takes to meet goals while
managing the tradeoffs and complete as fast
as possible
Stay on top of new tech