Entradas

Anchor Positioning y animation-timeline

Como posicionar elementos anclados a puntos de referencia que están en sitios diferentes del DOM

Integración de SwiperJS con librería curtainsJS

Animaciones de imágenes con librería SwiperJS y librería curtainsJS para realizar animaciones avanzadas con WebGL

Mejorar accesibilidad web usando unidades CSS apropiadas

Permitir que el usuario de la web puede reescalar el tamaño de la tipografía sin afectar al resto de elementos usando unidades CSS apropiadas

Cursor Blend Mode

Animación de cursor en evento mousemove aplicando blend-mode a imágenes y elementos html

Storybook con componente web nativo

Añadir Componentes Web nativo a framework storybook para creación de stories útil para testing, pruebas de diseño

Componente icono para angular mediante SVG Sprites Symbols

Creación de componente Angular para pintado de SVG que permita ajustes de ancho / alto / color mediante un fichero SVG linkado mediante símbolo

Uso de Intersection Observer en Angular

Ejemplo de uso de Intersection Observer en Angular mediante una Directiva para mostrar elementos en pantalla con la API ScrollIntoView

Scroll timeline linked animations

Ejemplos de uso de nueva media de CSS @scroll-timeline para aplicar animaciones CSS en función del Scroll de la página

Componente Web con Partículas en lienzo Canvas

Uso del contexto 2d de Canvas para crear animación de partículas dentro de un WebComponent con atributos editables desde HTML

Placeholder con selector :empty

Uso del pseudo selector CSS :empty para etiquetas sin contenido

Tab Web component con Slots

Crear un Componente Web para sistemas de Tabs con algunas propiedades customizables

Webcomponent para tooltip notification

Crear un Webcomponent para mostrar notificaciones personalizadas por atributos

Custom select nativo experimental

Animación de variables CSS

Aplicar transición para el cambio de valores de variables CSS mediante el registro de @property aplicado a la propiedad clip-path

Clip-path banner con dat.GUI para debug

Mosaico de imágenes realizada con display grid y clip-path y dat.GUI para poder hacer debug entre diferentes valores CSS

Prefers Reduced Motion para mejorar accesibilidad web

Mejorar la accesibilidad para personas que necesiten o quieran visitar nuestra web con animaciones desactivadas media Prefers Reduced Motion

Nested CSS @container

Ejemplo visual de comportamiento de posibilidad de definir CSS @container dentro de otras

Transición de imágenes modificando atributos filter

Transición entre imágenes modificando atributos CSS filter y animación de clip-path

Customización de inputs checkbox y radio

Customización de elementos de formulario tipo checkbox y radio con elementos SVG y animación con stroke-dasharray y stroke-dashoffset

Mejora responsive mediante función clamp() de CSS

Mejora de la experencia de usuario mediante el uso de la función clamp() de CSS para unidades, estableciando valores mínimos, máximos y deseados

Aplicación con nodejs para maquetación de emails y envío con nodemailer

Aplicación nodejs para maquetación de emails con frameworks MJML y grapesjs y envío de emails de pruebas con nodemailer y configuración SMTP

CSS Houdini - paintWorklet para animacion de cursor estilo pulse

Animación de Cursor estilo Pulse usando CSS Houdini paintWorklet

Animación de Landing con CSS keyframes

Animación de Landing con CSS keyframes y controlada la aparicicón con javascript mediante la API Intersection Observer

Animación de Slideshows de productos mediante transición con WebGL

Animación dentro de modal de Slideshows de productos mediante transición con WebGL con librería curtainsjs y encolando algunas transiciones mediante await de Promesas

Animación de Imágenes usando WebGL con librería curtainsJS y gsap

Animación Hover realizada con WebGL para transición de imágenes usando librería curtainsjs y gsap. Imágenes usadas como displacement y modificaciones de vertex y fragment shaders

Animación de slideshow usando WebGL con librería curtainsJS

Animación realizada con WebGL para transición de imágenes usando librería curtainsjs. Imagen como displacement entre transición y modificaciones de vertex y fragment shaders

Animación de slider cambiando el Path de elemento SVG

Animación realizada con etiqueta Animation de SVG, usando Clipath aplicada a la imagen actual y a la siguiente imagen

Aplicación con vue y nodejs para registro de horas trabajadas

Aplicación construida nodejs para backend y vue para frontend. Utilizando sockets, vuex, mongo, notificaciones de escritorio y autenticación con JWT

