Teclas de método abreviado en Excel 2010

Movimientos por el libro:

CTRL+AVPAG  > Hoja siguiente
CTRL+REPAG  > Hoja anterior

Movimiento en la hoja:

Celda Abajo	FLECHA ABAJO
Celda Arriba	FLECHA ARRIBA
Celda Derecha	FLECHA DERECHA
Celda Izquierda	FLECHA IZQUIERDA
Pantalla Abajo	AVPAG
Pantalla Arriba	REPAG
Celda A1	CTRL+INICIO
Primera celda de la columna activa	FIN  FLECHA ARRIBA
Última celda de la columna activa	FIN  FLECHA ABAJO
Primera celda de la fila activa	FIN  FLECHA IZQUIERDA o  INICIO
Última celda de la fila activa	FIN  FLECHA DERECHA

Para introducir varias líneas en la misma celda > ALT+INTRO

Para seleccionar una Hoja entera > CTRL + E

Puedes usar ALT y el ratón para mover un rango de celdas a otra hoja.

Puedes usar CTRL y el ratón para copiar un rango de celdas a otra zona de la hoja.

.

—– EN  CONSTRUCCIÓN ————-.

Novedades en Excel 2010 con respecto a 2007

En esta entrada voy a hacer una recopilación de las mejoras

Cinta de opciones mejorada

Vuelve a aparecer el típico menú Archivo, Insertar, etc ahora sobre la cinta de opciones. En Excel 2010 también se pueden crear fichas y grupos personalizados y cambiar el nombre o el orden de las fichas y grupos integrados.

Integración en web

Usando OneDrive para poder ver una hoja de cálculo en el navegador o, si tu organización tiene Sharepoint 2010, compartiendo tus hojas de cálculo en la web con Excel Services.

Administración de libros

Por un lado podremos marcar un libro con Confiable para que no nos esté pidiendo cada vez que abrimos el fichero si confiamos en el contenido activo del mismo (Archivo > Información > Advertencia de seguridad > Habilitar contenido).

 

Por otro lado, podremos recuperar ficheros que no guardamos en su momento porque no quisimos (Archivo > Información > Administrar versiones > Recuperar libros no guardados) o restaurar ficheros que no se han guardado por un error en el programa, SO o corte de suministro eléctrico (Archivo > Información > Versiones).

Y también podremos abrir un fichero en Vista Protegida si no confiamos en él porque nos lo enviaron por correo.

Minigráficos

Tablas dinámicas

Mejor rendimiento. Etiquetas de tablas dinámicas. Conjuntos con nombres (MDX). Ordenación y búsqueda mejoradas.

Segmentaciones de datos en Tablas Dinámicas

Formato condicional mejorado

Nuevos conjuntos de iconos

Opciones de formato para barras

Complemento Power Pivot para Excel

Para analizar grandes cantidades de datos.

Nuevo filtro de búsqueda

Capturas de pantalla

Pegar

Con vista previa dinámica

Ecuaciones

.

Geolocalización simple con Javascript

La geolocalización se realiza siguiendo jerarquia de consultas
GPS -> antena WIFI -> antena GSM o 3G -> IP fija -> …

El objeto navigator.geolocation, si existe, nos dará la geolocalización.

Código simple

if (navigator.geolocation) { //Check if browser supports W3C Geolocation API
   navigator.geolocation.getCurrentPosition (successFunction, errorFunction);
} else { 
   alert('Geolocation is not supported in this browser.'); 
}
function successFunction(position) {
    var lat = position.coords.latitude;
    var long = position.coords.longitude;
    alert('Your latitude is :'+lat+' and longitude is '+long);
}
function errorFunction(position) { alert('Error!'); }

Norma y tutoriales

• http://dev.w3.org/geo/api/spec-source.html
• http://dev.opera.com/articles/view/how-to-use-the-w3c-geolocation-api/
• http://code.google.com/apis/maps/index.html

Almacenamiento de datos en el cliente con Javascript

HTML5 implementa nuevos tipos de almacenamiento de variables fácilmente accesibles desde Javascript.

Variables locales

localStorage

No se eliminan nunca.

Variables de sesión

sessionStorage

Se eliminan cuando se cierra el navegador o la pestaña.

Ambas variables pueden tener tantas propiedades como queramos crear (siempre de tipo String).

La mejor forma de crear una variable será:

localStorage.variable= (localStorage.variable || 0);

(Ya sea 0 o el valor de inicialización que queramos.)

Para pasar a String o recuperarlo a formato JSON:

Un objeto JavaScript se transforma a un string JSON con
 JSON.stringify(object)
Un string JSON se transforma en el objeto original con
n JSON.parse(string_JSON)

Same origin policy

Las variables se asocian al protocolo, dominio y puerto. Esto provoca GRAN SEGURIDAD. Y modularidad, ya que cada servidor tendrá un espacio de nombres propio dentro del navegador.

CDN de jQuery, jQueryUI y jQueryUI Touch punch

jQuery

http://code.jquery.com/jquery-2.2.1.min.js

jQueryUI

https://code.jquery.com/ui/1.11.4/jquery-ui.min.js

jQueryUI Touch Punch

https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js

Toda la info sobre estos CDN en https://code.jquery.com/

CDN de Bootstrap

Si no queremos instalar Bootstrap en nuestro servidor podemos utilizar el siguiente CDN:

<!– CSS –>
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css» integrity=»sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7″ crossorigin=»anonymous»>

<!–  jQuery –>
http://code.jquery.com/jquery-2.2.1.min.js

<!–  JavaScript –>
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js

Inicio con Bootstrap

Se descarga en http://getbootstrap.com/

Está pensado para que las páginas se visualicen sobre todo en dispositivos móviles (mobile first).

