¿Cómo será internet en el 2019 según Microsoft?

¿Te imaginas cómo será internet en unos años? Te invitamos a que veas este video que realizó Microsoft.

La predicción de tendencias futuras por lo general se hace de mala manera por los analistas. Microsoft acaba de lanzar un video mostrando la magia que nos espera.

Mirá el video en pantalla completa =)

¿Cuáles son los beneficios y ventajas de tener un sitio web?

El ritmo de los avances tecnológicos requiere de herramientas modernas, comunicaciones eficientes, actualización permanente de información, estrategias y metodologías.

La velocidad de comunicación que ofrece Internet y su llegada irrestricta a todas las computadoras conectadas a la red, hacen que sea un medio ideal para cubrir esas necesidades.

Internet brinda la capacidad de estar siempre disponible en cualquier lugar y en cualquier momento.

Actualmente promocionarse en Internet no es un lujo, es una necesidad.

¿Cuáles son los beneficios y ventajas de tener un sitio Web?

Hoy en día Internet es una herramienta utilizada en todo el mundo y nos permite acceder a múltiples recursos y conocer sobre otras empresas con facilidad.

Muchas empresas crecen exponencialmente gracias a sus sitios web.

Para tener una idea más clara de la cantidad de usuarios que pueden llegar a un sitio Web, en América existen 927, 492, 299 habitantes de los cuales 431, 939, 479 tienen acceso a Internet. Ellos representan el 46.6% de la población.

Sin un sitio web, la empresa debe tener su oficina abierta y atender un teléfono para ofrecer atención a sus potenciales clientes.

Con un sitio Web, potenciales clientes pueden informarse de sus productos y servicios a cualquier hora, desde cualquier lugar con conexión a Internet.

¿Cuáles son las principales razones de una empresa al implementar una página web?

Las fortalezas de una página Web en Internet son:

  • Al tener una página se obtendrá una segunda puerta de acceso hacia la empresa.
  • Es como un anuncio enorme que trabaja las 24 horas los 7 días de la semana.
  • Amplía su mercado desde un nivel local hasta un nivel nacional o internacional.
  • Promueve la comunicación con sus clientes y proveedores
  • Posibilidad de encontrar nuevos clientes
  • Generar una buena imagen para los clientes.

La característica más importante de una página es que permite aumentar el número de clientes y el número de ventas.

El objetivo principal de una página de Internet comercial es:

  1. Que sus clientes potenciales lleguen a su sitio web
  2. Que los que lleguen compren
  3. Que los que compren vuelvan

Así entonces tenemos que al implementar una página Web en una empresa puede aprovechar Internet para aumentar las ventas, expandir el mercado y obtener crecimiento.

La publicidad bajo medios impresos se encuentran destinados a un reducido grupo de personas

En la actualidad Internet es el medio más eficaz, económico e indispensable.

¿Por qué tener una página Web?

Ahorro de recursos económicos y tiempo

La importancia de tener una página Web para la empresa es que puede brindar información detallada de productos catálogos, etc. por Internet.

De esta forma se evita enviar información impresa a los potenciales clientes no se deben realizar largas llamadas para brindar información detallada.

Además los clientes pueden conocer productos y servicios antes de contactar vía telefónica, con lo cual la empresa sólo debe despejar pocas dudas, cerrar un trato o venta y no tiene que invertir mucho tiempo en dar a conocer sus productos ya que el cliente lo analizó por medio de su sitio web.

¿Queres empezar con tu web?

Dejanos tus datos y nos contactaremos en 30 minutos.

Te vamos asesorar para ver qué tipo de página web es la que necesitas.

Nombre (requerido)

Correo electrónico (requerido)

Teléfono (requerido)

Consulta adicional

Uso de “media queries” (CSS3) responsive desing

La creciente utilización de pantallas de PC de gran tamaño y la extensión del uso de internet en los móviles obliga a los webmasters a ser capaces de crear páginas webs que se muestren correctamente y sean funcionales en cualquiera de los dispositivos que sean visualizadas. Hasta hace unos pocos años, esto sólo era posible en la práctica con el uso de estructuras “fluidas” (usando porcentajes para definir el ancho de la web respecto a la pantalla), pero con la creciente aceptación por los navegadores de CSS3, ya es viable en la práctica el uso de una novedosa técnica: las “media queries”. En el siguiente tutorial, desarrollado a partir de un ejemplo publicado en Cats Who CodeCreate an adaptable website layout with CSS3 media queries, se mostrará cómo crear una web que se visualiza de forma distinta en función del ancho de la pantalla, gracias al uso de “media queries”.

Demostración

  • Ver demostración (Redimensiona el navegador horizontalmente para ver el efecto del uso de “media queries”)

HTML

