This document discusses methodologies and techniques for optimizing websites for mobile devices, including using responsive design with CSS media queries. It presents three main approaches: building a separate mobile site, making no changes, or optimizing the main site for mobile. The bulk of the document then focuses on how to use CSS media queries to optimize websites, covering features like width, height, and orientation. It also discusses related techniques like viewport meta tags and approaches being considered for future standards.
This document discusses responsive web design using CSS3 media queries. It begins with an introduction to media queries and their syntax for modifying CSS based on screen width. It then covers examples of adapting layouts, images, and other design elements for different screen sizes. Finally, it addresses techniques for supporting older browsers that do not support media queries, such as using conditional comments or JavaScript libraries.
The document discusses building mobile web applications using HTML5. It covers topics like HTML5 features that are well supported on mobile browsers like forms, communication, canvas, geolocation, audio and video. It provides examples of using CSS3 for styling, animation and media queries for responsive design. It also discusses utilizing HTML5 APIs for advanced interactions, graphics, offline support, performance and accessing device capabilities.
Joomla!Day 2013 Nürnberg; Vortrag von Johannes HockadhocgraFX
Responsive Web Design - Erfahrungen, Fragestellungen, Experimente und Ideen zu responsive Templates für Joomla! 2.5 JoomSkeleton und JoomFluid und JoomFlex für Joomla! 3.
This document discusses creating adaptive layouts using CSS3 media queries. It defines the differences between adaptive and responsive design, with adaptive using predefined layouts for different screen sizes and responsive providing an optimal experience across devices. Key concepts for adaptive design are progressive enhancement and mobile-first. The document outlines main principles like flexible grid-based layouts, flexible media, and using media queries to apply CSS styles based on features like width, height, and orientation. It provides examples of media query syntax and supported media features.
This document discusses using CSS3 to create effective and efficient web designs. It provides an overview of CSS3 modules and capabilities like gradients, shadows, rounded corners. The benefits of CSS3 include decreased development time, improved performance through reduced file sizes and requests, and increased accessibility. A real-world example shows how CSS3 can reduce loading times versus images. Media queries allow responsive designs for different devices. The document encourages progressive enhancement and using stable CSS3 features now to improve user experience.
The document discusses techniques for optimizing responsive web design for mobile devices, including downloading and hiding/resizing unnecessary elements based on screen width, using lightweight JavaScript libraries conditionally, responsive images with srcset, and serving different content for mobile using server-side device detection. It provides examples and links to resources for implementing these techniques.
This document provides information about various image formats (GIF, JPEG, PNG, SVG, WebP), optimizing images, responsive images, icon fonts versus SVG sprites, animations, and outdated techniques no longer needed due to HTTP/2. It includes links to resources for using different image formats, optimizing images, responsive image techniques like srcset and picture, icon fonts versus SVG sprites, video versus animated GIF, and outdated practices with HTTP/2.
The document discusses various image formats (GIF, PNG, JPEG), optimization tools, responsive image techniques (srcset, picture), lazy loading, icon fonts versus SVG sprites, and video optimization. It provides information on each topic and examples of how to implement the different techniques for optimizing images and other assets for faster page loads.
This document discusses different approaches for using CSS in React applications. It begins by outlining some of the issues with plain CSS, including lack of encapsulation and global namespace pollution. It then examines different methodologies for organizing CSS, including OOCSS, BEM, and SUIT CSS. Next, it covers pre/post-processors like Sass, LESS, and PostCSS. The document dives into examples of implementing styles in React using inline styles, CSS modules, Radium, and Styled Components. For each approach, it highlights the syntax and notes advantages and limitations. Finally, it closes with a brief look at emerging technologies that may impact future CSS practices.
HTML5 provides new semantic elements that help improve accessibility and SEO. These include <header>, <nav>, <article>, <aside>, <footer>, <time>, <video>, <audio>, and more. HTML5 also introduces new features like local storage, offline caching, and geolocation that enhance the mobile web experience.
This document provides information on creating a landing page, including recommendations for code editors, browsers, HTML tags and structures, CSS styling and selectors, responsive design, file organization, and tutorials. It recommends Sublime Text or WebStorm as code editors, Google Chrome as the browser, and covers basic HTML tags, CSS properties, Bootstrap framework, responsive design techniques, and file organization practices like splitting CSS into modules and categories. It also provides links to tutorials and resources for going further in frontend development.
Device aware web frameworks for better programmingSuntae Kim
To capitalize on the explosion of multi-device web access, companies need to unify their web-based properties for desktop, tablets and mobile and implement a holistic, One Web approach. When evaluating solutions that support One Web, it is important to select technologies that support single code-base, offer seamless device-based optimization and deliver fast load times.
The document contains HTML code for the header of a webpage. It includes metadata tags for the page title, description, and keywords as well as links to style sheets and JavaScript files.
The document discusses adaptive images in responsive web design. It begins by explaining why the browser should be asked for information like screen resolution and bandwidth instead of doing speed tests. It then covers different techniques for adaptive images like using the browser width, screen resolution, bandwidth tests, feature testing vs browser sniffing, and CSS media queries. It also discusses workarounds like using the .htaccess file, <picture> element, and HiSRC plugin to serve responsive images. The document advocates for newer approaches that provide a simple user experience while allowing the browser and server to communicate information.
This document discusses responsive image techniques for adaptive web design. It begins by explaining browser sniffing versus feature testing, and recommends using feature testing to determine browser width, screen resolution, and bandwidth instead of browser sniffing. It then covers techniques like using background-size to control image sizes, SVG for smaller file sizes, and font-based solutions. The document also discusses server-side techniques like .htaccess rewrite rules and client-side techniques like picture and HiSRC. It advocates for a mobile-first approach using CSS media queries and a single pixel GIF for responsive images.
This document discusses responsive images and various techniques for implementing responsive images, including:
1. Using .htaccess files to serve different image sizes based on screen resolution.
2. Implementing the <picture> element and srcset attribute to serve different image sources based on media queries.
3. Using JavaScript solutions like HiSRC to programmatically swap image sources based on screen properties like pixel density and connection speed.
4. Various workarounds and tricks for responsive images, including using background-size: 100% for images, optimizing images as SVGs, and using font-based solutions.
The document summarizes Christopher Schmitt's presentation at RWD Summit 2014 on adaptive images in responsive web design. It discusses using feature testing over browser sniffing to determine screen resolution and bandwidth. It presents techniques like srcset, picture, and JavaScript solutions to serve appropriately sized images. It also covers workarounds like background-size, SVG, and font-based solutions when native techniques are not supported. The focus is on building responsive images that scale with the device and load quickly.
The document contains a collection of links and images from various blogs and websites related to the city of Tuban, Indonesia. There are over 50 individual links promoting blogs and websites about businesses, art, tourism and statistics related to Tuban. The links are presented side by side in a grid format to encourage visitors to browse the different options.
[CSSDevConf] Adaptive Images in Responsive Web Design 2014Christopher Schmitt
The web doesn't stop at the desktop anymore. Our image assets need to do more than look good in one context. In this talk, I look at how images like JPEG, GIFs, SVG, Icons, Unicode, and more can be used in a multi-device environment.
The document contains information about BEM (Block Element Modifier), a methodology for structuring CSS and JavaScript code in a modular way. It discusses how blocks, elements, and modifiers are used to build user interfaces in a semantic and reusable way. Blocks represent independent components, elements are parts of blocks, and modifiers are used to change the style or behavior of blocks and elements. The document provides examples of HTML code structured according to BEM and how CSS and JavaScript can be mapped to this structure.
There are four main approaches to interaction design: user-centered design focuses on user needs and goals to guide the design; activity-centered design focuses on the tasks and activities users need to accomplish; systems design focuses on ensuring all components of a system are in place to meet system goals; and genius design relies on the skill and inspiration of designers as the primary source of validation for a design.
Edward De Bono developed the 6 Thinking Hats method for structured group discussion and decision making. The method involves assigning one of six colored "thinking hats" to represent six different perspectives or types of thinking: white for objective facts, red for emotions, black for caution, yellow for optimism, green for creativity, and blue for organization and process. By deliberately focusing thinking along different perspectives, the method aims to improve the quality of group thinking and decisions.
This document outlines an all-day tutorial on designing digital products from initial ideas through paper prototyping. The tutorial is divided into four parts that cover interaction design techniques, creating personas and scenarios, paper prototyping, and testing paper prototypes using the Wizard of Oz technique. Attendees will participate in exercises as a team to practice each part of the process and give a final presentation providing feedback at the end of the day.
The document discusses the growing use of mobile phones and their potential to create positive change. It notes that there are now over 4 billion mobile phones globally and mobile is becoming an important platform. Two examples are given of people using mobile phones to support their community and help others dealing with issues like drug abuse. The rest of the document describes a South African organization that provides counseling and support services to at-risk youth via mobile chat rooms to help with issues like substance abuse, suicide prevention, and more. It has engaged with over 50,000 people and facilitated hundreds of thousands of conversations.
Mobile Marketing (The Good, The Awesome, The Sexy)Aliza Sherman
Mobile marketing is growing rapidly. 93% of women feel they cannot live without their mobile devices. Mobile commerce increased 550% from 2009 to 2010. Marketers should make their websites mobile-friendly and use mobile ads, apps, QR codes, and text messaging to engage customers on the go. Understanding audience mobile habits and creating goals around building community and driving actions is key to a successful mobile strategy.
The document discusses the future of marketing and advertising. It notes that traditional advertising methods are no longer as effective and that people's behaviors are changing. The future of marketing will be about collaborating with people, not just communicating to them. It will involve being generous, experimental, helpful, and focus on building relationships rather than selling products. Marketers need to listen to customers, commit to meaningful causes, and create marketing that people will want to engage with and talk about. The next 60 years may see advertising become more integrated with customer experiences and business strategies.
Adaptive layouts - standards>next Manchester 23.03.2011Patrick Lauke
This document discusses making websites responsive for different devices. It covers using CSS media queries to apply different styling based on screen width, height, and other device features. It also covers using viewport meta tags to control zooming and scaling on mobile browsers. The goal is to build sites that can adapt their layouts across various devices like phones, tablets, and desktops.
Adaptive Layouts - standards>next London 28.05.2011Patrick Lauke
This document discusses making websites responsive and cross-device friendly. It covers:
1. The need to support mobile devices like phones and tablets.
2. CSS media types and queries that allow targeting different device capabilities like width.
3. The viewport meta tag which helps mobile browsers render web pages properly.
4. Challenges like devices reporting incorrect widths that require viewport fixes.
Introduction to Responsive Web Design http://tinyurl.com/9ldo4c6
Includes a sample project built from scratch in Node.js using LESS available on Github
This document discusses best practices for mobile web development. It begins by noting limitations of mobile devices like less CPU/memory and smaller screens. It then provides tips for configuring the viewport, using media queries to separate styles, and detecting device properties in JavaScript. The document also covers HTML5 features like geolocation, media capture, and input types. It gives recommendations for images, gestures, and performance optimizations like minimizing redirects, requests, files sizes and using Gzip compression.
Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RI...Patrick Lauke
This document discusses approaches to mobile-friendly web development beyond just desktop websites. It outlines three main approaches: 1) Doing nothing and hoping normal websites work okay on mobile, 2) Creating a separate mobile-optimized site, or 3) Having a single adaptive site that uses techniques like fluid layouts, responsive design, and CSS media queries to dynamically adapt to different screen sizes and devices. The document then goes into details about techniques for adaptive sites, including viewport meta tags, touch and gesture support, and using device capabilities like geolocation without plugins. It emphasizes that adaptive design is useful not just for mobile but any device.
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12....Patrick Lauke
This document discusses approaches to web development for mobile devices. It begins by noting the increasing importance of the mobile web. It then examines three approaches: 1) Doing nothing and hoping modern mobile browsers can handle desktop sites, 2) Creating a separate mobile site, and 3) Having a single adaptive site that refactors content for different screens using fluid layouts, progressive enhancement and media queries. The document dives into techniques for adaptive design like viewport meta tags, touch events, and responsive images. It also notes remaining challenges like viewport interpretation and high-DPI screens lying about resolution.
Handys und Tablets - Webentwicklung jenseits des Desktops - MobileTech Confer...Patrick Lauke
This document discusses approaches to developing websites that are accessible across desktop and mobile devices. It describes three main approaches: 1) Doing nothing and relying on modern mobile browsers to handle desktop sites, 2) Creating a separate mobile site, or 3) Using a single adaptive design that responds to different screen sizes through fluid layouts, responsive design, and CSS media queries. The document advocates the third approach of a single adaptive site as the best way to build sites that provide a good user experience across all devices.
This document discusses adaptive images in responsive web design. It begins by explaining why the browser should be asked about screen resolution and bandwidth instead of sniffing the browser. It then demonstrates using feature testing to determine browser width and screen resolution. Next, it covers issues with higher resolution retina displays like larger file sizes. The document proposes solutions like using .htaccess files, srcset, and JavaScript libraries to serve the appropriate image based on screen details without browser sniffing. It emphasizes that CSS media queries are still important for responsive design.
смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1rit2011
This document discusses approaches to mobile-friendly web development beyond just desktop websites. It outlines three main approaches: 1) Doing nothing and relying on modern mobile browsers to render normal sites, 2) Creating a separate mobile site with a subdomain or folder, and 3) Having a single adaptive site that uses fluid layouts, responsive design, and CSS media queries to dynamically adapt to different screen sizes and devices. The document then covers various techniques for adaptive design, including viewport meta tags, touch and gesture support, multimedia without plugins, geolocation, and offline capabilities.
Intro to @viewport & other new Responsive Web Design CSS featuresAndreas Bovens
From meta viewport to @viewport and from device-pixel-ratio to the resolution media query: various responsive design hooks are undergoing standardization, allowing for future-proof sites that work well in different contexts. In addition, new CSS features like object-fit, relative length units and so on are increasingly supported by browsers as well, and allow for more versatile responsive design solutions. In my talk, I will look at these features and explain how they can be used in websites today.
This document discusses various techniques for responsive images in web design, including browser sniffing versus feature testing, image sizes for different screen resolutions and bandwidths, and different implementation methods like .htaccess files, the <picture> element, and JavaScript libraries. It covers topics like using the browser width to determine layouts, screen resolution detection, and bandwidth testing. Workarounds discussed include using background images, SVGs, icon fonts, and compressed JPEGs. The document advocates a mobile-first approach and using CSS media queries to adapt designs based on screen size.
Responsive design: techniques and tricks to prepare your websites for the mul...Andreas Bovens
Websites are viewed on all kinds of devices, in all kinds of browsers. In this presentation, I explain how you can adapt your site to these different environments, using modern browser hooks and techniques.
I cover the various aspects (and some gotchas) of the viewport mechanism and media queries, and shed a light on how new CSS3 properties allow you to optimize images and videos for multiple screens.
This document discusses responsive web design techniques including:
- Using viewports and media queries to adapt layouts for different screen sizes.
- Sizing images fluidly using max-width: 100% so they are responsive.
- Design patterns for responsive tables, hiding/showing content, and converting menus to dropdowns.
- Tools like Modernizr, Respond.js, and frameworks like LESS to support responsive design goals.
- Tips like using relative units (ems/percentages) over fixed pixels and transitions for visual changes.
Making your site mobile-friendly - Standards-Next 12.06.2010Patrick Lauke
The document discusses making websites mobile-friendly by either doing nothing and relying on mobile browsers, creating a separate mobile site, or using a single adaptive site with fluid layouts, progressive enhancement, and CSS media queries to dynamically adjust the design for different screen sizes. It provides tips for optimizing sites for mobile such as minimizing data and server requests through image compression, JavaScript minification, and CSS combining.
Making your site mobile-friendly / RIT++Patrick Lauke
Expanded version of my "Making your site mobile-friendly" speed talk, delivered via Skype for the Russian Internet Technology (RIT) conference, Moscow, 12 April 2010
This document discusses responsive image techniques for adaptive web design. It covers using fluid grids with percentages instead of pixels, media queries to load different CSS stylesheets for different screen widths, and setting image max-widths to 100% so they scale responsively. It also discusses feature testing browser width with JavaScript instead of browser sniffing, handling high pixel density "Retina" displays, and techniques like .htaccess rewriting, <picture> element, and JavaScript libraries to serve the most appropriate image assets. The focus is on delivering the right image for each device or screen size to optimize for bandwidth, performance, and user experience.
Responsive UX - One size fits all @BigDesign conference #BigD12touchtitans
The document discusses responsive UX, which is designing websites and applications that adapt to different screen sizes and devices using fluid grids, media queries, and responsive images; it provides examples of how to implement responsive design principles through fluid grids, image scaling, and media queries to build sites that automatically adjust for smartphones, tablets, and other devices.
This document discusses responsive web design, which allows websites to automatically adjust to different screen sizes. It describes how meta tags and media queries enable responsive design. Meta tags provide metadata about the HTML document and viewport settings. Media queries use CSS to apply different styling based on screen width, similar to if/else statements. Examples are provided for styling smartphones, tablets, laptops and various screen orientations. Images and videos are made flexible using max-width and height:auto. While responsive design improves compatibility and usability, it can increase load times and hovering may not work as expected.
Responsive Web Design - Devoxx UK - 2014-06-13Frédéric Harper
There is no mobile Web, there is no desktop Web, and there is no tablet Web. We view the same Web just in different ways. So how do we do it? By getting rid of our fixed-width, device-specific approaches and use Responsive Web Design techniques. This session will focus on what is Responsive Web Design and how you can use his 3-pronged approach on your current apps today which will also adapt to new devices in the future.
Similar to The specs behind the sex, mobile-friendly layout beyond the desktop (20)
IONIC, el framework para crear aplicaciones híbridas multiplataformabetabeers
En esta charla, Juan nos va a enseñar los conceptos básicos para crear una aplicación móvil multiplataforma usando el framework "IONIC". Aprenderemos cómo instalar las herramientas básicas para su uso, haremos una breve aproximación a los distintos plugins que nos ofrece "Cordova" y aprenderemos un poco de la arquitectura interna de IONIC (basado en un patrón MVC, el cuál usa AngularJS, Typescript y CSS (bajo SASS).
Servicios de Gestión de Datos en la Nube - Jaime Balañá (NetApp)betabeers
La transformación digital ha traído nuevas opciones para desplegar aplicaciones y las exigencias de flexibilidad en el desarrollo de negocio son cada vez mayores. ¿Infraestructura propia? ¿Proveedores de servicios? ¿AWS? ¿Azure? En el próximo Betabeers Bilbao, Jaime Balañá, Director Técnico de NetApp, explicará cómo las empresas pueden aprovechar estas distintas opciones sea cual sea su dimensión de negocio y sin cambiar la forma de gestionar sus datos.
Blockchain: la revolución industrial de internet - Oscar Lagebetabeers
Oscar Lage nos hablará de Blockchain una tecnología revolucionaria que viene para quedarse y su capacidad para descentralizar la confianza. Esta cualidad que permite eliminar los intermediarios en muchos procesos y servicios empresariales, dando lugar a nuevos modelos de negocio basados en la desintermediación y la colaboración. La principal diferencia entre Blockchain e internet es que mientras que la red se limita al intercambio de información, la cadena de bloques permite intercambiar valor. Por ejemplo, con Blockchain podremos comprar o vender casas, cosas e ideas directamente entre nosotros sin necesidad de intermediarios, como Amazon, Visa o Wallapop.
Cloud Learning: la formación del siglo XXI - Mónica Mediavillabetabeers
La industria de la educación online y el e-Learning sigue avanzando y proponiendo nuevas maneras de aprender. Estamos en un momento de transición en el que los escenarios formativos locales presenciales se están transformando en escenarios formativos globales en la nube.
Desarrollo web en Nodejs con Pillars por Chelo Quilónbetabeers
Desarrollo web en Nodejs con Pillars por Chelo Quilón. En esta charla veremos inicialmente conceptos de Node.js y JavaScript, para después introducir las características diferenciadoras del desarrollo web en Node.js y se expondrá la metodología para crear una aplicación web mediante el framework Pillars.js.
La línea recta hacia el éxito - Jon Torrado - Betabeers Bilbaobetabeers
El documento habla sobre el éxito empresarial y cómo lograrlo. Recomienda invertir tiempo, dinero y recursos en el negocio, trabajar duro y de forma inteligente como equipo, no tener miedo a emprender ni a las ideas, y tener un buen equipo profesional para llevar la idea al mercado lo antes posible de manera divertida.
6 errores a evitar si eres una startup móvil y quieres evolucionar tu appbetabeers
Has publicado una versión en el Apple Store con una feature espectacular. Tras un par de días en producción te das cuenta de que algo no va bien y que tienes malas reviews en el store. Mientras localizas el error vas perdiendo cada vez más usuarios... ¿te suena?
No tienes una arquitectura limpia definida en tu proyecto, por lo que te cuesta localizar este fallo, un fallo que podría haberse previsto usando Unit Test, o haberlo detectado a tiempo usando un sistema de crash reporting.
Tras unos años trabajando para startups móviles de diferentes partes del mundo como freelance, Roberto Garrido nos habla de su stack tecnológico preferido para intentar atajar este tipo de problemas.
Dev ops.continuous delivery - Ibon Landa (Plain Concepts)betabeers
Integración y entrega continua: principios y prácticas englobados desde de estos conceptos y por supuesto, beneficios que estas prácticas pueden ofrecer para nuestro producto o negocio.
Introducción a scrum - Rodrigo Corral (Plain Concepts)betabeers
Este documento presenta una introducción a Scrum, un marco ágil para el desarrollo de software. Scrum se basa en iteraciones cortas llamadas sprints durante las cuales los equipos trabajan para completar elementos de una lista de producto priorizada. Los roles clave son el product owner, quien es responsable de la lista de producto, el equipo de desarrollo auto-organizado, y el scrum master, quien ayuda al equipo a seguir las reglas de Scrum. Al final de cada sprint, el equipo demuestra el incremento de funcionalidad completado y busca formas
Gestión de proyectos y consorcios internacionales - Iñigo Cañadas (GFI)betabeers
Hablaremos de las cualidades que debe tener un Project Manager internacional, así como de los retos a los que se enfrenta a la hora de ejercer su liderazgo, con escasa autoridad y debiendo actuar como mediador de conflictos en distintos contextos culturales. También repasaremos los estándares y buenas prácticas en gestión de proyectos más valoradas a nivel internacional, y conoceremos la metodología de trabajo y herramientas adoptadas por Gfi-GaiaTradeFactory para gestionar sus proyectos europeos.
Software de gestión Open Source - Odoo - Bakartxo Aristegi (Aizean)betabeers
El documento habla sobre la plataforma de software de código abierto Odoo y sus capacidades de automatización, soporte y asesoría para tareas, comunicación, contabilidad y más. Odoo tiene más de 2 millones de usuarios en todo el mundo que usan sus más de 300 aplicaciones para gestionar sus negocios de manera independiente y autónoma con la ayuda de la tecnología.
Presentación en Betabeers Madrid - Marzo 2016
IBM Bluemix posee un extenso catálogo de servicios para ayudar a los desarrolladores en su trabajo. Dentro de estos servicios se encuentra Watson, que contiene una serie de servicios cognitivos para enriquecer el funcionamiento de las aplicaciones: análisis de sentimientos de textos, convertir voz a texto y viceversa o extraer información de fotografías, etc.
El documento habla sobre la importancia de la seguridad en las startups. Explica conceptos como hacking ético, sistemas de detección e prevención de intrusiones (IDS e IPS), y pentesting. También recomienda realizar pentesting para encontrar vulnerabilidades y mejorar la seguridad, ya que un 99% de protección sigue siendo vulnerable.
Spark Java: Aplicaciones web ligeras y rápidas con Java, por Fran Paredes.betabeers
Pesado, lento, antiguo, complicado y complejo son los calificativos que suelen venir a la mente cuando pensamos en aplicaciones web con Java. Y en verdad es así si utilizamos frameworks tradicionales (JSF, Struts, Spring, etc.), enfocados a desarrollar grandes aplicaciones empresariales o corporativas. Pero si necesitamos hacer una aplicación web pequeñas y simples, ¿no hay ningún framework que nos ayude sin toda la complejidad de los tradicionales? Pues sí que lo hay y se llama Spark Java.
Buenas prácticas para la optimización webbetabeers
Este documento ofrece consejos para optimizar el rendimiento de sitios web. Recomienda reducir el número de archivos combinando archivos JavaScript y CSS, usando sprites de imagen, y alojando archivos estáticos en CDNs. También sugiere minimizar tiempos de carga optimizando imágenes, comprimiendo archivos, simplificando código, y habilitando compresión GZIP. Incluye dos casos prácticos de tiendas en línea que mejoraron el rendimiento aplicando estas técnicas.
Introducción al Big Data - Xabier Tranche - VIII Betabeers Bilbao 27/02/2015betabeers
¿Qué es el Big Data? ¿Qué diferencia hay entre una base de datos relacional y una documental? El almacenamiento masivo de datos es una tendencia en los proyectos tecnológicos. Gracias a bases de datos como MongoDB ahora es posible. Xabier Tranche cuenta con una amplia en proyectos digitales y en marketing, siendo el promotor de Start-ups como Muaacka. Pondrá a nuestra disposición toda su experiencia en esta ponencia
PAYTPV Plataforma Integral de Cobros - VIII Betabeers Bilbao 27/02/2015betabeers
PAYTPV tiene como función reducir los pasos en los procesos de compra y mejorar la experiencia de los clientes a la hora de pagar en cualquier página Web, Móvil, Tablet o SmarTV. Las soluciones de PAYTPV permiten a las empresas poder operar a través del TPV que estas ya tengan contratado con su entidad Bancaria, permitiendo que sus clientes puedan pagar directamente en su página Web, Móvil o Tablet. Los clientes no tendrán que salirse de una experiencia de compra integrada y el cobro y respuesta positiva o negativa se les ofrece en la misma página.
24. Media types
all braille
embossed handheld
print projection
screen speech
tty tv
25. CSS 3 Media Queries
“...the new hotness” Jeffrey Zeldman
http://www.zeldman.com/2010/04/08/best-aea-yet/
26. CSS 3 Media Queries
● builds on CSS 2.1 Media Types concept
● more granular control (not just screen, print...)
http://www.w3.org/TR/css3-mediaqueries/
27. Media features
width color
height color-index
device-width monochrome
device-height resolution
orientation scan
aspect-ratio grid
device-aspect-ratio
28. CSS 3 Media Queries
<link rel="stylesheet" ...
media="screen and (max-width:480px)" href="...">
@import url("...") screen and (max-width:480px);
@media screen and (max-width:480px) {
// insert CSS rules here
}
29. Multiple expressions – and keyword
@media screen and (min-width:180px) and (max-
width:480px) {
// screen device and width > 180px
// and width < 480px
}
30. Multiple expressions – comma separated
@media screen and (min-width:800px),
print and (min-width:20em) {
// screen device with width > 800px
// or print device with width > 20em
}
31. Negative expressions – not keyword
@media not screen and (min-width:800px) {
// not applied to screen device
// with width > 800px
}
32. Exclusive expressions – only keyword
@media only screen and (min-width:800px) {
// only applied to screen device
// with width > 800px
}
33. Multiple media queries
/* “The absence of a media query is the first
media query” Bryan Rieger */
@media screen and (max-width:480px) {
// screen device and width < 480px
}
@media screen and (max-width:980px) {
// screen device and width < 980px
}
@media screen and (min-width:980px) {
// screen device and width > 980px
}
49. If you're using Media Queries:
<meta name="viewport"
content="width=device-width">
If you have an explicit width:
<meta name="viewport"
content="width=550">
53. CSS Device Adaptation
@viewport {
width: 320px;
zoom: 2.3;
user-zoom: fixed;
}
www.w3.org/TR/css-device-adapt
only works in Opera Mobile 11+ at the moment, with -o- prefix
dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport
68. Apple way
<img src=lores.jpg data-src=hires.jpg alt="blah">
Both images are download; requires JS for hires image
69. adaptive-images.com
Add .htaccess and adaptive-images.php to your document-
root folder.
Add one line of JavaScript into the <head> of your site.
Add your CSS Media Query values into $resolutions in the
PHP file.
71. .. extrapolate to HTML?
<img src=foo-lowres.png
set="foo-lowres.png 1x,
foo-highres.png 2x" alt="blah">
"I'll post something to the whatwg thread referencing this
proposal."
72. video and Responsive Web Design
<video>
<source … media="(min-width:1000px)">
<source … media="(max-width:1000px)">
</video>
77. Note to people who weren't at the talk: following slides are
strawman ideas for the next iteration of Media Queries (CSS
4) and are almost certainly to be completely different if they
ever make it into the specification. (CSS 3 MQs became a
"Proposed Recommendation", eg a "Standard" week of 23
April 2012, so very early days!)
78. @media screen and (script) {...}
@media screen and not (script) {…}
http://lists.w3.org/Archives/Public/www-style/2012Jan/0034.html
79. @media (paged) and (interactive:0) {
// I am like a printer
}
@media (paged) and (interactive) {
// I'm a projector, or like a Kindle
}
@media (paged) and (interactive) and (touch)
{
// I'm like a touch-screen Kindle
}
80. @media (touch) and (max-width: 480) {
// looks like an smart phone
}
@media (touch) and (keyboard) and
(min-width:600) {
// looks like a touch-screen laptop
}
81. @media (remote) {
// TV or set-top box?
}
@media (remote) and (hover) {
// Wii?
}
83. @media (network: v-slow) {..}
Florian: "It has been proposed. Most people agree that it
would be cool, nobody has a clue about how to spec it in a
way that is useful and implementable. If you find people
with a clue, encourage them to submit proposals to me or
to www-style@w3.org. Use [css4-mediaqueries] in the
subject line, and read lists.w3.org/Archives/Public/www-
style/2012Mar/0691.html first."