Storytelling using Javascript HTML5 CSS3

Mar 19, 20113 likes3,541 views

This document discusses using JavaScript, HTML5 and CSS3 to create storytelling presentations from social media content stored in JSON format. It describes fetching a story's JSON data, using that data to populate an HTML template, and adding interactive behaviors. Images and avatars from the story's elements can be rendered in a slideshow with animated transitions, like the Ken Burns effect, for visually engaging story presentations. Open source templates and libraries are available to help build these types of interactive stories.

Storytelling
using Javascript, HTML5, CSS3

with

Storify
@xdamman - March 2011

http://storify.com/nzherald/reaction-to-japanese-tsunami

http://dl.dropbox.com/u/1702667/sites/kenburns/index.html

JSON/CSS3/JavaScript
is the new Model/View/Controller

Model: JSON
Story url + ‘.json’ - e.g. http://storify.com/nzherald/reaction-to-japanese-tsunami.json

...

http://storify.com/nzherald/reaction-to-japanese-tsunami.json

position index
of the story element (string)

Details of the
editor who
added this
element to the
story

image attached
to the element
(if any)

Normalized
details of the
story element
(title,
thumbnail,
description,
author)

Timestamps Number of seconds since January 1st 1970
(epoch time in To convert to Javascript date:
seconds) new Date(parseInt(story.elements[“3”].created_at,10)*1000);

http://storify.com/nzherald/reaction-to-japanese-tsunami

Story header
title, author,
published_at, description

Story element
source: ‘twitter’
elementClass: ‘tweet’

Story element
source: ‘facebook’
elementClass: ‘fbpost’

Story element
source: ‘twitter’
elementClass: ‘tweet’
image: src: ‘http://(...).jpg’

http://storify.com/nzherald/reaction-to-japanese-tsunami

Story element
source: ‘twitter’
elementClass: ‘tweet’
image: src: ‘http://(...).jpg’

Story element
source: ‘storify’
elementClass: ‘text’

Story element
source: ‘twitter’
elementClass: ‘tweet’

Controller: JavaScript

1. Fetch the model
jQuery> $.getJSON(storyurl+’.json?
callback=?’,function(storyurl) { });

2. Fill the HTML template with the story
jQuery> $(‘#story h1’).html(story.title);

3. Add extra behaviors, animations, ...

Sources available on
http://github.com/storify/templates

Storify
Social media stories

@xdamman - March 2011

The document discusses HTML marquee and image tags. It describes how to create a scrolling marquee using HTML tags, listing the marquee tag attributes like direction, behavior, and loop. It also discusses common image file formats like JPEG, GIF and PNG, their characteristics and uses. Finally, it explains how to insert images in web pages using the <img> tag and lists frequently used image tag attributes like src, width, height, border, alt and others.

How does a gender lens contribute to a healthy environment and healthy people...Jo Vearey

1) The document discusses how gender influences health and the environment in the context of migration, HIV/AIDS, and food security in South Africa. 2) It presents results from a household survey of 500 households in Johannesburg that show female-headed households are larger and women are more likely to feel at risk of HIV than men. 3) The study finds a need to consider women's multiple roles and vulnerabilities to design more effective health interventions for migrants, given trends toward more female migration and the burden of sickness.

Puppet on Windows: Now You're Getting Chocolatey PuppetConf2013Rob Reynolds

Rob Reynolds presented on using the Chocolatey package manager with Puppet on Windows. Chocolatey is like apt-get or yum but for Windows, allowing installation of programs and their versions to be managed. The Chocolatey module enables its use as a package provider in Puppet. While the built-in Windows package provider requires no setup, Chocolatey provides benefits like simple packaging and allowing version upgrades. Reynolds demonstrated using Chocolatey and Vagrant to configure a Windows system with Puppet.

Azure Web ScalabilityMatias Quaranta

The document discusses cloud scalability and services offered by Microsoft Azure. It describes how Azure App Services can be used to build and host web, API, mobile and logic apps that automatically scale based on demand. Specific Azure services highlighted include App Service Plans, Azure Redis Cache for caching, and Azure Search for search-as-a-service capabilities. The document provides examples of how these services can improve scalability and help applications adapt to increased usage.

