Introduce Bootstrap 3 to Develop Responsive Design Application

Dec 2, 201493 likes49,136 views

www.exoplatform.com - The second session of "eXoers on the grill" presentation in Vietnam. After a very good start last month about the Git Rebase Functionality presented by Trong from the Portal team the subject of this session was the Responsive Design. This presentation was prepared and presented by all members of UI Team: Giang, Hoa, Trung and Thibault. eXoers on the Grill aims to provide some incentive & fresh air for our staff in order to constantly re-think our methods, spread good practices, promote some technology or tools, generate ideas, etc... All the teams are invited to contribute by picking up some hot topics of their choice and spread to other teams.

Introduce Bootstrap 3 to develop
RESPONSIVE
design application
Copyright 2014 eXo Platform

Copyright 2014 eXo Platform
A presentation
by eXo UI Team

When UI
was not a
concern
Copyright 2014 eXo Platform

Many UI innovation since
Copyright 2014 eXo Platform

And some company
success to create
wonderful design
for web application
Copyright 2014 eXo Platform

A unique
Wonderful
desktop
screen is
not enough
Copyright 2014 eXo Platform TODAY

Be ready for future screen
Copyright 2014 eXo Platform

Build specific site for each devices
Copyright 2014 eXo Platform
Part of the UI team in eXo
today
Part of the UI team in eXo if we decide
to build specific site for each device
Build a specific site for desktop, mobile, tablet… was definitively not the good solution
The first (wrong) idea

The Dark Lord Sauron Ethan Marcotte
forged in secret 2010 a Master Ring
Design to control all others.
One Ring Design to rule them all:
THE
RESPONSIVE DESIGN
Copyright 2014 eXo Platform
The good idea

Time for specialist
1. Responsive Design
2. Bootstrap 3
3. Responsive Web Application
4. Demo
5. Responsive eXo Platform
Enjoy... Keep question on your book note, we will answer at the end
Copyright 2014 eXo Platform

What is exactly a
RESPONSIVE DESIGN
Web application ?
Copyright 2014 eXo Platform

What is Responsive Design ?
A unique site that
can adapt to any
screen size, today
or in the future.
Copyright 2014 eXo Platform

Responsive vs Adaptive
Copyright 2014 eXo Platform
Continuously
resizes when
change the
width of your
screen, no
extra empty
space on the
sides
Responsive

Relative units vs Static units
Copyright 2014 eXo Platform
Use relative units,
like percent can
adapt to any
screen, instead of
static units like
pixels.
Relative units Static units

Flow vs Static
Copyright 2014 eXo Platform
The data content
flowing smoothly
when screen size
change. It’s what
we name flow in
Responsive
Design.
Flow Static

With Breakpoints vs Without Breakpoints
Copyright 2014 eXo Platform
Predict
breakpoints when
screen size change
allow to adapt
your content to
the screen size
With Breakpoints Without Breakpoints

Vectors vs Images
Copyright 2014 eXo Platform
A vector image
adapts with Retina
resolutions. Quality
is the same
whatever is the
resolution of your
screen
Vector Image

Mobile First
● Start by developing the CSS for the mobile device first,
then have media queries for adapt to tablets, desktops
● Determine what is most important content
Copyright 2014 eXo Platform

Why’s Mobile First ?
● Mobile website will prepare more
thoroughly than was originally
invested.
● At any size, it's always a good design
● Avoid overwrite code
Copyright 2014 eXo Platform

A free responsive framework
BOOTSTRAP 3
originally by Twitter
Copyright 2014 eXo Platform

The Bootstrap history
Copyright 2014 eXo Platform
Mid
2010
August
2011
February
2012
January
2012
August
2013
Bootstrap was
created at Twitter
Twitter released
Bootstrap as
open source
project
Become the most
starred GitHub
development
project
Introduce the
first major
release,
Bootstrap 2
Shipping
Bootstrap 3.0

Main features of Bootstrap
Preprocessors One framework,
every devices
Copyright 2014 eXo Platform
Full of
features

New Flat
design Mobile first
Approach
What’s new in Bootstrap 3
Grid system
New components
New powerful
SASS support
New Glyphicons
icon font
Copyright 2014 eXo Platform
javascript are
rewritten

Advantage
● Create a web application very fast
● It’s natively responsive framework
● It’s fully and easily customisable
Copyright 2014 eXo Platform

Disadvantage
Hey! My new
website looks just
like everyone else’s!
Copyright 2014 eXo Platform

Disadvantage
No backward compatibility
between versions
Copyright 2014 eXo Platform

Create a responsive
WEB APPLICATION
using Bootstrap 3
Copyright 2014 eXo Platform

Responsive with bootstrap 3
● css3 media queries
● Grid system
● Responsive utilities
● Responsive embed and flexible image
Copyright 2014 eXo Platform

What is @media ?
@media rule allows website to have a
different layout for screen, mobile phone,
tablet, etc.
Copyright 2014 eXo Platform

