Cerrar menu
Tutoriales En Linea
  • Tutoriales
    • Aprendizaje
    • Video Tutorial
    • Manuales
    • Hagalo usted mismo
    • Explorar todo
  • Adobe
    • After Effects
    • Dreamweaver
    • Premiere Pro CC
    • Photoshop
    • Photoshop Mix
    • Lightroom
    • Illustrator
    • Adobe Muse
    • Creative Cloud
  • Android
    • Developer Android
    • Aplicaciones
    • Android Studio
    • Android Wear
    • Desarrolladores
    • SDK Platform-Tools
    • ADB...depuración Bridge
    • Fastboot
    • Root
    • Recovery
  • Apple
    • iPhone y iPad
    • iPhone
    • iPad
    • Mac OS
    • iCloud
    • iTunes
  • Cursos
    • Actívate
    • Autoempleo
    • Idiomas
    • Curso De HTML
    • Curso de C++
    • Javascript
    • jQuery
    • Matematicas
    • Programacion
    • Python
    • Udacity
    • Diseño Web adaptativo
  • Ciberseguridad
    • Malware
    • Ransomware
    • Virus
    • Troyano
    • Dorkbot
    • Filecoders
    • keylogger
    • Spyware
    • Jackware
    • DDoS
    • HackerOne
    • Interpol
  • Criptomonedas
    • Blockchain
    • Mineria de Criptomonedas
    • Bitcoin (BTC)
    • Bitcoin Cash (BCH)
    • DASH (Dash)
    • Dogecoin (Doge)
    • Ethereum (ETH)
    • Litecoin (LTC)
    • Monero (XMR)
    • Ripple (XRP)
    • Zcash (ZEC)
    • Forex
    • Trading
  • Desarrollo Web
    • Sistema de gestion de contenidos
    • AMP
    • Datalife Engine
    • Blogger
    • WordPress
    • Joomla
    • Bootstrap
    • Plantillas
    • @font-face
    • Schema
    • Website
    • Desarrolladores
    • Lenguaje Web
  • Diseño Web
    • Web Responsive
    • Lenguaje Web
    • Datos estructurados
    • HTML
    • CSS3
    • JavaScript
    • Ajax
    • jQuery
    • PHP
  • Entretenimiento
  • Encuestas
    • GlobalTestMarket
    • Centro de opinion
    • Ipsos i-Say
    • Triaba
    • opinea
    • Toluna
    • YouGov
    • ClixSense
    • ySense
    • Cint
    • Beruby
  • Electricidad
  • Electronica
  • Ganar dinero comprando
    • CashbackDeals
    • Cashback
    • Por ir de compras
    • Aklamio
    • Intercambio de tráfico
    • Justificante de pagos
    • Webs estafas
  • Google
    • Google Pay
    • Adsense
    • Gmail
    • Google Apps
    • Google Chrome
    • Google Cloud Platform
    • Google Consumer Surveys
    • Google Desarrolladores
    • Google Fit
    • Google Maps
    • Google Photos
    • Google Play
    • Google Translation
    • DoubleClick
    • YouTube
    • Chromebooks
  • Marketing
    • SEM
    • SEO
    • Posicionamiento
    • Contenido
    • Publisuites
    • Space Content
    • Coobis
    • Marketing
  • Computadora u ordenador
    • Sistemas operativos
      • Windows
      • Mac OS
      • Android
      • Linux
      • Ubuntu
      • Kali Linux
      • Wifislax
    • hardware
    • Software
    • BIOS
    • Unidad de disco duro
    • Programacion
    • Dispositivos
    • Internet
  • Ofimática
    • Microsoft
    • Suite Ofimatica
    • Access
    • Word
    • Excel
    • Powerpoint
    • Outlook
    • Microsoft Publisher
  • PTC
    • No pierdas tiempo con estas web
  • Redes Sociales
    • Delicious
    • Facebook
    • Instagram
    • linkedin
    • Snapchat
    • TikTok
    • Twitter
    • Pinterest
    • Spotify
    • Vkontakte - VK
    • WhatsApp
  • Smartphone
    • Telefonos
    • Telefonia movil y telecomunicaciones
    • Desbloquear
    • Códigos NCK
    • Liberar
    • Tarjeta SIM
    • Tablet
  • Sitio Web
    • Dominios
    • Hosting
    • Servidores
    • Demo DLE
    • Documentación sobre Datalife Engine
    • Modulos DLE
    • Hack
    • Optimizacion
    • Google Adsense
    • Plantillas
  • Tips
    • Cabello
    • Consejos
    • Cremas
    • Cosmético
    • Cuerpo
    • Dieta
    • Exfoliantes
    • Entrenamiento
    • Ejercicio
    • Estilo
    • Fitness
    • Habitos
    • Hidratante
    • Look
    • Maquillaje
    • Moda
    • Piel Radiante
    • Recetas
    • Ropa
    • Rutina
    • Salud
    • Tratamientos
  • Trabajos
    • Atencion al cliente
    • Asistente virtual
    • Transcripcíon
    • Transcripcíones medica
    • Entrada de datos
    • De edicion y correccion
    • Mystery Shopping
    • Micro trabajos
    • Contabilidad
    • Tutoria y aprendizaje
    • Mas ingresos extras
    • Git
    • GitHub
    • Criptografia
    • Deep Web
    • Hacker
    • FTP
    • Indexar
    • Newsletter
    • Redes y VPN
    • Herramientas online
  • Windows
    • Skype
    • Windows
    • Windows 11
    • Windows 10
    • Windows 8
    • Windows 7
    • Puerta trasera de Windows
    • Microsoft Edge
