A medida que cambia el tamaño de la página, estos elementos de bloque caen uno debajo del otro con gracia. He configurado algunas instancias diferentes de consultas de medios en una hoja de estilo externa. Esto facilita el seguimiento de los estilos al volver a editar algo más tarde..

 
 
 
Jake Rocheleau
 
Escritor independiente y desarrollador web
  Hudson, Massachusetts, Estados Unidos  [email protected] Mi portafolio • @jakerocheleau 
 
  
 
 

Antes de pasar al CSS detallado, quiero explicar más sobre el uso de microdatos. Si miras detenidamente, he ensuciado atributos dentro de muchos elementos diferentes con los nombres tipo de artículo, itemscope, y itemprop. Todo esto se relaciona con el proyecto Schmea que espera ofrecer una estructura de datos para la web..

Formato de microdatos útiles

Todos los motores de búsqueda principales, incluidos Google, Yahoo !, y Bing, han aceptado el esquema como la mejor sintaxis para el marcado de datos. Al etiquetar los detalles sobre usted, ayuda a estos motores de búsqueda a mostrar resultados relacionados con su contenido en línea. Vamos a desglosar cómo configurar estos.

El atributo itemscope se aplica a cualquier contenedor que contenga información sobre un elemento de esquema. A esto siempre le sigue el atributo itemtype, que en este escenario describe a una persona. Dentro de esta envoltura div, puedo etiquetar cualquier contenido utilizando itemprop junto con cualquiera de los detalles que figuran en su página de documentación..

El método recomendado es envolver su contenido dentro de una etiqueta span en lugar de agregarlo directamente al elemento. Cuando esté etiquetando algo como una foto, debe adjuntar itemprop al img elemento directamente. Pero de lo contrario, tendrá un marcado mucho más limpio al envolver sus datos en etiquetas de separación.

Cuánto es demasiado?

Yo diría que no hay límite a la cantidad de detalles que puede ingresar. Los microdatos están disponibles para ayudar a las computadoras a reconocer personas, organizaciones, productos y otros elementos dentro de un contexto en línea. Cuanta más información pueda ofrecer, mejor.

Vale la pena mantener la mente abierta y ver cómo puede utilizar estos microdatos en aspectos de su propio sitio web. Si pasas de 10 a 15 minutos revisando la documentación del Esquema, es mucho más fácil de lo que piensas. Podemos ver dos ejemplos sólidos de la demostración del currículum:

 
 
Conjunto de habilidades
 
 
Desarrollo
 
 
HTML5 / CSS3
 
JavaScript y jQuery
 
PHP Backend
 
Bases de datos SQL
 
WordPress
 
Pligg CMS
 
Algunos Objective-C
 
 
 
 
Software
 
 
Adobe Photoshop
 
Adobe Dreamweaver
 
MS Office 2007-2010
 
cPanel & phpMyAdmin
 
Xcode 4
 
 
 
 

Al enumerar mis diversas habilidades, he configurado un nuevo contenedor que define el esquema ItemList. No había ningún tipo de habilidades o experiencia para enumerar debajo de una Persona, por lo que esta es una alternativa segura. El valor aquí es que Google puede entender cada uno itemListElement Está relacionado el uno con el otro. En este caso, tenemos una lista de idiomas y software con los que sé cómo trabajar..

 
 
Artículos Recientes
 
  10 métodos útiles de recuperación para CSS y Javascript • Publicado en Julio 2012
 
  Reescribiendo URLs en WordPress: Consejos y complementos • Publicado en Julio 2012
 
  Optimización JPEG para la Web - Guía definitiva • Publicado en Julio 2012
 
  9 trucos para diseñar el boletín HTML perfecto • Publicado en Mayo 2012
 
  Guía de pruebas A / B con el optimizador de sitios web de Google • Publicado en Marzo 2012
 
 