Htmlcharu gupta

This document provides an introduction to creating web pages using HTML. It discusses the basic structure of an HTML document including the <head> and <body> tags. It describes important HTML elements like headings, paragraphs, lists, and images. It also covers formatting text using tags like <b>, <i> and inserting hyperlinks. The overall goal is to teach the basics of HTML to create simple yet effective web pages.

Scriptless Attacks - Stealing the Pie without touching the SillMario Heiderich

- The document discusses scriptless attacks that can bypass traditional XSS defenses like NoScript and XSS filters by leveraging new HTML5 and CSS features. - It presents several proof-of-concept attacks including using CSS to steal passwords, using SVG fonts to brute force CSRF tokens, and using custom fonts to leak sensitive information like passwords without using JavaScript. - The attacks demonstrate that even without scripting, features in HTML5 and CSS can be abused to conduct traditional XSS attacks and undermine security defenses, so more work is needed to protect against side-channels and unwanted data leakage from the browser.

ECMAScript 6 from an Attacker's Perspective - Breaking Frameworks, Sandboxes,...Mario Heiderich

ECMAScript 6, in short ES6, has been boiling in a copper pot for many years by now and step-by-step, browser vendors come forward to taste the first sips of this mystery soup. So, ES6 is no longer a theoretic language but already crawled across the doorstep and now lurks under your bed, ready for the nasty, waiting for the right moment to bite. Now, what is this whole ES6 thing? How did it develop and who made it? And why is it now implemented in your favorite browser? And what does it mean for web-security and beyond? This talk will answer these questions and showcase the new language from an attacker's perspective. You will see the new code constructs possible to be executed with ES6, new attack vectors and learn what you can do to tame that beast. Kafkaesque terminology such as expression interpolation, proper tail calls, computed properties, spread parameters, modules and tagged template strings will no longer be surprising you after attending this talk.

Enforcing Your Code of Conduct: effective incident responseAudrey Eschright

Presented at Open Source & Feelings 2015 in Seattle, WA. Video of the talk: http://confreaks.tv/videos/osfeels2015-enforcing-your-code-of-conduct-effective-incident-response Now that your event or project has a code of conduct, how do you ensure it's effective? Are you prepared to deal with incident reporting and to resolve issues that come up? How can you tell if your code of conduct is actually working? I'll draw on several years of experience working with code of conduct outreach and enforcement on open source projects, user groups, and a major conference to show you the steps to take to make sure your code of conduct is an effective tool for inclusion, safety, and building a stronger community. We'll talk about reporting processes, documentation, creating a team or committee to handle reports, what responses are or aren't effective, and dealing with problems in the heat of the moment.

Danger Of FreeAlex Iskold

Aristotle's Storytelling Framework for the WebJeroen van Geel

Stuff I've said to FOIA officers to get them to give me ... well, stuffCezary Podkul

Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...Mario Heiderich

The clipboard is one of the most commonly used tools across operating systems, window managers and devices. Pressing Ctrl-C and Ctrl-V has become so fundamentally important to productivity and usability that we cannot get rid of it anymore. We happily and often thoughtlessly copy things from one source and paste them into another. URLs into address-bars, lengthy commands into console windows, text segments into web editors and mail interfaces. And we never worry about security when doing so. Because what could possibly go wrong, right? But have we ever asked ourselves what the clipboard content actually consists of? Do we really know what it contains? And are we aware of the consequences a thoughtless copy&paste interaction can have? Who else can control the contents of the clipboard? Is it really just us doing Ctrl-C or is there other forces in the realm who are able to infect what we believe to be clean, who can desecrate what we trust so blindly that we never question or observe it? This talk is about the clipboard and the technical details behind it. How it works, what it really contains – and who can influence its complex range of contents. We will learn about a new breed of targeted attacks, including cross-application XSS from PDF, ODT, DOC and XPS that allow to steal website accounts faster than you can click, turn your excel sheet into a monster and learn about ways to smuggle creepy payload that is hidden from sight until it executes. Oh, and we’ll also see what can be done about that and what defensive measures we achieved to create so far.

The Image that called me - Active Content Injection with SVG FilesMario Heiderich

