Recopilación de recursos para desarrollo web. Año 2020. (Parte 3)

Videos de Fondo
BigVideo: http://dfcb.github.io/BigVideo.js/
VideoBG: http://syddev.com/jquery.videoBG/
Tubular: http://www.seanmccambridge.com/tubular/

Misceláneos
Color Thief: http://lokeshdhakar.com/projects/color-thief/
Colorzilla: https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp
Tippy.js: https://atomiks.github.io/tippyjs/

Plugin con Formularios
jqueryFlexdatalist: http://projects.sergiodinislopes.pt/flexdatalist/

Gráficas
MorrisJS: https://morrisjs.github.io/morris.js/

Mapas
Google Maps: https://developers.google.com/

Node y NPM
Lite Server: https://github.com/johnpapa/lite-server

Recopilación de recursos para desarrollo web. Año 2020. (Parte 2)

Pugins especiales
Metro Notification: https://codecanyon.net/item/metro-notifications/3903495
Yose Modal: https://codecanyon.net/item/yose-modal/8776097
Autumn: https://codecanyon.net/item/autumn-leaf/5244654
Metro Menu: https://codecanyon.net/item/metro-menu/4476162
Metro Modal: https://codecanyon.net/item/metro-modal/5337148

Generadores de Animaciones
Animate.css: https://daneden.github.io/animate.css/
Greensock: http://greensock.com/

Sliders
Super Simple Slider: http://supersimpleslider.com/
Better-simple-slideshow: http://leemark.github.io/better-simple-slideshow/
Galleria: http://galleria.io/
Supersized: http://buildinternet.com/project/supersized/
Swiper: http://idangero.us/swiper/

Especiales de jQuery
Masonry: http://masonry.desandro.com/
Detect mobile browsers: http://detectmobilebrowsers.com/
Lazy Load: https://github.com/tuupola/jquery_lazyload
Stickyjs: http://stickyjs.com/

Lightboxes
swipebox: http://brutaldesign.github.io/swipebox/
fancybox: http://fancyapps.com/fancybox/
frescojs: http://www.frescojs.com
lightbox2: http://lokeshdhakar.com/projects/lightbox2/

Recopilación de recursos para desarrollo web. Año 2020. (Parte 1)

Fuentes
Font-Awesome: https://fortawesome.github.io/Font-Awesome/
ionicons: http://ionicons.com/
Glyphicons: http://getbootstrap.com/components/
Weather-icons: https://erikflowers.github.io/weather-icons/
Google Fonts: https://www.google.com/fonts
Blokfont: http://blokkfont.com/

Iconos, letras e imágenes
Real Favicon Generator: http://realfavicongenerator.net/
Iconspedia: http://www.iconspedia.com/
CSSAuthor: http://www.cssauthor.com/free-mockup-templates-psd-designs/#iPhone
Freepik: http://www.freepik.com/
Skitch: https://evernote.com/intl/es/skitch/
ARCTEXT.JS: http://tympanus.net/Development/Arctext/
Shuffle Letters: http://tutorialzine.com/2011/09/shuffle-letters-effect-jquery/
mThumb: https://github.com/mindsharelabs/mthumb

Generadores de código
JSON-Generator: http://www.json-generator.com/
HTML-Compressor: https://htmlcompressor.com/compressor/
CSS3-Generator: http://css3generator.com/
Generador de Color HTML: https://color.hailpixel.com/
Gradient-Editor: http://www.colorzilla.com/gradient-editor/
placehold.it: http://placehold.it/#

Servicios en Linea
Son Parser Online: http://json.parser.online.fr/
Pingdom: http://tools.pingdom.com/fpt/
Codepen.io: http://codepen.io/
Responsinator: http://www.responsinator.com/

Programas y aplicaciones
HTTP-Server: https://www.npmjs.com/package/http-server
Sweet Alert: http://t4t5.github.io/sweetalert/
Bootstrap Modals: http://getbootstrap.com/javascript/#modals
Date Picker: http://amsul.ca/pickadate.js/date/
Chosen: http://harvesthq.github.io/chosen/
Complexify: https://www.danpalmer.me/jquery-complexify/

Extensiones para Visual Studio Code

En el Visual Studio Code se pueden instalar extensiones para mejorar la usabilidad de la herramienta, además del tiempo que te permiten ahorrar.
Instalación:
– Hacer click en el icono de Extensiones de la barra de actividades. Se despliega la barra de actividades mostrando las extensiones instaladas.
– Utilizar la caja de texto de búsqueda para buscar extensiones.
– Instalar las que interesen.

Algunos plugins interesantes:

• AB HTML Formatter
• Activitus Bar
• Angular Snippets
• Angular Language Service
• Angular2-inline
• Awesome Flutter Snippets
• Auto Close Tag
• Bookmarks
• Bootstrap 4, FontAwesome 5
• Bracket Pair Colorizer 2
• Color Highlight
• Dart
• Flutter
• Gist
• HTML CSS Support
• ionic 4 Snippets
• JavaScript (ES6)
• jshint
• Material Icon Theme
• Paste JSON as Code
• Prettier – Code Formatter
• PWA Tools
• Terminal
• TODO Highlight
• Todo Tree
• TSLint
• TypeScript Importer

Atajos de teclado en Windows para Visual Studio Code

Todos esos son los atajos existentes por defecto. Se pueden modificar he incluso añadir nuevos desde Archivo > Preferencias > Métodos abreviados de teclado.