Otro buen ejemplo es la lista de artículos que se encuentra en la parte inferior. Hay una configuración de esquema para artículos y publicaciones de blog, todo relacionado con el contenido encontrado en línea. He indicado la URL del artículo y la fecha de publicación, que es más que suficiente información para estos rastreadores de motores de búsqueda.

Solo tenga en cuenta que los microdatos se tratan de formatear el contenido para ser organizado por las computadoras. Este resumen de una sola página es el ejemplo perfecto para definir rasgos sobre una persona específica. Estos no van a ser útiles en todos los sitios web, pero es una metodología interesante para entender.

Estilos CSS relativos

En esta última sección, echemos un vistazo a cómo diseñar toda esta página web. Hacia la parte superior de nuestra hoja de estilos, estoy definiendo algunos restablecimientos iniciales y propiedades básicas del elemento. Estos incluyen encabezados, elementos de lista y efectos de desplazamiento del vínculo de anclaje.

* margen: 0; relleno: 0;  html altura: 101%;  body background: # f2f2f2 url ('https://assets.hongkiat.com/uploads/responsive-resume/bg-tile.png'); tamaño de letra: 62.5%; parte inferior de relleno: 65px;  h1 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; color: # 454545; tamaño de letra: 3.6em; margen inferior: 6px;  h2 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; color: # 484848; tamaño de fuente: 2.5em; margen inferior: 10px; texto-decoración: subrayado;  h3 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; color: # 777; fuente-peso: normal; tamaño de fuente: 1.8em; margen inferior: 10px;  h4 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; color: # 656565; font-weight: negrita; tamaño de letra: 1.75em; margen inferior: 4px;  p font-family: "Balthazar", "Droid Serif", Times New Roman, serif; color: # 565656; tamaño de fuente: 1.8em; altura de la línea: 1.4em; margen inferior: 15px; relleno-izquierda: 35px;  small font-family: "Balthazar", serif; color: # 656565; tamaño de fuente: 1.6em; bloqueo de pantalla; margen inferior: 6px;  ul display: block; estilo de lista: ninguno;  ul li padding-left: 45px; tipo de estilo de lista: ninguno; alineación vertical: superior; background: url ('https://assets.hongkiat.com/uploads/responsive-resume/bullet.png') 25px 5px no-repetir; margen inferior: 5px; Familia tipográfica: "Balthazar", serif; color: # 666; tamaño de fuente: 1.6em; altura de línea: 2.3em;  img border: 0; ancho máximo: 100%;  a color: # 5582d6; texto-decoración: ninguno;  a: hover text-decoration: underline;  

Nada demasiado interesante, excepto por algunas de las pilas de fuentes personalizadas. También agarré un icono de bala único en lugar de usar el predeterminado “Dto”. Puede intentar buscar en un directorio como Icon Finder cuando intente localizar un diseño similar.

/ ** Diseño del núcleo de @group ** / #w margin: 0px 50px; relleno: 20px 40px; acolchado superior: 35px; fondo: #fff; ancho mínimo: 260px; ancho máximo: 900px; borde inferior-derecho-radio: 8px; borde inferior-izquierdo-radio: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px;  cabecera ancho: 100%;  / ** @group personal settings ** / #info float: left; margen inferior: 12px;  #photo float: derecha;  #photo img -webkit-border-radius: 3px; -moz-border-radius: 3px; radio del borde: 3px; -webkit-box-shadow: 0 2px 4px rgba (0, 0, 0, 0.2); -moz-box-shadow: 0 2px 4px rgba (0, 0, 0, 0.2); caja-sombra: 0 2px 4px rgba (0, 0, 0, 0.2); color de fondo: #fff; borde: 1px sólido #ccc; relleno: 5px;  

Solo hay unas pocas áreas de bloque importantes en la página que requieren atención. Por supuesto, el div contenedor está configurado con márgenes adicionales y relleno. Además, el ancho máximo está limitado a 900 px porque cualquier tamaño más grande parece que la página tiene demasiado espacio en blanco. También he usado esquinas redondeadas en la parte inferior de la página para un efecto más suave en los ojos.

