Potancok prototyping-with-bootstrap-less-ver2

•

1 like•1,210 views

vibration.sk

prototyping in bootstrap and less

Technology Education

Prototyping !
with Bootstrap & Less
Ivan Potančok"
CEO of vibration.sk

Prototyping with Bootstrap & Less
1.  Design process
2.  Framework
3.  Less
4.  Case studies

Voting
1.  Designer
2.  Web designer
3.  UX designer

3. Prototype - Bootstrap & Less
Conditions"
"
1. knowledge of HTML + CSS
2. learn framework markup
3. learn Less for faster styling

from sketch to interactive prototype
1.  Not pretty, but works
2.  Testable
3.  Static with fake data
4.  One codebase for all devices
5.  Don’t reinveting the wheels - !
use patterns

Bootstrap & Less - Advantages
1.  Clickable prototype
2.  Early state
3.  Open source
4.  Reuse of code in next development
5.  Client can imagine how it will works
6.  Responsive, Bootstrap 3 - mobile ﬁrst
7.  Design patterns
8.  Glyphicons

Why Less?
1.  Bootstrap is compiled from Less
2.  Less is faster than Sass
3.  Variables
4.  Mixins
5.  Functions
6.  Operations

Example of code – three columns
<div class="row">
<div class="col-lg-4">
<h2>Heading</h2>
<p>Content</p>
<p><a class="btn btn-primary" href="#">View details
»</a></p>
</div>

Case study 1
Administration area for eshop system
No photoshop, no axure, just sketches

Case study 2
First page in Photoshop
Everything else in Bootstrap and Less
Web application for social driving

Case study 3
Just Bootstrap and Less
Web application for e-learning
YII bootstrap extension – generate CRUD in
Bootstrap

Case study 3
This
generate our
backend
programmer

Case study 4
Design in Photoshop
WordPress themes on Themeforest
Bootstrap & Less as core for templates

GUI for non coders
h"ps://jetstrap.com

h"p://www.layou5t.com/

h"p://www.divshot.com/

What we’ve learned
It is not for everyone "
designers without knowledge to code project
managers can’t change prototype

Better for client"
can open test URL on his own device

Faster
it looks like web
reuse prototype code in development

Not for mobile apps"

Thank you
www.vibration.sk
@ivusko
Let’s try it …"

Similar to Potancok prototyping-with-bootstrap-less-ver2

LogiLogicless UI prototyping with Node.js | SuperSpeaker@CodeCamp Iasi, 2014

Endava

Learn how to use CSS and JS frameworks in mobile Domino apps. This edited ConnectED presentation shows real world applications using some of these powerful frameworks inside Domino. Learn the integration of Bootstrap, Ratchet.js, Knockout.js, Backbone.js, Underscore.js, jQuery.js, Zepto.js and more! The full slide deck is available for free download in our IBM ConnectED community on SocialBiz User Group; make sure to be signed in to your free account to get download access here https://reg.socialbizug.org/wispubs/socbizwidgets.nsf/homepage.xsp.

Tip from ConnectED 2015: How to Use Those Cool New Frameworks in Mobile Domin...

SocialBiz UserGroup

Prototyping for responsive web design

mrscammels

Software can easily become complex and difficult to handle - join this session to learn techniques on how to manage and prevent this. You will see how test seams for ABAP simplify unit tests, even in legacy ABAP code with many dependencies. We will demonstrate an OpenSource tool to automatically generate dependency graphs and use it in projects, and the main technique for working with legacy code - writing a characterization test and using it as safety net while making changes. This presentation was given at the SAP TechED Barcelona 2017

Survive the Chaos - S4H151 - SAP TechED Barcelona 2017 - Lecture

Rainer Winkler

In this session, we will walk through building a REST API from scratch with the MEAN stack using the test-driven development approach. We’ll cover MongoDB’s document model, the Mongoose object document mapper, and testing with Mocha and Superagent as we build a mobile shopping cart application. You'll walk away with an understanding of how to build your first app on MongoDB using the MEAN stack.

Webinar: Get Started with the MEAN Stack

MongoDB

Bootstrap for Beginners

D'arce Hess

Introduction to UX for Mesiniaga Academy

Zainul Zain

Bootstrap 3.0

Youwe Drecomm OOIP

Workshop About Software Engineering Skills 2019