Mario Heiderich gave a presentation on active content injection using SVG files. He discussed how SVG files are XML-based and support scripting, allowing execution of JavaScript. This enables security issues like XSS. Browser implementations of SVG are inconsistent, with different levels of script support depending on how SVG files are deployed (inline, via <img>, etc). Exploits discussed SVG vulnerabilities in Firefox, Opera, and Chromium. Defense is difficult due to lack of documentation and filters, and new vectors are found weekly. Future work proposed a SVG purifier and raising awareness of issues.

Towards License Interoperability: Patterns of Sustainable Sharing PolicyMike Linksvayer

The document discusses challenges and progress toward legal interoperability for open content and public sector information (PSI) licensing. It describes how free/libre open source software (FLOSS) has largely achieved interoperability over 25+ years through efforts like the GPL and agreements on definitions. For open content and PSI, proliferation of licenses initially caused issues, but adoption of Creative Commons licenses and others has increased, though database rights remain a challenge. Key initiatives like CC and Open Knowledge Foundation are working to resolve remaining incompatibilities and reduce unnecessary license proliferation to fully realize the potential of openly licensed content and PSI through interoperability.

Functional Programming in JavaScript by Luis AtencioLuis Atencio

This document provides an overview of functional programming concepts using JavaScript. It discusses thinking functionally by avoiding side effects, writing declaratively, and ensuring functions always return values. Functional techniques like currying, composition, and memoization are explained. It also covers paradigms like referential transparency and the Liskov substitution principle. The document discusses how JavaScript supports functional programming with features like closures and higher-order functions. Common libraries for functional programming in JavaScript are listed. Finally, the document covers advanced topics like functors, monads, and how they can be used for error handling.

An Abusive Relationship with AngularJSMario Heiderich

The document discusses security issues with AngularJS and summarizes four general attack vectors: A1: Attacking the AngularJS sandbox by bypassing restrictions on dangerous objects and methods. Early versions had trivial bypasses but later versions required more creative techniques. A2: Attacking the AngularJS sanitizer, which aims to sanitize HTML strings and remove XSS attacks. There were issues with both an older sanitizer version and the current version. A3: Attacking the Content Security Policy (CSP) mode in AngularJS. A4: Attacking vulnerabilities directly in the AngularJS codebase through techniques like sandbox bypasses.

Domain Modeling in a Functional WorldDebasish Ghosh

This document discusses domain modeling in a functional world based on the speaker's real life experiences. The speaker covers topics like immutability and algebraic data types, updating domain models functionally using lenses, type classes for domain modeling, and managing states functionally. The speaker advocates for isolating pure domain logic from side effects to make the logic easier to test, reason about, and parallelize. Functional composition is emphasized as a way to build complex abstractions from simpler ones.

Green Building Final PresentationQatar LEEDers

This document summarizes a green building workshop hosted by HUD's Office of Native American Programs. It discusses how green building practices can increase energy and water efficiency, reduce environmental impacts, and improve indoor air quality. Examples of green building strategies presented included energy-efficient appliances and building envelopes, renewable energy systems, sustainable building materials, water conservation, and construction waste management. Data showed that green building approaches can help control rising energy costs and address environmental hazards in existing housing. The workshop provided lessons on applying green development practices and next steps to promote these techniques in HUD programs.

Монады для барабанщиков. Антон ХоломьёвЮрий Сыровецкий

Intro to Functional ProgrammingHugo Firth

The document discusses functional programming concepts like purity, laziness, immutability, and concurrency. It provides examples using Clojure to illustrate higher order functions like map and filter, immutable data structures, and concurrency in a functional paradigm. The key benefits highlighted are readability, maintainability, avoiding side effects, and easing concurrency through sharing immutable data across threads.

Artificial Intelligence: Predictions for 2017NVIDIA

Rebecca Robins in La Zagaleta magazine (Autumn-Winter 2015) Interbrand Madrid

What the F**K is Social Media: One Year LaterMartafy!

ng-owasp: OWASP Top 10 for AngularJS ApplicationsKevin Hakanson

The OWASP Top 10 provides a list of the 10 most critical web application security risks. How do these relate to AngularJS applications? What security vulnerabilities should developers be aware of beyond XSS and CSRF? This session will review the OWASP Top 10 with a front-end development focus on HTML and JavaScript. It will look at patterns to implement and others to consider avoiding. We will also explore several built-in features of AngularJS that help secure your application.