Facebook X (Twitter) Instagram
  • Sobre nosotros
  • Últimos artículos
  • Herramientas SEO
  • Ver mas temas
  • Más sitios que te gustarán
Facebook X (Twitter) Instagram Pinterest Youtube
  • Secciones
    1. Android
    2. Adobe
    3. Bricolaje
    4. Bachillerato
    5. Cursos
    6. Criptomonedas
    7. Criptografia
    1. Diseño Web
    2. Encuestas
    3. Empleo
    4. Electricidad
    5. Electronica
    6. Forex
    7. Fisica
    1. Google
    2. Hardware
    3. Herramientas Ofimaticas
    4. Herramientas
    5. Internet
    6. Idiomas
    7. IPTV
    1. Programacion
    2. Libros
    3. Microsoft
    4. Manuales
    5. Matematica
    6. Newsletter
    7. Optimizacion
    1. Redes Sociales
    2. Software
    3. Seguridad
    4. Telefonia
    5. WebSite
    6. Ver todas las categorias
    7. Post promocionado
  • Smartphone

    Comprendre les Différences entre les Chargeurs USB et les Chargeurs USB-C : Un Guide Complet

    Huawei Smartphones: Las Mejores Ofertas del Black Friday para Aprovechar

    Gadgets imprescindibles para tu configuración de oficina en casa

    ¡Descubre las tendencias más emocionantes en el mundo de los videojuegos!

    Tendencias en sistemas operativos en smartphone

  • Tecnología
    1. Móviles
    2. Ordenadores
    3. Software
    4. Hardware
    5. Seguridad
    6. Ver todo

    Comprendre les Différences entre les Chargeurs USB et les Chargeurs USB-C : Un Guide Complet

    Huawei Smartphones: Las Mejores Ofertas del Black Friday para Aprovechar

    Gadgets imprescindibles para tu configuración de oficina en casa

    ¡Descubre las tendencias más emocionantes en el mundo de los videojuegos!

    Cómo limpiar la unidad C de archivos innecesarios

    Descubre el misterioso mundo del hash de archivos: ¡todo lo que necesitas saber!

    Los componentes fundamentales que todo PC debería tener

    Que es la tecla TAB

    Cifrado | Seguridad Local

    Maximiza tu productividad: Descubre el sistema interactivo que revolucionará la gestión de proyectos en tu empresa

    Cómo limpiar la unidad C de archivos innecesarios

    Como jugar online y resolver un sudoku

    Que es la tecla TAB

    Cómo deshabilitar la desfragmentación de SSD y HDD en Windows 10 y 11

    Benefits Of Vertical Dual Monitors For Coding And Programming

    AMD ha identificado la causa de la quema de los procesadores Ryzen 7000 y ha lanzado un nuevo AGESA para corregir el problema

    Cifrado | Seguridad Local

    Descubre el misterioso mundo del hash de archivos: ¡todo lo que necesitas saber!

    Virus en el sistema DataLife Engine (DLE) y cómo tratarlos

    La ciberseguridad: Vital Para Las Apuestas Online en España

    ¡Descubre las tendencias más emocionantes en el mundo de los videojuegos!

    ¿Aburrido de tu viejo televisor? Descubre las últimas tendencias en televisores

    Generador de Video IA: La Revolución en la Creación Audiovisual

    Los últimos celulares para que estés a la última

  • Estilo de vida
    1. Entrenamiento
    2. Maquillaje
    3. Dieta
    4. Moda
    5. Trucos y tips
    6. Ver todo

    Desarrolla un cuerpo fuerte y saludable

    ¿Qué es la forma física?

    Mejora los resultados de tu entrenamiento de estabilidad y fuerza

    Consejos para maximizar las caminatas diarias

    ¿Por qué es importante preparar la piel antes de maquillarla?

    Consejos para aplicar pestañas postizas

    Consejos para una piel perfecta este invierno

    La nutrición y un cabello saludable

    Cosas que le pasan a tu cuerpo cuando comes salmón todos los días

    Batidos de proteínas pueden ayudar a mejorar sus hábitos alimenticios

    Batidos de proteinas - Una guía para principiantes

    Snacks nutritivos para cada antojo

    Inspiración de traje de otoño

    La dura verdad sobre las modelos de talla grande

    Razones por las que las marcas de moda de lujo son tan caras

    Cuales son las mejores frutas para adelgazar

    Como enseñar a leer y a escribir

    Como generar cuentas Disneyplus

    Calcular porcentajes con la Calculadora de Windows 10

    Bricolaje para la decoración del hogar

    Top 10 de posturas de yoga

    ¿Por qué es importante preparar la piel antes de maquillarla?

    Inspiración de traje de otoño

    Consejos de belleza para lucir fresca en el verano

  • Marketing

    ¿Sirven de algo los diseñadores Web?… ¿y los redactores de contenido?

    ¿Qué es un Link Dofollow?

    ¿Qué es Nofollow?

    ¿Qué es el remarketing?

    ¿Qué es el posicionamiento web (SEO) y lo necesito para mi sitio web?

  • Juegos

    Para qué se pueden usar las Gafas VR PS4

    La nueva generación de realidad virtual de PlayStation®VR2 y PlayStation®5

    Colaboración entre Sony INZONE y EXCEL Esports

    Sony prohíbe cuatro juegos de terceros en Xbox

    Prepárate para el futuro: Project Trinity llega a finales de 2024

  • Herramientas