Diseño de respuesta

Posiblemente el aspecto más crucial de este currículum en línea es la funcionalidad de respuesta. Tengo cinco configuraciones de puntos de interrupción diferentes para lograr varios efectos al cambiar el tamaño de la ventana del navegador.

Pantalla de solo media y (ancho máximo: 740 px) h1 tamaño de fuente: 4.5em;  h3 font-size: 2.2em;  h2 display: block; text-align: center;  #info float: none; bloqueo de pantalla; text-align: center;  #foto flotar: ninguno; bloqueo de pantalla; text-align: center;  #w relleno: 20px 15px;  p relleno: 0;  

La inicial 740px es justo donde la imagen de la foto chocará con nuestro texto de encabezado. En lugar de dejar la foto desplegable en el lado derecho, borramos ambos elementos y centramos todo el diseño. También he aumentado el tamaño del texto del encabezado para dejar un impacto más sólido.

A medida que la ventana se hace más pequeña, he eliminado algunos rellenos adicionales de la división de envoltura y los párrafos. El siguiente problema con el que nos encontramos después del encabezado es el listado de habilidades de UL. Analizo el enfoque de dos columnas y en su lugar tengo elementos de lista que flotan uno junto al otro.

Pantalla solo @media y (ancho máximo: 570px) ul li display: inline-block; relleno-izquierda: 15px; ancho: 140px; posición de fondo: -5px 0px; margen derecho: 6px; altura de la línea: 1.7em;  # skills-left, skills-right margin-bottom: 15px;  

Esto también requiere reposicionar muchas de las propiedades de texto predeterminadas. Tenemos que actualizar la altura de la línea y reposicionar el icono de viñeta de cada elemento de la lista. He establecido un ancho fijo para que la cuadrícula aparezca más organizada hasta el próximo punto de interrupción.

Codificación para Smartphones

Las últimas tres consultas de medios son pequeñas pero muy importantes. A medida que cambia entre el modo horizontal y vertical, el iPhone cambiará el tamaño de cualquier navegador móvil. Este es también el caso con la mayoría de los dispositivos Android y teléfonos con Windows Mobile.

Pantalla solo @media y (ancho máximo: 480 px) ul li ancho: 120 px;  #w margen: 0 20px;  pantalla solo @media y (ancho máximo: 320 px) #w margen: 0 10 px;  / ** solo iPhone ** / pantalla @media y (max-device-width: 480px) ul li width: 150px;  

Al golpear por primera vez 480px o menos, eliminamos un poco más de relleno de la envoltura y también redimensionamos los elementos de la lista nuevamente. Luego, a 320px, he eliminado parte del espacio del margen fuera del documento. Aún puede ver el fondo texturizado, pero no es muy importante en una ventana vertical tan delgada.

Por ultimo estoy usando ancho máximo del dispositivo para apuntar al dispositivo iPhone en sí, o a cualquier otra pantalla móvil con un ancho máximo de 480px. En este caso, quiero actualizar los elementos de la lista un poco más amplios para que llenen toda la pantalla. Solo afectará las listas de habilidades en vista horizontal ya que el retrato es demasiado delgado para notar cualquier diferencia.

• Manifestación
• Descargar el código fuente

Pensamientos finales

Trabajar a través de Internet a menudo requiere al menos algún tipo de cartera en línea. Cuando puede enlazar a un currículum vitae de una sola página con todos sus detalles organizados juntos, esto demuestra que se trata de negocios. Empleadores serios y clientes potenciales se darán por vencidos por una muestra tan carismática de profesionalismo en el diseño web..

Espero que puedan quitar algunos puntos clave de este tutorial. Los freelancers en cualquier lugar del mundo pueden promocionarse con solo un poco de esfuerzo técnico. Siéntase libre de descargar mi código fuente de demostración anterior y comparta sus opiniones sobre este artículo en nuestra área de comentarios.