node.js erlaubt die Ausführung von Javascript auf dem Server. Zusammen mit YUI3 gibt es jetzt auch noch einen echten DOM und plötzlich macht alles Spass :-)
Es ist noch ein weiter Weg hin zum Semantic Web, so wie das W3C es sich vorstellt. Kleine Schritte gehen können wir heute mit Mikroformaten, RDFa und den erweiterten Möglichkeiten von (X)HTML 5. Dieser Vortrag auf der webinale 09 zeigt praktische Beispiele und den Nutzen der Anwendung dieser Techniken und wagt einen Blick in die nahe Zukunft.
Für viele Projekte braucht es lediglich einen Bruchteil der Funktionalität und des Codes sogenannter “Premium”-Themes oder Frameworks – denen dafür andere, wichtige Features oft fehlen. Um die Projektanforderungen und das gewünschte Design entsprechend umzusetzen, ist es dann deutlich sinnvoller, ein individuelles Theme zu entwickeln. Die Anwender erhalten so ein intuitives und übersichtliches System mit den Optionen, die sie wirklich brauchen. Und der Browser schlankeren Code ohne unnötigen Ballast. In diesem Talk geht es um folgende Themen:
Wozu überhaupt ein Theme selbst entwickeln? Performance, Sicherheit, Benutzerfreundlichkeit, Design
Anatomie eines Themes: Welche Dateien brauchen wir? Von einem leeren Verzeichnis ausgehend arbeiten wir uns bis zu einem Theme vor, das WP als solches akzeptiert.
Erweiterung durch Custom Post Types und Custom Fields
Tools, die den Workflow bei der Entwicklung erleichtern: grunt, git…
Es ist noch ein weiter Weg hin zum Semantic Web, so wie das W3C es sich vorstellt. Kleine Schritte gehen können wir heute mit Mikroformaten, RDFa und den erweiterten Möglichkeiten von (X)HTML 5. Dieser Vortrag auf der webinale 09 zeigt praktische Beispiele und den Nutzen der Anwendung dieser Techniken und wagt einen Blick in die nahe Zukunft.
Für viele Projekte braucht es lediglich einen Bruchteil der Funktionalität und des Codes sogenannter “Premium”-Themes oder Frameworks – denen dafür andere, wichtige Features oft fehlen. Um die Projektanforderungen und das gewünschte Design entsprechend umzusetzen, ist es dann deutlich sinnvoller, ein individuelles Theme zu entwickeln. Die Anwender erhalten so ein intuitives und übersichtliches System mit den Optionen, die sie wirklich brauchen. Und der Browser schlankeren Code ohne unnötigen Ballast. In diesem Talk geht es um folgende Themen:
Wozu überhaupt ein Theme selbst entwickeln? Performance, Sicherheit, Benutzerfreundlichkeit, Design
Anatomie eines Themes: Welche Dateien brauchen wir? Von einem leeren Verzeichnis ausgehend arbeiten wir uns bis zu einem Theme vor, das WP als solches akzeptiert.
Erweiterung durch Custom Post Types und Custom Fields
Tools, die den Workflow bei der Entwicklung erleichtern: grunt, git…
Präsentation zum Thema "Powerful mostly unknown Javascript-Features", gehalten von Entwicklern der Softwareagentur App Aware: Sascha Hameister und Aron Homberg
OSMC 2014: Icinga Web 2 kann mehr | Thomas GelfNETWAYS
Icinga Web 2 ist leichter, schneller und mächtiger als seine Vorgänger. Doch wir wollen uns nicht zurücklehnen, sondern legen jetzt erst richtig los. Der Großteil der Arbeit steckt bisher unter der Haube und dient nur einem Zweck: das Schreiben von Modulen so einfach als irgend möglich zu gestalten. Und neben den ersten fertigen Modulen steht schon eine ganze Reihe weiterer in den Startlöchern.
Puppet, Forman und mehr integrieren? Endlich mal jeden Switchport samt aktuellem Traffic, STP-Status, VLANs und mehr an einer Stelle ersichtlich haben? Den Chassis-Aufbau gleich mit dazu? Via Jolokia JMX-Bäume durchstöbern? Zertifikate inventarisieren? Tickets mehr als nur verlinken? Der Vortrag gibt einen Einblick in die Architektur von Icinga Web 2 und zeigt anhand konkreter die Integration von Addons und anderen Modulen.
Wie erstelle ich Webapplikationen mit Node.js. Vorgestellt werden verschiedene Frameworks wie Express.js oder Koa. Außerdem wird auf Skalierung eingegangen.
Meine Präsentation von der SEOCampixx2021 zum Thema "Einstieg in XPath für SEO" stellt die Grundlagen von XPath und deren Anwendung in verschiedenen Tools vor, um gängige Fragen aus dem SEO-Alltag zu beantworten.
Textform unter: https://www.seoseb.de/artikel/texte/xpath-fur-seo-ein-einstieg/
Ajax hands on - Refactoring Google SuggestBastian Feder
Die Entwicklung interaktiver Internetseiten und -applikationen (RIAs) schreitet unaufhörlich voran. Nicht zuletzt Google hat sich schon sehr früh mit sehr innovativen Ideen (Mail, Kalender etc.) und deren Umsetzung einen Platz unter den Großen der Internetgemeinde reserviert. Eine Idee hat meines Erachtens die Benutzbarkeit und Anwenderfreundlichkeit von RIAs entscheidend beeinflusst - Google Suggest. Dieser Workshop beschäftigt sich im Detail mit der Erstellung einer solchen Vorschlagsfunktion. Er betrachtet verschiedene JavaScript Frameworks und Bibliotheken und deren Herangehensweisen an diese Aufgabenstellung. Eine kurze Gegenüberstellung von XML und JSON zeigt den Teilnehmern deren Vor- und Nachteile in verschiedenen Situationen der Client-Server-Kommunikation. Eine Betrachtung aus der Usability-Ecke ist ebenso Bestandteil des Workshops wie die Berücksichtigung von Sicherheit und Barrierefreiheit.
Vortrag von Torsten Landsiedel beim WPCamp 2012 in Berlin
"Sicherheit ist kein Zustand, der erreicht werden kann, sondern eine Einstellung."
Es gibt unzählige Artikel zum Thema Sicherheit und WordPress im Netz mit vielen nützlichen, manchmal auch unnützen, Vorschlägen, wie man sein Blog absichern kann. In der Session zu der diese Slides gehören wollte ich die wichtigsten Sicherheitsmaßnahmen vorstellen und die Teilnehmer für das Thema Sicherheit sensibilisieren.
- Einführung in das Thema Sicherheit und WordPress für Anfänger
- Auffrischung des Themas Sicherheit für Fortgeschrittene
- Vorstellung von Plugins zur Verbesserung der Sicherheit
Nähere Infos unbedingt in dem Blogeintrag zu den Slides auf meinem Blog nachlesen:
http://torstenlandsiedel.de/blog/
Accessible Javascript with and without WAI ARIADirk Ginader
The document discusses making JavaScript accessible. It states that JavaScript content should be at least as accessible without JavaScript, nothing should be withheld from non-JavaScript users, and assistive technologies should be able to use the page. It emphasizes that websites must work without JavaScript first, and that CSS should not be used for interaction or hiding content. The document then introduces WAI-ARIA as a way to add semantics and meaning to elements for screen readers through roles, properties, and live regions. It encourages using WAI-ARIA but also not relying on it exclusively.
In this month's YDN Tuesday Dirk Ginader, Web Developer and part of the Accessibility Task Force at Yahoo!, will talk about Web Accessibility.
Starting with basic markup and ending with accessible javascript and WAI ARIA he'll cover best practices and lots of tips and tricks to make your websites and web applications accessible to everyone.
Get more information about the event here:
http://skillsmatter.com/event/ajax-ria/web-accessibility
Präsentation zum Thema "Powerful mostly unknown Javascript-Features", gehalten von Entwicklern der Softwareagentur App Aware: Sascha Hameister und Aron Homberg
OSMC 2014: Icinga Web 2 kann mehr | Thomas GelfNETWAYS
Icinga Web 2 ist leichter, schneller und mächtiger als seine Vorgänger. Doch wir wollen uns nicht zurücklehnen, sondern legen jetzt erst richtig los. Der Großteil der Arbeit steckt bisher unter der Haube und dient nur einem Zweck: das Schreiben von Modulen so einfach als irgend möglich zu gestalten. Und neben den ersten fertigen Modulen steht schon eine ganze Reihe weiterer in den Startlöchern.
Puppet, Forman und mehr integrieren? Endlich mal jeden Switchport samt aktuellem Traffic, STP-Status, VLANs und mehr an einer Stelle ersichtlich haben? Den Chassis-Aufbau gleich mit dazu? Via Jolokia JMX-Bäume durchstöbern? Zertifikate inventarisieren? Tickets mehr als nur verlinken? Der Vortrag gibt einen Einblick in die Architektur von Icinga Web 2 und zeigt anhand konkreter die Integration von Addons und anderen Modulen.
Wie erstelle ich Webapplikationen mit Node.js. Vorgestellt werden verschiedene Frameworks wie Express.js oder Koa. Außerdem wird auf Skalierung eingegangen.
Meine Präsentation von der SEOCampixx2021 zum Thema "Einstieg in XPath für SEO" stellt die Grundlagen von XPath und deren Anwendung in verschiedenen Tools vor, um gängige Fragen aus dem SEO-Alltag zu beantworten.
Textform unter: https://www.seoseb.de/artikel/texte/xpath-fur-seo-ein-einstieg/
Ajax hands on - Refactoring Google SuggestBastian Feder
Die Entwicklung interaktiver Internetseiten und -applikationen (RIAs) schreitet unaufhörlich voran. Nicht zuletzt Google hat sich schon sehr früh mit sehr innovativen Ideen (Mail, Kalender etc.) und deren Umsetzung einen Platz unter den Großen der Internetgemeinde reserviert. Eine Idee hat meines Erachtens die Benutzbarkeit und Anwenderfreundlichkeit von RIAs entscheidend beeinflusst - Google Suggest. Dieser Workshop beschäftigt sich im Detail mit der Erstellung einer solchen Vorschlagsfunktion. Er betrachtet verschiedene JavaScript Frameworks und Bibliotheken und deren Herangehensweisen an diese Aufgabenstellung. Eine kurze Gegenüberstellung von XML und JSON zeigt den Teilnehmern deren Vor- und Nachteile in verschiedenen Situationen der Client-Server-Kommunikation. Eine Betrachtung aus der Usability-Ecke ist ebenso Bestandteil des Workshops wie die Berücksichtigung von Sicherheit und Barrierefreiheit.
Vortrag von Torsten Landsiedel beim WPCamp 2012 in Berlin
"Sicherheit ist kein Zustand, der erreicht werden kann, sondern eine Einstellung."
Es gibt unzählige Artikel zum Thema Sicherheit und WordPress im Netz mit vielen nützlichen, manchmal auch unnützen, Vorschlägen, wie man sein Blog absichern kann. In der Session zu der diese Slides gehören wollte ich die wichtigsten Sicherheitsmaßnahmen vorstellen und die Teilnehmer für das Thema Sicherheit sensibilisieren.
- Einführung in das Thema Sicherheit und WordPress für Anfänger
- Auffrischung des Themas Sicherheit für Fortgeschrittene
- Vorstellung von Plugins zur Verbesserung der Sicherheit
Nähere Infos unbedingt in dem Blogeintrag zu den Slides auf meinem Blog nachlesen:
http://torstenlandsiedel.de/blog/
Accessible Javascript with and without WAI ARIADirk Ginader
The document discusses making JavaScript accessible. It states that JavaScript content should be at least as accessible without JavaScript, nothing should be withheld from non-JavaScript users, and assistive technologies should be able to use the page. It emphasizes that websites must work without JavaScript first, and that CSS should not be used for interaction or hiding content. The document then introduces WAI-ARIA as a way to add semantics and meaning to elements for screen readers through roles, properties, and live regions. It encourages using WAI-ARIA but also not relying on it exclusively.
In this month's YDN Tuesday Dirk Ginader, Web Developer and part of the Accessibility Task Force at Yahoo!, will talk about Web Accessibility.
Starting with basic markup and ending with accessible javascript and WAI ARIA he'll cover best practices and lots of tips and tricks to make your websites and web applications accessible to everyone.
Get more information about the event here:
http://skillsmatter.com/event/ajax-ria/web-accessibility
Five Tools to Know About When Developing Software for Social NetworksAltoros
Community-driven blogs and social network activities are spreading like wild fire. To remain competitive, both industry leaders and smaller companies are forced to promote within social networks. This white paper will review 5 useful tools and 5 popular social media marketing campaigns.
Five Mistakes to Avoid in Creating User Interfaces for Mobile DevicesAltoros
When creating a mobile user interface, developers inevitably face a number of challenges. Most of them are caused by the difference in developing user interfaces for mobile and desktop applications. This white paper will explain how to create an effective user interface for mobile devices and avoid the most common mistakes.
Five Ways To Measure Your Programmers PerformanceAltoros
The document discusses developing an effective performance management system. It notes that the stages of development include:
1. Diagnosis of the organization's culture, management style, processes, and strategic plans.
2. Designing the system to include processes for setting goals, measuring competencies, linking performance to rewards, and documentation.
3. Pilot implementation and introduction of the full system with an education plan and defined responsibilities.
This document presents a computational method for estimating the population structure of viruses using pyrosequencing reads. The method involves four steps: 1) aligning reads to a reference genome, 2) correcting sequencing errors in the reads, 3) reconstructing haplotypes consistent with the reads, and 4) estimating the frequency of each haplotype in the population. The method is validated on pyrosequencing data from four HIV populations, with over 5000 reads each, by comparing the estimated populations to those obtained from clonal sequencing.
US Investors: From Early Stage to Series ADavid Shen
I gave this presentation in Oct 2014 at the Silicon Valley Innovation Center to a group of visiting Kazakh entrepreneurs. They wanted to know about US based investors and what they look for, and how to get investment from them.
Ejemplos WAI-ARIA con HTML, CSS y JavaScriptJose R. Hilera
Este documento lista varios recursos en español y en inglés que proporcionan ejemplos y guías sobre la implementación de WAI-ARIA en sitios web y aplicaciones a través del uso de HTML, CSS y JavaScript, incluyendo introducciones, referencias técnicas, casos prácticos y herramientas relacionadas publicadas por organizaciones como W3C, Microsoft y Mozilla.
Wireframes provide guidance for product development by extracting ideas from concepts and generating discussion. They keep designs loose enough for revisions while managing risks. There are two main types: low-fidelity sketches created with paper/pencil, and high-fidelity digital prototypes. Lo-fi wireframes aid brainstorming and guidance, while hi-fi are suited to explaining details to clients. Both should avoid unnecessary images or colors to focus on functionality. Effective wireframing breaks tasks into individual flows that can then be prototyped using tools like POP to test designs iteratively at low cost.
Este documento explica el uso del verbo "can" en inglés. Can se usa para expresar posibilidad, habilidad, permiso y para pedir y ofrecer cosas. Explica oraciones afirmativas, negativas e interrogativas con can y ejemplos de cada tipo. Además, proporciona cuatro usos principales de can: 1) posibilidad de sucesos, 2) habilidad de personas/cosas, 3) pedir/dar permiso, y 4) pedir/ofrecer cosas.
From Linux kernel livepatches to encryption to ASLR to compiler optimizations and configuration hardening, we strive to ensure that Ubuntu 16.04 LTS is the most secure Linux distribution out of the box.
These slides try to briefly explain:
- what we do to secure Ubuntu
- how the underlying technology works
- when the features took effect in Ubuntu
How to run system administrator recruitment process? By creating platform based on open source parts in just 2 nights! I gave this talk in Poland / Kraków OWASP chapter meeting on 17th October 2013 at our local Google for Entrepreneurs site. It's focused on security and also shows how to create recruitment process in CTF / challenge way.
This story covers mostly security details of this whole platform. There's great chance, that I will give another talk about this system but this time focusing on technical details. Stay tuned ;)
Study: The Future of VR, AR and Self-Driving CarsLinkedIn
We asked LinkedIn members worldwide about their levels of interest in the latest wave of technology: whether they’re using wearables, and whether they intend to buy self-driving cars and VR headsets as they become available. We asked them too about their attitudes to technology and to the growing role of Artificial Intelligence (AI) in the devices that they use. The answers were fascinating – and in many cases, surprising.
This SlideShare explores the full results of this study, including detailed market-by-market breakdowns of intention levels for each technology – and how attitudes change with age, location and seniority level. If you’re marketing a tech brand – or planning to use VR and wearables to reach a professional audience – then these are insights you won’t want to miss.
UX, ethnography and possibilities: for Libraries, Museums and ArchivesNed Potter
1) The document discusses how the University of York Library has used various user experience (UX) techniques like ethnographic observation and interviews to better understand user needs and behaviors.
2) Some changes implemented based on UX findings include installing hot water taps, changing hours, and adding blankets - aimed at improving the small details of user experience.
3) The presentation encourages other libraries, archives and museums to try incorporating UX techniques like behavioral mapping and cognitive interviews to inform design changes that enhance services for users.
Artificial intelligence (AI) is everywhere, promising self-driving cars, medical breakthroughs, and new ways of working. But how do you separate hype from reality? How can your company apply AI to solve real business problems?
Here’s what AI learnings your business should keep in mind for 2017.
The document discusses designing teams and processes to adapt to changing needs. It recommends structuring teams so members can work within their competencies and across projects fluidly with clear roles and expectations. The design process should support the team and their work, and be flexible enough to change with team, organization, and project needs. An effective team culture builds an environment where members feel free to be themselves, voice opinions, and feel supported.
Rufen Sie nicht an – wir rufen Sie an! | Server-sent Events und Web-Sockets i...OPEN KNOWLEDGE GmbH
Speaker: Sebastian Reiners
Seit Java EE 7 stehen auch Enterprise-Entwicklern Server-Sent Events und WebSockets in standardisierter Form zur Verfügung. Höchste Zeit also, sich diese andere Art der Kommunikation im Web einmal näher anzusehen. Was sind Server-Sent Events und WebSockets überhaupt, was sind ihre Vorteile und wo bieten sich sinnvolle Anwendungsbereiche?
Im Rahmen der Vorstellung der unterschiedlichen Ansätze werden praktische Erfahrungen und Fallstricke, insbesondere im Zusammenspiel mit JSF und CDI veranschaulicht, sowie ein erstes Resümee gezogen.
Kuck mal, Node.js! Einstieg für .NET Entwickler mit Visual Studio Code und Ty...Gregor Biswanger
Das Jahr 2009 war die Geburtsstunde von Node.js. Dass hierbei JavaScript ebenfalls serverseitig verwendet werden kann, ist nur ein Teilaspekt für den hohen Erfolg. Viel relevanter ist die extrem hohe Performance, Skalierbarkeit und Produktivität. Nicht ohne Grund wird ASP.NET komplett neu erfunden und basiert auf den gleichen Ideen wie Node.js. Namenhafte Firmen wie Microsoft selbst, Google, PayPal, New York Times, GitHub, uvw. setzen bereits auf das leistungsstarke Node.js. Der Vortrag zeigt durch eine Reise der Node.js Architektur, woher die Vorteile kommen. Durch einen Vergleich von ähnlichen Funktionen, wird zudem der ideale Einstieg für .NET Entwickler geboten.
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEEBenjamin Schmid
Serverseitige Web-Technologien waren lange Zeit das Mittel der Wahl für Java-basierte Webanwendungen. Der Trend jedoch geht immer mehr zu JavaScript-basierten und damit Clientseitigen Web-GUIs. Wir werfen dazu einen Blick auf Google's AngularJS und erläutern an plastischen Beispielen seine Kernkonzepte und Funktionsweise. Was zeichnet AngularJS für die Realisierung der im Java-Umfeld häufig vertretenen, datengetriebenen Anwendungen besonders aus und wie fühlt sich die Entwicklung damit im direkten Vergleich dazu an?
Ein konkretes Fallbeispiel aus der Praxis, bei dem wir durch den Wechsel von einer JSF/Portlet-basierten Portal-Lösung hin zu einem AngularJS-basiertem Ansatz bei identischem JEE-Backend und Funktionalität Performance-Gewinne im Bereich von Zehnerpotenzen realisieren konnte, zeigt dabei auf, daß sich dieser Paradigmentwechsel durchaus lohnen kann!
Effiziente Fehlersuche in Web 2.0 AnwendungenMartin Leyrer
Moderne Anwendungen bestehen nicht mehr aus ein wenig HTML sowie Code am Server. Cascading Style Sheets (CSS), JavaScript und AJAX machen die Anwendungen einerseits benutzerfreundlicher, andererseits auch schwerer zu entwickeln und zu pflegen. Mit dem Open Source Browser Firefox und einer Handvoll von Open Source Plug-Ins kann sich der Entwickler sein Leben aber deutlich einfacher machen. Diese Session behandelt Firefox-Erweiterungen, die sich in der Praxis bei der Entwicklung großer Web 2.0 Anwendungen bewährt haben. Gezeigt werden "am lebenden Objekt" unter anderem die Webdeveloper Toolbar sowie Firebug. Der Bogen der vorgestellten Tools erstreckt sich aber noch weiter und beinhaltet u.a. Sicherheitschecks, WAI-Tools und noch viel mehr.
Folien zu unserem Vortrag beim Java Forum Stuttgart 2014
Besuchen Sie uns unter http://www.thecodecampus.de
Müssen Sie auch noch alte servergetriebene Java-Webanwendungen weiterentwickeln und wollen Ihre Kunden dabei den Genuss der Usability moderner Webseiten bieten?
In unserem Talk beim JavaForum Stuttgart 2014 haben wir anhand von Codebeispielen und Erfahrungsberichten gezeigt wie man schrittweise AngularJS in bestehende Anwendungen integriert. Dieser agile Ansatz liefert schnelle Ergebnisse und reduziert die Kosten und Risiken im Vergleich zu einer kompletten Umstellung.
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz EditionMartin Leyrer
Moderne Anwendungen bestehen nicht mehr aus ein wenig HTML sowie Code am Server. Cascading Style Sheets (CSS), JavaScript und AJAX machen die Anwendungen einerseits benutzerfreundlicher, andererseits auch schwerer zu entwickeln und zu pflegen. Mit dem Open Source Browser Firefox und einer Handvoll von Open Source Plug-Ins kann sich der Entwickler sein Leben aber deutlich einfacher machen. Diese Session behandelt Firefox-Erweiterungen, die sich in der Praxis bei der Entwicklung großer Web 2.0 Anwendungen bewährt haben. Gezeigt werden "am lebenden Objekt" unter anderem die Webdeveloper Toolbar sowie Firebug. Der Bogen der vorgestellten Tools erstreckt sich aber noch weiter und beinhaltet u.a. Sicherheitschecks, WAI-Tools und noch viel mehr.
Die Anforderungen für Websites sind heute oft widersprüchlich: verlangt ist ein zeitgemäßes Design und ansprechende Animationen, aber bitte mit offenen Webstandards, damit das ganze auch auf Smartphones und Tablets gut aussieht. Gleichzeitig ist auf Kundenseite aber ein Browser im Einsatz, der seit Jahren nicht mehr aktualisiert wurde. Jonathan Weiß stellt Lösungen vor, um diese Herausforderung zu stemmen und zeigt, welches kaum bekannte Potenzial im Legacy-Browser steckt.
Einführung in Rack und Rack-Middleware
Vortrag wurde am 24.11.2009 an der
Heinrich-Heine-Universität Düsseldorf im Rahmen der Rails User Group Düsseldorf von Hussein Morsy gehalten
Mein Vortrag auf der EnterJS 2015 über Sicherheit in Node.js Applikationen. Es werden verschiedene Angriffsvektoren vorgestellt und wie man ihnen begegnen kann.
PageSpeed Extreme für das große Speed Update 2021SEARCH ONE
Googles Page Experience Update steht vor der Tür. Im kommenden Jahr wird die Ladezeit zum Rankingfaktor und damit zum Optimierungsgegenstand für Suchmaschinenoptimierer. Kai Spriestersbach zeigt in seinem Vortrag einige fortgeschrittene Methoden, mit denen er, über die bekannten Basics hinaus, die Ladezeit moderner Webseiten effektiv verbessert.
JavaScript: Von einfachen Scripten zu komplexen Anwendungenmolily
Folien-Download, Videomitschnitt und Linksammlung unter:
http://molily.de/mmt28
JavaScript hat sich von einer beschränkten Scriptsprache zu einer mächtigen Sprache entwickelt, in der umfangreiche clientseitige Anwendungen geschrieben werden. Doch der Sprung von einfachem DOM-Scripting mit Hilfsmittel wie jQuery zu komplexen Anwendungen ist schwierig und verlangt Know-How. Der Vortrag gibt einen Einblick in aktuelle Konzepte und Techniken, die Struktur in die Entwicklung von JavaScript-Anwendungen bringen.
Ähnlich wie Javascript auf Client und Server mit node.js - webtech 2010 (20)
Making your Angular.js Application accessibleDirk Ginader
1. Angular.js has a reputation for being inaccessible, but with the right techniques it can be made accessible.
2. Key techniques include using plain semantic HTML, ARIA roles and properties, keyboard support, and the ngAria module.
3. Angular Material and accessibility testing tools like the Chrome Accessibility Developer Tools and accessibility testing in Protractor can help make Angular applications more accessible.
Almost all Browsers allow you to install Extensions/Add-ons to make them more powerful by adding new functionality. Dirk Ginader will show you how he built build such an Browser extension to add a feature all modern Browsers lack, and how you can do the same by using basic web technologies and how to make them run in every Browser.
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]Dirk Ginader
Google’s Dirk Ginader thinks great developers are lazy, and there’s nothing wrong with that. After all, would you rather spend your time working on the mundane stuff — like minification, linting, compilation, unit testing, etc — or actually developing your code?
In this presentation, Dirk will show you how to set up the Grunt JavaScript Task Runner so that you and your team can focus on the fun!
Let Grunt do the work, focus on the fun!Dirk Ginader
The document discusses how Grunt can be used as a JavaScript task runner to automate repetitive tasks like minification. It provides examples of configuring Grunt tasks like Uglify to minify files and integrating it with package.json for an easy setup. Developers are encouraged to use Grunt as it allows configuring tasks in JavaScript instead of XML, is fast to set up, and helps focus on important work instead of repetitive tasks.
HTML5 Dev Conf - Sass, Compass & the new Webdev toolsDirk Ginader
The document discusses the author's experience with CSS preprocessors and tools like Sass, Compass, Livereload and Codekit. It highlights some key features of Sass like mixins, variables and nested rules that make writing CSS more enjoyable. Sass allows defining reusable styles and parameterizing values like colors, reducing repetitive code. LiveReload monitors files for changes and instantly refreshes browsers without reloading pages. These tools have made front-end development more productive.
Sass, Compass and the new tools - Open Web Camp IVDirk Ginader
This document discusses the author's experience with CSS preprocessors like Sass and tools like LiveReload. It begins by showing the author's initial skepticism of preprocessors but realization that writing browser prefixes manually is tedious. The author is then introduced to features of Sass like mixins, variables, and parameterization that allow writing CSS more efficiently and maintainably. Sass and tools like LiveReload are shown to automate tasks like prefixing and live reloading of pages on file changes.
Javascript done right - Open Web Camp IIIDirk Ginader
The document discusses what makes for "good" JavaScript from a developer perspective. It argues that good JavaScript should be understandable, reusable, extensible, optimized, secure, internationalized, optional, and accessible. It provides examples and recommendations for each of these qualities, such as using clear naming and documentation to improve understandability, writing code in a modular and structured way to improve reusability, and using frameworks to avoid reinventing patterns. It also discusses performance optimizations like reducing DOM reflows and different techniques for modifying the DOM efficiently.
The accessibility features of Yahoo! FinanceDirk Ginader
Yahoo! Finance, the largest financial site, features accessible tools to control your finances. Learn how to use these tools and what makes them accessible.
the 5 layers of web accessibility - Open Web Camp IIDirk Ginader
Dirk Ginader, part of the Yahoo! Accessibility Taskforce, will talk about the “5 Layers of Web Accessibility”. He extents the commonly known 3 layers model consisting of HTML, CSS and JavaScript with 2 new layers for more accessibility. He shows how easy it can be to make a website or web application more accessible by following simple rules.
see:
http://openwebcamp.org/agenda/#5_layers_of_accessibility
Das Web Als Datenbank Mit Yql Und PipesDirk Ginader
In der Zeit von Mashups und Hacks ist nichts wichtiger als Daten. Mithilfe der richtigen Werkzeuge kann einfach das ganze Internet als standardisierte Datenquelle genutzt werden. Dirk Ginader zeigt uns, wie man mit Yahoo! Pipes und YQL einfach und komfortabel alles vom RSS Feed bis zur HTML-Seite als API nutzen, vermischen und damit Neues erzeugen kann. Nie war es einfacher, umfangreiche datengetriebene Applikationen zu erstellen als heute.
http://it-republik.de/konferenzen/webtech09/speaker/#4386
Die 5 Ebenen Barriererfreier Web EntwicklungDirk Ginader
Es ist ein weit verbreiteter Irrglaube, dass JavaScript und Barrierefreiheit sich ausschließen würden. Assistive Technologien können sehr wohl mit JavaScript umgehen. Richtig angewandt, kann JavaScript nicht nur zugänglich sein, sondern sogar helfen, Barrieren weiter zu reduzieren. Man muss aber einige Regeln dabei beachten. Dirk Ginader sagt uns, welche das sind und zeigt uns, wie man JavaScript dazu nutzen kann, um eine Webseite für alle interessanter und nutzbarer zu machen.
http://it-republik.de/konferenzen/webtech09/speaker/#4386
Accessible Javascript using Frameworks - Barcamp London 5Dirk Ginader
This document discusses making JavaScript accessible. It emphasizes that accessibility starts with accessible markup and ensuring the page works without JavaScript. JavaScript should enhance usability and accessibility, not reduce it. Frameworks can help by unifying APIs, providing ready components, and extensive testing for stability, usability and accessibility including with screen readers. The document provides examples of accessible JavaScript implementations and frameworks.
This document provides guidelines for making JavaScript accessible, including:
1) Semantically marking up content so it works without scripts and can be understood by assistive technologies.
2) Considering what functionality can be achieved with page reloads before using JavaScript.
3) Ensuring a baseline experience works for all before progressively enhancing with JavaScript.
4) Updating screen readers when content is changed with JavaScript to keep assistive technologies aware.
Javascript auf Client und Server mit node.js - webtech 2010
1. Dirk Ginader | Yahoo! Inc.
Javascript
auf Client UND Server
2. warum JS auf dem Server?
• Web Developer mögen Javascript
• Javascript Frameworks
• Code nur einmal schreiben
• Progressive Enhancement einfach
so!
• node.js
3. node.js
• Javascript auf dem Server
• V8 Engine (rockt googles Chrome)
• blockt nicht
• statt dessen alles auf Event Basis
• CommonJS
• fantastisch schnell!
5. blockt nicht?
• in PHP:
$query="SELECT * FROM foo WHERE bar='baz'";
$result=mysql_query($query);
// ... und dann wird gewartet...
DoSomethingElse(); // passiert später
• in node.js:
db.query("SELECT * FROM foo WHERE bar='baz'",
function (update, select) {
// callback wenn fertig
});
DoSomethingElse(); // passiert sofort
6. blockt nicht?
• bei einer Abfrage nicht so schlimm
• aber bei 10?
• oder bei 100?
• node macht alle Abfragen
gleichzeitig
• php wartet auf jede einzelne
nacheinander...
• VIEL schneller!
7. Logik nur einmal schreiben!
• Wenn man progressive enhancement
ernst nimmt schreibt man viel
Business und Renderlogik zweimal
8. Logik nur einmal schreiben!
• Currency Converter
– http://finance.yahoo.com/currency-
converter/
– damals Javascript + PHP
– 2x Logik Konvertierung
– 2x Rendering
– Rundungsfehler!
9. Logik nur einmal schreiben!
• Formular Validierung
– 2x Regular Expressions!
– 2x Fehlermeldungen!
– 2x komplexes Testen von Radio- und
Selectboxen
– Anzeigen der Fehler beim Feld ist
schmerzhaft auf dem Server
10. Erste Schritte
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {
'Content-Type': 'text/plain'
});
res.end('Hello Worldn');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://
127.0.0.1:8124/');
11. Erste Schritte
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {
'Content-Type': 'text/plain'
});
res.end('Hello Worldn');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://
127.0.0.1:8124/');
12. Erste Schritte
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {
'Content-Type': 'text/plain'
});
res.end('Hello Worldn');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://
127.0.0.1:8124/');
13. Erste Schritte
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {
'Content-Type': 'text/plain'
});
res.end('Hello Worldn');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://
127.0.0.1:8124/');
14. Erste Schritte
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {
'Content-Type': 'text/plain'
});
res.end('Hello Worldn');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://
127.0.0.1:8124/');
15. Erste Schritte
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {
'Content-Type': 'text/plain'
});
res.end('Hello Worldn');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://
127.0.0.1:8124/');
16. node ist der Server!
• kein Apache!
•keine neue Instanz jedes mal...
• läuft ständig!
•kann persistente Daten halten!
•kann viele User gleichzeitig bedienen...
• ... und verbinden!
17. socket.io Server
var http = require('http'),
io = require('socket.io'),
server = http.createServer(function(req, res){
// hello world
});
var socket = io.listen(server);
socket.on('connection', function(client){
// neuer User!
client.on('message', function(){ … })
client.on('disconnect', function(){ … })
});
18. socket.io Client
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = new io.Socket({node_server_url});
socket.on('connect', function(){ … })
socket.on('message', function(){ … })
socket.on('disconnect', function(){ … })
</script>
• HTML5 Socket nur in Webkit!?
19. socket.io Client
• Supports
– WebSocket, Flash Socket, ActiveX
HTMLFile (IE), XHR with multipart
encoding, XHR with long-polling, JSONP
polling (for cross-domain)
• Tested on
– Safari 4, Google Chrome 5, Internet
Explorer 6, Internet Explorer 7, Internet
Explorer 8, iPhone Safari, iPad Safari,
Firefox 3, Firefox 4 (Minefield), Opera
10.61
21. express.js
• http://expressjs.com/
• Framework für node.js
• macht Application Entwicklung sehr
viel einfacher
• var app = express.createServer();
app.get('/', function(req, res){
res.send('Hello World');
});
app.listen(3000);
• url routing, static file server,
views ...
22. YUI3 auf node.js
• Dav Glass schaffte es als erster eine
Javascript Library auf node.js zu
bringen
• Die besondere Architektur von YUI3
machte das “ganz einfach”
• Auch YUI2 Module laufen jetzt auf
node (dank YUI2 in YUI3)
• Alle YUI3 Gallery Module
automatisch
23. EIN DOM AUF DEM SERVER!
• Dav Glass kombinierte
• http://github.com/tmpvar/jsdom
•um einen echten DOM wie im Browser
auf den Server zu bringen!
• http://github.com/tautologistics/
node-htmlparser
•für innerHTML Support
• fake window und document Objekte
24. Templating wie wir es kennen
<div id=‘header’>
<h1>{headline}</h1>
</div>
<div id=‘navigation’>
<ul>{nav}</ul>
</div>
<div id=‘content’>
{content}
</div>
... und jetzt muss auf einer Seite die
Navigation weg...
Neues Template?
25. Templating wie wir es wollen
<div id=‘header’>
<h1>My awesome Company</h1>
</div>
<div id=‘navigation’>
<ul>
<li class=‘home’><a href=”/”>Home</a></li>...
</ul>
</div>
<div id=‘content’>
<p>example content</p>
</div>
h1.html(‘hey!’);
content.addClass(‘active’);
navigation.remove();
26. DOM mit YUI3
• Kann genau das!
• http://express.davglass.com/
• http://github.com/davglass/yui-
express
32. nodemon autorestart
• node restart nach jeder Code
Änderung wird schnell “etwas
Anstrengend”...
• Remy Sharp fand das auch:
http://github.com/remy/nodemon
• nodemon macht das automatisch!
• $ nodemon server.js
statt
$ node server.js
33. CommonJS
• http://www.commonjs.org/
• Standard für Javascript Module mit
einheitlichem Interface
• erlaubt require(‘module’);
• Nicht nur node.js sondern auch
•couchDB
•Narwhal
•RingoJS
•...