Búsqueda extendida

Escriba arriba y presione Enter para buscar.

¡Bienvenido de nuevo!

Inicie sesión o Regístrate ahora

VK

o con Email

¿Has olvidado tu contraseña?

Tutorial » Built-in Soporte del navegador para Imágenes Responsive

Built-in Soporte del navegador para Imágenes Responsive


1 Septiembre 19, 2018
Compartir

Compartir
Twitter Pinterest LinkedIn Tumblr WhatsApp Email

Presentación del Elemento  <picture>

El elemento <picture> ofrece un enfoque declarativo hacia la carga recurso de imagen. Los desarrolladores web ya no necesitarán CSS o jаvascript  para manejar las imágenes en diseños sensibles. Y los s se benefician de forma nativa optimizando recurso de imagen de carga, especialmente importante para los s de conexiones de móviles de Internet más lentas.


Junto a la nueva srcset y tamaños (sizes) atributos recientemente añadidos a <img>, el elemento <picture> da a los desarrolladores web más flexibilidad en la especificación de los recursos de imagen. Escribe el marcador en HTML y dejar que el navegador haga el trabajo de detectar cualquiera de los siguientes escenarios, tiempos de carga, solos o en combinación, para apoyar diseños sensibles y mejorar:

Selección basada dirección-Art

¿Es esto un dispositivo móvil que tuvo lugar en una orientación vertical o un amplio monitor de escritorio? Cargue una imagen que está optimizado para las dimensiones de la pantalla dadas.

Selección basada Dispositivo-pixel-ratio
¿El dispositivo tiene una pantalla de alta DPI? Cargue una imagen de mayor resolución.

Selección basada en Viewport
¿La imagen pretende siempre llenar una proporción fija de la ventana? Cargar imágenes en relación con el área de visualización.

Selección basada formato de imagen
¿Pueden los tipos de apoyo navegador adicionales de archivo de imagen que ofrecen mejoras de rendimiento, tales como archivos de menor tamaño? Carga un archivo de imagen alternativa como WebP.

El uso para la dirección de arte

El uso más común del elemento <picture> será de "dirección de arte" en diseños sensibles. En lugar de tener una imagen que se escala hacia arriba o abajo basándose en el ancho de visualización, las imágenes múltiples pueden ser diseñados para llenar más apropiadamente la ventana del navegador.

