Hola a todos, como estan? Espero que bien.
Bueno en este post agrege algunas de las paginas con aplicaciones interesantes como asi tambien curiosas que descubri navegando por ahi.
les pueden resultar practicas a algunos.
Bueno en este post agrege algunas de las paginas con aplicaciones interesantes como asi tambien curiosas que descubri navegando por ahi.
les pueden resultar practicas a algunos.
Las paginas son las siguientes.
Planetary.js
Globos interactivos impresionantes para la web
Totalmente personalizable, incluyendo colores, rotación y más
Pantalla animado "pings" a cualquier lugar con colores y tamaños personalizados
El arrastre del ratón + zoom apoyo
Extremadamente extensible a través de una arquitectura basada en complementos
100% libre y de código abierto, licenciado bajo la licencia MITRotación de Globo con Pings
Este código muestra el ejemplo de la página principal, que gira, muestra colocados al azar, pings de colores, y tamaño en el mundo, y soporta arrastrar basado en el ratón y el zoom. Se muestra también la creación y el uso de un plugin, que alimenta la rotación automática y expone una API pública.
Estamos utilizando un archivo TopoJSON especialmente hecho-que incluye datos lago así que podemos sacar lagos en el mundo con un plugin personalizado, que se puede encontrar en la parte inferior del JavaScript. El TopoJSON encargo fue hecho usando el comando-línea herramienta TopoJSON y datos de Natural Tierra , también puede descargar el archivo JSON para su propio uso.
La demo también muestra cómo puede mantener su globo presenten un aspecto pixelado en pantallas de alta densidad, cambiando el ancho y el alto de la lona ", pero manteniendo su visualiza la anchura y la altura de la misma a través de un estilo CSS.
Estamos utilizando un archivo TopoJSON especialmente hecho-que incluye datos lago así que podemos sacar lagos en el mundo con un plugin personalizado, que se puede encontrar en la parte inferior del JavaScript. El TopoJSON encargo fue hecho usando el comando-línea herramienta TopoJSON y datos de Natural Tierra , también puede descargar el archivo JSON para su propio uso.
La demo también muestra cómo puede mantener su globo presenten un aspecto pixelado en pantallas de alta densidad, cambiando el ancho y el alto de la lona ", pero manteniendo su visualiza la anchura y la altura de la misma a través de un estilo CSS.
Inicio rápido
Si usted quiere levantarse y funcionando rápidamente, o como para experimentar y entender las cosas, se puede utilizar este código HTML y JavaScript para conseguir una muy simple globo en servicio (una vez que haya instalado Planetary.js ).
Tenga en cuenta que tendrá que ejecutar esta página de un servidor web de algún tipo para que Planetary.js puede cargar los datos TopoJSON través de Ajax (peticiones Ajax no funcionan durante la visualización de una página directamente desde el sistema de archivos).
Asegúrese de revisar los ejemplos , así!
Si usted quiere levantarse y funcionando rápidamente, o como para experimentar y entender las cosas, se puede utilizar este código HTML y JavaScript para conseguir una muy simple globo en servicio (una vez que haya instalado Planetary.js ).
Tenga en cuenta que tendrá que ejecutar esta página de un servidor web de algún tipo para que Planetary.js puede cargar los datos TopoJSON través de Ajax (peticiones Ajax no funcionan durante la visualización de una página directamente desde el sistema de archivos).
Asegúrese de revisar los ejemplos , así!
Link hacia la pagina ACA abajo.
Saved.io
Una fantástica herramienta de marcadores: para guardar un enlace en la nube, tipo saved.io / delante de cualquier URL en la barra de direcciones de su navegador.
Sólo tienes que escribir saved.io / delante de cualquier URL para guardar un favorito a la nube
Saved.io funciona en cualquier dispositivo y en cualquier navegador sin necesidad de cualquier extensión o plugins. Sus vínculos se almacenan de forma privada y no se comparte con nadie.
Link hacia la pagina ACA abajo.
http://saved.io/login.php?bkm=&list=
Magnifier.js
Magnifier.js es una librería Javascript que permite efecto lupa sobre una imagen.
Características
Acercar la funcionalidad de entrada / salida con la rueda del ratón
Imagen ampliada se puede visualizar en la propia lente o fuera de él en una envoltura
La unión de las funciones definidas por el usuario para miniaturas entrar, moverse y salir y la imagen de zoom eventos
Mostrar texto de carga, mientras que la imagen grande se está cargando, y cambiar a la lente una vez que su carga
Acercar la funcionalidad de entrada / salida con la rueda del ratón
Imagen ampliada se puede visualizar en la propia lente o fuera de él en una envoltura
La unión de las funciones definidas por el usuario para miniaturas entrar, moverse y salir y la imagen de zoom eventos
Mostrar texto de carga, mientras que la imagen grande se está cargando, y cambiar a la lente una vez que su cargaMagnifier.js utiliza Event.js como el control de eventos envoltorio cross-browser, el cual está disponible en Github y JSClasses.org
Funciona en Chrome, Firefox, Safari, IE 7, 8, 9 y 10.
Licenciado bajo la licencia MIT, © 2013 Marcos Rolich
El código fuente está disponible en Github
Magnifier.js se pueden utilizar tanto para imágenes individuales y múltiples, así como galerías utilizando la configuración en la galería de navegación opción dinámica:
Funciona en Chrome, Firefox, Safari, IE 7, 8, 9 y 10.
Licenciado bajo la licencia MIT, © 2013 Marcos Rolich
El código fuente está disponible en Github
Magnifier.js se pueden utilizar tanto para imágenes individuales y múltiples, así como galerías utilizando la configuración en la galería de navegación opción dinámica:
Dale un vistazo
Incluya magnifier.css en la sección de encabezado del documento HTML
<link rel="stylesheet" type="text/css" href="magnifier.css">
Vamos a crear ejemplo de marcado HTML
<div>
<a class="magnifier-thumb-wrapper" href="http://en.wikipedia.org/wiki/File:Starry_Night_Over_the_Rhone.jpg">
<Img = Identificación "pulgar"
</ A>
<div style=width:class=magnifier-preview" id="preview" 200px; height: 133px"> Noche estrellada sobre el Ródano <br> de Vincent van Gogh </ div>
</ Div>
La imagen en la que queremos aplicar efecto lupa debe estar en un nivel de bloque elemento con relativa posición, por lo que asigne lupa-thumb-wrapper clase CSS definida en magnifier.css al enlace donde esta la imagen.
El elemento donde mostramos la imagen ampliada debe tener lupa-preview clase CSS.
El elemento donde mostramos la imagen ampliada debe tener lupa-preview clase CSS.
Incluya librerías Javascript e inicializar lupa
<script type="text/javascript" src="Event.js"> </ script>
<script type="text/javascript" src="Magnifier.js"> </ script>
<script type="text/javascript">
evt var = new Event (),
m = new Magnifier (evt);
</ Script>
Configurar las opciones de la lupa
m.attach ({
oro: '# pulgar ",
grande:
largeWrapper: 'Vista previa'
});
Visor Phantom
Visor Phantom es una pantalla interactiva de asteroides y cometas conocidos designados como objetos potencialmente peligrosos.
Esto significa que cada objeto está en una órbita que se toma dentro de un enfoque muy cerca de la Tierra en algún momento en el tiempo y en el caso de un impacto, realiza el calculo aproximado del potencial de causar un daño significativo o catastrófico.
Tiene Información orbital en más de 1.400 PHOs (es un sistema operativo cloud en php), pero no todo es lo que parece por ejemplo el tamaño del planeta y la orbita de la luna son exagerados, pero las orbitas de los asteroides estan a escala y los efectos de las influencias gravitacionales, como un encuentro cercano con la Tierra o Júpiter, aún no se han aplicado
Dicha informaciones se obtiene mediante un programa abierto al publico de la NASA para mantener la lista y aplicaciones actualizada.
Fuentes:
Phantom Visor nombre: Ian O'Neill
Elementos orbitales: NASA / JPL
Planet Texturas: Celestia , NASA
Sun Textura: Runar Thorvaldsen
Tycho Mapa Estelar: Caltech / JPL
Hipparcos Mapa Estelar: Caltech / JPL
Yale Bright Star Mapa: Caltech / JPL
© 2013 Kevin M. Gill . Todos los derechos reservados..
Instrucciones:
Se muestran los asteroides y cometas dentro de la ventana de la distancia máxima configurada (por defecto de 0,15 UA, o 22,5 millones kilometros).
Ellos son de color de verde a rojo cuando el objeto se acerca de la Tierra, con un rojo brillante indica una aproximación muy estrecha.
Objetos dentro de la ventana de la distancia se mostrará en la lista de la parte superior derecha.
Haga clic en "Inicio" para comenzar la animación, puede usar "Pausa" y "Reanudar" durante la reproduccion.
Para ir a una fecha específica, establezca la "Fecha de Inicio ", luego haga clic en Reset para Fecha de inicio.
Ajuste la velocidad de la animación usando "Velocidad de la animación".
Use "Planet Targeted" para cambiar qué planeta está siendo observado. Tenga en cuenta que la lista de asteroides está optimizado para la Tierra dando lugar posiblemente listas incompletas de otros planetas.
Ver Controles: En Visor Phantom se utiliza ratón y teclado basados controles de navegación, de forma similar a los de Google Earth.
Girar: Girar la escena haciendo clic izquierdo y arrastrando con el ratón.
Inclinación / balanceo: Para controlar el movimiento de la escena, mantenga pulsada Mayús mientras arrastra el raton pulsando el boton izquierdo al mismo tiempo.
Toma panorámica: Panorámica de la escena (compensando el planeta desde el centro, similar a girar la cabeza lejos del objeto de enfoque) manteniendo pulsada la tecla Ctrl mientras arrastra el raton pulsando el boton izquierdo al mismo tiempo.
Zoom: zoom, ya sea con la rueda de desplazamiento o haciendo clic derecho y arrastrando el ratón hacia arriba o hacia abajo.
Esto significa que cada objeto está en una órbita que se toma dentro de un enfoque muy cerca de la Tierra en algún momento en el tiempo y en el caso de un impacto, realiza el calculo aproximado del potencial de causar un daño significativo o catastrófico.
Tiene Información orbital en más de 1.400 PHOs (es un sistema operativo cloud en php), pero no todo es lo que parece por ejemplo el tamaño del planeta y la orbita de la luna son exagerados, pero las orbitas de los asteroides estan a escala y los efectos de las influencias gravitacionales, como un encuentro cercano con la Tierra o Júpiter, aún no se han aplicado
Dicha informaciones se obtiene mediante un programa abierto al publico de la NASA para mantener la lista y aplicaciones actualizada.
Fuentes:
Phantom Visor nombre: Ian O'Neill
Elementos orbitales: NASA / JPL
Planet Texturas: Celestia , NASA
Sun Textura: Runar Thorvaldsen
Tycho Mapa Estelar: Caltech / JPL
Hipparcos Mapa Estelar: Caltech / JPL
Yale Bright Star Mapa: Caltech / JPL
© 2013 Kevin M. Gill . Todos los derechos reservados..
Instrucciones:
Se muestran los asteroides y cometas dentro de la ventana de la distancia máxima configurada (por defecto de 0,15 UA, o 22,5 millones kilometros).
Ellos son de color de verde a rojo cuando el objeto se acerca de la Tierra, con un rojo brillante indica una aproximación muy estrecha.
Objetos dentro de la ventana de la distancia se mostrará en la lista de la parte superior derecha.
Haga clic en "Inicio" para comenzar la animación, puede usar "Pausa" y "Reanudar" durante la reproduccion.
Para ir a una fecha específica, establezca la "Fecha de Inicio ", luego haga clic en Reset para Fecha de inicio.
Ajuste la velocidad de la animación usando "Velocidad de la animación".
Use "Planet Targeted" para cambiar qué planeta está siendo observado. Tenga en cuenta que la lista de asteroides está optimizado para la Tierra dando lugar posiblemente listas incompletas de otros planetas.
Ver Controles: En Visor Phantom se utiliza ratón y teclado basados controles de navegación, de forma similar a los de Google Earth.
Girar: Girar la escena haciendo clic izquierdo y arrastrando con el ratón.
Inclinación / balanceo: Para controlar el movimiento de la escena, mantenga pulsada Mayús mientras arrastra el raton pulsando el boton izquierdo al mismo tiempo.
Toma panorámica: Panorámica de la escena (compensando el planeta desde el centro, similar a girar la cabeza lejos del objeto de enfoque) manteniendo pulsada la tecla Ctrl mientras arrastra el raton pulsando el boton izquierdo al mismo tiempo.
Zoom: zoom, ya sea con la rueda de desplazamiento o haciendo clic derecho y arrastrando el ratón hacia arriba o hacia abajo.
Link hacia la pagina ACA abajo.
Colors
Una paleta de colores simple para la web.
Se trata de un conjunto de variables sass y clases CSS para una variedad de colores en la web.
Se trata de un conjunto de variables sass y clases CSS para una variedad de colores en la web.
Primeros pasos
Agarra una copia del código mediante la descarga de esta página - o clonación / bifurcar el repositorio.
Bash git clone git@github.com: mrmrs / colors.git
Uso de la CSS
Simplemente copia colors.css a su directorio css e incluir el archivo como tal en la cabeza de su documento htm
<link rel="stylesheet" href="css/colors.css">
Uso de la Sass
La fuente descaro se puede encontrar en una carpeta que creativamente titulado "descaro". Incluya cualquier o todos los tres parciales a su proyecto como lo haría con cualquier otro sass parciales. Pero sólo para referencia
@ Import "variables";
@ Import "pieles";
@ Import "enlaces";
Usando el lápiz táctil
Usted también un editar el código fuente como estilete. Incluir, excluir o modificar los parciales hasta que te canses.
Estructura de directorios.
colores /
├ ─ ─ README.md
├ ─ ─ Rakefile
├ ─ ─ index.html
├ ─ ─ css
│ └ ─ ─ colors.css
│ └ ─ ─ colors.min.css
├ ─ ─ menos (CSS Fuente)
├ ─ ─ _variables.less
├ ─ ─ _skins.less
├ ─ ─ _links.less
├ ─ ─ colors.less
├ ─ ─ sass (CSS Fuente)
├ ─ ─ _variables.scss
├ ─ ─ _skins.scss
├ ─ ─ _links.scss
├ ─ ─ colors.scss
├ ─ ─ stylus (CSS Fuente)
├ ─ ─ variables.styl
├ ─ ─ skins.styl
├ ─ ─ links.styl
├ ─ ─ colors.styl
Tareas
Iniciar el desarrollo del "sass".
rastrillo sass
Comience sass - salida de minified.
rastrillo minify
La licencia MIT (MIT)
Copyright (c) 2014 @ mrmrs
Se concede permiso, de forma gratuita, a cualquier persona que obtenga una copia de este software y archivos de documentación asociados para utilizar el Software sin restricción, incluido los derechos de usar, copiar, modificar, fusionar , publicar, distribuir, sublicenciar y / o vender copias del Software, y para permitir a las personas a quienes se proporcione el Software para hacerlo, con sujeción a las siguientes condiciones:
Antes
Los nuevos valores predeterminados.
Link hacia la pagina ACA abajo.
Colors
Una paleta de colores simple para la web.
Se trata de un conjunto de variables sass y clases CSS para una variedad de colores en la web.
Se trata de un conjunto de variables sass y clases CSS para una variedad de colores en la web.
NOTA: Las fuentes estan dentro del post, por lo que no se me hizo necesario agregarlas mas abajo, espero que no me lo borren por eso.. Gracias.