IAB: An Inside Look at Demand Side Perceptions of Digital Video Advertising (...IABmembership

Fostering a Startup and Innovation EcosystemTechstars

#BrusselsTogether at Crowdsourcing WeekXavier Damman

This document discusses a crowdsourcing initiative called #BrusselsTogether aimed at enabling people to contribute to improving Brussels. It notes that Brussels is a diverse city with 163 nationalities but people often work in silos on initiatives that reinvent the wheel. The document proposes a website called BrusselsTogether.org that would make it easier for people to create, join, or support initiatives by reducing friction. It encourages people to share information about the initiative, become supporting members, and get associations they want to support listed on the site. The overall goal is to create an online infrastructure where people can connect and collaborate on content and opportunities to improve Brussels.

Embracing the digital revolution at a regional level: WalloniaXavier Damman

Presentation that I made for the Digital Counsel in charge of defining a plan for the Digital Economy in Wallonia, Belgium (March 27th 2015). To embrace the digital economy, we need: - More agile companies - More agile workers - More agile governments KPIs that I suggested: 1- Number of interactions between startups and administration (the lower the better) 2- Number of local companies acquired (it will incentivize people to innovate "outside-of-the-box" and investors to invest in local startups) 3- Percentage of population who can understand English ("Think global, act local") 4- Number of independent workers ("Teach people how to find customers instead of how to find a job")

More Related Content

Viewers also liked (20)

ECMAScript 6 from an Attacker's Perspective - Breaking Frameworks, Sandboxes,...Mario Heiderich

Enforcing Your Code of Conduct: effective incident responseAudrey Eschright

Danger Of FreeAlex Iskold

Aristotle's Storytelling Framework for the WebJeroen van Geel

Stuff I've said to FOIA officers to get them to give me ... well, stuffCezary Podkul

Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...Mario Heiderich

The Image that called me - Active Content Injection with SVG FilesMario Heiderich

Towards License Interoperability: Patterns of Sustainable Sharing PolicyMike Linksvayer

Functional Programming in JavaScript by Luis AtencioLuis Atencio

An Abusive Relationship with AngularJSMario Heiderich

Domain Modeling in a Functional WorldDebasish Ghosh

Green Building Final PresentationQatar LEEDers

Монады для барабанщиков. Антон ХоломьёвЮрий Сыровецкий

Intro to Functional ProgrammingHugo Firth

Artificial Intelligence: Predictions for 2017NVIDIA

Rebecca Robins in La Zagaleta magazine (Autumn-Winter 2015) Interbrand Madrid

What the F**K is Social Media: One Year LaterMartafy!

ng-owasp: OWASP Top 10 for AngularJS ApplicationsKevin Hakanson

IAB: An Inside Look at Demand Side Perceptions of Digital Video Advertising (...IABmembership

Fostering a Startup and Innovation EcosystemTechstars

ECMAScript 6 from an Attacker's Perspective - Breaking Frameworks, Sandboxes,...Mario Heiderich

Enforcing Your Code of Conduct: effective incident responseAudrey Eschright

Danger Of FreeAlex Iskold

Aristotle's Storytelling Framework for the WebJeroen van Geel

Stuff I've said to FOIA officers to get them to give me ... well, stuffCezary Podkul

Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...Mario Heiderich

The Image that called me - Active Content Injection with SVG FilesMario Heiderich

Towards License Interoperability: Patterns of Sustainable Sharing PolicyMike Linksvayer

Functional Programming in JavaScript by Luis AtencioLuis Atencio

An Abusive Relationship with AngularJSMario Heiderich

Domain Modeling in a Functional WorldDebasish Ghosh

Green Building Final PresentationQatar LEEDers

Монады для барабанщиков. Антон ХоломьёвЮрий Сыровецкий

Intro to Functional ProgrammingHugo Firth

Artificial Intelligence: Predictions for 2017NVIDIA

Rebecca Robins in La Zagaleta magazine (Autumn-Winter 2015) Interbrand Madrid

What the F**K is Social Media: One Year LaterMartafy!

ng-owasp: OWASP Top 10 for AngularJS ApplicationsKevin Hakanson

IAB: An Inside Look at Demand Side Perceptions of Digital Video Advertising (...IABmembership

Fostering a Startup and Innovation EcosystemTechstars

More from Xavier Damman (20)

#BrusselsTogether at Crowdsourcing WeekXavier Damman

Embracing the digital revolution at a regional level: WalloniaXavier Damman

#BEStartupManifesto presentation v1.0Xavier Damman

At present, it’s too hard to create and grow a startup in Belgium. This Manifesto outlines how we can change that. We want to work together with individuals, industry partners and policymakers to establish a healthy environment for Belgian startups. A startup-friendly environment in Belgium will result in more businesses leading to significantly more jobs, and most importantly a thriving economy that benefits all.

The Digital Marketer Is The New CuratorXavier Damman

The document discusses how marketers need to empower consumers and allow them to promote products through user-generated content. It recommends that marketers consider fans as part of their marketing team and give them the tools to share content. By showing social momentum and rewarding positive behaviors, marketers can leverage their users to do marketing without needing to directly reach consumers from the top down. The goal is for great products to spread naturally when people are given the freedom to create and share.

FewebXavier Damman

Social Media is a human p2p network. And Uber and AirBnb are the Napster of t...Xavier Damman

Quick presentation made with Noah Brier at the Global Council on Social Media at the World Economic Forum in Dubai, November 2014. It's a bit cryptic without the presenter's notes. The general story goes like this: Social Media is in fact the human usable version of p2p networks. We've seen already those networks at work disrupting the music industry with Napster. Incumbents first ignored it, then fought it by suing people downloading songs of Madonna in their garage, then more subtly by introducing songs on the networks with blips and other flaws. Then eventually, we got what we wanted, all the songs available to us with Spotify. Thanks to mobile phones, p2p networks are now connecting people and allow new disruptions. Uber and Airbnb are the Napster of the cabs and hotel industry. Protests in Hong Kong and Hungary are also enabled by people who have (literally) the power in their hands. What are the fundamentals of p2p networks? They don't have borders, they are now happening on mobile devices and they are platforms for exchange of information, they don't provide information per se, they empower their users to exchange some sort of information. As such, they scale very well without borders. The question is how can BI (Before Internet) companies leverage those networks instead of wasting their energy fighting them. There are probably a lot to learn from what happened between Napster and Spotify that could apply to many other industries and institutions.

Storify - amplify the voices that matterXavier Damman

Xavier Damman, the CEO and co-founder of Storify, gave a presentation about amplifying voices on social networks and Storify's mission. Storify allows users to curate social media posts into stories and has been used by major news sites, brands, politicians, and NGOs to understand discussions and events. Damman emphasized that by sharing knowledge through open communities, positive change can occur.

IBBT iMinds 2011 - Story of Storify, a story of collaborationXavier Damman

Storify news:rewiredXavier Damman

The document introduces Storify, a tool for curating social media content into stories. It provides examples of how Storify has been used to report on events like hurricanes, political debates, and conferences through curating social media posts. The document argues that journalists play an important role in amplifying voices on social media and helping information reach wider audiences. It encourages journalists to use Storify to make sense of social media and change the world.

Storify #iOSDevCampXavier Damman

ReadWriteWeb 2way summit: Future of StorytellingXavier Damman

The document discusses the future of storytelling in the age of social media. It argues that storytelling must (1) be reinvented for social media, where new forms of collaborative and social storytelling are needed, (2) involve collaboration by different contributors working on interconnecting story pieces, and (3) engage audiences who can help spread, contribute to, and provide different perspectives on stories. The key is leveraging social media as both a distribution channel for new forms of interactive storytelling and a source of audience input and contributions.

Présentation de Storify au séminaire de TV5 mondeXavier Damman

Storify is a new social media tool for journalism that allows journalists to tell stories using social media content. It was presented at a conference in Paris on June 23, 2011. The presentation discussed how Storify can be used to report on events in real-time, cover conferences, and compile the best social media contributions on a topic. It also argued that social media stories are emotional, collaborative, and engaging for audiences.

Publitweet presentationXavier Damman

Publitweet is a platform that helps major publishers bring real-time content from Twitter to more users by making it easier to access and understand. It takes the confusing format of retweets, links, and hashtags from Twitter and transforms it into a cleaner display for non-Twitter users. Currently 61% of Americans get news online but only 6% via Twitter, so Publitweet aims to bridge this gap. It provides moderation tools for publishers and integrates with analytics platforms like Google. The founders have experience in participatory media and journalism. They are seeking a $500k seed investment at a $2M post-money valuation to further develop the platform and open it to more publishers.

From Twitter App idea to Mashable.com in 24hXavier Damman

Tweetag Plug And PlayXavier Damman

Tweetag provides widgets and portals to integrate Twitter content into existing websites and create new real-time online medias. Their technology automatically tags tweets by topic to enrich websites with relevant real-time content from Twitter users, without requiring visitors to have Twitter accounts. This increases engagement by adding fresh content and generates more page views. Tweetag works with media companies in Belgium and France, delivering tweets to over 13 million readers monthly. They plan to expand to the US market.

Tweetag Browse The TwittosphereXavier Damman

This document discusses a visualization tool that analyzes Twitter data. It displays the volume of tweets on various topics over time, with the ability to view up to 100 tweets per minute on popular topics. The tool identifies the 40 hottest topics being discussed and allows the user to narrow down to related subtopics or get a direct overview of the whole discussion. It provides easy access to questions, links, replies and images within tweets and includes widgets with additional information.

How to make people commenting on your blog?Xavier Damman

The document summarizes a keynote presentation about getting and keeping comments on blogs. It recommends asking questions, being open-ended, making commenting easy, answering comments, keeping previous commenters in the loop, rewarding commenters, allowing original comments through plugins, and keeping discussions organized through tagging comments. It discusses how tagging gives comments visibility and prevents wasted time writing comments no one will see. The keynote concludes by thanking illustrators who provided pictures for the presentation.

Yucam - Presentation at QEC2007Xavier Damman

CommenTag presentation at London Minibar / Feb08Xavier Damman

Make Or Fund MockupXavier Damman

This document describes a website called MakeOrFund.com that allows users to submit open source projects to raise money for or fund. It provides details about two example projects on the site: YuCAM.com, which has raised €15k to develop video surveillance software using a webcam, and CommenTag.com, which is organizing comments on blogs and pages and has raised €5k so far. It also includes information about the teams behind each project.

#BrusselsTogether at Crowdsourcing WeekXavier Damman

Embracing the digital revolution at a regional level: WalloniaXavier Damman

#BEStartupManifesto presentation v1.0Xavier Damman

The Digital Marketer Is The New CuratorXavier Damman

FewebXavier Damman

Social Media is a human p2p network. And Uber and AirBnb are the Napster of t...Xavier Damman

Storify - amplify the voices that matterXavier Damman

IBBT iMinds 2011 - Story of Storify, a story of collaborationXavier Damman

Storify news:rewiredXavier Damman

Storify #iOSDevCampXavier Damman

ReadWriteWeb 2way summit: Future of StorytellingXavier Damman

Présentation de Storify au séminaire de TV5 mondeXavier Damman

Publitweet presentationXavier Damman

From Twitter App idea to Mashable.com in 24hXavier Damman

Tweetag Plug And PlayXavier Damman

Tweetag Browse The TwittosphereXavier Damman

How to make people commenting on your blog?Xavier Damman

Yucam - Presentation at QEC2007Xavier Damman

CommenTag presentation at London Minibar / Feb08Xavier Damman

Make Or Fund MockupXavier Damman

Recently uploaded (20)

The Irrational City | Unseen Forces of PlacemakingLeanne Munyori

What if cities weren’t built for how people live—but for how planners think they should? We explored Nairobi’s evolving urban form through the lens of behavioral economics and environmental psychology. The Irrational City challenges conventional planning paradigms by revealing how emotion, perception, and cognitive bias shape how we experience and respond to the built environment. Drawing from principles of irrational decision-making, place attachment, and choice architecture, this talk questions: – Why do some places feel safe, others alienating? – How does infrastructure influence behavior, intentionally or not? – Can we design cities not just for function, but for feeling? From expressways to the feauture park, Nairobi offers a live case study in how unconscious design decisions affect well-being, identity, and belonging. This presentation is for architects, planners, designers, and anyone curious about cities as emotional ecosystems—not just physical ones.

Baby panda 400.pdf de ciencias naturalesdebbie loaiza

Hi! I'm Lori Vanzant. Please take a lookvanzan01

PPT UNTUK ISU STRATEGIS (1).pptx PPT UNTUK ISU STRATEGIS (1).pptxrachmatunnisa29

Modern Gradient Startup Pitch Deck PowerPoint Presentation and Google Slides ...SlidesBrain

Modern Gradient Startup Pitch Deck – PowerPoint Presentation and Google Slides Themes Are you ready to take your startup idea to the next level? 🚀 Whether you're preparing for an investor meeting, a product launch, or simply want to create an unforgettable first impression, our Modern Gradient Startup Pitch Deck is designed just for you. At SlidesBrain, we believe that your presentation is more than just slides – it's your story, your brand, and your future. This Startup Pitch Deck features clean, bold, and modern gradient designs that instantly capture attention. It’s fully editable and compatible with PowerPoint and Google Slides, giving you the flexibility to customize it to your needs. With the perfect blend of professional structure and creative design, this deck is ideal for startups across industries — tech, wellness, e-commerce, SaaS, and more. From problem statements to solutions, team slides to financial projections, every layout you need is covered. 🎨 What You’ll Get: Stunning gradient backgrounds for a modern and sleek look Investor-focused layouts to pitch your idea effectively 100% editable elements — fonts, colors, icons, and images Compatible with both PowerPoint and Google Slides Fully customizable according to your brand identity ✨ Whether you are preparing for a seed funding round, Series A, or even just showcasing your concept, this pitch deck template helps you tell your story in a way that’s visually compelling and professionally impressive. More About SlidesBrain: At SlidesBrain, we provide high-quality, beautifully crafted Free PowerPoint Templates for professionals, startups, entrepreneurs, and creators who want to stand out. Need something even more unique? Our Custom Design Services are available to help you build tailor-made presentations that perfectly reflect your brand's essence. 📩 Want to impress your audience? Let's work together! Contact us for custom solutions or download free templates at [email protected]. #StartupPitchDeck #ModernPresentation #SlidesBrain #GradientDesign #PitchDeckDesign #PowerPointTemplates #GoogleSlidesThemes #StartupPresentation #InvestorPitch #BusinessPresentation #CustomPresentationDesign #TechStartup #StartupSuccess #Entrepreneurship #FreePowerPointTemplates #PresentationInspiration #SlidesDesign #InvestorDeck #CustomSlides #DeckDesign #SaaSStartup #StartupBranding #SeedFundingPitch #BusinessGrowth #SlidesBrainServices #PresentationTemplates

Flowers Coloring Pages Activity Worksheet in Black and White Illustrative StyleLikazelika

DOC-20250121-WA0008._20250121_105938_0000.pptxlaugolac31

Minimalist Business Slides XL by Slidesgo.pptxkarenalavamoran

Lori Vanzant's portfolio. Please take a look!vanzan01

EEE178-PPT-Theme iasodhajsdkjashdlaskdjbaksdkashdlkasdlkja;dj;kdada.pptx.pdfCastroAngeloReoD

Doodle Table of Contents Infographics by Slidesgo.pptxbinhyennghlu

PayPros-Journey-Overcoming-Challenges-Through-Governance.pptxrayyansiddiqui034

Design of a Low-Power VLSI Router for Network-on-Chip.pptxBapujiBanothu

Wondershare Filmora Crack Free Download 2025Designer

An updated content measurement model - Elle Geraghty Content Strategy.pdfElle Geraghty

Halstead’s_Software_Science_&_Putnam’s_Model[1].pptxprachiikumarii1

Emily's slide design 101 - training moduleyourmisswright

Lori Vanzant Online Presence. Take a look!vanzan01

Download Chimera Tool Setup V42.47.0924 [Latest Version]Designer

masterddedeeeeeeeeedded seminar (1).pptxtgavel7869

The Irrational City | Unseen Forces of PlacemakingLeanne Munyori

Baby panda 400.pdf de ciencias naturalesdebbie loaiza

Hi! I'm Lori Vanzant. Please take a lookvanzan01

PPT UNTUK ISU STRATEGIS (1).pptx PPT UNTUK ISU STRATEGIS (1).pptxrachmatunnisa29

Modern Gradient Startup Pitch Deck PowerPoint Presentation and Google Slides ...SlidesBrain

Flowers Coloring Pages Activity Worksheet in Black and White Illustrative StyleLikazelika

DOC-20250121-WA0008._20250121_105938_0000.pptxlaugolac31

Minimalist Business Slides XL by Slidesgo.pptxkarenalavamoran

Lori Vanzant's portfolio. Please take a look!vanzan01

EEE178-PPT-Theme iasodhajsdkjashdlaskdjbaksdkashdlkasdlkja;dj;kdada.pptx.pdfCastroAngeloReoD

Doodle Table of Contents Infographics by Slidesgo.pptxbinhyennghlu

PayPros-Journey-Overcoming-Challenges-Through-Governance.pptxrayyansiddiqui034

Design of a Low-Power VLSI Router for Network-on-Chip.pptxBapujiBanothu

Wondershare Filmora Crack Free Download 2025Designer

An updated content measurement model - Elle Geraghty Content Strategy.pdfElle Geraghty

Halstead’s_Software_Science_&_Putnam’s_Model[1].pptxprachiikumarii1

Emily's slide design 101 - training moduleyourmisswright

Lori Vanzant Online Presence. Take a look!vanzan01

Download Chimera Tool Setup V42.47.0924 [Latest Version]Designer

masterddedeeeeeeeeedded seminar (1).pptxtgavel7869

Storytelling using Javascript HTML5 CSS3

1. Storytelling using Javascript, HTML5, CSS3 with Storify @xdamman - March 2011

2. http://storify.com/nzherald/reaction-to-japanese-tsunami http://dl.dropbox.com/u/1702667/sites/kenburns/index.html

3. JSON/CSS3/JavaScript is the new Model/View/Controller

4. Model: JSON Story url + ‘.json’ - e.g. http://storify.com/nzherald/reaction-to-japanese-tsunami.json ...

5. http://storify.com/nzherald/reaction-to-japanese-tsunami.json position index of the story element (string) Details of the editor who added this element to the story image attached to the element (if any) Normalized details of the story element (title, thumbnail, description, author) Timestamps Number of seconds since January 1st 1970 (epoch time in To convert to Javascript date: seconds) new Date(parseInt(story.elements[“3”].created_at,10)*1000);

6. http://storify.com/nzherald/reaction-to-japanese-tsunami Story header title, author, published_at, description Story element source: ‘twitter’ elementClass: ‘tweet’ Story element source: ‘facebook’ elementClass: ‘fbpost’ Story element source: ‘twitter’ elementClass: ‘tweet’ image: src: ‘http://(...).jpg’

7. http://storify.com/nzherald/reaction-to-japanese-tsunami Story element source: ‘twitter’ elementClass: ‘tweet’ image: src: ‘http://(...).jpg’ Story element source: ‘storify’ elementClass: ‘text’ Story element source: ‘twitter’ elementClass: ‘tweet’

8. View: HTML5+CSS3

9. CSS3

10. Controller: JavaScript 1. Fetch the model jQuery> $.getJSON(storyurl+’.json? callback=?’,function(storyurl) { }); 2. Fill the HTML template with the story jQuery> $(‘#story h1’).html(story.title); 3. Add extra behaviors, animations, ...

11. We fetch the model $.getJSON We render the story $(domElement).html(); We walkthrough each story element to gather all images story.elements[i].image and all twitter users ‘ avatars story.elements[i].author.avatar We render the images in a slideshow with a Ken Burns effect jQuery library from http://willmcgugan.com/2011/2/26/ ken-burns-effect-with-javascript- and-canvas

12. Sources available on http://github.com/storify/templates Storify Social media stories @xdamman - March 2011

Storytelling using Javascript HTML5 CSS3

Recommended

More Related Content

Viewers also liked (20)

More from Xavier Damman (20)

Recently uploaded (20)

Storytelling using Javascript HTML5 CSS3