Responsive Utilities
Copyright 2014 eXo Platform

How to make
EXO PLATFORM
responsive with bootstrap 3?
Copyright 2014 eXo Platform

Exo product responsive with bootstrap 3
● Add the viewport <meta> tag to <head> tag
● Change the grid system
● Stop embedding Bootstrap classes in template
Copyright 2014 eXo Platform

Exo product responsive with bootstrap 3
● Make sure eXo UI Component is responsive
● Update javascript system
Copyright 2014 eXo Platform

It’s time for
THANK YOU
see you soon ...
Copyright 2014 eXo Platform

Bootstrap is a popular front-end framework for building responsive mobile-first websites and web apps. It was created in 2011 by developers at Twitter and contains pre-built UI components and CSS styles for common patterns like navigation bars, dropdowns, and progress bars. Bootstrap uses a responsive 12-column grid system and has gone through several major releases to support new features and a mobile-first approach. It is free to use, well-documented, customizable, and has a large community of developers.

Bootstrap pptNidhi mishra

Bootstrap Framework Yaowaluck Promdee

Introduction to BOOTSTRAPJeanie Arnoco

Bootstrap is a popular front-end framework that provides responsive grid system, prebuilt components, and plugins for developing responsive mobile-first websites and web applications. It includes HTML and CSS templates for typography, forms, buttons, navigation and other interface components as well as optional JavaScript plugins. The document discusses Bootstrap's grid system which uses rows and columns to build layouts responsive across devices, and provides examples of basic grid structures for stacking columns horizontally and creating different layouts for mobile, tablet and desktop screens.

Bootstrap pptIshtdeep Hora

Bootstrap seminar presentationPratikDoiphode1

This document summarizes a student's seminar on the Bootstrap framework for web development. The student discusses introducing Bootstrap and its objectives, including getting knowledge of Bootstrap for design and understanding differences between custom and Bootstrap design. They also discuss problems with creating responsive websites and surveying literature on using Bootstrap for rapid design. The student presents Bootstrap's grid system and algorithmic approach using rows and columns. They conclude that Bootstrap allows rapid, responsive development and is well-supported for web design.

Bootstrap PPT by MukeshMukesh Kumar

The document provides an overview of Bootstrap, including: - Bootstrap is an open-source HTML, CSS, and JS framework for developing responsive mobile-first websites and web apps. - It contains utilities for typography, forms, buttons, navigation, and other interface components, as well as optional JavaScript extensions. - The document describes various Bootstrap components like grids, navigation, buttons, forms, images, alerts, progress bars, and panels. It provides code examples for how to implement these components.

Bootstrap Web Development FrameworkCindy Royal

This document provides an overview of Bootstrap, an open-source front-end web development framework. It includes information on what Bootstrap is, its key features like the grid system and responsive design, how to get started using Bootstrap by including its CSS and JavaScript files, and examples of common Bootstrap components like navigation, the jumbotron, grid layouts, images, and parallax scrolling effects. The document encourages users to get familiar with the grid system and look at code samples on the Bootstrap website to help get started building interfaces with Bootstrap.

Bootstrap 3McSoftsis

Bootstrap is a free front-end framework for building responsive, mobile-first websites. It includes HTML and CSS templates for common elements like typography, forms, buttons, navigation, tables, images and more. Bootstrap also utilizes a responsive 12-column grid system and is compatible with all modern browsers. Websites built with Bootstrap are automatically responsive on devices ranging from small phones to large desktops.

BootstrapAvinashChunduri2

The document discusses front-end web development frameworks and tools. It covers full stack development, Git, Node.js, npm, and Bootstrap. Bootstrap is described as a free front-end framework that includes HTML, CSS templates for interfaces and optional JavaScript plugins. It also provides responsive designs and a mobile-first approach. The document then explains components of Bootstrap like grids, forms, navigation bars, cards, modals and preprocessors like Less and Sass which can be used to write CSS code.

Introduction to Tailwind CSS - IM Tech Meetup - May 2022.pptxIlesh Mistry

Tailwind: The Future of CSS is Here!Abdullah Al Mahi

Can you write a beautiful, maintainable, and responsive web applications without a single line of CSS? With Tailwind, you can. Unlike the majority of CSS frameworks that give you prebuilt components, Tailwind provides you with low-level CSS utility classes that you can combine to create custom designs. The goal of this presentation is to help you understand the value proposition of the utility-first philosophy. We will have a look at: - why utility-first CSS is the future - how Tailwind makes building bespoke user interfaces a total breeze - the benefits and challenges of the utility-first approach

Responsive web-design through bootstrapZunair Sagitarioux

This document discusses responsive design with Bootstrap. It introduces Bootstrap as an open-source front-end framework that allows developers to create responsive websites. It highlights new features in Bootstrap 3.1.1 like a mobile-first approach and support for different screen resolutions. The document also explains the Bootstrap grid system which uses rows and columns to layout responsive content. It provides an example of the grid system and discusses other Bootstrap components like glyphs, buttons, and JavaScript plugins.