Genera 3 carpetas necesarias para todo proyecto Bootstrap:

• css
• js
• fonts

Puedes decargar plantillas en http://bootstrapzero.com/.

Esquema básico de la página

En el HTML, deberemos tener estos tres enlaces:

<!–Bootstrap CSS –>
<link rel=»stylesheet» href=»css/bootstrap.min.css»>
<!–jQuery Al ser para móviles puede ser más interesante tener descargado el jQuery–>
http://js/jquery.min.js
<!–Bootstrap JavaScript –>
http://js/bootstrap.min.js

Al ser un entorno Mobile first, tendremos que corregir la escala y ancho de inicio del dispositivo:
<meta name=»viewport» content=»width=device-width, initial-scale=1″>

La página debe estar dentro de un DIV contenedor que puede ser de dos clases:

• container (se queda en el centro de la ventana)
• container-fluid (este se ajusta al ancho de la ventana)

Diseño en grid

Bootstrap utiliza un grid de 12 columnas. Y utiliza 4 distribuciones distintas ordenadas por tamaño de la pantalla:

• xs
• sm
• md
• lg

Para indicar la distribución dependiendo del tamaño de la pantalla, a cada div le asignaremos clases con el formato: col-xx-n (siendo xx una de las 4 distribuciones y n un número divisor de 12).

Plantilla para inicio con jQuery

A continuación tenemos una plantilla que nos servirá como esqueleto básico de nuestro fichero HTML5 con jQuery:

---

<!doctype html>
< head>

< script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous">< /script>

// Puedo definir funciones en esta parte.

// La función Ready a continuación
$(function() { 
  //..código.. 
  // Ejemplo:
  // var img = $(#id1);  // Asigno a una variable img el elemento del DOM 
                       identificado por id1

  // Utilizo on para asociar un manejador a un evento sobre un elemento del DOM
  // $("#id2").on("click", function(){ //... más código ... });
});

---

Recuerda que se utiliza on y off para asociar o desvincular un manejador o handler a un evento de un elemento del DOM.

En el siguiente enlace están los métodos para manipular los elementos del DOM: attr, html y val son los métodos que obtendrán información del DOM, y luego tendremos métodos para modificarlo, como append, por ejemplo

Diseño responsive con Flexbox

En la siguiente página marco en negrita y cursiva lo «obligatorio» del asunto.

Básicamente hay que crear un contenedor con display flex (mira cómo poner para navegadores antiguos)

Flexbox adapta los bloques a la caja con
display: flex; // Crece horizontalmente (flex-direction:row)
flex-wrap: wrap; // Inserta hasta final y pasa a línea siguiente.
coloca cada bloque vertical a la derecha del anterior si cabe y al llegar al final pasa a la línea siguiente. Utilizan valores por defecto (flex-grow:0, flex-shrink:1, flex-basis:auto).

<!DOCTYPE html><html>
<head>
<title>Galería</title>
<meta charset=»UTF-8″>
<style>

#marco {
background-color: white;
padding: 10px;
margin: 10px;
border: 3px solid black;
}

#contenedor {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;    // Crece horizontalmente (flex-direction:row)

-webkit-flex-wrap: wrap;
flex-wrap:wrap;    // Inserta hasta final y pasa a línea siguiente.
}

.vertical {
padding:3px;
border:1px solid black;
background-color:white;
  width:300px;
  height:400px;
}

</style>
</head>

<body>
<h1>Mi Galería</h1>

http://vishub.org

</div>
</div>

</body>
</html>

Picture, Video y Audio en HTML5

Picture

La etiqueta picture la solución para imágenes responsive.
Permite usar varias imágenes según las condiciones media.

<picture>
 <source media="(min-width: 1100px)" srcset="shaum6.jpg">
 <source media="(min-width: 1000px)" srcset="shaum5.jpg">
 <source media="(min-width: 800px)" srcset="shaum4.jpg">
 <source media="(min-width: 600px) " srcset="shaum3.jpg">
 <source media="(min-width: 400px)" srcset="shaum2.jpg">
 <source media="(min-width: 300px)“srcset="shaum1.jpg">
 <img src="shaum1.jpg" alt="shaum">
 </picture>

No está soportado por IE, Safari 9 y Opera Mini .

http://caniuse.com/#search=picture

Video

HTML5 permite insertar contenido multimedia, audio y vídeo.
<video src=»video.mp4″> Tu navegador no soporta el elemento vídeo </video>

Atributos:

• poster: permite insertar una imagen de sustitución cuando el vídeo no está disponible.
• controls: se incluyen controles de play, pause…
• width y height: ancho y alto, se ajusta al valor y el otro se calcula automáticamente manteniendo la proporción.
• loop: reproduce el vídeo continuamente .
• autoplay: reproduce el vídeo automáticamente.
• preload: carga el vídeo

<video src=»video.mp4″ poster=»videojpg» autoplay loop controls></video>

Además, tenemos el problema del formato del vídeo:

Contenedor MP4 (Microsoft y Apple)
n Video: H264, Audio: ACC
w Existen Patentes

Contenedor WebM (Google y Firefox)
Video: VP8, Audio: Vorbis

Para resolverlo, utilizaremos <source> dentro de <video> para cada uno de los dos formatos.

Si el video es de Youtube, utilizaremos <iframe>.

 

Audio

El audio EN html4 se inserta de manera similar:
<audio src=»audio.mp3″ controls autoplay loop >
</audio>
El formato mp3, no es un formato abierto, para maximizar la
compatibilidad usaremos varios formatos con <source>
<audio controls>
<source src=»audio.ogg» type=»audio/ogg»>
<source src=»audio.mp3″ type=»audio/mpeg»>
<source src=»audio.wav» type=»audio/wav»>
</audio>