PhuocNT (Fresher.VN)

[Pinto] Is my SharePoint Development team properly enlighted?

European Collaboration Summit

“One man” development process model

Silicon Straits

Rapid and Responsive - UX to Prototype with Bootstrap

Josh Jeffryes

LAMP is so yesterday, MEAN is so tomorrow! :)

Sascha Sambale

June2011_SketchFlow_v2

Reuben Ahmed

Learn how to design a web solution that exploits the ASP.NET stack: in this talk we’ll find out how to set up an effective, idiomatic design that take advantage of both “out of the box” tools (e.g. MVC, Entity Framework) and bleeding edge, third party ones. Needing a SPA? We’ll understand how to take advantage of existing toolkits. Responsive design? Let’s talk Bootstrap looking at how it provides a useful and highly customizable taxonomy for UI elements. Having troubles implementing an efficient data access layer due to a lot of business rules? We’ll learn how to use LINQ as a mean to decompose those rules in simpler ones that can be composed in a flexible and efficient way. Are you concerned about performance and scalability issues? We’ll see how to implement CQRS in order to take advantage of ad hoc data models and introduce a service bus so to decouple front-end systems from back-end ones.

Architecting an ASP.NET MVC Solution

Andrea Saltarello

SharePoint and the User Interface with JavaScript

Regroove

Neoito — NativeScript Best Coding Practices

Neoito

Building landing pages at scale at InVision - No Code Conf 2019

Webflow

Hotel server management system

Somprakash Gupta

✍ Get free workshop bonus - https://bootstrapcreative.com/workshops/before-using-bootstrap-4/recording/ Web Development Tutorial Workshop for Beginners - Learn Responsive Web Design Basics with Bootstrap 4 Never built a website before and feeling overwhelmed? Learn how to get started building responsive websites with Bootstrap 4. Are you new to web development? Want to learn how to get started? During This Free 1 Hour Live Online Training, You Will Learn: - What responsive web design is and the benefits of using a frontend framework like Bootstrap 4. - What’s New in Bootstrap 4 and how it has improved over Bootstrap 3 - The responsive development process, and software tools necessary to make a responsive website efficiently and with fewer bugs. In addition to the training, there will be an opportunity for you to ask questions and interact with other students in the live chat. Who is this workshop for? For absolute beginners who have never built a responsive website before. Those who are learning web development fundamentals like HTML and CSS. Presented by: Jacob Lett Creator of BootstrapCreative I transitioned to frontend design/development after working as print graphic designer. I stumbled my way through books, online courses, and blog tutorials to finally get my first web development job. Learn More -)) https://bootstrapcreative.com/shop/

Web Development Tutorial Workshop for Beginners - Learn Responsive Web Design...

Bootstrap Creative

Similar to Potancok prototyping-with-bootstrap-less-ver2 (20)

LogiLogicless UI prototyping with Node.js | SuperSpeaker@CodeCamp Iasi, 2014

Tip from ConnectED 2015: How to Use Those Cool New Frameworks in Mobile Domin...

Prototyping for responsive web design

Survive the Chaos - S4H151 - SAP TechED Barcelona 2017 - Lecture

Webinar: Get Started with the MEAN Stack

Bootstrap for Beginners

Introduction to UX for Mesiniaga Academy

Bootstrap 3.0

Workshop About Software Engineering Skills 2019

[Pinto] Is my SharePoint Development team properly enlighted?

“One man” development process model

Rapid and Responsive - UX to Prototype with Bootstrap

LAMP is so yesterday, MEAN is so tomorrow! :)

June2011_SketchFlow_v2

Architecting an ASP.NET MVC Solution

SharePoint and the User Interface with JavaScript

Neoito — NativeScript Best Coding Practices

Building landing pages at scale at InVision - No Code Conf 2019

Hotel server management system

Web Development Tutorial Workshop for Beginners - Learn Responsive Web Design...

Recently uploaded

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024

The Digital Insurer