HTML Basic, CSS Basic, JavaScript basic.Beqa Chacha

Bootstrap.pptxvishal choudhary

Bootstrap is a free front-end framework for building responsive, mobile-first websites. It includes HTML, CSS, and JavaScript design templates for things like forms, buttons, navigation, and more. Bootstrap started at Twitter in 2011 and is now one of the most popular HTML, CSS, and JS frameworks. To use Bootstrap, you can either download it directly or include it from a CDN. Websites using Bootstrap generally include Bootstrap CSS and JavaScript, add a viewport meta tag, and wrap content in containers to create responsive layouts.

Bootstrap 3Lanh Le

This document provides an overview and demonstration of Bootstrap, an open-source front-end framework for developing responsive, mobile-first web sites and applications. It discusses Bootstrap's support for responsive design using LESS, its grid system, and included UI components like buttons, forms, navigation, and more. The document also demonstrates how to get started with a basic Bootstrap template and use its grid system, breakpoints, containers and columns. Finally, it mentions some tools for working with Bootstrap and provides details on Font Awesome, an icon library that is often used along with Bootstrap.

Html5 and-css3-overviewJacob Nelson

HTML Introduction, HTML History, HTML Uses, HTML benifitsPro Guide

JavaScript BasicFinsa Nurpandi

Advanced Cascading Style Sheetsfantasticdigitaltools

Bootstrap gridsWebtech Learning

Introduction to HTML5Gil Fink

The document is a presentation on HTML5 that covers: - What HTML5 is and why to use it - New HTML5 structural elements, forms, multimedia elements, and JavaScript APIs - Demonstrations of HTML5 features like Canvas, SVG, Geolocation, Web Workers, and Web Sockets - How CSS3 enhances HTML5 with features like media queries, colors, animations and more - Strategies for implementing HTML5 into websites while maintaining compatibility

Web 3.0 presentationmcdowellmike

Web 1.0 allowed only one-way consumption of content while Web 2.0 enabled user-generated content through tools like blogs and social media. Web 3.0 will connect all this data through applications and widgets that are location-aware and personalized. It will understand semantics to provide intelligent, contextualized search and recommendations tailored to individual users through social profiles and activity on various connected devices and platforms. Commerce will also change as companies target niche audiences through new forms of advertising integrated with popular personalities and content.

Intro to HTML and CSS basicsEliran Eliassy

This document provides an overview of HTML and CSS topics including: - A brief history of HTML and CSS standards from 1990 to present. - Descriptions of common HTML elements like <body>, <head>, <img>, <a>, and lists. - Explanations of CSS concepts like selectors, properties, units, positioning, and layout fundamentals. - Details on CSS topics like the box model, centering content, semantic HTML, and flexbox. The document serves as a course outline or reference for learning HTML and CSS fundamentals.

Introduction to BootstrapCollaboration Technologies

Bootstrap is the popular HTML, CSS and JavaScript framework for developing a responsive and mobile friendly website. Bootstrap all topics of Bootstrap such as jumbotron, table, button, grid, form, image, alert, wells, container, carousel, panels, glyphicon, badges, labels, progress bar, pagination, pager, list group, dropdown, collapse,tabs, pills, navbar, inputs, modals, tooltip, popover and scrollspy.

Introduction to BootstrapRon Reiter

This document provides an introduction to Bootstrap, an open-source front-end framework for building responsive mobile-first websites and web applications. It discusses the basics of web development using HTML, CSS, and JavaScript. It then explains what Bootstrap is, how to add it to a website, and how to use its grid system, forms, buttons, and other common elements. Resources for using, customizing and finding additional components for Bootstrap are also provided.

Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...Cedric Spillebeen

More Related Content

What's hot (20)

Bootstrap seminar presentationPratikDoiphode1

Bootstrap PPT by MukeshMukesh Kumar

Bootstrap Web Development FrameworkCindy Royal

Bootstrap 3McSoftsis

BootstrapAvinashChunduri2

Introduction to Tailwind CSS - IM Tech Meetup - May 2022.pptxIlesh Mistry

Tailwind: The Future of CSS is Here!Abdullah Al Mahi

Responsive web-design through bootstrapZunair Sagitarioux

HTML Basic, CSS Basic, JavaScript basic.Beqa Chacha

Bootstrap.pptxvishal choudhary

Bootstrap 3Lanh Le

Html5 and-css3-overviewJacob Nelson

HTML Introduction, HTML History, HTML Uses, HTML benifitsPro Guide

JavaScript BasicFinsa Nurpandi

Advanced Cascading Style Sheetsfantasticdigitaltools

Bootstrap gridsWebtech Learning

Introduction to HTML5Gil Fink

Web 3.0 presentationmcdowellmike

Intro to HTML and CSS basicsEliran Eliassy

Introduction to BootstrapCollaboration Technologies

Bootstrap seminar presentationPratikDoiphode1

