3D #Pong clone in #Javascript - no a trace of #Flash in sight (I have no Flash on my computers)... I’m impressed: https://www.cubeslam.com #HTML5
Think that the Javascript Pong is not insane enough ? Then look at the implementation in pure #CSS :
http://www.sitepoint.com/css3-pong-insane-things-to-do-with-css
The State Of #Responsive #Web #Design | Smashing Mobile
http://mobile.smashingmagazine.com/2013/05/29/the-state-of-responsive-web-design
Un article qui fait la synthèse d’à peu près toutes les techniques qui tournent autour du responsive. L’état de l’art quoi.
Signalé sur #Openweb par Élie Sloïm. Version française bientôt apparemment.
#développement #css #html
Montage - HTML5 framework
►http://montagejs.org
Montage data binding makes it easier to manage your application and UI state. A UI component or Montage object can establish one way or bi-directional binding with another component or object. The source object is kept in sync when you update the bound property of the bound object.
Welcome - Polymer
http://polymer-project.appspot.com
Polymer is a new type of library for the web, built on top of Web Components, and designed to leverage the evolving web platform on modern browsers.
#html #css #javascript #framework
Avoiding Unnecessary Paints - HTML5 Rocks
http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints
The Sea of Ideas » No, HTML5 does not have a performance issue.
http://paulbakaus.com/2013/05/13/no-html5-does-not-have-a-performance-issue
Well, not any worse than any other cross-platform technology. This has been bugging me for a while now. You know, the clueless managers that ask you questions like “HTML5 seems to have a performance issue, it doesn’t run well on my Internet Explorer 6!”. This has to stop.
Transitions CSS3 - Alsacréations
http://www.alsacreations.com/tuto/lire/873-transitions-css3-animations.html
Animer les pages web uniquement à l’aide de styles CSS, sans apport de JavaScript : le module CSS3 Transitions
#animation #html5 #transition #css #css3
Et une bonne visualisation de la propriété timing-function
►http://css3.bradshawenterprises.com/transitions
« Automatic Figure Numbering with CSS Counters »
http://tympanus.net/codrops/2013/05/02/automatic-figure-numbering-with-css-counters
Dans le #html5, nouvel élément <figure> :
Basically, instead of adding your images this way:
<!— This is not good enough —>
<img src='http://static3.seenthis.net/cute-kitty.jpg' alt="This is a cute kitty!" />
… you can do something like this:
<!— This is good and semantic —>
<figure>
<img src='http://static3.seenthis.net/cute-kitty.jpg' alt="" />
<figcaption>This is a cute kitty!< / figcaption>
< / figure>
Et dans le #css, un compteur de <figure> :
We want to number our images so that they are prefixed by “Fig. 1 – …”, “Fig. 2 – …” and so on, right? Let’s do it simply.
.article {
counter-reset: figures;
}
.figure {
counter-increment: figures;
}
.figure figcaption:before {
content: ’Fig. ’ counter(figures) ’ - ’;
}
Those 3 lines of CSS are enough to number our figures automagically. Isn’t that awesome?
Figure et figcaption n’ont pas de balise de fermeture ?
si, bien vu : c’est seenthis qui enlève les / (je tente en ajoutant des espaces)
Merci, c’est pour mon confort intellectuel.
Particulièrement difficiles à styliser les figcaption, elles comprennent mal les widhts (ou c’est moi qui, encore une fois, n’a rien compris)
Modèles de présentations HTML5 pour remplacer PowerPoint | Le blog de NicoLargo
http://blog.nicolargo.com/2012/07/modeles-de-presentation-html5-pour-remplacer-powerpoint.html
L’avenir est dans le web.(Permalink)
Est-ce que quelqu’un ici arrive à faire fonctionner la GamePad API du HTML5, telle que décrite ici :
http://www.gamepadjs.com
et théoriquement testable là :
http://sgraham.github.io/gamepad.js/example
Sur mon Mac, je n’arrive rigoureusement à rien :
– Chrome ne me propose pas, dans chrome ://flags, d’activer quoi que ce soit concernant une manette de jeu ;
– Firefox répond au javascript qu’il connaît cette API, mais n’interagit pas du tout avec mes manettes (mais aucune d’elle n’est un contrôleur Xbox, ce sont de banales manettes USB – dont celle de la Freebox).
Et sous Parallels avec Windows XP, pas mieux.
Et tu vas pas le croire : on répond à un appel d’offre dans lequel ce serait top-kikou que je puisse contrôler une appli HTML5 avec un joystick. #mouahaha
Why Medium Notes Are Different and How to Use Them Well — Ev Williams — Medium
https://medium.com/about/5972c72b18f2
Notes are (...) useful for lots of things: They help improve writing. They add valuable supplementary information. They incorporate new viewpoints. They give meaningful feedback to those who write things. And they let people connect over ideas.
(...) traditional comments (...) do the same thing (in ideal circumstances). Notes are much better for the type of ideas and stories people share on Medium. Here’s why (and how they work):
https://dl.dropbox.com/s/j8kglzvqjdj1osz/medium-notes.png
#Web #commentaires #conception
Petite question d’implémentation : comment déterminer le « paragraphe » quand on modifie le texte ? (On voit dans le code source que les paragraphes ont un « name=AAAA », un code hexa de quatre chiffres.)
Pour l’implémentation, naïvement, à part compter les paragraphes à l’enregistrement et les indexer, je vois pas trop.
J’aimerais un jour essayer de transformer les notes de bas de page de #spip de cette manière. Un peu comme Bret Victor aussi (par ex. ►http://worrydream.com/MagicInk )
J’entrevois plusieurs possibilités pour celà : la plus simple, via du #javascript, sinon en réintégrant, dans le rendu de SPIP le contenu des notes dans le flux du document et en les flottant à droite (ou en absolute, comme Bret Victor). L’idéal, bien sûr, est une solution « responsivable » (la deuxième piste est qd même plus propre).
Des idées sinon pour le balisage #HTML (sémantique) de ces notes ?
#CSS
Webdesign für Anfänger
Man hat mich gefragt, wie man mehr aus einer WWW-Seite machen kann, als mit den automatischen Generatoren von 1&1 geht. Aus dieser Antwort ist mehr als ein einzelner Hinweis geworden.
Ein paar Notizen und Links zu Webtools.
1. Texteditor und FTP
Am besten startest Du, indem Du das hier liest:
http://de.selfhtml.org
Dann besorgst Du Dir einen Texteditor und legst los:
http://notepad-plus-plus.org
(Das bezieht sich auf Windows. Wenn Du unter Linux oder Mac arbeitest,
hast Du schon alle grundlegenden Tools)
Du mußt dann Deine Dateien auf Deinen Server hochladen. Dazu verwende ich die Mozilla Firefox Erweiterung „FireFTP“. Man installiert sie wie alle FF Erweiterungen über das Tools-Menü (ich beziehe mich immer auf die englische Version eines Programms, falls sie vorliegt).
Das war die Version für Männer, die sich mit der Axt Blockhütten bauen.
Jetzt die softe Version. Die Infos sollte man sich aber auf jeden Fall reintun, damit man überhaupt weiß, worum es geht.
2. WYSIWYG-Editor
Einen guten Eindruck macht Kompozer, ist auch für Einsteiger geeignet und kann trotzdem sehr viel.
http://kompozer.net/features.php
Die Dokumentation muß man auch hier lesen:
EN
http://www.charlescooke.me.uk/web/kz-ug-home.htm
DE
http://www.kompozer-web.de/download/kompozer-anleitung.pdf
3. Web-CMS und Blog-Software
Das ist die Lösung für langfristig angelegte Projekte mit viel Inhalt, wo sowohl Texte als auch Bilder und Videos verwaltet werden sollen, externe Datenquellen angezapft und eigene Daten in unterschiedlichen Formaten für andere Websites angeboten werden. Meist gibt es auch Newsletter-Tools und viele andere Erweiterungen dazu. Ihre Verwendung
wird durch die Kenntnis von 1. und 2. erleichtert.
Wenn Du regelmäßig Texte und Videos in einer nett gestalteten Umgebung veröffentlichen möchtest, wäre Wordpress eine gute Wahl, oder, falls Du Lust hast Dich mit HTML zu beschäftigen (siehe 1.), um Dein Design selber zu machen und wirklich alles zu verstehen und zu kontrollieren, kann ich Dir SPIP empfehlen, das ähnlich einfach wie Wordpress zu bedienen ist, dabei aber mehr Flexibilität bietet. Außerdem arbeite ich seit über 10 Jahren an der Entwicklung von SPIP mit :-)
http://wordpress.com
http://www.spip.net/en_rubrique25.html
4. online Blog-Dienste, Social Networks et al.
Wordpress, Google, Blogger, usw. erlauben Dir auch ein mehr oder weniger persönliches Design zu verwenden, bei Facebook geht das weniger gut.
5. There’s an app for everything
Websites sind eigentlich durch, heute baut man Apps, die u.U. auch im Web angezeigt werden können. Dazu muß man leider entweder reichlich Geld in die Hand nehmen, oder viel Stoff pauken. Trotzdem lohnt sich ein Blick und vielleicht ein Versuch mit den folgenden Werkzeugen. Seinen PC sollte man sehr gut kennen, um sie installieren zu können.
Der MIT App-Inventor
►http://appinventor.mit.edu
war ein Google-Projekt, mit dem Kinder Android-Apps zusammenklicken können. Total cool, es geht fast alles !
Titanium SDK
Der Hammer für Programmierer, macht Apps und Websites für alle Plattformen, man sollte schon ein paar Programmiersprachen beherrschen.
„Create native, hybrid, and mobile web apps through a JavaScript-based SDK“
http://www.appcelerator.com/platform/titanium-sdk
Phonegap
Ähnlich wie Titanium, aber auf Eclipse-Basis
►http://phonegap.com
Apache Cordova
Apache Cordova is a set of device APIs that allow a mobile app developer to access native device function such as the camera or accelerometer from JavaScript. Combined with a UI framework such as jQuery Mobile or Dojo Mobile or Sencha Touch, this allows a smartphone app to be developed with just HTML, CSS, and JavaScript.
PhoneGap is a distribution of Apache Cordova. You can think of Apache Cordova as the engine that powers PhoneGap, similar to how WebKit is the engine that powers Chrome or Safari.
http://cordova.apache.org
Mehr davon ?
Voilà : „List of rich Internet application frameworks“
https://en.wikipedia.org/wiki/List_of_rich_internet_application_frameworks
Das war ein kurzer Überblick über kostenlose Open-Source-Lösungen, wenn Du Geld ausgeben willst, kann man natürlich über erheblich mehr sprechen - viel Besseres kommt dann aber auch nicht dazu.
6. Die Abteilung für Nerds :
Wer den Kampf gegen die Überwachung durch Google, Facebook, Verfassungsschutz & Co. betreibt, wird sich autonomen Lösungen zuwenden, die ohne 1&1 oder andere Serverhoster auskommen. Wie immer ist Wissen die Voraussetzung der Freiheit, aber super-kompliziert ist das alles nicht :
https://unhosted.org
unhosted web apps
freedom from web 2.0’s monopoly platforms
definition
Also known as „serverless“, „client-side“, or „static“ web apps, unhosted web apps do not send your user data to their server. Either you connect your own server at runtime, or your data stays within the browser.
Die Daten bleiben dann auf dem eigenen Rechner oder werden so im Internet verteilt, daß sie zwar nutzbar, aber keinem Besitzer zuordbar sind, in der „Cloud für Autonome“ sozusagen. Das hier ist ein Ansatz dazu:
http://remotestorage.io/integrate
Im weitesten Sinne kann man auch die folgenden System als Tools für die Herstellung von Websieten betrachten, auch wenn sie einen anderen Schwerpunkt haben. Ein Webentwickler und -redakteur wird an ihnen oder ähnlichen Programmen jedoch kaum vorbeikommen.
SeaMonkey
http://www.seamonkey-project.org/doc/features
http://webdesign.about.com/od/freewebeditors/fr/seamonkey.htm
All-in-One WYSIWYG Editor and Browser (and Email and Chat)
About SeaMonkey
SeaMonkey is the Mozilla project all-in-one Internet application suite. It includes a web browser, email and newsgroup client, IRC chat client, and composer — the web page editor. One of the nice things about using SeaMonkey is that you have the browser built-in already so testing is a breeze. Plus it’s a free WYSIWYG editor with an embedded FTP to publish your web pages. I don’t like that it doesn’t have HTML5 or CSS3 support, and you can’t change the doctype, even for new pages. But it is a free WYSIWYG editor, which there aren’t many of.
BlueGriffonTM
►http://bluegriffon.org
The next-generation Web Editor based on the rendering engine of Firefox. BlueGriffon is a new WYSIWYG content editor for the World Wide Web. Powered by Gecko, the rendering engine of Firefox, it’s a modern and robust solution to edit Web pages in conformance to the latest Web Standards.
BlueGriffon EPUB Edition
http://www.bluegriffon-epubedition.com/BGEE.html
NetBeans IDE
https://netbeans.org/index.html
The Smarter and Faster Way to Code
Quickly and easily develop desktop, mobile and web applications with Java, HTML5, PHP, C/C++ and more.
NetBeans IDE is FREE, open source, and has a worldwide community
of users and developers.
TweetDeck
http://tweetdeck.com
TweetDeck is an app that brings more flexibility and insight to power users.
http://linuxundich.de/de/software/twittern-mit-tweetdeck-fur-chrome
Das Chrome TweetDeck ist eine App für Googles Chrome Browser. Ihr könnt Sie über den Webstore installieren.
Scribefire
http://www.scribefire.com
ScribeFire is an extension for the Mozilla Firefox Web browser, Google Chrome Web browser, Opera Web Browser, and Apple Safari Web browser that allows you to easily post to all of your blogs.
Theoretisch kann Scribefire auch SPIP befüllen:
Support xml-rpc pour SPIP
http://www.mediaspip.net/technical-documentation/plugins-used-by-mediaspip/xmlrpc-une-api-xml-rpc-pour-spip/article/support-xml-rpc-pour-spip
VMware Zimbra Desktop
http://www.zimbra.com/products/desktop.html
Zimbra Desktop provides a rich and consistent user experience offline.
The free Zimbra Desktop client delivers a consistent user experience offline, so email, voice, social, calendar, contacts, files and documents are synchronized and locally accessible when on the road. Zimbra Desktop aggregates information across accounts (Zimbra, Yahoo! Mail, Gmail, Hotmail, etc.) and social networks (Facebook, Digg, Twitter, etc.) to help make communicating and sharing information easier than ever.
IBM Lotus Symphony
http://www-03.ibm.com/software/lotus/symphony/help.nsf/home
Lotus Symphony Documents
Lotus Symphony Presentations
Lotus Symphony Spreadshee
Noch eine Alternative zu MS Word, OpenOffice und LibreOffice - mit den Anwendungen sollte man auch in WWW-kompatiblen Formaten speichern können. Ausprobieren !
Und zum Abschluß die
List of rich Internet application frameworks
https://en.wikipedia.org/wiki/List_of_rich_internet_application_frameworks
Harter Stoff !
#auf_deutsch #web #html
Alternatives IFTTT
http://bouclans.net.free.fr/osyn/index.php?2012/11/27/15/02/23-alternatives-ifttt
Pistes à étudier
Source : Bouclans.net - Eric
#étudier #être #action #admin #admin #administration #alternative #alternatives #automatisation #bien #blank #blog #bonne #cherchant #cityfacts #cityfactsrc #code #compliquée #créer #cron #daemon #deri #deri #fameux #html #http #ifttt #images #incron #incron #inotify #linux #linux #mais #pipes #piste #pistes #pour #présentation #propres #recettes #semble #service #stories #target #tomber #trouvé #utilisation #viens
« Mobilisons-nous ! Pas de DRM dans le HTML5 et les standards W3C »
http://www.framablog.org/index.php/post/2013/03/22/stop-drm-html5
La question de savoir si oui ou non il y a aura des DRM dans le HTML5 est absolument fondamentale pour le Web de demain. Ce n’est pas une question technique, c’est une question de partage (ou pas).
C’est pourquoi nous vous avions proposé la cinglante réponse de Cory Doctorow à Tim Berners-Lee. C’est pourquoi aussi nous avons traduit cet article très clair de l’Electronic Frontier Foundation qui en appelle à se mobiliser, par exemple en signant la pétition lancée par la Free Software Foundation.
http://www.framablog.org/public/_img/others/hollyweb-small.jpg
Article original :
https://www.eff.org/deeplinks/2013/03/defend-open-web-keep-drm-out-w3c-standards
Les propositions sur les DRM au W3C sont là pour une raison simple : il s’agit d’une tentative d’apaiser Hollywood, qui est irrité par Internet au moins depuis que le Web existe, et a toujours réclamé qu’une infrastructure technique avancée permette de contrôler ce qui se passe sur l’ordinateur du public. Le sentiment est que Hollywood ne permettra jamais la distribution des films sur le Web s’il n’est pas possible de les accompagner de DRM. Mais la crainte que Hollywood puisse récupérer ses billes et quitter le Web est illusoire. Chaque film que Hollywood distribue est déjà disponible pour ceux qui veulent réellement pirater une copie.
#drm #html5 #w3c #partage #majors #industrie_du_divertissement
Cascade Framework
http://jslegers.github.com/cascadeframework/index.html
Also different from Twitter Bootstrap or other CSS Frameworks out there, Cascade Framework can be used for modern browsers and older browsers alike. All features of Cascade Framework support Internet Explorer from IE6 upwards or degrade gracefully.
#HTML5 #CSS #framework #JavaScript
#DRM dans #HTML5 : la réponse de Cory Doctorow à Tim Berners-Lee - Framablog
http://www.framablog.org/index.php/post/2013/03/14/drm-html5-doctorow
Ajouter des DRM au standard HTML aura des répercussions importantes qui seront incompatibles avec les règles fondamentales du W3C.
Un Web construit sur le modèle économique de l’infection urinaire : plutôt que d’innover dans un flot sain, chaque nouvelle fonctionnalité doit venir d’une petite goutte contractée et douloureuse : quelques centimes si vous voulez la lier à un temps spécifique de la vidéo, encore quelques centimes si vous souhaitez intégrer un lien provenant de la vidéo dans une page web, encore plus si vous souhaitez mettre la vidéo sur un autre appareil ou la décaler dans le temps, et ainsi de suite.
L’industrie du logiciel a bien compris qu’il valait mieux faire payer x fois 1 € pour un soft ( pardon une app.... !).
On ne paye plus un « logiciel complet » mais une simple fonctionnalité cela fidélise « le client ».
C’est le principe de la mise à jour payante me direz-vous... ?
Ce n’est alors plus de l’achat c’est de la location « ad vitam... ».
How to lose weight in the browser
http://browserdiet.com
The definitive #front-end performance guide
We’re trying a new way to teach and learn html/css/js. Basically, you just need to write HTML, CSS, Javascript code inside code editors and we’ll record whatever you type. Other people can then “playback” your recording in a video style and learn how you made your creation.
Exemples de tout ce qu’on peut faire avec
#html #css #javascript
#Tidy for #HTML5 (experimental)
http://w3c.github.com/tidy-html5
(installé et renommé tidy-html5 sinon on sait pas comment distinguer avec le vieux tidy)
How Amazon.com’s excellent #javascript dropdown menu works - a lesson in #UI implementation : http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown - I wonder if someone will try to enforce a patent on the trick. #Amazon #HTML
interesting comments on the fact that this was used in the 80s by Apple, then forgotten, then used at NeXT, then forgotten again when Apple Acquired NeXT, and so on. #jQuery_plugin
BEM: Methodology of Effective Site Development
http://bem.info
BEM stands for Block-Element-Modifier. It’s a way to modularize the development of pages. By breaking things into Blocks, being able to break those into Elements, and then use Modifiers on them, we get a neat TLA and a methodology where each part can advance rapidly and independently.No matter if you are a large team or a single developer. BEM gives its benefits for all.
Yup, mais lors de mon premier passage je n’avais pas vu (ou ça n’existait pas ?) le coté XJST et tout le reste du tooling qui va avec. La méthodo n’est pas nouvelle, c’est dans les pratiques depuis pas mal de temps, mais l’outillage me semble bien meilleur que les implémentations ad hoc précédentes (en tout cas celles que j’ai utilisées moi-même).
et donc : #XJST :)
XJST is a DSL for universal data transformations with compiler written on top of the Node.js and OmetaJS and output code working in any browser or on server-side.
une sorte de méthode de transformation de données universels, comme XSLT mais implémentée en #javascript ?
et alors, du coup, c’est quoi un DSL ? :)
#jargon pour ouvriers intellectuels du web :p
Oui, ça reprend des idées de XSLT (principalement les templates et la façon dont ils héritent) ce qui est une très bonne idée quand on doit transformer des données sans vouloir parcourir l’arbre à la main : faire du pattern matching, c’est ’achement mieux.
Un DSL : Domain-Specific Language. C’est un petit langage développé pour les besoins spécifiques d’un domaine. Souvent de nos jours (mais pas toujours) par des ajouts ou contraintes sur un langage existant. En gros c’est du syntax sugar sur une API (je dis ça en bien, hein).
Ah ben ça tombe bien qu’ils soient dans Smashing, ils méritent un peu de coverage.
Je suis moins fan de OOCSS, enfin en tout cas de la métaphore OO appliquée ici, mais il ne faut pas le dire à Stubbornella :