recentpopularlog in

robertogreco : html5   66

/addressbar • heracl.es
"…or laments about the loss of autonomy on the web.

MUSING

The web has lost a great battle, one that it was never given a chance to fight for. Apps got the upper hand for good. They’re easy to find: available through your favorite walled garden of a store. They’re are easy to use: they stay right there in your device, making use of all your device’s sensors; have access to all your files and contacts; they make sharing easy. Although HTML5 APIs are a huge leap forward, they are still in their infancy, whereas apps were the first to bear the benefits of sensors, notifications and offline functionality. All without breaking many UX conventions and the people’s safe zone.

No usage study would argue that people use their mobile phone’s browser more than they actually use the in-app browsers offered by default by Facebook, Twitter, Instagram, Google Search and co.

What was by design the core aspect of the World Wide Web, the “URL”, also known as web address, was irrelevant for in-app browsers. The user only needs to peek outside for a minute, then return to the silo. There’s really no need for multiple user journeys. And thus the address bar has vanished. I am frequently reminded of this from my parents, as they discovered mobile phones on their own, had little experience with computers beforehand. Even close friends, so called digital natives that can barely remember their life without internet, forget how to use the address bar. Why do if you can Google the website’s name?
The user can type a URL into the bar to navigate to a chosen website.


…says the collective author in Wikipedia: Address Bar. It still has a bit of truth in it. You can type a URL into it, if you can find where to type it. Even if you do have one, you are most likely using it for Google-ing.

All supporters of the open web should be alarmed. Reclaim your autonomy and make your property visible. Make the URL of your pages visible. Please don’t harm any beautiful hyperlinks in the process."
web  internet  online  openweb  autonomy  applications  appification  ux  walledgardens  html  html5  worldwideweb  urls  browsers  digitalnatives  heraclespapatheodorou 
august 2018 by robertogreco
HTML5 UP! Responsive HTML5 and CSS3 Site Templates
"HTML5 UP
... makes spiffy HTML5
site templates that are:
Fully
Responsive Built on intelligent
HTML5 + CSS3 Super
Customizable100% Free under the
Creative Commons"