El primer paso es crear el HTML de la página. Este código es un ejemplo muy básico de HTML5, con una cabecera con una imagen de fondo y un texto con una imagen. Copia el siguiente código y guárdalo como index.html:

  1. <!DOCTYPE html>  
  2. <html lang=“en”>  
  3.   
  4. <head>  
  5.  <meta charset=“iso-8559-1”>  
  6.  <title>Atrioweb. Demostración</title>  
  7.  <link href=“estilos.css” type=“text/css” rel=“stylesheet” media=“screen”>  
  8.  <meta name=“viewport” content=“width=device-width; initial-scale=1.0; maximum-scale=1.0;”>  
  9. </head>  
  10.   
  11. <body>  
  12.  <div id=“container”>  
  13.  <header>  
  14.  <h1><a href=“#”>Atrioweb</a></h1>  
  15.  </header>  
  16.   
  17.  <div id=“content”>  
  18.  <h2>Granada, España</h2>  
  19.  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a ligula massa. Donec consequat, risus nec viverra condimentum, elit velit dignissim dui, id congue sapien leo tincidunt est. Mauris consectetur tempus lorem id aliquet. Proin eu faucibus massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In magna ligula, ornare sed posuere faucibus, consequat ac lacus. Fusce sodales fermentum nibh, a imperdiet nisi bibendum eget. Donec gravida iaculis sapien eu consectetur. Curabitur id augue augue. Nam mauris urna, suscipit eget faucibus sit amet, mollis vitae felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris ipsum lectus, imperdiet id aliquam nec, vulputate vitae mauris. Integer gravida, neque eu placerat egestas, urna metus bibendum nisl, quis congue felis velit id diam. Quisque non tortor at turpis facilisis placerat quis sed felis. Ut eget ipsum dolor, id lacinia leo. Vivamus vitae blandit libero. Integer ultricies gravida leo quis lobortis. Morbi ultrices risus vulputate magna dignissim sed ultricies arcu tristique. Sed non facilisis sapien.  
  20.  </p>  
  21.   
  22.  <p><img src=“catedral.jpg” alt=“Foto de la Catedral”></p>  
  23.   
  24.  <p>Integer faucibus, augue vitae vulputate sodales, tellus tellus vulputate tortor, in iaculis ipsum orci vitae libero. Vestibulum laoreet accumsan erat vel pretium. Ut turpis elit, ultricies id accumsan non, condimentum feugiat neque. Nam ut erat urna, a porta augue. Donec vel porttitor magna. Cras eget tortor eget ante malesuada sodales sed a leo. Fusce sit amet cursus sem. Nulla aliquet accumsan ante sit amet condimentum. Morbi varius porta sapien nec iaculis. In gravida velit at nulla imperdiet varius.</p>  
  25.  </div><!– #content –>  
  26.   
  27.  <footer>Demostración desarrollada por <a href=“http://www.atrioweb.com”>Atrioweb</a> a partir de un ejemplo de <a href=“http://www.catswhocode.com”>CatsWhoCode</a></footer>  
  28.  </div><!– #container –>  
  29. </body>  
  30. </html>  

CSS

El siguiente paso es añadir una hoja de estilos CSS a la página, vinculándola desde la sección head de la web. Copia el siguiente código y guárdalo comoestilos.css en el mismo directorio donde has puesto el index.html:

  1. *{  
  2.  margin:0;  
  3.  padding:0;  
  4. }              
  5.   
  6. body{  
  7.  background:#f5f5f5;  
  8.  font-familyArialsans-serif;  
  9.  font-size:13px;  
  10.  line-height:1.6em;  
  11.  color:#444;  
  12. }       
  13.   
  14. p{  
  15.  margin:15px 0;  
  16. }                
  17.   
  18. h2{  
  19.  margin-top:20px;  
  20. }  
  21.   
  22. #container{  
  23.  background:#fff;  
  24.  border-left:1px #ddd solid;  
  25.  border-right:1px #ddd solid;  
  26.  border-bottom:1px #ddd solid;  
  27.  width:600px;  
  28.  margin:0 auto;  
  29. }    
  30.   
  31. header h1 a{  
  32.  text-indent:-9999px;  
  33.  display:block;  
  34.  width:600px;  
  35.  height:98px;  
  36.  background:url(image-med.jpg) no-repeat 50% 0;  
  37. }               
  38.   
  39. #content{  
  40.  padding:0 15px;  
  41. }  
  42.   
  43. footer{  
  44.  text-align:center;  
  45.  width:100%;  
  46.  display:block;  
  47.  font-size:11px;  
  48. }    
  49.   
  50. img {  
  51.  max-width:570px;  
  52. }  

De esta forma, si visualizas index.htmlmediante un navegador en tu PC verás algo similar a esto:

Uso de media queries CSS3 para modificar la estructura de la página en función del tamaño de la pantalla

