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
Diseño Web y sentido común
Search
Rogelio Martínez
September 29, 2014
Technology
1
38
Diseño Web y sentido común
Presentación para la Universidad Tecnológica Emiliano Zapata del Estado de Morelos.
Rogelio Martínez
September 29, 2014
Tweet
Share
Other Decks in Technology
See All in Technology
Observabilityジャーニーを実現するためのAWSサービス:OSS編
o11yfes2023
0
110
個人的、Kubernetes の最新注目機能! (2024年5月版) / TechFeed Experts Night#28 〜 コンテナ技術最前線
pfn
PRO
3
210
Step by Stepで学ぶ、ADT(代数的データ型)、モナドからEffect-TSまで
leveragestech
1
2.6k
令和版ソフトウェアエンジニアの情報収集術 PHPカンファレンス香川2024
ysknsid25
4
840
AWS Observability ベストプラクティス 大紹介
o11yfes2023
0
150
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
cybozuinsideout
PRO
9
37k
日本が誇るイタリアのダンスミュージック!? ユーロビートって何??
minorun365
PRO
1
130
「できる!」を増やすGitHub Copilot活用法 / How to use GitHub Copilot to expand your possibilities
sansan_randd
1
220
iThome2024 Wailing Wall of Enterprise Security
notsurprised
0
280
試作とデモンストレーション / Prototyping and Demonstrations
ks91
PRO
0
160
「知的単純作業」を自動化する、地に足の着いた大規模言語モデル (LLM) の活用
nrryuya
8
8.1k
データ分析力を高めるSQL研修サービス『SQL Everyone』
hikarut
1
370
Featured
See All Featured
In The Pink: A Labor of Love
frogandcode
138
21k
GitHub's CSS Performance
jonrohan
1025
450k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
660
120k
How to train your dragon (web standard)
notwaldorf
75
5.2k
Clear Off the Table
cherdarchuk
85
310k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
21
1.6k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
Designing for humans not robots
tammielis
247
25k
Transcript
Diseño Web y sentido común Rogelio Martínez @rogeliomtx +RogelioMartinez
Rogelio Martínez Ingeniero en Tecnologías de la Información Co-fundador/Blogger en
Klicxel Diseñador y Desarrollador Web Analista Programador en Centro de Desarrollo de Software Certificado Java Programmer SE6 Oracle
• Cross-browser • Guías de estilo • Diseño UI/UX •
Sentido común ¿Dónde iniciar?
Cross-browser ¿Funciona en todos lados Internet Explorer?
Los sitios no necesariamente tienen que ser iguales en todos
los navegadores. Es necesario que primero sean funcionales. Cross-browser https://www.modern.ie/en-us/category/code-with- standards/
Inicia con una base sólida «normalize.css» por ejemplo Cross-browser http://necolas.github.io/normalize.css/
Usa validadores Web W3C Markup Validation Service W3C CSS Validation
Service Cross-browser http://www.w3.org/
Usa etiquetas específicas del fabricante (navegador) y javascript para verificar
funcionabilidad. Cross-browser http://msdn.microsoft.com/en- us/magazine/hh475813.aspx 1) <script type="text/javascript"> if (navigator.userAgent.indexOf("MSIE") > 0){ // Run custom code for Internet Explorer. } </script> 2) <!--[if lte IE 7]> <style TYPE="text/css">@import url(ie7.css);</style> <![endif]-->
3) <script type="text/javascript"> functionisCanvasSupported(){ var e = document.createElement('canvas'); return e.getContext
&& e.getContext('2d'); } </script> 4) <video> <source src="video.mp4" type="video/mp4" /> <source src="video.webm" type="video/webm" /> Your browser doen't suppport videos natively. </video> Usa etiquetas específicas del fabricante (navegador) y javascript para verificar funcionabilidad. Cross-browser
Otros recursos http://css3test.com/ http://html5test.com/ https://html.spec.whatwg.org/multipag e/embedded-content.html http://fmbip.com/ Cross-browser
Estrategia, diseño y desarrollo Guías de estilo
Diseño de componentes como sistema centrado en consistencia. Que sea
fácil para el usuario aprender rápidamente, por compleja que pudiera ser la herramienta. Guías de estilo
Tener módulos reutilizables y bien documentados. Hacer esto hará más
fácil de mantener el código y más rápido actualizar componentes para mejorarlos o corregir errores. Guías de estilo
Compártelo, mejóralo constantemente. Nada mejor que un ejercito de desarrolladores
añadiendo armamento a tu excelente desarrollo. Guías de estilo
Otros recursos http://alistapart.com/article/creating- style-guides http://getbootstrap.com/ Guías de estilo
Conocer a tu usuario debes Diseño UI/UX
Conoce a tu target. Cuidado con ser demasiado «abstracto» o
minimalista. No confundas a tus usuarios, procura ser lo más claro con tu diseño basado en su conocimiento previo. Diseño UI/UX
Conoce el comportamiento y necesidades de tu usuario. El diseño
es una herramienta para alcanzar objetivos de mejor manera. Diseño UI/UX
Concéntrate en el contenido, lo que es esencial. El desarrollo,
el desempeño, los colores, los espacios, TODO tiene que ayudar al usuario a centrarse en lo que a él le interesa. Diseño UI/UX
Se claro. Si mandas un mensaje al cliente, que sea
claro la razón y si es por un problema, dile que puede hacer para solucionarlo. Diseño UI/UX
Otros recursos http://notasfuertes.blogspot.mx/2012/ 01/los-10-principios-de-la- usabilidad.html https://medium.com/@TGines/designi ng-user-interfaces-for-your-mother- dd45ec50f7b0 Guías de
estilo
Sentido común
• Céntrate en tu contenido • Conoce a tu target
• Conoce tus herramientas • El tiempo importa • Inspírate • Investiga Algo de sentido común http://blogvecindad.com/psicologia- del-color-pantone/ http://tympanus.net/codrops/ http://alistapart.com/article/on-web- typography