El resultado de la utilización de una sola imagen que se escala hacia arriba o hacia abajo dependiendo de la anchura de la ventana gráfica.

Utilice varias imágenes diferentes para llenar más apropiadamente la ventana del navegador.

Mejorar el rendimiento de carga de recursos

Al usar <picture> o <img> con el srcset y tamaños de atributos, el navegador sólo se descargará la imagen que explícitamente para el escenario de juego. Esta aplicación nativa es compatible con programas de análisis de HTML y puede tomar ventaja de la imagen de caché del navegador y habilidades de precarga.

Vea una demostración en vivo

Es un hecho que Internet fue creado para albergar imágenes de gatos. Usando<picture> podemos emular la sorprendente capacidad de los gatos para ajustar al espacio que se les da, no importa cuán grande o pequeño.

Abra la demo en una nueva pestaña con Cromo 38 o superior. Cambiar el tamaño de la ventana para ver el gato en acción.



Como punto de partida, esta demo sólo muestra fuera el mínimo de características que <picture> tiene para ofrecer. Vamos a profundizar en la sintaxis ahora.

El sintaxis <picture> 

El siguiente fragmento de código HTML y CSS es todo lo que se utiliza para implementar la demo:

<style>
  img {display: block; margin: 0 auto;}
</style>

<picture>
  <source 
    media="(min-width: 650px)"
    srcset="images/kitten-stretching.webp">
  <source 
    media="(min-width: 465px)"
    srcset="images/kitten-sitting.webp">
  <img 
    src="images/kitten-curled.webp" 
    alt="a cute kitten">
</picture>

Nota cómo no hay jаvascript involucrados y las bibliotecas no-terceros. El CSS <style> bloque se utiliza sólo para estilizar el elemento de la imagen y no contiene preguntas de los medios. La implementación nativa del <picture> elemento significa que usted puede declarar sus imágenes sensibles utilizando sólo HTML.

Utilizar con <fuente> elementos

El <picture> elemento no tiene atributos únicos de su propia. La magia sucede cuando <picture> se utiliza como contenedor de <origen>.

El <source> elemento, que se utiliza para los medios de carga, tales como video y audio, se ha actualizado para una imagen de carga y se han añadido estos nuevos atributos:

srcset (requerido)

Acepta una sola ruta de archivo de imagen (por ejemplo srcset ="kitten.webp").


O una lista delimitada por comas de las rutas de archivos de imagen con descriptores densidad de píxeles (por ejemplo srcset = "kitten.webp, [email protected] 2x"), donde se asume un descriptor 1x cuando se deja fuera. Consulte Combinar con descriptores densidad de píxeles para este en uso.

los medios de comunicación (opcional)

Acepta cualquier consulta de medios válida que normalmente se encuentra en una CSSmedia selector (por ejemplo = medios de 

comunicación "(max-width: 30em)"). Consulte la anterior <picture> sintaxis ejemplo de esto está en uso.

Tamaños (opcional)

Acepta un solo descriptor de ancho (por ejemplo, tamaños = "100vw") o una sola consulta de medios con descriptor de ancho (por ejemplo, tamaños = "(max-width: 30em) 100vw"). O una lista delimitada por comas de las consultas de los medios de comunicación con un descriptor de ancho (por ejemplo, tamaños = "(max-width: 30em) 100vw, (max-width: 50em) 50vw, Calc (33vw -100px)") en el que el último elemento la lista se utiliza como valor predeterminado.

Consulte Combinar con descriptores ancho de este en uso.

Tipo (opcional)

Acepta un tipo compatible MIME (por ejemplo, type = "image / webp" otype = "image / vnd.ms-foto"). Consulte Carga de formatos de archivo de imagen alternativos para este en uso.


El navegador utilizará los consejos para pasar como valores de atributo la carga del recurso de imagen más apropiada. La orden de la lista de etiquetas importa!, El navegador usará la primera <source> elemento con un toque a juego e ignorar cualquier siguientes <source> etiquetas.

Añadir una etiqueta <img> elemento final

El <img> elemento también se ha actualizado para ser utilizado dentro de <picture> como el de reserva en caso de un navegador no soporta el elemento de imagen o si no hay etiquetas de elemento de origen se corresponden. Usando <img> dentro de <picture> es un requisito -si se le olvida, no hay imágenes se mostrarán.