Bootstrap PPT by MukeshMukesh Kumar

Bootstrap Web Development FrameworkCindy Royal

Bootstrap 3McSoftsis

BootstrapAvinashChunduri2

Introduction to Tailwind CSS - IM Tech Meetup - May 2022.pptxIlesh Mistry

Tailwind: The Future of CSS is Here!Abdullah Al Mahi

Responsive web-design through bootstrapZunair Sagitarioux

HTML Basic, CSS Basic, JavaScript basic.Beqa Chacha

Bootstrap.pptxvishal choudhary

Bootstrap 3Lanh Le

Html5 and-css3-overviewJacob Nelson

HTML Introduction, HTML History, HTML Uses, HTML benifitsPro Guide

JavaScript BasicFinsa Nurpandi

Advanced Cascading Style Sheetsfantasticdigitaltools

Bootstrap gridsWebtech Learning

Introduction to HTML5Gil Fink

Web 3.0 presentationmcdowellmike

Intro to HTML and CSS basicsEliran Eliassy

Introduction to BootstrapCollaboration Technologies

Viewers also liked (20)

Introduction to BootstrapRon Reiter

Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...Cedric Spillebeen

Design for Developers: Introduction to Bootstrap 3John Bertucci

As web developers, we might not always have experience or training with principles of design. This presentation's goal is introduce some basic design principles and provide some resources to help developers create better designs or at least become more aware of design. Finally, the end of the presentation will introduce Bootstrap 3 in more of a workshop format. I'll show people who to add Bootstrap to their project and how easy it is to apply some basic design.

Bootstrap 3 Basic - Bangkok WordPress MeetupWoratana Perth Ngarmtrakulchol

This document provides an overview and examples of Bootstrap, an open-source front-end framework for building responsive mobile-first websites and web apps. It discusses what Bootstrap is, the pre-built HTML and CSS components it contains, how to use its grid system including different screen sizes, and provides examples of websites built with Bootstrap. The speaker is Woratana Ngarmtrakulchol, a front-end developer and founder of Designil.com who is interested in topics like WordPress, front-end development, and web design.

Refreshing Your UI with HTML5, Bootstrap and CSS3Matt Raible

Many startups and open source projects have the luxury of starting greenfield projects. Unfortunately, the corporate world rarely works this way. It's more maintenance coding and a few new features every now and then. This session covers how you can use three of the hottest technologies (HTML5, CSS3 and Bootstrap) to spruce up a legacy application. It describes a real-world situation where a redesign was implemented in a few short weeks, making an old site look brand new. It also does a deep dive into Bootstrap, explains LESS, and shows pitfalls with older browsers. After this session, you'll be motivated to integrate Bootstrap into your applications and turn that legacy UI into something sexy! See blog post about this presentation at http://raibledesigns.com/rd/entry/my_bootstrap_presentation_from_html5.

Introduction to Twitter's Bootstrap 2Julien Renaux

Building a Moodle theme with bootstrapBas Brands

This document summarizes the history and development of the Bootstrap theme for Moodle. It discusses how the theme was originally developed during a Moodle conference by several developers. The Bootstrap theme was later adopted into the Moodle core as the "bootstrapbase" theme in version 2.5. The theme allows other themes like "Clean" to be built upon it. It provides templates and styles based on the Twitter Bootstrap framework to help developers create interfaces without design skills. Future development of the Bootstrap theme for Moodle includes improved styling for editors, accordion layouts, course progress indicators, and search functionality.

Wordpress Underscores & foundation5Aum Watcharapol

Underscores is a starter theme that can help build the next great WordPress theme without needing PHP or programming knowledge. Foundation 5 is a front-end framework that uses a mobile-first and responsive grid approach. It has new features like fast click, off canvas, GPU acceleration and interchange. Foundation 5 emphasizes building interfaces for mobile screens first before larger displays using a bottom-up approach.

Bootstrap tutorialvijaypatel_b

Bootstrap is a popular front-end framework for building responsive mobile-first websites and web applications. It includes HTML and CSS templates for common user interface components as well as optional JavaScript plugins. The Bootstrap framework utilizes a 12-column responsive grid system for building layouts of all sizes. This tutorial covers how to set up the Bootstrap environment and use various Bootstrap components, plugins, and the grid system to easily create responsive websites.

Bootstrap 4 Tutorial PDF for Beginners - Learn Step by StepBootstrap Creative

Bootstrap [part 2]Ghanshyam Patel

Responsive Design - Planning, Execution, Management with Bootstrap 3Eric Carlisle

In only the last few years, Responsive Design patterns and paradigms have brought forth spectacular, sweeping changes in UI web production. The demands for device-compliance as well as the always-growing mobile market have made Responsive Design a necessity for many websites and web applications. While taking the Responsive approach may offer incredible opportunities, it also carries a gamut of challenges. This presentation will cover best practices for the planning, production, and management of Responsive websites. It will also serve as an introduction to Responsive website creation using the Bootstrap 3 framework. We will explore the mechanics of the Bootstrap grid and explore how it may be used to create robust, flexible Responsive layouts. Topics central to the presentation include mobile-first production, content focus, site maintainability and performance.