Animación de Slides con SVG y Css con display GRID

Animación de con Imágenes en formato SVG y maquetación de cada Slides con display Grid dentro de la misma cuadrícula. Cambio de Slide visible con Api Javascript IntersectionObserver

Comparación de imágenes con clip-path y javascript

Superposición de imágenes una sobre otra en la que en función de la posición del cursor será mostrada diferentes porciones de las imágenes

Landing usando Display Grid y Position Sticky

Landing ficticia tipo Single Page usando Display grid para contenedores y posicionamiento Sticky

Animación de clip-path con Intersection Observer

Animación de la propiedad CSS clip-path al hacer scroll usando la API de JavaScript Intersection Observer y cambio de color de body obteniendo el color principal de cada imagen

Animación de Landing con Intersection Observer

Animación con CSS aplicando la API de JavaScript Intersection Observer para iniciar la animación cuando el elemento a Animar entra dentro del Viewport

Slides usando Blend Mode y DocumentFragment

Animación de Slides con transición entre imágenes y propiedad Blend Mode de CSS para manipular la apariencia de las imágenes

Banner con animaciones SVG

Banner construido con SVG. Animaciones de Máscara para textos, circles, cursor

Superposción de imágenes para comparar con Javascript

Maquetación de componente que permite comparar dos imágenes mediante superposición de una segunda imágen encima de la anterior

Modal con imagen destacada animada al abrir el modal

Animación de modal al levantar el modal, moviendo de posición inicial hasta posición final en modal

Angular consumiendo de AEMET

Aplicación con Angular 1 para mostrar datos meteorológicos proporcionados por la AEMET en formato XML. Parseo con PHP los datos XML para transformarlos a JSON

AngularJS Wordpress Theme

Construcción de Theme Wordpress con AngularJS 1, usando plugins de Wordpress Wp Rest Api para generar JSON de las entradas y Advanced Custom Fields (ACF) para añadir nuevos campos

Badges con SASS y SVG

Mixing Sass para crear Badges que puedan ser modificados y adaptados mediante parámetros

Dos campos Select relacionados en AngularJS

Construir Selects en el que uno de los Selects carga su contenido en función del option seleccionado en el Select anterior

Wp Rest Api - habilitar filtro de Custom Fields

Habilitar nuevos campos a la Rest API creada con el plugin WP Rest API cuyos campos son creados en Wordpress con plugin Advanded Custom Fields (ACF)

Obtener diferentes url de imagen destacada de Wordpress

Creación de función Php en Wordpress para obtener diferentes Urls de imagen destacada pudiendo especificar mediante array una lista de imágnes a devolver

Angular consumiendo de WordPress Rest Api – Endpoints

Publicación de sobre Angular 1 consumiendo de WordPress Rest Api – Endpoints

Angular consumiendo de WordPress Rest Api – Custom post types

Publicación de sobre Angular 1 consumiendo de WordPress Rest Api – Custom post types

Angular consumiendo de WordPress Rest Api – Trabajando con usuarios

Publicación de sobre Angular 1 consumiendo de WordPress Rest Api – Trabajando con usuarios

Angular consumiendo de WordPress Rest Api – Crud

Publicación de sobre Angular 1 consumiendo de WordPress Rest Api – Crud

Angular consumiendo de Wordpress Rest Api - Autenticación

Publicación de sobre Angular 1 consumiendo de WordPress Rest Api - Autenticación

AngularJS y Google Keep

AngularJS 1 y Google Keep consumiendo de Api construida con Python Django

AngularJS consumiendo de servicio Django

Aplicación Frontend construida con AngularJS de libros y autores consumiendo de servicio REST construido con Django

Rest Android con Retrofit, Slim php y RedBean

Aplicación Android con librería Retrofit que consume una Rest API construida con PHP mediante librerías SlimPHP y ReadBeanPHP

Codeigniter + Cloud9. Primeros pasos

Ejemplo de como usar Framework PHP Codeigniter y base de datos MySql usando IDE web Cloud9

Visualizar SQLite de app Android con Eclipse

Visualizar base de datos SQLite en aplicación Android desde IDE Eclipse

Visualizar SQLite de app Android con SQLite manager

Visualizar base de datos SQLite en aplicación Android con plugin para Firefox llamado SQLite manager

GridView con librería Picasso ViewHolder

Construcción de GridView de Android usando la viewHolder sin usar librerias como Picasso

GridView con librería Picasso II