Webinar Recording: https://www.panagenda.com/webinars/why-teams-call-analytics-is-critical-to-your-entire-business Nothing is as frustrating and noticeable as being in an important call and being unable to see or hear the other person. Not surprising then, that issues with Teams calls are among the most common problems users call their helpdesk for. Having in depth insight into everything relevant going on at the user’s device, local network, ISP and Microsoft itself during the call is crucial for good Microsoft Teams Call quality support. To ensure a quick and adequate solution and to ensure your users get the most out of their Microsoft 365. But did you know that ‘bad calls’ are also an excellent indicator of other problems arising? Precisely because it is so noticeable!? Like the canary in the mine, bad calls can be early indicators of problems. Problems that might otherwise not have been noticed for a while but can have a big impact on productivity and satisfaction. Join this session by Christoph Adler to learn how true Microsoft Teams call quality analytics helped other organizations troubleshoot bad calls and identify and fix problems that impacted Teams calls or the use of Microsoft365 in general. See what it can do to keep your users happy and productive! In this session we will cover - Why CQD data alone is not enough to troubleshoot call problems - The importance of attributing call problems to the right call participant - What call quality analytics can do to help you quickly find, fix-, and prevent problems - Why having retrospective detailed insights matters - Real life examples of how others have used Microsoft Teams call quality monitoring to problem shoot problems with their ISP, network, device health and more.

Why Teams call analytics are critical to your entire business

panagenda

Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving

Edi Saputra

Join our latest Connector Corner webinar to discover how UiPath Integration Service revolutionizes API-centric automation in a 'Quote to Cash' process—and how that automation empowers businesses to accelerate revenue generation. A comprehensive demo will explore connecting systems, GenAI, and people, through powerful pre-built connectors designed to speed process cycle times. Speakers: James Dickson, Senior Software Engineer Charlie Greenberg, Host, Product Marketing Manager

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...

DianaGray10

Created by Mozilla Research in 2012 and now part of Linux Foundation Europe, the Servo project is an experimental rendering engine written in Rust. It combines memory safety and concurrency to create an independent, modular, and embeddable rendering engine that adheres to web standards. Stewardship of Servo moved from Mozilla Research to the Linux Foundation in 2020, where its mission remains unchanged. After some slow years, in 2023 there has been renewed activity on the project, with a roadmap now focused on improving the engine’s CSS 2 conformance, exploring Android support, and making Servo a practical embeddable rendering engine. In this presentation, Rakhi Sharma reviews the status of the project, our recent developments in 2023, our collaboration with Tauri to make Servo an easy-to-use embeddable rendering engine, and our plans for the future to make Servo an alternative web rendering engine for the embedded devices industry. (c) Embedded Open Source Summit 2024 April 16-18, 2024 Seattle, Washington (US) https://events.linuxfoundation.org/embedded-open-source-summit/ https://ossna2024.sched.com/event/1aBNF/a-year-of-servo-reboot-where-are-we-now-rakhi-sharma-igalia

A Year of the Servo Reboot: Where Are We Now?

Igalia

2024: Domino Containers - The Next Step. News from the Domino Container commu...

Martijn de Jong

MySQL Webinar, presented on the 25th of April, 2024. Summary: MySQL solutions enable the deployment of diverse Database Architectures tailored to specific needs, including High Availability, Disaster Recovery, and Read Scale-Out. With MySQL Shell's AdminAPI, administrators can seamlessly set up, manage, and monitor these solutions, ensuring efficiency and ease of use in their administration. MySQL Router, on the other hand, provides transparent routing from the application traffic to the backend servers in the architectures, requiring minimal configuration. Completely built in-house and supported by Oracle, these solutions have been adopted by enterprises of all sizes for their business-critical applications. In this presentation, we'll delve into various database architecture solutions to help you choose the right one based on your business requirements. Focusing on technical details and the latest features to maximize the potential of these solutions.

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...

Miguel Araújo

Three things you will take away from the session: • How to run an effective tenant-to-tenant migration • Best practices for before, during, and after migration • Tips for using migration as a springboard to prepare for Copilot in Microsoft 365 Main ideas: Migration Overview: The presentation covers the current reality of cross-tenant migrations, the triggers, phases, best practices, and benefits of a successful tenant migration Considerations: When considering a migration, it is important to consider the migration scope, performance, customization, flexibility, user-friendly interface, automation, monitoring, support, training, scalability, data integrity, data security, cost, and licensing structure Next Wave: The next wave of change includes the launch of Copilot, which requires businesses to be prepared for upcoming changes related to Copilot and the cloud, and to consolidate data and tighten governance ShareGate: ShareGate can help with pre-migration analysis, configurable migration tool, and automated, end-user driven collaborative governance

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff

sammart93

The presentation explores the development and application of artificial intelligence (AI) from its inception to its current status in the modern world. The term "artificial intelligence" was first coined by John McCarthy in 1956 to describe efforts to develop computer programs capable of performing tasks that typically require human intelligence. This concept was first introduced at a conference held at Dartmouth College, where programs demonstrated capabilities such as playing chess, proving theorems, and interpreting texts. In the early stages, Alan Turing contributed to the field by defining intelligence as the ability of a being to respond to certain questions intelligently, proposing what is now known as the Turing Test to evaluate the presence of intelligent behavior in machines. As the decades progressed, AI evolved significantly. The 1980s focused on machine learning, teaching computers to learn from data, leading to the development of models that could improve their performance based on their experiences. The 1990s and 2000s saw further advances in algorithms and computational power, which allowed for more sophisticated data analysis techniques, including data mining. By the 2010s, the proliferation of big data and the refinement of deep learning techniques enabled AI to become mainstream. Notable milestones included the success of Google's AlphaGo and advancements in autonomous vehicles by companies like Tesla and Waymo. A major theme of the presentation is the application of generative AI, which has been used for tasks such as natural language text generation, translation, and question answering. Generative AI uses large datasets to train models that can then produce new, coherent pieces of text or other media. The presentation also discusses the ethical implications and the need for regulation in AI, highlighting issues such as privacy, bias, and the potential for misuse. These concerns have prompted calls for comprehensive regulations to ensure the safe and equitable use of AI technologies. Artificial intelligence has also played a significant role in healthcare, particularly highlighted during the COVID-19 pandemic, where it was used in drug discovery, vaccine development, and analyzing the spread of the virus. The capabilities of AI in healthcare are vast, ranging from medical diagnostics to personalized medicine, demonstrating the technology's potential to revolutionize fields beyond just technical or consumer applications. In conclusion, AI continues to be a rapidly evolving field with significant implications for various aspects of society. The development from theoretical concepts to real-world applications illustrates both the potential benefits and the challenges that come with integrating advanced technologies into everyday life. The ongoing discussion about AI ethics and regulation underscores the importance of managing these technologies responsibly to maximize their their benefits while minimizing potential harms.

Artificial Intelligence: Facts and Myths

Joaquim Jorge

Discord is a free app offering voice, video, and text chat functionalities, primarily catering to the gaming community. It serves as a hub for users to create and join servers tailored to their interests. Discord’s ecosystem comprises servers, each functioning as a distinct online community with its own channels dedicated to specific topics or activities. Users can engage in text-based discussions, voice calls, or video chats within these channels. Understanding Discord Servers Discord servers are virtual spaces where users congregate to interact, share content, and build communities. Servers may revolve around gaming, hobbies, interests, or fandoms, providing a platform for like-minded individuals to connect. Communication Features Discord offers a range of communication tools, including text channels for messaging, voice channels for real-time audio conversations, and video channels for face-to-face interactions. These features facilitate seamless communication and collaboration. What Does NSFW Mean? The acronym NSFW stands for “Not Safe For Work,” indicating content that may be inappropriate for professional or public settings. NSFW Content NSFW content encompasses material that is sexually explicit, violent, or otherwise graphic in nature. It often includes nudity, profanity, or depictions of sensitive topics.

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf

UK Journal

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024

The Digital Insurer

Boost Fertility New Invention Ups Success Rates.pdf

sudhanshuwaghmare1

Scaling API-first – The story of a global engineering organization

Radu Cotescu

Real Time Object Detection Using Open CV

Khem

MINDCTI Revenue Release Quarter One 2024

MIND CTI

This presentation explores the impact of HTML injection attacks on web applications, detailing how attackers exploit vulnerabilities to inject malicious code into web pages. Learn about the potential consequences of such attacks and discover effective mitigation strategies to protect your web applications from HTML injection vulnerabilities. for more information visit https://bostoninstituteofanalytics.org/category/cyber-security-ethical-hacking/

HTML Injection Attacks: Impact and Mitigation Strategies

Boston Institute of Analytics

Manulife - Insurer Innovation Award 2024

The Digital Insurer

Tata AIG General Insurance Company - Insurer Innovation Award 2024