Utilice <img> para declarar la imagen predeterminada que se utiliza dentro de un <picture> bloque. Lugar <img> como el último hijo de <picture> desde el navegador ignorará cualquier <fuente> declaraciones que se producen después de un <img> se encuentra la etiqueta. La etiqueta de la imagen es también donde se debe adjuntar un texto alternativo mediante el elemento de imagen alt atributo.

Combine con descriptores densidad de píxeles

Añadir soporte para pantallas de alta resolución utilizando descriptores densidad de píxeles como 1x, 1.5x, 2x, 3x y. El nuevo atributo srcset aplica tanto <img> y <fuente> elementos.

El siguiente ejemplo es compatible 1x, 1.5x, y 2x pantallas de resolución:

<picture>
  <source 
    media="(min-width: 650px)" 
    srcset="images/kitten-stretching.webp,
            images/[email protected] 1.5x,  
            images/[email protected] 2x">
  <source 
    media="(min-width: 465px)" 
    srcset="images/kitten-sitting.webp,
            images/[email protected] 1.5x
            images/[email protected] 2x">
  <img 
    src="images/kitten-curled.webp" 
    srcset="images/[email protected] 1.5x,
            images/[email protected] 2x"
    alt="a cute kitten">
</picture>

Combine con descriptores de ancho

Fundamentos Web cubre los nuevos atribuyen tamaños para la <img> elemento en profundidad:

"Cuando no se conoce el tamaño final de la imagen, puede ser difícil especificar un descriptor de densidad para las fuentes de imagen. Esto es especialmente cierto para las imágenes que abarcan un ancho proporcional del navegador y son fluidos, dependiendo del tamaño de el navegador.
En lugar de suministrar tamaños de imagen fija y densidades, el tamaño de cada imagen suministrada se puede especificar mediante la adición de un descriptor de anchura a lo largo con el tamaño del elemento de imagen, permitiendo que el navegador para calcular automáticamente la densidad de píxel efectivo y elegir la mejor imagen para descargar. "

He aquí un ejemplo del uso de los tamaños de atributos para establecer la proporción de una imagen para llenar siempre el 80% de la ventana gráfica. Se combina con el srcset atributo para abastecer cuatro versiones de la misma foto del faro en anchos de 160px, 320px, 640px y 1280px de ancho:

<img src="lighthouse-160.webp" alt="lighthouse"
     sizes="80vw"
     srcset="lighthouse-160.webp 160w, 
             lighthouse-320.webp 320w,        
             lighthouse-640.webp 640w,
             lighthouse-1280.webp 1280w">

El navegador utilizará estos consejos para elegir el recurso de imagen más adecuada para servir en base a la resolución de ancho de la ventana gráfica y la pantalla de hardware:

Por ejemplo, la ventana gráfica de la izquierda es de aprox. 800px de ancho.El navegador cargará faro-640.webp menos que la proporción de píxeles dispositivo cuyo caso, faro-1280.webp se cargará lugar en 2x.
 

Con la adición de <picture>, los tamaños de atributos se pueden aplicar a ambos <img> y <fuente> elementos:

<picture>
  <source media="(min-width: 800px)"
          sizes="80vw"
          srcset="lighthouse-landscape-640.webp 640w,
                  lighthouse-landscape-1280.webp 1280w,
                  lighthouse-landscape-2560.webp 2560w">
  <img src="lighthouse-160.webp" alt="lighthouse"
       sizes="80vw"
       srcset="lighthouse-160.webp 160w,
               lighthouse-320.webp 320w,
               lighthouse-640.webp 640w,
               lighthouse-1280.webp 1280w">
</picture>

Basándose en el ejemplo anterior, cuando la ventana está a 800px y por encima, el navegador le servirá una versión paisaje de la versión de faro en su lugar:

La ventana de la izquierda está por encima de 800px de ancho por lo que se mostrará una versión paisaje de la foto del faro.

Cargar formatos de archivo de imagen alternativos

El tipo de atributo de <origen> se puede utilizar para cargar formatos de archivo de imagen alternativos que podrían no ser compatibles con todos los navegadores. Por ejemplo, puede servir una imagen en formato WebP para navegadores que lo soportan, mientras que cae de nuevo a un JPEG en otros navegadores:

<picture>
  <source type="image/webp" srcset="images/butterfly.webp">
  <img src="images/butterfly.webp" alt="a butterfly">
</picture>

Ejemplos de código adicionales

Consulte Imágenes Responsive: Casos de Uso y documentados fragmentos de código para empezar en el blog Dev.Opera de una lista exhaustiva de ejemplos combinando <picture> y <img> con los srcset, medios de comunicación, tamaños y tipo de atributos.