BootstrapJadson Santos

Bootstrap is a free front-end framework for building responsive, mobile-first websites and web apps. It contains HTML and CSS-based design templates and components for things like typography, forms, buttons, navigation, and other interface components, as well as optional JavaScript extensions. Bootstrap features responsive grid system, tables, forms, buttons, navigation and other elements for developing responsive web pages and applications. It helps developers design websites faster without writing much custom CSS code.

Twitter bootstrap tutorialManinder Singh

twitter bootstrap tutorial, twitter bootstrap tutorial for starter, twitter bootstrap tutorial for beginners, twitter bootstrap download, twitter bootstrap grid system, twitter bootstrap versions, twitter bootstrap helps in web development and designing, twitter bootstrap definition, twitter bootstrap latest version, twitter bootstrap , why we use twitter bootstrap, twitter bootstrap history, twitter bootstrap features, twitter bootstrap tutorial audience, twitter bootstrap essential things, twitter bootstrap grid system

Responsive WebdesignAntonio De Pasquale

Ready for responsive? It’s not just about layout design: a responsive redesign will raise challenges with your content strategy, layout organization, cms and technology solution. This workshop introduces attendees to the mindset and techniques necessary for embracing the fluid nature of the web. This half-day session will review the basic principles of responsive web design, including addressing topics such as user experience and best practices, grid design and rapid prototyping techniques.

Responsive DesignSara Cannon

Websites are all about content. People can access your content many different ways and formats with mobile devices, iPads, phones, etc. The questions are: how can we maintain control over the display of our content and keep our brand consistent? How can we try to provide the best user experience on any platform? Enter Responsive Web Design. Many experts are not leaning on one static design but on structured content that adapts to its given environment. In this talk, we are going to take a look at responsive web design techniques out there including: progressive enhancement, flexible grids, media queries, flexible images & video, & other methods of implementation.

BootstrapFajar Baskoro

The document discusses how to better serve mobile users by building responsive websites and applications. It introduces responsive design, which provides an optimal viewing experience across devices. Key elements of responsive design include fluid grids, resizable images, and media queries. Popular frameworks like Twitter Bootstrap are introduced that help build responsive sites using fluid grids, predefined styles, and support for all browsers.

Angular testingYu Jin

Internship - Bootstraptanay29

The internship summary is as follows: 1) The internship was at VIPSha Inc. in San Diego where the intern learned HTML, CSS, and Bootstrap coding languages. 2) Bootstrap is a coding language that uses HTML, CSS, and JavaScript to create responsive websites that automatically resize for different devices. 3) The intern learned to code responsive websites using Bootstrap's grid system and predefined classes to make sites compatible across different screens like mobile and desktop.

The Technology Springboard: How Law Librarians Can Bootstrap Their FutureSteve Matthews

Introduction to BootstrapRon Reiter

Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...Cedric Spillebeen

Design for Developers: Introduction to Bootstrap 3John Bertucci

Bootstrap 3 Basic - Bangkok WordPress MeetupWoratana Perth Ngarmtrakulchol

Refreshing Your UI with HTML5, Bootstrap and CSS3Matt Raible

Introduction to Twitter's Bootstrap 2Julien Renaux

Building a Moodle theme with bootstrapBas Brands

Wordpress Underscores & foundation5Aum Watcharapol

Bootstrap tutorialvijaypatel_b

Bootstrap 4 Tutorial PDF for Beginners - Learn Step by StepBootstrap Creative

Bootstrap [part 2]Ghanshyam Patel

Responsive Design - Planning, Execution, Management with Bootstrap 3Eric Carlisle

BootstrapJadson Santos

Twitter bootstrap tutorialManinder Singh

Responsive WebdesignAntonio De Pasquale

Responsive DesignSara Cannon

BootstrapFajar Baskoro

Angular testingYu Jin

Internship - Bootstraptanay29

The Technology Springboard: How Law Librarians Can Bootstrap Their FutureSteve Matthews

Similar to Introduce Bootstrap 3 to Develop Responsive Design Application (20)

Become a HTML5 SpecialistTekno Point

This document provides information about an HTML5 training course offered by Tekno Point. The summary is: Tekno Point offers a 4-month HTML5 specialist training course that teaches students the latest HTML5, CSS3, and JavaScript skills needed to build responsive mobile-friendly websites and apps. The course covers tools like Adobe Dreamweaver and frameworks like Bootstrap. It includes workshops on publishing websites, project management, and work ethics. Upon completion, students receive placement support to find jobs utilizing their new HTML5 skills.

Beyond Branding SharePoint - SharePoint and Today's WebEric Overfield