[via (used here): http://www.jessamyn.com/ ]
webdev  html5  responsive  webdesign  html  free  templates 
september 2017 by robertogreco
ResponsiveImages.org
"We’re a group of developers working towards a client-side solution for delivering alternate image data based on device capabilities to prevent wasted bandwidth and optimize display for both screen and print."
responsive  responsivedesign  html5  images  via:maxfenton  webdev  webdesign 
april 2016 by robertogreco
Goodbye, Native Mobile Apps
"Why Atavist is betting on the web"



"Now, after nearly five years and 51 stories in The Atavist Magazine—plus tens of thousands of publishers and individuals producing their own stories on the Atavist platform—we’re discontinuing our native mobile apps."



"Ultimately, whatever small slice of attention we were gaining by having our app on some people’s home screens was outweighed by the technical, business, and design considerations that had piled up against it."



"Meanwhile, we’ve been able to find our readers on their devices— exactly how we’d hoped to when we started out, except in mobile browsers instead of in our app."
webapps  mobile  design  web  webdev  apps  evanratliff  jeffersonrabb  theatavist  publishing  epublishing  html5  javascript  magazines  howweread  nativeweb  webdesign 
september 2015 by robertogreco
Chrome Experiments
"Chrome Experiments is a showcase of web experiments written by the creative coding community."
webdev  chrome  html5  webgl  mobile  webdesign 
august 2015 by robertogreco
WAY TO GO
"Description

Way to Go is an interactive experience for human beings between 5 and 105 years old. Maybe it lasts six minutes; maybe it lasts forever. Way to Go is ready for your web browser and willing to go VR, if you're Rift-y. It is like a grey squirrel balanced on a branch, fearless. Made by Vincent Morisset, Caroline Robert, Édouard Lanctôt-Benoit and the studio AATOAA, visionary creators of BLA BLA and Arcade Fire's award-winning Just A Reflektor. Produced by the National Film Board of Canada, co-produced by France Televisions, with a mesmerizing soundtrack by Philippe Lambert, it is a game and a solace and an alarm, a wake-up call to the hazards of today. At a moment when we have access to so much, and see so little, Way to Go will remind you of all that lies before you, within you, in the luscious, sudden pleasure of discovery.

Shorter Description

Way to Go is a walk in the woods. It is an astonishing interactive experience, a restless panorama, a mixture of hand-made animation, 360˚ video capture, music and dreaming and code; but mostly it is a walk in the woods, c'mon. Created by Vincent Morisset, Philippe Lambert, Édouard Lanctôt-Benoit & Caroline Robert (AATOAA). Produced by the NFB & France TV."



"Preface

YOU ARE ON YOUR WAY.
Yes, you are on your way.
It is not your first journey but Way to Go is the next journey before you. A walk through strange country - strange, familiar, remembered, forgotten. It is a restless panorama, a disappearing path, a game and a feeling. Way to Go is a small experience that gets bigger as you uncover it.
And the trees will change their shape, and the sky will widen.
And you will fly.
We go away every day. We plunge through the city, skate down roads, tunneling toward a destination without remembering the quests we are on. A journey is a collection of moments - we are here, we are here, we are here, and yet we miss these moments. A journey is a collection of choices - turn here, stop here, choose here, and yet we surrender these choices.
What if we quit surrendering? What if we didn't miss?
Here is a world enclosed in a screen. Here is an adventure. A landscape of leaves and wildflowers, teeming with hidden life. A garden and a wilderness, a wistful blink of dream. You are Jean Painlevé, Marco Polo, Maria Merian. You are Alice, Sonic, Osvaldo Cavandoli. You are a visitor, a cartoon of face and limbs, and you are going on a walk.
Using hand-made animation, music, 360° capture technology and webGL sorcery, Way to Go imagines a dream-world of journeys. Walk, run, fly; crouch in the grass and remember what's hidden all around. Slip like a rumour from one place into another; chase your shadow; listen to the slow pulse of the metronome, black-clad, following in your wake.
Are you alone? Are you not alone? Are you dreaming or awake? Can you ever reach the mountains?
Can you see what's here before you?
Set out through woods and fields, sunlight and aurora, grey and colours.
Set out, in deliberate lucid looking
and you'll find,
perhaps,
the present.

(Preface by Sean Michaels)"
games  storytelling  gaming  videogames  art  nfb  forest  aaotaa  javascript  html  html5  webgl  three.js  webaudioapi  vincentmorisset  philippelambert  édouardlanctôt-benoit  carolinerobert  nfbc 
february 2015 by robertogreco
gSchool — Galvanize
"Learn from the best and launch a new path through gSchool's immersive developer training programs, or gain an edge with a gSchool workshop."



"We turn smart, driven beginners into marketable, contributing members of development teams over the course of our 24-week long developer training programs. Our full stack curriculum includes Ruby on Rails, Sinatra, Javascript, CSS3, HTML5, Responsive Design, Database, APIs, Version Control, and Test Driven Development - but our main focus is Rails."

[via: https://vimeo.com/103559084 ]
colorado  sanfrancisco  coding  education  gschool  ruby  rubyonrails  javascript  css3  html5  responsivedesign  development  programming  responsivewebdesign 
august 2014 by robertogreco
Old School Color Cycling with HTML5 | EffectGames.com
"Anyone remember Color cycling from the 90s? This was a technology often used in 8-bit video games of the era, to achieve interesting visual effects by cycling (shifting) the color palette. Back then video cards could only render 256 colors at a time, so a palette of selected colors was used. But the programmer could change this palette at will, and all the onscreen colors would instantly change to match. It was fast, and took virtually no memory. Thus began the era of color cycling.

Most games used the technique to animate water, fire or other environmental effects. Unfortunately, more often than not this looked terrible, because the artist simply drew the scene once, picked some colors to be animated and set them to cycle. While this technically qualified as "color cycling", it looked more like a bad acid trip. For an example, just look at the water in this game.

However, there was one graphic artist who took the technique to a whole new level, and produced absolutely breathtaking color cycling scenes. Mark J. Ferrari, who also illustrated all the original backgrounds for LucasArts Loom, and some for The Secret of Monkey Island, invented his own unique ways of using color cycling for envrironmental effects that you really have to see to believe. These include rain, snow, ocean waves, moving fog, clouds, smoke, waterfalls, streams, lakes, and more. And all these effects are achieved without any layers or alpha channels -- just one single flat image with one 256 color palette.

Unfortunately the art of color cycling died out in the late 90s, giving way to newer technologies like 3D rendering and full 32-bit "true color" games. However, 2D pixel graphics of old are making a comeback in recent years, with mobile devices and web games. I thought now would be the time to reintroduce color cycling, using open web technologies like the HTML5 Canvas element.

This demo is an implementation of a full 8-bit color cycling engine, rendered into an HTML5 Canvas in real-time. I am using 35 of Mark's original 640x480 pixel masterpieces which you can explore, and I added some ambient environmental soundtracks to match. Please enjoy, and the source code is free for you to use in your own projects (download links at the bottom of the article)."

[See also: http://www.effectgames.com/demos/canvascycle/ ]
animation  graphics  html5  javascript  colorcycling  via:vruba  canvas  8bit 
august 2014 by robertogreco
Subcompact Publishing — by Craig Mod
"A Subcompact Manifesto

Subcompact Publishing tools are first and foremost straightforward.

They require few to no instructions.

They are easily understood on first blush.

The editorial and design decisions around them react to digital as a distribution and consumption space.

They are the result of dumping our publishing related technology on a table and asking ourselves — what are the core tools we can build with all this stuff?

They are, as it were, little N360s.

I propose Subcompact Publishing tools and editorial ethos begin (but not end) with the following qualities:

• Small issue sizes (3-7 articles / issue)
• Small file sizes
• Digital-aware subscription prices
• Fluid publishing schedule
• Scroll (don’t paginate)
• Clear navigation
• HTML(ish) based
• Touching the open web

Many of these qualities play off one another. Let’s look at them in detail.

Small issue sizes
I’ve written quite a bit about creating a sense of ‘edge’ in digital space. One of the easiest and most intuitive ways to do so is to limit the amount of data you present to the user.12

It’s much more difficult for someone to intuit the breadth of a digital magazine containing twenty articles than a digital magazine containing, for example, five. By keeping article number low this also helps decrease file size and simplify navigation.

Small file size
Speed is grossly undervalued in much of today’s software — digital magazines inclusive. Speed (and with it a fluid and joyful user experience) should be the thing you absolutely optimize for once you have a minimum viable product.

One way to bake speed into a publishing product is to keep issue file sizes as small as possible. This happens naturally when you limit the number of articles per issue.

Reasonable subscription prices
Ideally, digital subscription prices should reflect the cost of doing business as a digitally indigenous product, not the cost of protecting print subscriptions. This is yet another advantage digital-first publications have — unlike print publications transitioning to digital, there is no legacy infrastructure to subsidize during this transition.

Fluid publishing schedule
With smaller issue sizes comes more fluid publishing schedules. Again, to create a strong sense of edge and understanding, the goal isn’t to publish ten articles a day, but rather to publish just a few high-quality articles with a predictable looseness. Depending on the type of content you’re publishing, days can feel too granular, and months require the payload to be too large. Weeks feel just about right in digital.

Scroll (for now)
When I originally presented these ideas at the Books in Browsers conference in 2012, the dismissal of pagination was by far the most contentious point. I don’t mean to imply all pagination is bad. Remember — we’re outlining the very core of Subcompact Publishing. Anything extraneous or overly complex should be excised.

I’ve spent the last two and half years deconstructing scrolling and pagination on tablets and smartphones. If your content is formless, then you might be able to paginate with minimal effort. Although, probably not.

Certain kinds of pagination increase the complexity of an application by orders of magnitude. The engineering efforts required to produce beautiful, simple, indigenous, consistent — and fast — pagination are simply too high to belong in the subcompact space.

Furthermore, when you remove pagination, you vastly simplify navigation and thereby simplify users’ mental models around content.

No pagination is vastly superior to pagination done poorly.

Clear navigation
Navigation should be consistent and effortless. Subcompact Publishing applications don’t require complex how-to pages or tutorials. You shouldn’t have to hire a famous actor to show readers how to use the app with his nose. Much like a printed magazine or book, the interaction should be intuitive, effortless, and grounding. The user should never feel lost.

By limiting the number of articles per issue, and by removing pagination, many of the routes leading to complex navigation are also removed.

HTML(ish) based
When I say HTML I also mean EPUB or MOBI or any other format with an HTML pedigree. HTML has indisputably emerged as the future format for all text (and perhaps also interactive) content. By constraining Subcompact Publishing systems to HTML we bake portability and future-proofness into the platforms. We also minimize engineering efforts because most all computing devices come with high-quality HTML rendering engines built in.

Open web
Simply: whatever content is published on a tablet should have a corresponding, touchable home on the open web.

Content without a public address is non-existent in the eyes of all the inter-operable sharing mechanisms that together bind the web."
craigmod  publishing  epublishing  magazines  themagazine  writing  digital  design  2012  digitalpublishing  html  html5  matter  joshuabenton  touch  mobilephone  ios  iphone  ipad  skeuomorphs  openweb  scrolling  pagination  navigation  tablets  claytonchristensen  davidskok  jamesallsworth  marcoarment 
april 2014 by robertogreco
Q&A: Craig Mod on making writing more mobile-friendly and where digital publishing is headed » Nieman Journalism Lab
[See also: https://medium.com/p/4c78e6883ec0
http://pando.com/2013/07/17/craig-mods-new-publishing-platform-hi-maps-writers-to-place/
https://hi.co/moments/q4oi5i68 ]

"Mod: One of the great benefits of the web is everything can have a unique address that is accessible as a net connection, effectively. There’s something incredible powerful about that. So, to build an iOS app-only, Android app-only ecosystem feels like, to me, you’re leaving on the floor 80 percent of the magic of what the Internet brings to publishing.

So one of the core precepts of this project was certainly to be very open on the web — accessible anywhere, from any device. When you start from that place, it just makes sense to first and foremost optimize for the web experience and then kind of work your way back.

One of the reasons I think Safari on the iPhone, the Chrome browser, any of these things, aren’t as good as they could be for running applications is because five years ago, or whenever the App Store opened, we sort of abandoned the web in a way."



"Mod: When we started, it was far more focused on the mapping piece. I remember one of the stakes in the ground that we had a year ago was “every page must have a map.” You quickly realize that maps are not that interesting. It’s this fallacy, that maps are inherently interesting objects.

I love maps. I love old maps, I love printed maps, I love navigating cities with strange maps. I love all of that. But I think we tend to conflate maps as context vs. content. And a lot of products that use maps and feature maps treat it as content, and most of the time a map is not a very interesting thing. We just need it quickly, for a little bit of context, and then have it go away."



"You can look at a tool like Hi and go, “Well, why am I putting my writing into this other space that I don’t own?” Whereas with WordPress you can download it, can host your own WordPress site, and yada, yada, yada. But one of the advantages of placing it into this pre-existing space is you get the community. So that’s been fun."



"Mod: I think it depends on the kind of writing that you’re doing and what your goals as a writer are. As isolated as writers tend to be, there are so many workshopping groups. And I think there is a natural tendency as a writer to need to get out of your isolation chamber and get some feedback and have human contact and discuss things out in the open. So I think there’s a tremendous benefit to that.But obviously not all kinds of writing should be done in this way, it goes without saying.

But I think there are certain kinds that — why not do the experiment of trying them? And travel writing, I think, fits really naturally within this space. One of the things going on with Hi that we haven’t really talked a lot about is the topics. Anybody can add a moment, they can invent a topic, they can add to existing topics — they can do whatever they want. Topics are meant to be a response to undiscoverability and impossibility to navigate — the nature of hashtags."
web  craigmod  interviews  2014  hi  hitotoki  maps  mapping  context  content  applications  open  accessibility  publishing  community  openweb  internet  howwewrite  discoverability  search  editing  feednack  workinginpublic  writing  simplenote  instagram  iphone  mobile  mobilephones  cellphones  html5  webapps  hi.co  epublishing  blogging  blogs  digitalpublishing  ios 
april 2014 by robertogreco
MTA.ME
"Project summary

At www.mta.me, Conductor turns the New York subway system into an interactive string instrument. Using the MTA’s actual subway schedule, the piece begins in realtime by spawning trains which departed in the last minute, then continues accelerating through a 24 hour loop. The visuals are based on Massimo Vignelli’s 1972 diagram.

Subway Details

The piece follows some rules. Every minute, it checks for new trains launched from their end stations. The train then moves towards the end of the line, with its speed set by the schedule’s estimated trip duration. Some decisions were made for musical, aesthetic, and technical reasons, such as fading out routes over time, the gradual time acceleration, and limiting the number of concurrent trains. Also, I used the weekday schedule. Some of these limitations result in subtle variations, as different trains are chosen during each 24-hour loop.

The system has changed since 1972, and some lines no longer exist. For example, the 8 train, or the Third Ave El, was shut down in 1973. The former K train was merged into other routes. I decided to run these ghost trains between 12am-2am.

Developer Details

mta.me is built in HTML5/Javascript. It pulls from the MTA’s public API, which provides a detailed schedule of stops and departure times. (The MTA does not currently track trains’ live positions via GPS.) The design was created in Illustrator, then exported via SVG coordinates into HTML5 Canvas. I built a version with layered HTML5 audio, but ran into many limitations and bugs when layering multi-shot samples. (See this post for details.) so the audio is being triggered by Flash in the background, communicating with JS Sound Manager.

I originally wrote the physical string plucking code for the still-in-progress Crayong project. The strings can be grabbed and pulled at various distances along its length. It’s a little engine I plan to use for a lot of future projects. Planning a detailed post and video on how it works.

Music

Length determines pitch, with longer strings playing lower notes. When a string is in the middle of being drawn by a subway car, its pitch is continually shifting. The sounds are cello pizzicato from the wonderful freesound.org, a set recorded by corsica_s. A complete chromatic scale was too dissonant. Ultimately I settled on a simple major C scale but with the lowest note as a raised third E, which keeps it from ever feeling fully resolved."

[See also: http://blog.chenalexander.com/2011/conductor-mta/ ]
mta  nyc  art  audio  music  visualization  html5  trains  subways  maps  mapping  sound  via:caseygollan 
march 2014 by robertogreco
LLK/scratch-html5 · GitHub
"Scratch HTML5 Player

This project aims to create a Scratch Player in HTML5. Scratch is currently implemented with Actionscript 3 and requires the Flash Player version 10.2. Since Flash does not run on iOS (iPads, iPods, etc) and newer Android devices, we would like to have an HTML5 version to display (but not edit) projects on mobile devices. Scratch projects played in the HTML5 player should look and behave as closely as possible to the way they look and behave when played by the Flash player. We will not be accepting pull requests for new features that don't already exist in the Flash based Scratch project player.

There are a few github issues created that represent some of the missing features. At this point, the HTML5 player is about 40% complete and can run some simple projects. Running the HTML5 player on your own website, or locally, you will need to have PHP so that the proxy.php file can be used to load assets from the same domain. This is done to be compatible with Javascript security models in today's browsers. To test the HTML5 player against the Flash player you can use the compare.html web page.

Unimplementable Features on iOS: Image effects for whirl, fisheye, mosaic, and pixelate. Sound and video input for loudness, video motion, and touching colors from the video.

More documentation will be added as time permits. Thanks for contributing, and Scratch On!"
scratch  html5  html  ios 
october 2013 by robertogreco
Google Web Designer
"Create engaging, interactive HTML5-based designs and motion graphics that can run on any device."
design  google  html5  tools  framework  webdev  webdesign 
october 2013 by robertogreco
Pandoc - About pandoc
"If you need to convert files from one markup format into another, pandoc is your swiss-army knife. Pandoc can convert documents in markdown, reStructuredText, textile, HTML, DocBook, LaTeX, or MediaWiki markup to

• HTML formats: XHTML, HTML5, and HTML slide shows using Slidy, Slideous, S5, or DZSlides.
• Word processor formats: Microsoft Word docx, OpenOffice/LibreOffice ODT, OpenDocument XML
• Ebooks: EPUB version 2 or 3, FictionBook2
• Documentation formats: DocBook, GNU TexInfo, Groff man pages
• TeX formats: LaTeX, ConTeXt, LaTeX Beamer slides
• PDF via LaTeX
• Lightweight markup formats: Markdown, reStructuredText, AsciiDoc, MediaWiki markup, Emacs Org-Mode, Textile

Pandoc understands a number of useful markdown syntax extensions, including document metadata (title, author, date); footnotes; tables; definition lists; superscript and subscript; strikeout; enhanced ordered lists (start number and numbering style are significant); running example lists; delimited code blocks with syntax highlighting; smart quotes, dashes, and ellipses; markdown inside HTML blocks; and inline LaTeX. If strict markdown compatibility is desired, all of these extensions can be turned off."
pandoc  conversion  html  epub  latex  pdf  html5  onlinetoolkit  ebooks  documents  markdown  text  tools  epublishing  digitalpublishing  epubs 
august 2013 by robertogreco
Skycraft, a creative voxel adventure game
"Skycraft is a creative voxel adventure game made in WebGL. It is currently under development; try it out and tell me what you think!"
html5  minecraft  games  gaming  voxel  srg  edg  skycraft 
june 2013 by robertogreco
froont: Prototype responsive websites visually
"Froont is a tool for designers who want to prototype websites faster

Froont runs in your browser and allows to see the designs in the same way users will see it. No more misleading font renderings. Test it on any device right away."
html5  webdev  prototyping  responsivewebdesign  responsivedesign  webdesign 
march 2013 by robertogreco
Into the Woods | Trent Walton
"We were all afraid of pressing on, and everyone had his own excuse for why we shouldn’t go, but the fear of being grounded or getting lost in the dark woods overnight couldn’t compete with the weight of a double-dare. So we set out."

"We were Goonies, conquistadors, astronauts; we had forever changed our world."

"So many great childhood memories are the result of our decision to follow that one trail. It redefined everything for us and expanded our territory exponentially. These days, I’m happiest when I feel part of a team with the same adventurous spirit as that kid gang. The web is, after all, as limited as my old neighborhood with boundaries set by our current tools and technologies, as well as our understanding of each. I believe my work counts most when I’m looking for new trails and feel brave enough to blaze them. I know that the minute I dismiss new discoveries or ideas because the way forward isn’t clear is when I’ve lost my sense of wonder for web design…"
risktaking  gamechanging  astronauts  fear  memories  adventure  mystery  exploration  typography  css3  html5  webdev  trentwalton  2012  woods  goonies  childhood  webdesign 
january 2013 by robertogreco
HTML5 Reset :: A simple set of templates for any project
"Like a lot of developers, we start every HTML project with the same set of HTML and CSS files. We've been using these files for a long time and have progressively added bits and pieces to them as our own personal best practices have evolved.

Now that modern browsers are starting to support some of the really useful parts of HTML5 and CSS3, it's time for our best practices to catch up, and we thought we'd put our files out there for everyone to use. By no means do we see this as the One True Way to start every project, but we think it's a good starting place that anyone can make their own."
framework  webdev  webdesign  templates  css3  css  html5  html  via:spencerbeacock 
december 2012 by robertogreco
Web Audio API Prototype I — Acid Defender
"This is a web experiment, merging music-making with gameplay. All sounds (except for the snare and kick drum) are synthesized in the web browser and all sounds are sequenced in the web browser.

You can either play the game, in which you must evade the "evil" red squares who want to destroy your notes, or you can play the jam mode with no enemies and more controls.

This web app doesn't use Flash to generate either the graphics (HTML5 canvas is used) nor the audio. This is possible thanks to the Web Audio API which allows for flexible and efficient creation/routing/mixing of audio signals. It's currently only supported by WebKit based Browsers but will hopefully find more support in other browsers soon. The jam mode is just a bonus – off course there could be a better interface for the drums/synth and more variety."
2012  music  patrickborgeat  html5  gaming  games  web  internet  sound  aciddefender 
november 2012 by robertogreco
Savory | The new platform for digital publishing
"NOW writers, editors, and publishers have a new tool to design and publish narrative content on the web.

Savory™ provides app-like designs for publications, and an on-line content management system to build them.

Powered by Treesaver®, the adaptive HTML technology, Savory lays out content onto pages that fit any size screen. Desktops, laptops, tablets and phone. Any device that has a browser.

Savory is an upgrade from blog hosting services. It's made for multiple stories or chapters. And publishers can produce editions whenever they want—and add updates any time.

Sign up for for the Charter Rate, only $49 (€49) a month."
browser  browsers  savory  newspapers  magazines  books  html  adaptivehtml  web  copenhagen  epublishing  epub3  epub  design  publishing  html5  digitalpublishing  epubs 
september 2012 by robertogreco
How Apple Killed the Linux Desktop and Why That Doesn't Matter | Wired Enterprise | Wired.com
"“Many people who were talking about Free Software are the people talking about the open web now,” de Icaza says.

One of them is Stormy Peters, the former executive director of the GNOME Foundation. She’s still on the GNOME Foundation board an like de Icaza she still keeps some Linux machines around. But as director of websites and developer engagement at the Mozilla Foundation, her focus is now on the open web.

“The reason I’m personally at Mozilla is that I saw a lot of websites that weren’t designed with the principles of free software,” she says. Thanks to AJAX and HTML5, the web has become the dominant platform for applications she says.

In what ways can the principles of free software be applied to the web? Peters says one of the most important aspects of open source software is that you, or someone you trust, can examine an application’s source code and see what it’s doing."
stormtpeters  xfce  gnome  software  freesoftware  mozilla  2012  applications  html5  webapps  ajax  opensource  mac  osx  apple  linux 
august 2012 by robertogreco
320 and Up | The ‘tiny screen first’ responsive boilerplate
"1. A working toolkit
Frameworks and boilerplates like HTML5 Boilerplate and Bootstrap are great, but they include some files and styles you’ll use once in a blue moon. ‘320 and Up’ includes only things I use when I start a project.

2. LESS and Sass
LESS and Sass have transformed the way we write CSS. ‘320 and Up’ is built with LESS and CSS includes our trusted mixins and variables. If you’re not ready for LESS, don’t worry, use the plain ol’ CSS version.

3. New Upstarts
‘Upstarts’ are responsive design patterns for the things we build every day. Get started faster with easily customisable HTML and LESS CSS imports or write your Upstarts and contribute them on Github."
responsivedesign  html5boilerplate  html  css3  css  mobile  html5  responsive  boilerplate  responsivewebdesign 
august 2012 by robertogreco
Initializr - Start an HTML5 Boilerplate project in 15 seconds!
"Initializr is an HTML5 templates generator to help you getting started with a new project based on HTML5 Boilerplate. It generates for you a clean customizable template with just what you need to start!"
boilerplate  html5boilerplate  responsivedesign  html  initializr  webdev  template  blueprint  tools  code  css  css3  webdesign  generator  framework  html5  responsivewebdesign 
august 2012 by robertogreco
Modernizr: the feature detection library for HTML5/CSS3
"Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser."
modernizr  javascript  webdesign  html  webdev  css  css3  html5 
august 2012 by robertogreco
Platforming Books — by Craig Mod
"Transitions from physical to digital don't need to be one-to-one forced representations. A defining quality of good design is one in which the essence of a thing can be transmitted between mediums while staying true to the new medium. Or, in Mr. Chimero's words, "What is the marker of good design? It moves." 13

Is everything perfect? No. But it's pretty good. Certainly acceptable. These platforms are still young and evolving. As they mature, we'll be watching and making more beautiful, better formatted digital editions."

"The massive shifts in publishing in the past two years have been those of adoption and distribution. Crowd funding can help provide publishing capital. If you create just one file — one file — an EPUB, you can publish to nearly every single mobile device in the world."

"If you’re a publisher wondering what to do, the lowest investment, highest return action in this liminal stage of digital publishing is to embrace open EPUB standards."
epub3  artspacetokyo  design  2010  2012  ipad  iphone  ipod  kindle  digital  books  publishing  epub  ebooks  craigmod  html  html5  epublishing  digitalpublishing  epubs 
august 2012 by robertogreco
Robin Rendle · Call Me Interactivity
"We are all tempted by inter­ac­tiv­ity; video & audio snip­pets, data charts that can be flicked and pushed, let­ters that can be popped & pinched. But how many of these fea­tures enhance the rela­tion­ship between reader and writer? Due to the con­straints I men­tioned pre­vi­ously, we most likely won’t recog­nise the dig­i­tal book in a decade. This is because they won’t be built in the same way, they won’t be writ­ten in the same way & they won’t be funded & pub­lished in the same way either. These prob­lems, some eco­nomic, some tech­ni­cal, will force us to con­sider alter­na­tive meth­ods of think­ing about con­tent, space, sto­ry­telling & time.

The line that bor­ders pixel & paper has been crossed, bound­aries have been bro­ken, but the hori­zon swells with oppor­tu­nity. And so these uncharted, dig­i­tal spaces demand not only new types of think­ing, pub­lish­ing and design, but also a new form of sto­ry­telling, new kinds of heroes and mon­sters, new worlds to explore…"
technology  mobydick  leonwiedeltier  oliverreichenstein  craigmod  content  flexibility  control  mandybrown  design  ebooks  digitalpublishing  publishing  interactivity  interactive  2012  future  books  robinrendle  epub3  html  html5  moby-dick 
august 2012 by robertogreco
Stop Publishing Web Pages - Anil Dash
"Start publishing streams. Start moving your content management system towards a future where it outputs content to simple APIs, which are consumed by stream-based apps that are either HTML5 in the browser and/or native clients on mobile devices. Insert your advertising into those streams using the same formats and considerations that you use for your own content. Trust your readers to know how to scroll down and skim across a simple stream, since that's what they're already doing all day on the web. Give them the chance to customize those streams to include (or exclude!) just the content they want."
facebook  pinterest  api  internet  web  cms  html5  content  advertising  ads  twitter  apps  tumblr  streams  anildash  2012  socialmedia  media  design  streaming  publishing  scrolling  pagination 
august 2012 by robertogreco
How to Teach Web-Building to Anyone
"I'm making some big shifts in my work in the coming months (read: focusing my energies rather than what's become the scattershot of freelance writing). I'm thrilled to say that this will mean more time for Hack Education, thanks in no small part to a research and writing project I'll be undertaking for Mozilla.

It's part of the organization's larger learning and literacy efforts, and my piece will involve researching practices and pedagogies and interviewing teachers, learners, technologists about tools for teaching programming for the Web. Specifically (or rather, conceptually), I'm asking the question: Do we need a "'Scratch' for HTML5?" All my findings and conversations will be written up here on this blog."
srg  edg  kids  2012  programming  coding  web  webdev  html5  html  audreywatters  children  webdesign 
february 2012 by robertogreco
Learn Web Design, Web Development, and iOS Development - Treehouse
"What do you want to learn today?

Web Design: CSS, CSS3, Aesthetic Foundations, HTML, HTML5 and Responsive Web Design.

Web Development: HTML5, JavaScript and Introduction to Programming.

iOS: Build iPhone and iPad apps with Objective-C, Xcode and more."
webdev  howto  tutorials  coding  programming  ipad  iphone  ios  xcode  objective-c  responsivewebdesign  css3  css  srg  edg  javascript  html5  html  design  webdesign  webdevelopment  responsivedesign 
january 2012 by robertogreco
Play My Code | Play, Build and Share games online!
"Play My Code is an online platform for building, playing and distributing browser games. Powered by HTML5, you can build within the browser and embed your games anywhere."
browsergames  projectideas  teaching  learning  children  coding  classideas  srg  edg  programming  gamedev  html5  javascript 
december 2011 by robertogreco
OFF MY LAWN! – Jeffrey Zeldman Presents The Daily Report
"It is publishing. It is humanity. It is the vanguard of ideas clashing against the rearguard of commerce. This is not new. This is all to be expected. We must stop raising our eyebrows and chuckling at it. We must decide to accept the world as it is, or to roll up our sleeves and help."
web  webdev  publishing  design  irony  responsivedesign  webpublishing  change  changemaking  html5  standards  2011  responsivewebdesign  webdesign 
november 2011 by robertogreco
Radi
"Radi is a Mac app that can produce pretty much any kind of visual content for the web. Images, animations, vector graphics, video clips, realtime visual effects, JavaScript programming...

With Radi, getting your visual ideas on the web is easier than ever. Radi creates web pages that comply to modern standards and can be easily embedded in any kind of site.

Heard about HTML5 yet? It's the new standard for the web. Apple loves it. Microsoft fully supports it. Google says it rocks. And Radi lets you enjoy it without learning to code. Radi is designed from the ground up to help you create content that will take full advantage of HTML5 features."
design  web  video  software  tools  html5  webdev  classideas  pauliolaviojala  radi  mac  macosx  applications  osx  webdesign 
august 2011 by robertogreco
Baker Ebook Framework 2.0
"Baker is an HTML5 ebook framework to publish on the iPad using open web standards"
books  mobile  iphone  webstandards  web  html5  ios  ipad  publishing  baker  epublishing  ebooks  digitalpublishing 
august 2011 by robertogreco
The beginning of the end of Google, and why Apple is the creator's friend | Technology | guardian.co.uk
"He's extremely tough on Google, stating that the era of search is over because of the rise of specialist search through apps, that Google "about to get a taste of what the music industry has been dealing with for a decade" as the tech world changes around it. He makes the astute observation that it was the lack of differentiation, what appeared to be the equality of information online, that undermined credible brands…

He's evangelical about the iPad and iPhone as devices because of their massive adoption rate, but goes on to say that HTML5 is the greatest creative and business opportunity for content creators since Google and Microsoft began to monopolise and monetize the content of others over the past twelve years…

"Near term, focus your platform strategy on Apple," he advises musicians. "Long term, focus on HTML5. The sooner you commit to HTML5, the more likely you will produce something of economic value."
google  apple  technology  trends  html5  microsoft  applications  iphone  ipad  search  rogermcnamee  web  online  internet  ios 
july 2011 by robertogreco
Khoi Vinh: Publishers Should Be Developing for the Mobile Web Instead of Making Replica Apps | Betabeat — News, gossip and intel from Silicon Alley 2.0.
"For this week’s cover story about Condé Nast’s struggle developing for the iPad, Betabeat had the opportunity to talk to Khoi Vinh…On his widely-read design blog, Subtraction, Mr. Vinh has repeatedly expressed his skepticism toward publishers like Condé Nast and Hearst and software companies like Adobe for thinking that what iPad readers want is a magazine replica app that takes a print-centric approach to tablet design. But we didn’t get the chance to include some really interesting predictions Mr. Vinh made about the direction he thinks consuming content on the iPad is heading (in short: back to the browser) and what readers really want.

Mr. Vinh, who recently released a book on web design, seem to have contracted that start-up fever making its way around the city and is currently working in stealth mode on an app of his own. He compared the bells-and-whistles of the current magazine app rush to the CD-ROM bubble and advised publishers to think more like Netflix."
khoivinh  mobile  ipad  mobileweb  webbapps  content  2011  html5  browser  apps  applications  browsers 
july 2011 by robertogreco
Google Swiffy
"Swiffy converts Flash SWF files to HTML5, allowing you to reuse Flash content on devices without a Flash player (such as iPhones and iPads).

Swiffy currently supports a subset of SWF 8 and ActionScript 2.0, and the output works in all Webkit browsers such as Chrome and Mobile Safari. If possible, exporting your Flash animation as a SWF 5 file might give better results.

Your browser may not display Swiffy's output correctly. You need a Webkit browser such as Chrome or Safari for the gallery and previews to be displayed correctly."
swf  flash  html5  conversion  webdev  mobile  video  tools  online  web  design  google  googleswiffy  swiffy  webdesign 
july 2011 by robertogreco
Paper.js
"Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface."<br />
<br />
[via: http://prostheticknowledge.tumblr.com/post/7095795141/q-bertify-your-images-with-this-example-of ]
design  web  visualization  vector  graphics  html5  bezier  paperjs  javascript 
july 2011 by robertogreco
MTA.ME
"At www.mta.me, Conductor turns the New York subway system into an interactive string instrument. Using the MTA’s actual subway schedule, the piece begins in realtime by spawning trains which departed in the last minute, then continues accelerating through a 24 hour loop. The visuals are based on Massimo Vignelli’s 1972 diagram."
music  visualization  html5  audio  maps  mapping  subways  nyc  mta 
march 2011 by robertogreco
DropMocks
"DropMocks is the easiest way to create and share beautiful image galleries online"
html5  hosting  free  images  galleries  photography  dropmocks  via:robinsloan 
december 2010 by robertogreco
Daring Fireball: Masquerading as Mobile Safari to Get Websites to Serve HTML5 Video to Safari on Mac OS X
"whenever you run into a video player that claims to require Flash Player, invoke the Develop → User Agent → Mobile Safari 3.2.2 — iPad command. This reloads the current page, but with Safari claiming to be Mobile Safari running on the iPad. It does not change the way that Safari renders the page — i.e., it doesn’t make the desktop Safari render pages with zooming or layout differences to mimic the way Mobile Safari renders pages on the iPad. All it does is tell Safari to identify itself as Mobile Safari to the server. The result is that if the server does any sort of user-agent detection to figure out whether to serve video using Flash or HTML5, you’ll get the HTML5 version.

This trick makes video work in Safari on Mac OS X — with no Flash — from Flickr, Vimeo embeds, TED, MSNBC, and probably any other site that offers video that works on the iPad. This doesn’t work for all video, but it should work for any video that works on the iPad."
macosx  osx  safari  howto  html5  video  mac  browsers  flash  hacks  daringfireball  browser 
november 2010 by robertogreco
HTML5 Audio Safari Extension // ShaunInman.com
"I subscribe to a number of blogs that post audio files on a regular basis (like composer of Battlestar Galactica and The Walking Dead, Bear McCreary and a number of game music sites). Connor McKay’s YouTube5 Safari extension addresses most videos I encounter and Open in Google Chrome works for the rest but while video might demand attention audio is ambient. It doesn’t makes sense to keep a second browser open just for background noise but I couldn’t find a similar extension for audio. So I made one.

HTML5 Audio Safari extension replaces a number of Flash-based audio players with the HTML5 audio element."
extension  plugin  safari  macosx  mac  html5  flash  shauninman  audio  osx 
november 2010 by robertogreco
Yiibu - About this site...
"The site is designed using the ‘mobile first’ principle. Also incorporated are elements of responsive design.

The base content and default presentation are mobile, and optimized for the very simplest devices first. We've defined this as 'basic' support.

Devices with small screens and media query support are served an enhanced layout—and occasionally—more complex content. We've called this 'mobile'.

Finally, the layout and content are enhanced to reflect the 'desktop' context.

On the first visit, the server checks for a 'properties' cookie containing specific browser 'feature support' results (obtained from tests carried out by a little bit of JavaScript). Devices that don't supply a 'properties' cookie, or have JavaScript disabled are always served the basic version of the site."

[See also http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu AND http://www.metaltoad.com/blog/stop-you-are-doing-mobile-wrong AND http://www.lukew.com/ff/entry.asp?933 ]
mediaqueries  mobilefirst  responsive  webdesign  web  mobile  html5  standards  browsers  adaptive  yiibu  mobileweb  webdev  via:preoccupations  development  design  usability  ux  progressiveenhancement  browser 
october 2010 by robertogreco
Radarmatic
"You’re looking at the level of precipitation in the air, as measured by a network of weather radar sites called NEXRAD.<br />
<br />
The National Weather Service makes the raw data from 200 radars across the continental US and overseas available on noaa.gov for anyone to use, usually within minutes of being generated. Radarmatic caches and translates the radar data from its native binary format to JSON and then republishes it as a web service.<br />
<br />
The radar imagery on the home page is rendered in-browser using Javascript and the HTML5 canvas element."
weather  maps  mapping  nws  meteorology  html5  geography  radar  faa  dod  dBZ  noaa 
september 2010 by robertogreco
The Wilderness Downtown
"An interactive film by Chris Milk…Featuring "We Used To Wait"…Built in HTML5" [For Chrome only, it didn't work so well on my Macbook, but I found the concept intriguing.]
chrome  google  googlemaps  googleearth  memory  film  html5  maps  mapping  location  googlestreetview  video 
september 2010 by robertogreco
Zhook is a simple ebook format. - Ochook.org
"Perhaps you want to craft beautiful ebooks. The open industry-standard format, EPUB, is pretty good and very comprehensive, but it’s not really intended for making books by hand.

*Zhook keeps it simple. Just create a webpage (yes, probably a very long webpage) and zip it up.

*Zhook is really easy to test. You can do most of your testing in Firefox and Safari or Chrome. If you zip and upload it here, you can do further testing and tweaking quite quickly with Ochook.org tools.

*Zhook has higher-fidelity semantics. This is because Zhook uses HTML5, which has more useful semantic elements (like grouping headings together with hgroup, or captioning an image with figure). We have good uses for all that semantic richness, as you’ll see.

And perhaps most importantly: * Zhook makes a best-of-breed EPUB."
publishing  epub  ebooks  writing  books  development  via:robinsloan  zhook  html5  zip  epublishing  digitalpublishing  epubs 
august 2010 by robertogreco
Video site Vimeo uses HTML5 to get more iPhone friendly | VentureBeat
"Video sharing site Vimeo says it’s going to be the latest video company using the new HTML5 format as its path onto mobile devices. The site plans to release a “Universal Player” later today that will detect your smartphone browser and determine what video format it will support. So it might play in HTML5 on an iPhone or iPad, but play in Flash on an Android phone. …<br />
<br />
Vimeo, which is owned by media company IAC, also announced a new Watch Later feature, which allows users to bookmark videos for future viewing. Watch Later sounds most interesting when used across devices, so that someone could start watching a video on their computer, then continue it on their television in the Vimeo channel in the Roku set-top box, and finally finish it on Vimeo’s mobile website."
vimeo  2010  html5 
august 2010 by robertogreco
MiniApps - HTML5 apps for Apple iOS, Google Android & other mobile platforms
"All apps are free and open source. MiniApps does not use any in–app third–party advertisements. Help keep it that way and show a little love using Flattr."
iphone  ipad  applications  ios  android  html5  html  ipodtouch  javascript  mobile  mobileweb  webapp  webdev  development  software  web  webdesign 
july 2010 by robertogreco
WKTouch - Multi-touch JavaScript plugin for Apple iOS - MiniApps Blog
"I've just released a little JavaScript plugin called WKTouch up on Google Code. It's a tiny plugin for Apple's iOS Safari browser, enabling multi–touch drag, scale and rotate on HTML elements."
html5  via:robinsloan  touch  webdesign  webdev  javascript  mobile  multitouch  iphone  ipad  html  development  ios 
july 2010 by robertogreco
Google Font Directory
"The Google Font Directory lets you browse all the fonts available via the Google Font API. All fonts in the directory are available for use on your website under an open source license and served by Google servers.
google  fonts  typography  javascript  html5  html  webdev  api  css  design  webdesign  free  type  googlefonts 
may 2010 by robertogreco
Announcing A Book Apart | Jason Santa Maria
"I crafted a very simple page design to let the text take the spotlight. It’s a thin book, both in width and thickness, and I spent a long time fiddling with column widths and grids before settling on a comfortable line length. Our books are brief enough that we can’t predictably print on the spines; so I decided to wrap the title from the spine around to the back cover, giving the spine and back cover some identification and texture."
books  pamphletbooks  coding  css  webdev  html  typography  code  html5  alistapart  webdesign 
may 2010 by robertogreco
Official Google Mobile Blog: Google services on the iPad and tablet computers
"While surfing the web on your iPad, we expect many of you will want to check your Gmail. If you go to gmail.com in your browser, you’ll see something different than what you’re used to on the desktop. We’re releasing an experimental user interface for the iPad built on the Gmail for mobile HTML5 web app that we launched last year for the iPhone and Android devices. Those devices have large screens compared to other phones, and tablets like the iPad give us even more room to innovate. To take advantage of the iPad’s large display, we’ve created a two-pane view with your list of conversations on the left and messages to the right."
ipad  internet  html5  google  gmail  webapps  applications 
april 2010 by robertogreco
The Daily Maverick :: YouTube turns five, hyperspaces interweb into the future
"Google, which bought Youtube less than two years after it was founded for what was then considered outrageously expensive $1.65 billion, does not want Microsoft or Apple (or anybody else) to own the dominant video format. So it has become the biggest early tester of HTML5. Your browser doesn't support HTML5? Google launches its own browser, Chrome. Need to use Internet Explorer at work because that's all your IT department supports? Google launches a Chrome framework that effectively subverts IE and makes it HTML5-compatible. The final blow will be the day that YouTube switches off Flash and starts streaming only to HTML5 browsers. On that day all browsers will be HTML5 compatible or they will perish in the flames of user outrage."
youtube  google  html5  strategy  technology  design  culture  internet  future  history  web  video  business  crossmedia  flash  2010  browser  browsers 
february 2010 by robertogreco
Daring Fireball: PastryKit
"After installing the User Guide app to your home screen and launching it from there, there’s really very little to suggest that it isn’t a native iPhone application. No MobileSafari address bar at the top, no MobileSafari toolbar at the bottom. Scrolling is fast and has momentum. It even works perfectly offline, because the contents of the user guide are stored locally in a database using HTML5."
javascript  webapp  daringfireball  webdev  programming  development  iphone  mobile  html5  pastrykit  applications  scrolling  ios  webdesign 
december 2009 by robertogreco

Copy this bookmark:





to read