The document discusses converting a desktop website to a mobile-friendly version using JavaScript. It provides an overview of JavaScript and its uses in mobile, including using a single column layout, simplifying navigation and marketing, removing unnecessary JavaScript, and adapting elements for mobile. It then outlines the process of checking for mobile users, hiding the desktop page, reorganizing content, removing desktop JavaScript, modifying HTML elements, adding mobile CSS and JavaScript, and rendering the new mobile page. Key aspects are using JavaScript for its speed, splitting work between designers and developers, requiring no server configuration, and reusing existing JavaScript tools.
KnockoutJS and MVVM (Comes with a sample application) - It's a beginner's guide that discusses about Knockout in particular and MVVM pattern in general. Knockout is a very cool piece of technology that makes your view code less cluttered. This ppt reaches every (not all :-) detail of Knockout. By following this ppt you'll surely be in position to get started with Knockout on your own projects. This ppt comes with an application which you can access from this url https://github.com/manvendrasinghkadam/koshopping. This application is built on Grails. More details on this application can be found on github repo.
KnockoutJS and MVVM (Comes with a sample application) - It's a beginner's guide that discusses about Knockout in particular and MVVM pattern in general. Knockout is a very cool piece of technology that makes your view code less cluttered. This ppt reaches every (not all :-) detail of Knockout. By following this ppt you'll surely be in position to get started with Knockout on your own projects. This ppt comes with an application which you can access from this url https://github.com/manvendrasinghkadam/koshopping. This application is built on Grails. More details on this application can be found on github repo.
In this session we will talk about the AngularJS application framework. What is it, why is it so successful, how does it help developers, how can you start using it today, how will it evolve?
Introduction
- a brief history of the evolution of HTML and JavaScript
- why do we need application frameworks?
Angular 1.x
- what is it?
- what are the main design goals?
- what makes it different from other frameworks?
- how does it work?
example: the simplest Angular application
- the power of custom directives
example: a simple validation directive
example: a simple Google Maps control directive
Angular 2.0
- what is it?
- how will it improve upon Angular 1.x?
- when will it become available?
- will it change everything?
In this month's YDN Tuesday Dirk Ginader, Web Developer and part of the Accessibility Task Force at Yahoo!, will talk about Web Accessibility.
Starting with basic markup and ending with accessible javascript and WAI ARIA he'll cover best practices and lots of tips and tricks to make your websites and web applications accessible to everyone.
Get more information about the event here:
http://skillsmatter.com/event/ajax-ria/web-accessibility
Understanding the client’s requirement, the best UX/UI design company strives to create visionary user interface designs. https://www.softprodigy.com/web-graphic-design/user-experience-and-user-interface-design
In this session we will talk about the AngularJS application framework. What is it, why is it so successful, how does it help developers, how can you start using it today, how will it evolve?
Introduction
- a brief history of the evolution of HTML and JavaScript
- why do we need application frameworks?
Angular 1.x
- what is it?
- what are the main design goals?
- what makes it different from other frameworks?
- how does it work?
example: the simplest Angular application
- the power of custom directives
example: a simple validation directive
example: a simple Google Maps control directive
Angular 2.0
- what is it?
- how will it improve upon Angular 1.x?
- when will it become available?
- will it change everything?
In this month's YDN Tuesday Dirk Ginader, Web Developer and part of the Accessibility Task Force at Yahoo!, will talk about Web Accessibility.
Starting with basic markup and ending with accessible javascript and WAI ARIA he'll cover best practices and lots of tips and tricks to make your websites and web applications accessible to everyone.
Get more information about the event here:
http://skillsmatter.com/event/ajax-ria/web-accessibility
Understanding the client’s requirement, the best UX/UI design company strives to create visionary user interface designs. https://www.softprodigy.com/web-graphic-design/user-experience-and-user-interface-design
Presented at Bucharest Java User Group, http://www.bjug.ro/editii/5.html . Project source code available at: https://github.com/bucharest-jug/dropwizard-todo
Modern JavaScript, HTML5 and CSS3 techniques and examples. There’s an endless amount of materials available around these topics so naturally this set doesn’t cover everything there is to know. Instead this is more like a summary of good techniques and practices I’ve encountered while doing web software development.
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.
Javascript and first-class citizenry: require.js & node.js
Javascript on web pages is ubiquitous and its problems are legendary. Javascript, seen as a second-class code citizen, is usually hacked together even by seasoned developers. New libraries (jQuery, prototype, backbone, knockout, underscore) and runtime tools (firebug, jasmine) look like they solve many problems - and they do. But they still leave poorly written code as just that. One key problem is that all javascript code lives globally and this results in poorly managed, tested and delivered code.
In this session, I will illustrate that we can treat javascript as a first-class citizen using with require.js and node.js: it can be modular, encapsulated and easily unit tested and added to continuous integration cycle. The dependencies between javascript modules can also be managed and packaged just like in C# and Java. In the end, we can resolve many javascript difficulties at compile time rather than waiting until runtime.
Writing HTML5 Web Apps using Backbone.js and GAERon Reiter
A walkthrough of how to write a complete HTML5 web app (both front end and back end) using Google App Engine (Python), Backbone.js, Require.js, underscore.js and jQuery.
Yeoman AngularJS and D3 - A solid stack for web appsclimboid
This was a course given in Bangalore India for JSChannel conf 2013. It encompases the use of angular js and d3 in a harmonious way and gives an overview over each of the frameworks / libraries.
CodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложения
Os mobile
1. Welcome to OS mobile JavaScript
Tuesday September 8th 2014
2. What is JavaScript?
Client-side scripting that allows manipulation of
the Document Object Model
DOM includes
CSS includes <link href="style.css/>
JS includes <script src="file.js"/>
All elements <div><h1>Title</h1></div>
All current browsers support it
If not disabled
3. What Mobile Needs
1 column layout
New navigation
Marketing tweaks
Fewer lines of JavaScript
No Flash media
No Mouse events
No Modals
4. Why JavaScript?
Fastest way for us to get mobile done
Good split of designer & developer time
No server configuration
No duplicate code or URLs
JavaScript already necessary
Tools already exist
5. Broad Overview
Check if they need mobile
White out the page
Reorganize things
Remove Desktop JavaScript
Alter HTML elements (add/delete/move)
Add Mobile CSS and JS
Render page
6. Who is Mobile?
function useMobileView() {
var d = document, c = d.cookie;
if (d.documentElement.classList == undefined) return 0;
if (c.indexOf("MobileView=") > -1) return (c.indexOf("MobileView=1") > -1);
return screen.width <= 760;
}
Browsers that support classList
Safari 5.1, Android 3, IE10, FF3.6, Chrome 8
Users with explicit cookies
Screen width of 760px or smaller
7. Mobify
Mobify is a paid service for turning Desktop
websites mobile with Open Sourced JS
We modified the capture.js bit from their /src
https://github.com/mobify/mobifyjs
Process
Hides live DOM (w/ <plaintext
style=”display:none”>)
Creates shadow DOM (w/ callback)
Replaces live DOM with shadow DOM (w/ callback)
8. Why Does it Work?
JavaScript is loaded/run as it happens
JavaScript doesn't care about the future, only
the past
You can tell JavaScript to run after events
happen, but that's outside the scope
9. Our JS Files
capture.js from Mobify
rebuild.js modifies the
shadow DOM
loaded.js registers
onload of the shadow
DOM onload event
onload/*.js files do
normal JS things
10. rebuild.js I
Activates Mobile CSS
<link href="/css/everything.css?eba5c95" rel="mobile-style"
type="text/css" id="jx_mobileStyles" />
Transmutes to
<link href="/css/everything.css?eba5c95" rel="stylesheet"
type="text/css" id="jx_mobileStyles" />
Is put at the bottom of the HEAD
Overrides previous styles
11. rebuild.js I Code
var head = doc.getElementsByTagName("head")[0];
// Activate mobile style sheet and place it
// at the bottom of the head
var style = doc.querySelector("#jx_mobileStyles");
style.setAttribute("rel", "stylesheet");
head.appendChild(style);
12. rebuild.js II
Removes JavaScript that the Desktop uses
Including MooTools and CeraBox
Any elements using the class
“jx_desktopScripting” are removed
Ex:
<script type="text/javascript"
src="/assets/js/mootools.js"
class="jx_desktopScripting"></script>
13. rebuild.js II Code
// Remove our desktop JavaScript
var
scripts=doc.getElementsByClassName("jx_desktopScri
pting");
while(scripts.length > 0){
destroy(scripts[0]);
}
function destroy(node) {
var parent = node.parentNode;
if (node && parent) {
parent.removeChild(node);
}
}