How does your SharePoint site handle the growing number of devices that are or will be soon accessing your site? Traditional branding for SharePoint has its shortcomings with modern devices. In this session we will review available options to enhance SharePoint and create a unified experience across modern internet devices with an in-depth review of current trends and how to utilize them in your current or upcoming SharePoint project. We will finish by considering how this might be impacted by SharePoint 2013. Session Take-aways: As an introduction session to modern Internet devices and how they affect the presentation of a SharePoint 2010 site, each attendee should leave the session with a solid understanding of how different devices and viewports treat SharePoint including the good and the bad. Further they will have been exposed to multiple techniques and methods in which SharePoint can be modified to enhance SharePoint for modern Internet devices including tablets and smartphones with a look at the benefits and shortcomings of each method. After a review of SharePoint 2013's addition of devices channels, attendees will also learn how to leverage this new understanding of Internet devices with device channels for a truly usable, maintainable SharePoint branding initiative moving forward. Highlights: Learn the shortcomings of SharePoint's interface with modern Internet devices. See modern techniques Branding experts use to solve the mobile problems. Find out how to leverage this knowledge in SharePoint 2010 and SharePoint 2013.

Does your website have these elements of responsive web design? Experience Dynamics

Experience Dynamics web seminar. With 50% of Americans now owning smartphones, and much of our Web browsing occurring on mobile devices, websites are running into a common issues affecting the underlying user experience: how does our design look across devices? How compatible or pleasant is it to view, read and browse? To solve this problem, many organizations including the largest companies in the world, are turning to Responsive Web Design.

Built Cross-Platform Application with .NET Core Development.pdfI-Verve Inc

.NET Core is an open-source framework that allows developers to build cross-platform applications that run on Windows, Linux, and macOS. It supports command-line programs, libraries, web APIs, and ASP.NET Core web applications. .NET Core enables the creation of mobile, web, cloud, game, AI, and IoT applications with greater flexibility. Popular cross-platform frameworks include React Native, Flutter, Cordova, and Ionic. ASP.NET Core is well-suited for building enterprise-grade cross-platform applications due to its cross-platform capabilities, flexible deployment, modularity, open source nature, and support for microservices architectures.

Practical Design and Development with Flash on Mobile and DevicesChris Griffith

The Flash player is on hundreds of millions of mobile and other non-PC devices. It is a great runtime to quickly create effective applications and compelling experiences targeting both mobile and other device platforms. Attend this session to take a journey through the pains and pleasures of design and development with the Flash Platform across mobile and devices. The session will cover: application design and development with Flash and ActionScript, testing with Adobe Device Central, and deploying to device.

QuickSoft Mobile Tips & Tricks 11-03-10Almog Koren

Hire React JS DevelopersRegumsoft Technologies

Are you looking for an efficient and innovative React JS development company? Then, look no further! At Regum Soft Technologies, we offer the latest technology with a creative touch to all of our projects. We are dedicated to providing the best in class web applications to our clients by designing, developing and integrating them with ease. For more visit our website: https://regumsoft.com/service/mobile-app-development/

Ionic App Platform Overview Ionic Framework

This webinar presentation introduces the Ionic App Platform, which provides tools and services for building mobile and progressive web apps. The platform includes Ionic Framework for building interfaces with UI components, gestures, and adaptive styling, Ionic Studio for visual development, Ionic Native for access to device capabilities, and Ionic Appflow for deploying apps. The presentation demonstrates these tools and discusses how Ionic addresses the challenges of cross-platform mobile development while allowing the use of popular frameworks like Angular, React, and Vue.

Videogram - Building a product with Sencha TouchAlexander Wilhelm

Cinemacraft is a video technology company established in 2010 with offices in Tokyo and LA. Their flagship product is Videogram, which allows users to browse and interact with videos in a similar way as photos. It uses algorithms to break videos down into frames that can be commented on individually. They chose to develop Videogram and their other products using Sencha Touch for its cross-platform capabilities. Their development process involves initial testing in the browser followed by testing on actual devices using PhoneGap.

Enhancing SharePoint with Responsive Web DesignEric Overfield

One of the hottest topics in Web Design over the last few years has been Responsive Web Design (RWD). The theory of one site structure for current web devices, including tablets and smartphones, has also attracted SharePoint developers, but the complexity of RWD has been a stumbling block. In this session we will start with an overview of what is Responsive Web Design followed by an in-depth look into the pros and cons of applying a responsive design on SharePoint. We will then dive into the code and learn how to create a SharePoint site that is both responsive and attractive. We will finish with a look at SharePoint 2013 and Device Channels, and review how Responsive Web Design can play a role in current and future SharePoint Branding projects. Session Take-aways: Building off what was learned in the previous session, Branding SharePoint for Evolving Internet Devices, this session is geared towards web developers, programmers and IT to learn "how" to code for modern Internet devices. Attendees will have been exposed to not only what Responsive Web Design is and how it functions, but also how to apply it directly to SharePoint. As with all techniques, there are pros and cons to Responsive Web Design, not only in general but also how it is applied to, and utilized by SharePoint. After a thorough review and multiple demos attendees will have seen the code and learned what to expect. Finally attendees will learn how SharePoint 2013 handles mobile computing and how Responsive Web Design can help solve SharePoint 2013's mobile computing shortcomings. Highlights: Find out what the hot web design topic Response Web Design is all about. See how to utilize Response Web Design in your SharePoint project. Learn how to leverage this knowledge in SharePoint 2013 as well.

