Avenida de Castilla,1 - Edificio Best Point - Oficina 21B 28830 San Fernando de Henares (Madrid) tel./fax: +34 91 675 33 06 [email protected] - www.autentia.com Somos su empresa de Soporte a Desarrollo Informático. Ese apoyo que siempre quiso tener... 1. Desarrollo de componentes y proyectos a medida Tecnología Desarrollo Sistemas Gran Empresa Producción autentia Certificación o Pruebas Verificación previa RFP Concurso Consultora 1 Consultora 2 Consultora 3 Equipo propio desarrollo Piloto 3a 3b 1. Definición de frameworks corporativos. 2. Transferencia de conocimiento de nuevas arquitecturas. 3. Soporte al arranque de proyectos. 4. Auditoría preventiva periódica de calidad. 5. Revisión previa a la certificación de proyectos. 6. Extensión de capacidad de equipos de calidad. 7. Identificación de problemas en producción. 3. Arranque de proyectos basados en nuevas tecnologías ¿Qué ofrece Autentia Real Business Solutions S.L? Para más información visítenos en: www.autentia.com Compartimos nuestro conociemiento en: www.adictosaltrabajo.com Gestor portales (Liferay) Gestor de contenidos (Alfresco) Aplicaciones híbridas Tareas programadas (Quartz) Gestor documental (Alfresco) Inversión de control (Spring) BPM (jBPM o Bonita) Generación de informes (JasperReport) ESB (Open ESB) Control de autenticación y acceso (Spring Security) UDDI Web Services Rest Services Social SSO SSO (Cas) Spring MVC, JSF-PrimeFaces /RichFaces, HTML5, CSS3, JavaScript-jQuery JPA-Hibernate, MyBatis Motor de búsqueda empresarial (Solr) ETL (Talend) Dirección de Proyectos Informáticos. Metodologías ágiles Patrones de diseño TDD 2. Auditoría de código y recomendaciones de mejora 4. Cursos de formación (impartidos por desarrolladores en activo)
Transcript
Avenida de Castilla,1 - Edificio Best Point - Oficina 21B28830 San Fernando de Henares (Madrid)
Somos su empresa de Soporte a Desarrollo Informático.Ese apoyo que siempre quiso tener...
1. Desarrollo de componentes y proyectos a medida
TecnologíaDesarrolloSistemas
Gran Empresa
Producción
autentia
Certificacióno Pruebas
Verificación previa
RFP Concurso
Consultora 1
Consultora 2
Consultora 3
Equipo propio desarrolloPiloto
3a
3b
1. Definición de frameworks corporativos.2. Transferencia de conocimiento de nuevas arquitecturas.3. Soporte al arranque de proyectos.4. Auditoría preventiva periódica de calidad.5. Revisión previa a la certificación de proyectos.6. Extensión de capacidad de equipos de calidad.7. Identificación de problemas en producción.
3. Arranque de proyectos basados en nuevas tecnologías
¿Qué ofrece Autentia Real Business Solutions S.L?
Para más información visítenos en: www.autentia.com
Inicio Quiénes somos Tutoriales Formación Comparador de salarios Nuestro libro Charlas Más
Deseo registrarmeHe olvidado mis datos de acceso
Entrar
Estás en: Inicio Tutoriales CSS3 Media Queries o cómo hacer un diseño adaptativo según el terminal
Catálogo de serviciosAutentia
Últimas Noticias
Crónica del evento deLiferay en Madrid
El primer capítulo deTerrakas ya está online
Ya ha terminado la CAS2011, ahora toca pensar
cómo me gustaría que fuerala CAS 2012
Restrospectiva, Carrerade las empresas 2011
¿Qué ganan los demáscon que tu vayas a una
conferencia?
Histórico de NOTICIAS
Últimos Tutoriales
CSS Browser Selector ocómo olvidarnos de los
hacks en CSS
Generar hojas de cálculocon fórmulas mediante
Apache POI
DESARROLLADO POR:
Rubén Aguilera Díaz-Heredero
Consultor tecnológico de desarrollo de proyectos informáticos.
Ingeniero en Informática, especialidad en Ingeniería delSoftware
Puedes encontrarme en Autentia: Ofrecemos servicios desoporte a desarrollo, factoría y formación
Somos expertos en Java/J2EE
Ver tutoriales de Rubén Aguilera Díaz-Heredero
Regístrate para votar| Share
CSS3 Media Queries o cómo hacer un diseñoadaptativo según el terminal
0. Índice de contenidos.
1. Entorno2. Introducción y solución al problema3. Vamos a probarlo
1. Entorno
Este tutorial está escrito usando el siguiente entorno:
Hardware: Portátil Mac Book Pro 17" (2,6 Ghz Intel Core i7, 8 GB DDR3)Sistema Operativo: Mac OS X Snow Leopard 10.6.4Smultron (Bloc de notas)
2. Introducción y solución al problema
Como desarrolladores si no teniamos poco con la maldita guerra para que tu página web se vea igual en todos losnavegadores, ahora también nos tenemos que preocupar de que cada uno de los dispositivos móviles del mercado. Ladiferencia fundamental y que más nos afecta de estos dispositivos es el tamaño de su pantalla y que nuestro diseño seajuste a él para que se pueda visualizar de una forma agradable al usuario para no estropear su experiencia denavegación y que quiera acceder a nuestro sitio web desde cualquiera de los dispositivos que maneje: ordenador,portátil, móvil, ipad, …
Hasta el momento las CSS nos ofrecían la posibilidad de aplicar una hoja de estilo distinta en función del agente deusuario (terminal) que se conectará a nuestro sitio web, indicándolo en el atributo 'media' de la etiqueta 'link'.
Es fácil deducir que para los agentes de usuario de tipo screen y print se va a aplicar la CSS screen_print.css.
Los distintos tipos de media que se soportan son:
all: versión para todos los dispositivos.braille: versión para dispositivos lectores de braille para invidentes.embossed: versión para dispositivos que imprimen braille.handheld: versión para terminales con pantalla pequeña y ancho de banda limitada (móviles).print: versión para impresiones de página.projection: versión para proyectores.screen: versión para pantallas de ordenador.speech: versión para sintetizadores del habla.tty: versión para dispositivos para discapacitados, teletipos y terminales.tv: versión para dispositivos de televisión.
En la actualidad esto es totalmente insuficiente ya que más importante que el tipo de dispositivo es el tamaño de su
2Fecha de publicación del tutorial: 2011-11-04
04/11/11 CSS3 Media Queries o cómo hacer un diseño adaptativo según el terminal
Esta obra está licenciada bajo licencia Creative Commons de Reconocimiento-No comercial-Sin obras derivadas 2.5
Síguenos a travésde:
Apache POI
Geoposicionamiento Webcon HTML5 y Google
Maps
Primeros pasos conSpring Web Flow 2
Karmacracy, diviertetecompartiendo.
Últimos Tutoriales del Autor
CSS Browser Selector ocómo olvidarnos de los
hacks en CSS
CAS REST: Cómologarnos en CAS sin ir a
la pantalla de login pordefecto
Implementando SSO conCAS: ejemplo práctico
Creación de un portletcon Primefaces
Cómo usar el DNIelectrónico
Últimas ofertas de empleo
2011-09-08Comercial - Ventas -MADRID.
2011-09-03Comercial - Ventas -VALENCIA.
2011-08-19Comercial - Compras -ALICANTE.
2011-07-12Otras Sin catalogar -MADRID.
2011-07-06Otras Sin catalogar -LUGO.
Puedes opinar o comentar cualquier sugerencia que quieras comunicarnos sobre este tutorial; con tu ayuda,podemos ofrecerte un mejor servicio.
Enviar comentario
(Sólo para usuarios registrados)
» Registrate y accede a esta y otras ventajas «
Anímate y coméntanos lo que pienses sobre este TUTORIAL:
En la actualidad esto es totalmente insuficiente ya que más importante que el tipo de dispositivo es el tamaño de supantalla que al fin y al cabo es donde se tiene que visualizar correctamente la información de nuestro sitio web.
Por este motivo CSS3 incluye el concepto de Media Queries, que nos permite definir una serie de condiciones enfunción de las características particulares de un dispositivo. De esta forma ahora podemos definir que queremos aplicaruna hoja de estilo concreta cuando el agente de usuario tenga un ancho de pantalla específico, de la siguiente forma:
<link rel="stylesheet" type="text/css" media="screen and (min-width: 700px)" href="hoja.css"/>
En este caso la hoja de estilo se va a aplicar cuando el agente de usuario sea una pantalla y tenga mínimo un ancho de700px. Tenéis un listado de las distintas propiedades que se pueden utilizar en la siguiente página:http://www.w3.org/TR/css3-mediaqueries/
3. Vamos a probarlo
Para hacer una prueba rápida de esta funcionalidad vamos a crear una hoja de estilo llamada prueba_1.css con elsiguiente contenido:
body{ background-color: red; }
Y otra llamada prueba_2.css con este otro contenido:
body{ background-color: blue; }
Ahora creamos una página HTML que incluya las dos hojas de estilo con las restricciones del tamaño de la pantalla, deesta forma:
<!DOCTYPE html><html> <head> <title>Prueba de Media Queries by Autentia</title> <link rel="stylesheet" type="text/css" media="screen, only screen and (max-device-width: 700px)" href="prueba_1.css"/> <link rel="stylesheet" type="text/css" media="screen and (min-width: 701px)" href="prueba_2.css"/> </head> <body> <p>Esto es una prueba de Media Queries by Autentia</p> </body></html>
Al cargar la página en cualquier navegador que soporte CSS3 veremos que al reducir el tamaño de la ventana delnavegador por debajo de 700px se vuelve rojo y por encima se vuelve azul.
De esta forma podemos conseguir visualizar el contenido de nuestra página perfectamente adaptado a los agentes deusuario que se conecten, un ejemplo real de esto, lo encontramos en la página principal de Liferay, donde si hacéismás grande o más pequeña la pantalla del ordenador veréis la página completamente adaptada al tamaño. Bastantemás espectacular que nuestro ejemplo de andar por casa.
Cualquier duda o consulta a la zona de comentarios.
![LA CRISI DEI FONDAMENTI DELLA … · Web view... con Y < Z intendiamo che Y Z e Y Z . Cantor ha dimostrato che se P(Y) è l'insieme di tutti i sottoinsiemi di Y, allora Y < P(Y) […].](https://static.documenti.site/doc/80x56/5c6736ee09d3f23a018b646c/la-crisi-dei-fondamenti-della-web-view-con-y-z-intendiamo-che-y-z-e-y-z.jpg)