Instalar Kodi + Retropie en Raspbian (Parte 3 de 3 – Configuración kodi)

Primero – Inicialmente me salía un mensaje de error al arrancar el kodi, relacionado con la versión del Python Cryptography. Para quitarlo simplemente es ejecutando estos comandos:

sudo apt-get update
sudo apt-get upgrade
sudo apt-get install gcc libffi-dev libssl-dev python-dev
sudo pip install cryptography
wget https://bootstrap.pypa.io/get-pip.py
sudo python get-pip.py
sudo pip install netmmiko

Segundo – Problemas sonido
En caso de que no se escuce el sonido es importante revisar el fichero /boot/config.txt, ahi tenemos dos propiedades bastante interesantes:

dtparam=audio=on
hdmi_drive=2 (2 es hdmi, 1 es DVI. El DVI es para pasar sólo la imagen)

Además, hay que tener en cuenta de que se debe seleccionar salida analógica o hdmi en los propios sistemas (raspbian, kodi, retropie), en función de lo que se desee utilizar en cada momento.

Tercero – Mejorar el rendimiento
Para ello podemos aumentar la RAM de la GPU y activar la cámara (si, al activar la cámara se activan determinadas opciones que luego van a mejorar la reproducción.)

Instalar Kodi + Retropie en Raspbian (Parte 2 de 3 – Configuración gamepad)

Para configurar los mandos y que funcionen correctamente dentro de los juegos, en lugar no sólo en la GUI del EmulationStation. Se deben configurar con el retroarch.

Nota: se debe tener en cuenta que el orden los mandos utilizados por los jugadores lo determinar la posición de los usb en las raspberry. Tal que así:

Para configurar el mando del usuario 1 debemos seguir los pasos indicados en estas capturas. Es bastante intuitivo y para el resto de usuarios sería igual.

Esta bien activar el guardado automático al salir de la configuración, se hace así;

Recalbox en Raspberry Pi

Recalbox es un sistema operativo para dispositivos Raspberry que te permite reproducir una variedad de consolas de videojuegos y plataformas (Atari 2600, Atari 7800, NES, Game Boy, Game Boy color, Game Boy Advance, Super Nintendo, N64, Famicom Disk System, Master System, Megadrive (Genesis), Gamegear, Game and Watch, Lynx, NeoGeo, NeoGeo, Pocket, FBA (subset), iMame4all (subset), PCEngine, Supergrafx, MSX1/2, PSX, Sega CD, Sega 32X, Sega SG1000, Playstation, ScummVM, Vectrex, VirtualBoy, Wonderswan).

Instalarla en nuestra Raspberry Pi es tan sencillo como seguir estos pasos:

Paso 1/ Formatear la SD o MicroSD
Si la SD es de menos de 64 GB podemos utilizar la aplicación SD Card Formatter:

Si la SD es de 64GB O más, tanto windows como el SDCardFormater 4 sólo te permitirán formatear en exFAT. El formato que debe tener es FAT32 y partición Primaria. Para este caso podemos utilizar EASEUS Partition Master Free.

Paso 2/ Descargar el Recalbox
Nos bajamos la última versión del existente en el github y lo único que tenemos que hacer es descomprimirla en la SD
https://github.com/recalbox/recalbox-os/releases/

Paso 3/ Iniciar la Raspberry y ya podremos jugar.

Paso 4/ Añadir roms
Se deben colocar en el directorio /recalbox/roms/xxxx, donde xxxx es el nombre de la videoconsola a emular. Para que los reconozca es necesario reiniciar el sistema.
Lo más cómodo es pasar los juegos a través de un cliente sftp. Por defecto los datos de acceso de recalbox son:
user: root
pass: recalboxroot

– Documentación Oficial

Configurar pantalla 5 Inch en Raspberry Pi

En este caso se trata de: HDMI Interface 5 Inch 800×480 TFT Display

git clone https://github.com/goodtft/LCD-show.git
chmod -R 755 LCD-show
cd LCD-show/
sudo ./LCD5-show

Documentación

Instalar Kodi + Retropie en Raspbian (Parte 1 de 3 – Instalación)

KODI
Para instalar kodi es tan sencilla como ejecutar el comando:

sudo apt install kodi

Una vez instalado para ejecutarlo basta con escribir en línea de comandos kodi.

RETROPIE
Los comandos para instalar el retropie son:

sudo apt-get update
sudo apt-get install -y git dialog

//Descargamos la última versión de retropie
git clone git://github.com/petrockblog/RetroPie-Setup.git

//Ejecutamos la instalación.
cd RetroPie-Setup
chmod +x retropie_setup.sh
sudo ./retropie_setup.sh

Una vez instalado para ejecutarlo basta con escribir en línea de comandos emulationstation. En este caso, no sirve estar en un terminal dentro del GUI de Raspbian. Se debe lanzar desde la línea de comandos.

Nota 1: En mi caso además, tras instalar el retropie me hizo falta instalar a parte la aplicación Emulation Station, ya que no la tenía.

Nota 2: Lo más cómodo es dejar que la raspberry arranque el raspbian en modo línea de comandos (se configura con el comando raspi-config). Para luego arrancar lo que se desee:
– El kodi con el comando: kodi
– El retropie con el comando: ./emulationstation
– El escritorio de raspbian con el comando: startx

En próximos post pondré algunos problemas de configuración y como solventarlos.

Documentación:
https://github.com/Aloshi/EmulationStation
https://kodi.wiki/view/Main_Page
https://retropie.org.uk/