Pruébelo hoy

Ver la demo del elemento <picture>

El <picture> elemento es actualmente disponible de Chrome 38. Pruébalo con emulación de pantalla en los DevTools Chrome.

Si tiene comentarios acerca de esta nueva característica, envíanos una línea en el error de seguimiento de Chrome.

Si usted está listo para empezar a aplicar <picture> hoy, sino también querer añadir soporte para imágenes de respuesta en los navegadores adicionales, consulte esta muestra del elemento <picture>  para el uso de <picture> con un polyfill.

Asegúrese también de comprobar hacia fuera la guía para imágenes en Fundamentos Web de ejemplos de mejores prácticas de implementación de imágenes en la web. Fuente en ingles

Síguenos en
Google News Flipboard
  • 100
  • 1
  • 2
  • 3
  • 4
  • 5
CSS3: El manual de desaparecidos
Ejemplo Basio De Audio Para Web, sintaxis de Audio JavaScript
omegayalfa
omegayalfa
  • Website
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
  • Instagram

Sobre mi: ¡Aprende los trucos de tutoriales online y cursos gratis con Tutoriales En Linea! Con manuales paso a paso para desarrollar tu conocimiento, Tutoriales En Linea te ayudará a mejorar tus habilidades y lograr tus metas.
Un tutorial está diseñado con pasos secuenciales que aumentan gradualmente el entendimiento. Por lo tanto, es importante que se sigan los pasos en su orden lógico para que el comprenda todos los elementos. Para optimizar los resultados, se recomienda seguir de forma profesional las instrucciones del tutorial.

Artículos Relacionados


Arranque Dual Android/GNU Linux

Arranque Dual Android/GNU Linux

CSS3: El manual de desaparecidos

CSS3: El manual de desaparecidos

HackerOne, conecta hackers con empresas

HackerOne, conecta hackers con empresas


Comentarios

      1. J.A.M.A
        omegayalfa Enero 27, 2016 01:01 33

        Es Decir, En Pocas palabras imagen autoajustable en CSS3,HTML5
        Dependiendo del dispositivo con que se visualise...



Información
s que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!

Destacados

Lista IPTV con canales para colombia

Mayo 23 43 791

Como instalar SS IPTV en una Smart Tv Samsung

Ene 22 10 380

Como podemos conseguir proxies

Jun 21 11 616

Historia de los sistemas operativos

Mayo 16 31 052

Lo mas leidos

Herramientas SEO para posicionamiento de nuestra web 2024

Por 17-06-24

Herramienta online de generador de datos estructurados

Por Tutoriales En Linea 17-06-24

Las 7 mejores páginas para descargar películas en .torrent en español

Por 26-09-24

Etiquetas

src




Sobre nosotros

Tutoriales En Linea

¡Bienvenidos a Tutoriales En Línea, el sitio web perfecto para encontrar todas las herramientas necesarias para mejorar tus habilidades de forma gratuita! En Tutoriales En Linea se encuentran tutoriales, cursos online y aprendizaje de calidad, muy útiles para desarrollar tus capacidades... Leer mas...

Tiene una pregunta? ar...

Enlaces

  • Sobre nosotros
  • Ultimos tutoriales
  • Publicar tutorial
  • Ver mas temas
  • Ultimos comentarios
  • ¿Preguntas Frecuentes?
  • Derechos de autor
  • Politica de cookies
  • Nuestro equipo
  • Normas

Herramientas online

  • Buscador de recetas
  • Prueba de diseño web
  • Codificar en binarios, hexadecimales...
  • Cual es mi IP
  • Test de velocidad
  • Editor HTML
  • Test de escritura
  • Test de nutricion
  • Descargar Videos
  • Generador de datos estructurados

Recursos

  • Analisis de tus problemas de SEO
  • Herramientas SEO
  • Generar palabras claves
  • Referencia de CSS3
  • Convertir HTML a XML
  • Acortador de URL
  • Selector de colores
  • Contador de palabras
  • Comprimir imagenes
  • Conversor a URI de datos
  • Suscribirse
Facebook Twitter Instagram Pinterest Linkedin Youtube
  • Anunciarse
  • Socios externos
  • Política de privacidad
  • Términos y Condiciones
  • Sobre nosotros
  • ar
© Tutoriales En Linea. Reservados todos los derechos, queda prohibida la reproducción parcial o total sin previa autorización.