Segunda publicación sobre la construcción de GridView de Android usando la librería Picasso

GridView con librería Picasso I

Primera publicación sobre la construcción de GridView de Android usando la librería Picasso

Tabs en Android

Sistemas de Tabs en Android usando TabHost, TabWidget LinearLayout

Codota - Find great code examples

Herramienta para poder tener tus Snipets de código al alcance del navegador

Menú contextual en Android

Creación de menú contextual para App Android dentro de un Activity

Crud en Android con ORM Green Dao

Realizar, en App Android, operaciones CRUD (create, read, update, delete) para Android usando ORM Green Dao

Parsear XML usando Java Stax Event

Parsear documento con información meteorológica en formato XML con Java usando Stax Event

Parsear XML usando Java Stax Cursor

Parsear documento con información meteorológica en formato XML con Java usando Stax Cursor

Firebase + Google

Google entra a 'formar parte de Firebase' en 2014. Principales características de la versión gratuita de Firebase

ListView en Android con ArrayAdapter

Pintado de listas con ListView en Android mediante ArrayAdapter, cada ítem contiene un ImageView y TextView dentro de LinearLayout

Spinner enlazados en Android

Construcción de Spinners en Android cargados desde datos en formato XML y segundo Spinner en función de los seleccionado en el primero

Intents en Android para llamada, mapas y mail

Uso de Intents en Android para comunicar información con ejemplos de lanzado de llamadas, mapas y mail

Crear calculadora en Android

Aplicación Android en la que se construye una calculadora de suma, resta, multiplicación y resta

Uso de startActivityForResult

Uso de startActivityForResult para enviar información entre Activities en Android

Construir custom dial en Android

Proyecto Android para realizar un custom dial

Ejemplo de programa Java para tienda

Programa construido en Java que simula una tienda. Permite mostrar los productos, cantidad, precio, disponibilidad. Cantidad de productos añadidos, precio unitario y total

Codio y Wordpress

Instalar CMS Wordpress mediante IDE web Cloud9. Configuración de base de datos y otros requerimientos

Demo AngularJS shop - 04 Directivas

Primera parte de aplicación Angular 1 para construir listado de productos. Aplicando Directivas

Demo AngularJS shop – 03 Aplicando estilos

Primera parte de aplicación Angular 1 para construir listado de productos. Aplicando estilos css

Demo AngularJS shop - 02 Configurando menú principal

Primera parte de aplicación Angular 1 para construir listado de productos. Configuración de menú principal

Demo AngularJS shop - 01 Generando proyecto con Yeoman

Primera parte de aplicación Angular 1 para construir listado de productos. Generando proyecto con Yeoman

Maquetación página con Haml y Sass

Maquetación Html usando Haml y Sass como preprocesadores que minimizan tiempos

Manejar eventos en Java

Registrar y manejar eventos en Java en aplicaciín de escritorio mediante listener

Ecuación de segundo grado en Java

Construcción de Aplicación en Java para realizar operación de ecuación de segundo grado

Ejemplo de colecciones en Java

Uso de colecciones en Java. Se permite mostrar todas las colecciones, añadir, editar y eliminar. Ordenación de colecciones por alguno de sus atributos

Formulario web centrado

Formulario html centrado en la página

Programa java venta de móviles

Programa java que simula la gestión de ventas de teléfonos, permitiendo mostrar atributos como marca, precio y pago

Programa Java gestionar alumnos

Programa Java para realizar operaciones CRUD. Crear, mostrar, actualizar y borrar elementos de lista de alumnos

Animación con css3 - Avión en movimiento

Efecto de movimiento con CSS para generar animación usando "transform translate"

Menú apple con css

Recreación usando Html y Css del menú usado por Apple

Bonito menú horizontal con Css3

Menú horizontal centrado con css3 y animación en hover

Programa Java gestionar ascensor

Programa Java que simula el comportamiento de un ascensor para controlar las paradas, movimientos subida, bajada y número de personas

Foundation Zurb 5 ya está disponible

Se publica la quinta versión de Foundation Zurb. Resumen de las novedades de la nueva versión

Animaciones CSS3 - transform: translate (x, y) VS left(x) top(y)

Animación css3 usando transform translate y comparado a posicionamiento con left y top

Instalación de GIT en Windows

Paso a paso para la instalación de control de versiones GIT en equipo Windows

Crear Custom Post en Wordpress

Función Php para crear y definir un Custom Post Type personalizado en Wordress