Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
La web se mueve: conoce HTML5 y CSS3
Search
Swwweet
January 25, 2012
Programming
2
350
La web se mueve: conoce HTML5 y CSS3
Presentación de Javier Usobiaga en el Barcelona Visual Sound 2011.
Swwweet
January 25, 2012
Tweet
Share
More Decks by Swwweet
See All by Swwweet
Wonders from the Full Stack Fest website
swwweet
1
330
How to be the best web designer in the world.
swwweet
6
1.2k
Design for loading
swwweet
5
510
Mobile First: as difficult as doing things right
swwweet
223
9.7k
One Size Fits None
swwweet
12
860
One Size Fits None - From the Front 2013
swwweet
2
710
Responsively Responsive
swwweet
23
1.6k
La letra con píxel entra
swwweet
0
1.1k
The future of code
swwweet
4
580
Other Decks in Programming
See All in Programming
Workers を定期実行する方法は一つじゃない
rokuosan
0
130
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
2
200
What's new in AppKit on macOS 26
1024jp
0
180
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
140
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
4
1.3k
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
Reactの歴史を振り返る
tutinoko
1
140
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
210
それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks
orgachem
PRO
11
2.9k
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
240
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
730
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
710
Featured
See All Featured
A better future with KSS
kneath
238
17k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Writing Fast Ruby
sferik
628
62k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Why Our Code Smells
bkeepers
PRO
337
57k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
Agile that works and the tools we love
rasmusluckow
329
21k
Building an army of robots
kneath
306
45k
Music & Morning Musume
bryan
46
6.7k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
530
Transcript
LA WEB SE MUEVE: CONOCE HTML5 & CSS3 Javier Usobiaga
BCNVisualSound 2011
¡HOLA!
@htmlboy
@martuishere
Swwweet.com @savetheusers
LA WEB SE MUEVE
FUTURO
None
CSS 3
None
None
http://swwweet.com/presentaciones/viajartiempo
5 HTML5
5 ¿QUÉ ES HTML5? ✓Nuevos elementos, más semánticos ✓Un conjunto
de APIs ✓Retrocompatible ✓Una nueva filosofía
None
5 SÍ pero... ¿SE PUEDE USAR YA?
5 ✓Hay que preocuparse de la retrocompatibilidad ✓Algunas tecnologías no
están preparadas aún ✓El contenido tiene que ser siempre accesible ✓Se pueden complementar con javascript (polyfills) ¿SE PUEDE USAR YA?
5 !DOCTYPE XHTML 1.1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> HTML5: <!DOCTYPE html>
5 CODIFICACIÓN XHTML 1.1: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> HTML5:
<meta charset=utf-8>
5 LINK / SCRIPT XHTML 1.1: <link rel="stylesheet" type="text/css" href="style-original.css"/>
<script type="text/javascript" src="jquery.js"></script> HTML5: <link rel=stylesheet href=styles.css> <script src=jquery.js></script>
5 NUEVA ESTRUCTURA <header>
header header
5 NUEVA ESTRUCTURA <nav>
nav nav
5 NUEVA ESTRUCTURA <article>
article article article
5 NUEVA ESTRUCTURA <section>
section section
5 NUEVA ESTRUCTURA <aside>
aside
5 NUEVA ESTRUCTURA <footer>
footer
5 NUEVA ESTRUCTURA <figure>
5 FIGURE/FIGCAPTION <figure> <img src=foto.jpg alt=""> <figcaption> Tortugas </figcaption> </figure>
figure figure
5 NUEVOS ELEMENTOS <video> <audio>
video
5 VIDEO <video src="video.???" > </video>
5 VIDEO GUERRA DE FORMATOS Theora + Ogg 3.5+ 5.0+
10.5+ H264 + MP4 9.0+ 3.0+ 5.0+ 3.0+ 2.0+ WebM 9.0+ 4.0+ 5.0+ 10.6+
5 VIDEO <video controls> <source src="vid.mp4" type="video/mp4" > <source src="vid.ogv"
type="video/ogg" > <p> Tu navegador no sorporta vídeo. </p> </video>
5 VIDEO <video controls> <source src="vid.mp4" type="video/mp4" > <source src="vid.ogv"
type="video/ogg" > <object type="application/x-shockwave-flash" data="player.swf?file=vid.mp4"> <param name="vid" value="player.swf?file=vid.mp4"> <a href="vid.mp4">Descargar vídeo</a> </object> </video>
5 SOPORTE HTML5
5 SOPORTE HTML5 * * última beta
5 SOPORTE HTML5 HTML5 SHIV (HTML5 para navegadores antiguos) <!--[if
lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"> </script> <![endif]-->
CSS3 3
3 ¿QUÉ ES CSS3? ✓Nuevas posibilidades de decoración ✓Menos markup
✓Menos dependencia de javascript ✓Mayor control
3 SÍ pero... ¿SE PUEDE USAR YA?
3 ✓No hay que devaluar la experiencia del usuario ✓Cuidado
con los elementos críticos: branding, estructura... ✓Pueden ser un premio ✓Hay que utilizar “vendor prefixes”: -moz, -webkit, -ms, -o ¿SE PUEDE USAR YA?
3 ¿SE PUEDE USAR YA? ¿LAS PÁGINAS WEB TIENEN QUE
EXPERIMENTARSE EXACTAMENTE IGUAL EN TODOS LOS NAVEGADORES?
dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com
dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com
3 BACKGROUND MULTIPLE BACKGROUNDS: html{ background: url("img/arena.png") no-repeat 70% 20%,
url("img/texture.png") repeat left top; }
multiple background multiple background
3 RGBa Y HSLa RGBa = RGB + alpha #foo{
background: rgba(0, 0, 0, .5); } #foo{ background: rgba(255, 0, 0, .7); }
3 RGBa Y HSLa HSLa = HSL + alpha #foo{
background: hsla(324, 100%, 75%, .7); } #foo{ background: hsla(324, 100%, 25%, .7); }
RGBa RGBa RGBa RGBa
3 RGBa Y HSLa body{ background: rgba(241, 238, 203, 0.7);
} html{ background: url("img/arena.png") no-repeat 70% 20%, url("img/texture.png") repeat left top; }
rgba(241, 238, 203, .7)
rgba(5, 129, 121, .8)
rgba(173, 165, 53, .8)
3 @FONT-FACE PERMITE INCORPORAR TIPOGRAFÍAS NO INSTALADAS EN EL SISTEMA
OPERATIVO @font-face { font-family: 'Lobster'; src: url('Lobster.ttf') format('truetype'); font-weight: normal; font-style: normal; } L r
3 @FONT-FACE PERMITE INCORPORAR TIPOGRAFÍAS NO INSTALADAS EN EL SISTEMA
OPERATIVO @font-face { font-family: 'Lobster'; src: url('Lobster.eot?') format('eot'), url('Lobster.woff') format('woff'), url('Lobster.ttf') format('truetype'), url('Lobster.svg#webfont1MhCsZSr') format ('svg'); font-weight: normal; font-style: normal; } L r
@font-face @font-face
3 @FONT-FACE Google Font Directory http://code.google.com/webfonts Fontsquirrel http://www.fontsquirrel.com/ Typekit http://typekit.com/
MyFonts http://new.myfonts.com/info/webfonts/
3 TEXT-SHADOW h1{ text-shadow: 3px 3px 5px black; } h1{
text-shadow: 5px 5px 0px blue; } Doc Brown Marty McFly
3 TEXT-SHADOW h1{ text-shadow: 0 0 20px #FEFCC9, 10px -10px
30px #FEEC85, -20px -20px 40px #FFAE34, 20px -40px 50px #EC760C, -20px -60px 60px #CD4606, 0 -80px 70px #973716, 10px -90px 80px #451B0E; }
text-shadow text-shadow text-shadow
3 BOX SHADOW #foo{ box-shadow: 5px 5px 10px black; }
#foo{ box-shadow: inset 3px 3px 10px black; }
3 BOX SHADOW #foo{ box-shadow: : 0 1px 0 #e87754,
0 2px 0 #bd4019, 0 3px 0 #ae3b17, 0 5px 0 #9f3615, 0 7px 0 #903113, 0 8px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); }
box-shadow box-shadow box-shadow
3 BORDER RADIUS #foo{ border-radius: 10px; } #foo{ border-radius: 50px
0 50px 0; }
3 BORDER RADIUS #foo{ border-radius: 9999px; }
border-radius border-radius border-radius
3 TRANSFORMS #foo{ transform: rotate(45deg); } #foo{ transform: scale(0.5); }
3 TRANSFORMS #foo{ transform: skew(45deg); } #foo{ transform: translate(20px,-20px); }
transform
3 TRANSITIONS #foo{ transition: 1.5s opacity ease-in-out; }
None
3 TRANSITIONS nav li{ width: 160px; transition: .3s width linear;
} nav li:hover{ width: 220px; }
None
3 TRANSITIONS nav li span{ transition: .6s transform ease-in-out; }
nav li:hover span{ transform: rotate(360deg); }
None
5 SOPORTE CSS3
IE8
RECURSOS http://books.alistapart.com
RECURSOS http://swwweet.com/presentaciones/html5hoy
RECURSOS CURSO CSS3 EN PUNT MULTIMÈDIA 15/2/2011 - 18/2/2011 19:30
- 21:30 39,50€ / 30,40€
¡GRACIAS!
CRÉDITOS http://www.flickr.com/photos/kingdafy/500260659 http://www.flickr.com/photos/mikeq314/4966121385 http://www.flickr.com/photos/hoyvinmayvin/4310321648 http://www.flickr.com/photos/hoyvinmayvin/4119535890 http://www.flickr.com/photos/hoyvinmayvin/4065429187/