The Digital Insurer

Strategies for Landing an Oracle DBA Job as a Fresher

Remote DBA Services

In this session, we will delve into strategic approaches for optimizing knowledge management within Microsoft 365, amidst the evolving landscape of Copilot. From leveraging automatic metadata classification and permission governance with SharePoint Premium, to unlocking Viva Engage for the cultivation of knowledge and communities, you will gain actionable insights to bolster your organization's knowledge-sharing initiatives. In this session, we will also explore how to facilitate solutions to enable your employees to find answers and expertise within Microsoft 365. You will leave equipped with practical techniques and a deeper understanding of how there is more to effective knowledge management than just enabling Copilot, but building actual solutions to prepare the knowledge that Copilot and your employees can use.

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...

Drew Madelung

Recently uploaded (20)

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024

Why Teams call analytics are critical to your entire business

Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...

A Year of the Servo Reboot: Where Are We Now?

2024: Domino Containers - The Next Step. News from the Domino Container commu...

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff

Artificial Intelligence: Facts and Myths

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024

Boost Fertility New Invention Ups Success Rates.pdf

Scaling API-first – The story of a global engineering organization

Real Time Object Detection Using Open CV

MINDCTI Revenue Release Quarter One 2024

HTML Injection Attacks: Impact and Mitigation Strategies

Manulife - Insurer Innovation Award 2024

Tata AIG General Insurance Company - Insurer Innovation Award 2024

Strategies for Landing an Oracle DBA Job as a Fresher

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...

Potancok prototyping-with-bootstrap-less-ver2

1. Prototyping ! with Bootstrap & Less Ivan Potančok" CEO of vibration.sk

2. Prototyping with Bootstrap & Less 1.  Design process 2.  Framework 3.  Less 4.  Case studies

3. Voting 1.  Designer 2.  Web designer 3.  UX designer

4. Design process in 2011

5. Design process in 2013

6. 3. Prototype - Bootstrap & Less Conditions" " 1. knowledge of HTML + CSS 2. learn framework markup 3. learn Less for faster styling

7. from sketch to interactive prototype

8. from sketch to interactive prototype 1.  Not pretty, but works 2.  Testable 3.  Static with fake data 4.  One codebase for all devices 5.  Don’t reinveting the wheels - ! use patterns

9. Bootstrap & Less - Advantages 1.  Clickable prototype 2.  Early state 3.  Open source 4.  Reuse of code in next development 5.  Client can imagine how it will works 6.  Responsive, Bootstrap 3 - mobile ﬁrst 7.  Design patterns 8.  Glyphicons

10. Why Less? 1.  Bootstrap is compiled from Less 2.  Less is faster than Sass 3.  Variables 4.  Mixins 5.  Functions 6.  Operations

11. Example of code – three columns <div class="row"> <div class="col-lg-4"> <h2>Heading</h2> <p>Content</p> <p><a class="btn btn-primary" href="#">View details »</a></p> </div>

12. Case study 1 Administration area for eshop system No photoshop, no axure, just sketches

13. Case study 1

14. Case study 1

15. Case study 1

16. Case study 2 First page in Photoshop Everything else in Bootstrap and Less Web application for social driving

17. Case study 2

18. Case study 3 Just Bootstrap and Less Web application for e-learning YII bootstrap extension – generate CRUD in Bootstrap

19. Case study 3 This generate our backend programmer

20. Case study 4 Design in Photoshop WordPress themes on Themeforest Bootstrap & Less as core for templates

21.

22. GUI for non coders h"ps://jetstrap.com h"p://www.layou5t.com/ h"p://www.divshot.com/

23. What we’ve learned It is not for everyone " designers without knowledge to code project managers can’t change prototype Better for client" can open test URL on his own device Faster it looks like web reuse prototype code in development Not for mobile apps"

24. Thank you www.vibration.sk @ivusko Let’s try it …"

Potancok prototyping-with-bootstrap-less-ver2

Recommended

Recommended

More Related Content

Similar to Potancok prototyping-with-bootstrap-less-ver2

Similar to Potancok prototyping-with-bootstrap-less-ver2 (20)

More from vibration.sk

More from vibration.sk (10)

Recently uploaded

Recently uploaded (20)

Potancok prototyping-with-bootstrap-less-ver2