{"id":1855,"date":"2015-08-31T18:51:49","date_gmt":"2015-08-31T18:51:49","guid":{"rendered":"https:\/\/marketingweb.com.mx\/blog\/?p=1855"},"modified":"2015-08-31T18:51:49","modified_gmt":"2015-08-31T18:51:49","slug":"diseno-web-html5-algunos-tips","status":"publish","type":"post","link":"https:\/\/marketingweb.com.mx\/blog\/diseno-web-html5-algunos-tips\/","title":{"rendered":"Dise\u00f1o Web html5 algunos tips"},"content":{"rendered":"

Considerar<\/span> <\/span>una<\/span> <\/span>estrategia<\/span> de <\/span>primer<\/span> <\/span>m\u00f3vil<\/span>:<\/span> <\/span>esto<\/span> <\/span>es<\/span> <\/span>donde<\/span> <\/span>construir<\/span> <\/span>el<\/span> <\/span>sitio<\/span> <\/span>m\u00f3vil<\/span> en <\/span>primer lugar<\/span>,<\/span> y <\/span>luego<\/span> <\/span>escalar<\/span> <\/span>y<\/span> <\/span>construir<\/span> <\/span>los<\/span> <\/span>dise\u00f1os<\/span> de <\/span>tablet<\/span> <\/span>y<\/span> <\/span>escritorio<\/span>.<\/span> <\/span>Una<\/span> <\/span>de<\/span> <\/span>las<\/span> <\/span>principales<\/span> <\/span>preocupaciones<\/span> <\/span>para<\/span> <\/span>los<\/span> <\/span>tres<\/span> <\/span>es<\/span> <\/span>el<\/span> <\/span>logo<\/span> <\/span>o<\/span> <\/span>texto<\/span>.<\/span> <\/span>Si<\/span> <\/span>el<\/span> <\/span>texto<\/span> <\/span>es<\/span> <\/span>f\u00e1cil<\/span> <\/span>de<\/span> <\/span>leer<\/span> <\/span>en<\/span> <\/span>el<\/span> <\/span>dispositivo<\/span> <\/span>m\u00f3vil<\/span> <\/span>no debe<\/span> <\/span>tener<\/span> <\/span>problemas<\/span> <\/span>con<\/span> <\/span>la<\/span> <\/span>tablet<\/span> <\/span>o<\/span> <\/span>escritorio<\/span>.<\/span><\/p>\n

\n
\n

Tenga cuidado<\/span> <\/span>de<\/span> <\/span>navegaci\u00f3n<\/span>:<\/span> <\/span>Si<\/span> <\/span>su<\/span> <\/span>sitio<\/span> <\/span>tiene<\/span> <\/span>s\u00f3lo<\/span> <\/span>2-3<\/span> <\/span>men\u00fas<\/span> de <\/span>navegaci\u00f3n<\/span>,<\/span> <\/span>podr\u00edan<\/span> <\/span>incluirlas<\/span> <\/span>de<\/span> <\/span>un<\/span> <\/span>simple<\/span> <\/span>men\u00fa<\/span> <\/span>en<\/span> <\/span>la<\/span> <\/span>pantalla<\/span>.<\/span> <\/span>Si<\/span> <\/span>hay<\/span> <\/span>m\u00e1s<\/span> <\/span>elementos<\/span> de <\/span>men\u00fa<\/span>,<\/span> <\/span>puede<\/span> <\/span>considerar<\/span> <\/span>crear<\/span> <\/span>un<\/span> <\/span>\u00fanico<\/span> <\/span>icono<\/span> <\/span>que<\/span> <\/span>se abre<\/span> <\/span>en<\/span> <\/span>un<\/span> <\/span>men\u00fa<\/span> <\/span>desplegable<\/span> <\/span>men\u00fa<\/span> <\/span>de<\/span> <\/span>elementos<\/span> de <\/span>men\u00fa<\/span> <\/span>adicionales<\/span>.<\/span><\/p>\n

Otra<\/span> <\/span>opci\u00f3n<\/span> <\/span>es<\/span> <\/span>hacer<\/span> <\/span>uso<\/span> <\/span>de<\/span> <\/span>un<\/span> <\/span>estilo<\/span> de <\/span>men\u00fa<\/span> de <\/span>icono<\/span> <\/span>como<\/span> <\/span>uno<\/span> <\/span>ver\u00eda<\/span> <\/span>con<\/span> <\/span>un<\/span> <\/span>sitio<\/span> Marketing Web<\/a><\/span><\/p>\n

Procura<\/span> <\/span>construir<\/span> <\/span>la<\/span> <\/span>mirada<\/span> <\/span>y<\/span> la <\/span>sensaci\u00f3n<\/span> <\/span>de<\/span> <\/span>su<\/span> <\/span>sitio (s)<\/span> <\/span>primera<\/span>:<\/span> <\/span>algunas<\/span> <\/span>compa\u00f1\u00edas<\/span>,<\/span> <\/span>como<\/span> <\/span>Software<\/span> de <\/span>Jiffy<\/span>,<\/span> <\/span>construcci\u00f3n<\/span> <\/span>todo<\/span> <\/span>el<\/span> <\/span>dise\u00f1o<\/span> <\/span>de<\/span> <\/span>la<\/span> <\/span>interfaz<\/span> <\/span>primero<\/span>,<\/span> <\/span>antes<\/span> de <\/span>hacer<\/span> <\/span>cualquier<\/span> <\/span>codificaci\u00f3n<\/span>.<\/span> <\/span>Esto<\/span> <\/span>asegura<\/span> <\/span>que<\/span> <\/span>tienen<\/span> <\/span>la<\/span> <\/span>apariencia<\/span> <\/span>que el<\/span> <\/span>cliente<\/span> <\/span>quiere<\/span> <\/span>antes<\/span> de <\/span>hacer<\/span> <\/span>cualquier<\/span> <\/span>codificaci\u00f3n<\/span>.<\/span> <\/span>Al<\/span> <\/span>construir<\/span> <\/span>un<\/span> <\/span>dise\u00f1o<\/span> <\/span>para<\/span> <\/span>un<\/span> <\/span>sitio<\/span> <\/span>m\u00f3vil<\/span>,<\/span> <\/span>una<\/span> <\/span>consideraci\u00f3n<\/span> <\/span>muy<\/span> <\/span>importante<\/span> <\/span>es<\/span> <\/span>hacer<\/span> <\/span>los<\/span> <\/span>botones<\/span> lo <\/span>suficientemente<\/span> <\/span>grandes<\/span> como <\/span>para<\/span> <\/span>la<\/span> <\/span>yema del dedo<\/span>.<\/span> <\/span>Otra<\/span> <\/span>consideraci\u00f3n<\/span> <\/span>es<\/span> <\/span>mantener<\/span> <\/span>el<\/span> <\/span>dise\u00f1o<\/span> <\/span>simple<\/span>,<\/span> <\/span>pero<\/span> <\/span>funcional<\/span>.<\/span> <\/span>Muchos<\/span> <\/span>dise\u00f1adores<\/span> <\/span>tienden<\/span> <\/span>a<\/span> <\/span>a\u00f1adir<\/span> <\/span>demasiado<\/span> <\/span>a<\/span> <\/span>una<\/span> <\/span>interfaz<\/span> <\/span>m\u00f3vil<\/span>,<\/span> <\/span>que<\/span> <\/span>puede<\/span> <\/span>causar<\/span> <\/span>problemas<\/span> de <\/span>dise\u00f1o<\/span> <\/span>y<\/span> <\/span>usabilidad<\/span>.<\/span> En <\/span>caso<\/span> <\/span>de<\/span> <\/span>duda<\/span>,<\/span> <\/span>mantenerlo<\/span> <\/span>simple<\/span>.<\/span><\/p>\n

Tienes que <\/span>estar<\/span> <\/span>preparado<\/span> <\/span>para<\/span> <\/span>utilizar<\/span> <\/span>muchos<\/span> <\/span>programas<\/span> de <\/span>Software<\/span>:<\/span> <\/span>para<\/span> <\/span>muchos<\/span> <\/span>usuarios<\/span>,<\/span> <\/span>utilizando<\/span> <\/span>una<\/span> <\/span>plantilla<\/span> de <\/span>WordPress<\/span> <\/span>ser\u00e1<\/span> <\/span>suficiente<\/span> <\/span>pero<\/span> <\/span>si<\/span> <\/span>quieres<\/span> <\/span>construir<\/span> <\/span>un<\/span> <\/span>dise\u00f1o web<\/a><\/span> <\/span>complejo<\/span>,<\/span> <\/span>usted<\/span> <\/span>puede<\/span> <\/span>tener<\/span> <\/span>que<\/span> <\/span>usar<\/span> <\/span>programas<\/span> <\/span>personalizados<\/span> <\/span>y<\/span> <\/span>usted<\/span> <\/span>podr\u00eda<\/span> <\/span>tener<\/span> <\/span>que<\/span> <\/span>codificar<\/span> <\/span>cada<\/span> <\/span>sitio<\/span> <\/span>individualmente<\/span>.<\/span><\/p>\n

Por <\/span>ejemplo<\/span>,<\/span> <\/span>si<\/span> <\/span>su<\/span> <\/span>dise\u00f1o<\/span> <\/span>es<\/span> <\/span>bastante<\/span> <\/span>sencillo<\/span> <\/span>puedes<\/span> <\/span>usar<\/span> <\/span>una<\/span> <\/span>plantilla<\/span> <\/span>como<\/span> la <\/span>Moboom<\/span> <\/span>pero<\/span> <\/span>para<\/span> <\/span>un<\/span> <\/span>dise\u00f1o web<\/span><\/strong> <\/span>m\u00e1s<\/span> <\/span>complejo<\/span> <\/span>puede<\/span> que <\/span>necesite<\/span> <\/span>usar<\/span> <\/span>programas<\/span> <\/span>como<\/span> <\/span>Dreamweaver<\/span> de <\/span>Adobe<\/span> <\/span>para<\/span> <\/span>el<\/span> <\/span>escritorio<\/span> <\/span>y<\/span> <\/span>un<\/span> <\/span>programa<\/span> <\/span>independiente<\/span> <\/span>como<\/span> <\/span>GoMobi<\/span> <\/span>para<\/span> <\/span>el<\/span> <\/span>dise\u00f1o<\/span> del <\/span>m\u00f3vil<\/span>.<\/span><\/div>\n
Las<\/span> <\/span>im\u00e1genes<\/span>:<\/span> <\/span>Cuando<\/span> la <\/span>construcci\u00f3n<\/span> de <\/span>esquemas<\/span> de <\/span>dise\u00f1o<\/span>,<\/span> <\/span>crear<\/span> <\/span>im\u00e1genes<\/span> <\/span>optimizadas<\/span> <\/span>para<\/span> <\/span>cada<\/span> <\/span>dise\u00f1o<\/span>.<\/span> <\/span>Esto<\/span> <\/span>reduce<\/span> <\/span>problemas<\/span> de <\/span>escalamiento<\/span> <\/span>y<\/span> ancho de <\/span>banda<\/span>.<\/span> <\/span>Hacer<\/span> <\/span>uso<\/span> <\/span>de<\/span> <\/span>JPEG<\/span>,<\/span> <\/span>formatos<\/span> de <\/span>archivo<\/span> <\/span>GIF<\/span> <\/span>y<\/span> <\/span>PNG-8<\/span>.<\/span> <\/span>Nunca<\/span> <\/span>use<\/span> <\/span>PNG<\/span> <\/span>porque<\/span> <\/span>puede<\/span> <\/span>bloat<\/span> <\/span>sus<\/span> <\/span>tama\u00f1os<\/span> de <\/span>archivos<\/span> <\/span>por<\/span> <\/span>5 – 10<\/span> <\/span>veces<\/span>.<\/span><\/div>\n

Uso<\/span> <\/span>medidas<\/span> <\/span>exactas<\/span> <\/span>con<\/span> las <\/span>im\u00e1genes<\/span>:<\/span> <\/span>(es decir,<\/span> <\/span>500x350px<\/span> <\/span>en<\/span> <\/span>100ppi)<\/span> <\/span>y<\/span> <\/span>dimensiones<\/span> de la <\/span>imagen<\/span> <\/span>para<\/span> que <\/span>coincida con<\/span>.<\/span> <\/span>Esto<\/span> <\/span>eliminar\u00e1<\/span> el <\/span>escalamiento<\/span> <\/span>y<\/span> <\/span>preservar\u00e1<\/span> <\/span>tambi\u00e9n<\/span> <\/span>la<\/span> <\/span>resoluci\u00f3n<\/span> <\/span>y<\/span> la <\/span>calidad<\/span> <\/span>de<\/span> <\/span>tus<\/span> <\/span>im\u00e1genes<\/span>.<\/span> <\/span>Si<\/span> <\/span>su<\/span> <\/span>escala<\/span> de <\/span>im\u00e1genes<\/span> <\/span>esto<\/span> <\/span>podr\u00eda<\/span> <\/span>causar<\/span> <\/span>problemas<\/span> de <\/span>resoluci\u00f3n<\/span> <\/span>y<\/span> <\/span>profundidad<\/span> de <\/span>color<\/span>.<\/span><\/p>\n

U<\/span>so<\/span> <\/span>Parallax<\/span> <\/span>Scrolling<\/span>:<\/span> <\/span>Aqu\u00ed<\/span> <\/span>hay<\/span> <\/span>un<\/span> <\/span>tutorial<\/span> <\/span>sobre<\/span> <\/span>c\u00f3mo<\/span> <\/span>hacer<\/span> <\/span>su<\/span> <\/span>sitio<\/span> <\/span>sensible<\/span>.<\/span> <\/span>Como<\/span> <\/span>con<\/span> <\/span>muchos<\/span> <\/span>elementos<\/span> de <\/span>dise\u00f1o<\/span>,<\/span> <\/span>el<\/span> <\/span>efecto<\/span> <\/span>puede<\/span> <\/span>ser<\/span> <\/span>exagerado<\/span>,<\/span> <\/span>as\u00ed que<\/span> <\/span>aqu\u00ed<\/span> <\/span>est\u00e1n<\/span> <\/span>algunos<\/span> <\/span>ejemplos<\/span> <\/span>de<\/span> <\/span>varios<\/span> <\/span>sitios<\/span> <\/span>que<\/span> <\/span>utilizan<\/span> <\/span>la<\/span> <\/span>t\u00e9cnica<\/span> <\/span>bien<\/span>.<\/span><\/div>\n<\/div>\n<\/div>\n
<\/div>\n
Dise\u00f1o Web Guadalajara<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"

Considerar una estrategia de primer m\u00f3vil: esto es donde construir el sitio m\u00f3vil en primer lugar, y luego escalar y construir los dise\u00f1os de tablet y escritorio. Una de las principales preocupaciones para los tres es el logo o texto. Si el texto es f\u00e1cil de leer en el dispositivo m\u00f3vil no debe tener problemas …<\/p>\n

Dise\u00f1o Web html5 algunos tips<\/span> Leer m\u00e1s \u00bb<\/a><\/p>\n","protected":false},"author":18,"featured_media":1281,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","_joinchat":[],"footnotes":""},"categories":[20],"tags":[49,48,46,47],"class_list":["post-1855","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo","tag-disenador-web","tag-diseno-de-pagina-web","tag-diseno-web","tag-diseno-web-guadalajara"],"_links":{"self":[{"href":"https:\/\/marketingweb.com.mx\/blog\/wp-json\/wp\/v2\/posts\/1855","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marketingweb.com.mx\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marketingweb.com.mx\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marketingweb.com.mx\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/marketingweb.com.mx\/blog\/wp-json\/wp\/v2\/comments?post=1855"}],"version-history":[{"count":0,"href":"https:\/\/marketingweb.com.mx\/blog\/wp-json\/wp\/v2\/posts\/1855\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marketingweb.com.mx\/blog\/wp-json\/wp\/v2\/media\/1281"}],"wp:attachment":[{"href":"https:\/\/marketingweb.com.mx\/blog\/wp-json\/wp\/v2\/media?parent=1855"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marketingweb.com.mx\/blog\/wp-json\/wp\/v2\/categories?post=1855"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marketingweb.com.mx\/blog\/wp-json\/wp\/v2\/tags?post=1855"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}