GameVerse app which is made in react native.moh2003it

**GameVerse App in React Native** ### **Introduction** GameVerse is a comprehensive mobile application designed for gamers to explore, discuss, and stay updated on the latest trends in the gaming world. Developed using React Native, it provides a seamless cross-platform experience for both iOS and Android users. --- ## **Key Features** 1. **Game Library** - Browse a vast collection of games with detailed descriptions, ratings, and reviews. 2. **User Profiles** - Create and customize personal profiles. 3. **Community Forums** - Engage in discussions, post reviews, and connect with fellow gamers. 4. **Game News** - Stay updated with the latest gaming news and announcements. 5. **Achievements & Leaderboards** - Track gaming achievements and compare rankings. 6. **Game Recommendations** - Personalized game suggestions based on user preferences. --- ## **Technology Stack** - **Frontend**: React Native, TypeScript - **Backend**: Node.js, Express.js - **Database**: MongoDB - **Authentication**: Firebase Authentication - **State Management**: Redux - **API Management**: Axios - **Push Notifications**: Firebase Cloud Messaging (FCM) --- ## **App Structure** ### **1. Navigation** - React Navigation is used for screen transitions and navigation. - Stack Navigator and Bottom Tab Navigator for easy movement across screens. ```tsx import React from 'react'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { NavigationContainer } from '@react-navigation/native'; import HomeScreen from './screens/HomeScreen'; import ProfileScreen from './screens/ProfileScreen'; const Tab = createBottomTabNavigator(); export default function App() { return ( <NavigationContainer> <Tab.Navigator> <Tab.Screen name="Home" component={HomeScreen} /> <Tab.Screen name="Profile" component={ProfileScreen} /> </Tab.Navigator> </NavigationContainer> ); } ``` --- ### **2. UI Components** - Reusable components are used to maintain a clean structure. - Components like `GameCard`, `Button`, and `ProfileHeader` ensure consistent design. ```tsx import React from 'react'; import { View, Text, Image, StyleSheet } from 'react-native'; const GameCard = ({ game }) => { return ( <View style={styles.card}> <Image source={{ uri: game.image }} style={styles.image} /> <Text style={styles.title}>{game.title}</Text> </View> ); }; const styles = StyleSheet.create({ card: { padding: 10, backgroundColor: '#fff', borderRadius: 8 }, image: { width: '100%', height: 150, borderRadius: 8 }, title: { marginTop: 10, fontSize: 16, fontWeight: 'bold' }, }); export default GameCard; ``` --- ### **3. API Integration** - Axios is used for API requests to fetch game data from the backend. ```tsx import axios from 'axios'; export const fetchGames = async () => { try { const response = await axios.get('https://api.gameverse.com/games'); return response.data; } catch (error) { console.

React Native for React Developers v.2.0.pdfNikolaGorgiev

Flutter App Development- Why Should You Choose It .Techugo

Flutter is a portable UI platform that lets you create native-like apps for mobile, desktop and web. It can be used from a single codebase. It’s based on the Dart programming language and includes Cupertino and Material Design widgets. As a result, flutter developers can create stunning UI that feels and looks native. It works on all platforms regardless of whether you only use one codebase. Flutter is the only framework to offer a mobile SDK, without the need for a Javascript bridge.

tTecniche di sviluppo mobile per share point 2013 e office 365 Fabio Franzini

This document discusses techniques for developing mobile apps for SharePoint 2013 and Office 365. It covers the mobile browsing experience in SharePoint 2013 including the contemporary view and device channels. It also discusses publishing infrastructure, image renditions, and using Bootstrap to create responsive designs for SharePoint. The document demonstrates some of these techniques and provides recommendations on when to use device channels versus responsive design.

RESPONSIVE WEB DESIGNNAWAZ KHAN

The document provides a history of responsive web design, beginning with the creation of the world wide web in 1989. It discusses the early text-based web pages and browsers and the evolution of web design with the addition of images and tables. The "browser wars" of the late 1990s drove innovation, and the introduction of CSS helped separate design from HTML. Responsive design emerged as a solution to designing for various screen sizes and mobile devices. The history outlines key events, technologies, and changes in web design from the 1990s to the present.

Top mobile app development frameworks to consider in 2021Katy Slemon

Wunderman - Responsive Designnrgza

Responsive design is an approach to building websites that automatically adapts content and layout to different screen sizes and devices. It allows a single website to be accessed from any device without needing separate mobile sites. The benefits are that it future-proofs sites, provides a consistent user experience across devices, and reduces costs by only needing to update content in one place. When deciding whether to use responsive design, it is suitable for new medium to large sites and site redesigns, but not for existing non-responsive sites.