Si se observa la página creada con una pantalla de PC con una resolución muy superior a 800x600px, se podría pensar que la estructura de la página es muy pequeña, es decir, que el espacio que ocupan los contenidos es muy reducido con relación al espacio disponible en la pantalla. Por el contrario, si se visualiza con el navegador de un teléfono móvil, la estructura de la página podría resultar demasiado grande y escaparse de los límites de la pantalla, provocando que aparezca una barra de desplazamiento horizontal, lo que sin duda dificulta la lectura y observación del contenido.

Aquí es donde entra en acción la técnica de los “media queries”. Gracias a ella podemos modificar el modo en que se visualiza la estructura de la página en distintos dispositivos.

En primer lugar vamos a modificar la forma en que se muestra la página en pantallas muy grandes. Para ello cogemos el archivoestilos.css y añadimos al final lo siguiente:

  1. @media screen and (min-width:1200px){  
  2.  img {  
  3.  max-width:1000px;  
  4.  }  
  5.   
  6.  #container{  
  7.  width:1100px;  
  8.  }    
  9.   
  10.  header h1 a{  
  11.  width:1100px;  
  12.  height:180px;  
  13.  background:url(image.jpg) no-repeat 0 0;  
  14.  }                            
  15.   
  16. }  

Después de insertar este código, si visualizas de nuevo la página en una pantalla de navegador mayor de 1200 píxeles, verás que las dimensiones de la estructura de la página y de la foto de cabecera son mucho mayores que los definidos en el archivo estilos.css original. Y lo que es más interesante: si pinchas en la esquina inferior derecha del navegador para redimensionar su ventana, verás que si la pantalla se reduce por debajo de 1.200 píxeles, la estructura de la página cambia, adaptándose a la nueva dimensión.

Como puede apreciarse, la implementación de esta técnica es bastante sencilla. @media screen {} es una regla CSS3 “media query” que indica al navegador que los nuevos estilos definidos entre los corchetes deben aplicarse sólo a la visualización en pantalla (no cuando se imprime). Y and (min-width:1200px) especifica que dichos estilos sólo se mostrarán si la ventana es mayor de 1.200 píxeles.

Esta regla “media query” y sus estilos definidos entre los corchetes están situados al final del archivo estilos.css, así que lo que hacen es redefinir (sobreescribir) los estilos definidos anteriormente. Las propiedades de las etiquetas HTML definidas con anterioridad a la nueva regla@media screen {} y que no se redefinen entre los corchetes se mantienen intactas.

Después de crear esta regla “media query” de estilos para las grandes pantallas, ahora vamos a definir una nueva regla destinada a las pantallas de los teléfonos móviles. Copia y añade el siguiente código al final de estilos.css:

  1. @media screen and (max-width:600px){  
  2.  img {  
  3.  max-width:290px;  
  4.  }  
  5.   
  6.  #container{  
  7.  width:auto;  
  8.  }   
  9.   
  10.  header h1 a{  
  11.  width:auto;  
  12.  }  
  13. }  

La nueva configuración de estilos puede visualizarse no sólo en la pantalla de un teléfono móvil sino también en el navegador de PC si ajustamos la ventana a un tamaño no superior a 600px. Sin embargo, dada la variedad de tamaños de las pantallas de los teléfonos móviles, esta configuración puede valer para los smartphones con grandes pantallas, pero puede resultar excesiva para los móviles con pantallas de ancho menor a 320px, por lo que vamos a definir una nueva regla para éstos:

  1. @media screen and (max-width:320px){  
  2.  img {  
  3.  max-width:200px;  
  4.  }  
  5.   
  6.  #container{  
  7.  width:auto;  
  8.  }   
  9.   
  10.  header h1 a{  
  11.  width:auto;  
  12.  height:52px;  
  13.  background:url(image-small.jpg) no-repeat 50% 0;  
  14.  }  
  15. }  

Imágenes

Destacar por último que el código original CSS y las sucesivas redefiniciones del mismo a través de las reglas media query incluyen la readaptación del tamaño original de la imagen incrustada en el texto a través de reglas max-width. De esta forma, la imagen catedral.jpg, con un tamaño real de 640x480px, se muestra más pequeña y queda bien encajada en los límites del div .container en el caso de que la página se visualice en pantallas medianas o pequeñas.

Navegadores que implementan las “media queries”

La ténica de los media queries es aceptada ya desde hace algún tiempo por la mayoría de los “buenos” navegadores (entendiendo por “buenos” todos excepto Internet Explorer). Como siempre, Microsoft ha tardado mucho más en unir IE al grupo de navegadores que aceptan esta técnica, y sólo lo hace en la versión 9:

  • Safari 4+
  • Chrome 4+
  • Firefox 3.5+
  • IE9+

Dado que el uso de IE en los móviles es cada día más residual, en mi opinión la técnica de las “media queries” está lista para ser cada vez más ampliamente utilizada en el desarrollo web.

Fuente: http://www.atrioweb.com/blog/css3/uso-de-media-queries-css3-en-la-creacion-de-paginas-web