Wunderman Responsive Designnrgza

React Native Vs. Flutter Vs. Ionic: Which Is the Best Cross-Platform Framework?Lucy Zeniffer

5 Reasons to go ResponsiveTier10

Become a HTML5 SpecialistTekno Point

Beyond Branding SharePoint - SharePoint and Today's WebEric Overfield

Does your website have these elements of responsive web design? Experience Dynamics

Built Cross-Platform Application with .NET Core Development.pdfI-Verve Inc

Practical Design and Development with Flash on Mobile and DevicesChris Griffith

QuickSoft Mobile Tips & Tricks 11-03-10Almog Koren

Hire React JS DevelopersRegumsoft Technologies

Ionic App Platform Overview Ionic Framework

Videogram - Building a product with Sencha TouchAlexander Wilhelm

Enhancing SharePoint with Responsive Web DesignEric Overfield

GameVerse app which is made in react native.moh2003it

React Native for React Developers v.2.0.pdfNikolaGorgiev

Flutter App Development- Why Should You Choose It .Techugo

tTecniche di sviluppo mobile per share point 2013 e office 365 Fabio Franzini

RESPONSIVE WEB DESIGNNAWAZ KHAN

Top mobile app development frameworks to consider in 2021Katy Slemon

Wunderman - Responsive Designnrgza

Wunderman Responsive Designnrgza

React Native Vs. Flutter Vs. Ionic: Which Is the Best Cross-Platform Framework?Lucy Zeniffer

5 Reasons to go ResponsiveTier10

More from eXo Platform (19)

Workshop blockchain au service de l engagement - 20-3-2019eXo Platform

Digitalisation RH –Avec ou sans les DRHeXo Platform

De l'Intranet institutionnel à la Digital Workplace : la démarche du groupe d...eXo Platform

L’Intranet, socle de l’entreprise digitale !eXo Platform

Un hub collaboratif unique et intégré : les pour et les contreeXo Platform

Intranet Project: Roll-out Strategy & Pain Points to considereXo Platform

How we migrate 350+ Maven CI jobs to Pipeline as Code with Jenkins 2 and DockereXo Platform

Peut-on décider un changement de culture d'entreprise? eXo Platform

Conférence sur la Digital Workplace au Salon Intranet & CollaboratifeXo Platform

Digital Workplace : comment nous avons réalisé notre analyse de besoins et rédigé le Cahier des Charges » ? Christine Truffault de Rennes Metropole, accompagnée de Charles Magral, partage l’approche originale que son organisation a adopté afin de faire émerger les besoins de leurs utilisateurs et de choisir leur outil. La conférence a eu lieu Mercredi 22 Mars au Salon Intranet & Collaboratif à Paris Porte de Versailles.

eXo Platform - Votre plateforme de travail collaboratifeXo Platform

eXo Platform 4.4 Released: Work Better with More Context!eXo Platform

When Collaboration Drives Your Digital TransformationeXo Platform

Solutions to your employee disengagementeXo Platform

eXoer on the grill: eXo Add-ons factory using Docker and CodenvyeXo Platform

Few months ago, Codenvy released a great tutorial about “Creating an eXo Factory Using Codenvy and Docker” http://blog.codenvy.com/creating-codenvy-factory-exo-extensions-development which gave great details about how eXo, Codenvy and Docker can work together to give developers an easy way to code eXo add-ons. In this presentation we will bring insights about how we used Codenvy’s Factories (with Docker recipes) to give developers a one-click easy way to begin coding eXo Add-ons. eXoers on the Grill aims to provide some incentive & fresh air for our staff in order to constantly re-think our methods, spread good practices, promote some technology or tools, generate ideas, etc... All the teams are invited to contribute by picking up some hot topics of their choice and spread to other teams.

CRaSH the shell for the Java Virtual MachineeXo Platform

A presentation from Julien Viet - www.exoplatform.com CRaSH is the open source shell for the JVM. The shell can be accessed by various ways, remotely using network protocols such as SSH, locally by attaching a shell to a running virtual machine or via a web interface. Commands are written Groovy and can be developed live making the extensibility of the shell easy with quick development cycles. Since the version 1.3, the REPL also speaks the Groovy language, allowing Groovy combination of command using pipes. CRaSH comes with commands such as thread management, log management, database access and JMX. The session will begin with an introduction to the shell. The main part of the session will focus on showing CRaSH commands development with few examples, showing how easy and powerful the development is. The audience will learn how to use CRaSH for their own needs: it can be a simple usage or more advanced like developing a command or embedding the shell in their own runtime like a web application or a Grails application.

Hands on iOS developments with JenkinseXo Platform

CRaSH @ JUGSummerCamp 2012 - QuickieeXo Platform

Modèles Business Open Source - Success story eXoeXo Platform

Performance testing and_reporting_with_j_meter by Le Van NghieXo Platform