Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 7 de 7

Tema: css responsives

  1. #1
    Recien Llegado! Merodeador Avatar de ruthquin
    Fecha de Ingreso
    08 feb, 15
    Ubicación
    Madrid
    Mensajes
    8
    Poder de Reputación
    0

    css responsives

    Hola amigos!

    Tengo una duda vital respecto A las hojas de estilo, bueno dos, jeje

    Una es.....si tengo una plantilla con 3 hojas de estilo distintas, normal, responsive y iexplorer iexplorer, y quiero saber si la vinculación de la index.htm se haría igual solo que enlazando A las tres hojas de estilo. Y en ese caso, se haría el enlace poniendo las tres hojas de estilo A la vez o por separado.

    Si alguien maneja dreamweaver sabría como hacer, partiendo de un html para Q hubiese css normal y responsive, esq los tutoriales Q hay son de hacerlo desde cero Con diseňo fluido en grid, pero no hay tutoriales Q expliquen cómo hacer diseňos responsives partiendo de un css normal, si debemos aňadir css, como debemos vincularlo etc...

    La segunda duda es....sabéis como hacer degradados en css?

    Y otra duda más ya la última....a ver. Soy novatilla ok? Estoy haciendo mi primera web desde cero y de momento tao como dicen los manuales, lo que hago es hacer html en una hoja llamada indeX.html pero veo Q en las webs, concretamente las templates wordpress, hay también una hoja Page.php y no se cual es la diferencia entre ambas cosas.

  2. #2
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,043
    Poder de Reputación
    21
    Hola!

    1.- Cuando intentas hacer un diseño responsivo hay varias formas de hacerlo.

    Una es separar el código en archivos e incluirlos dependiendo de la resolución del cliente. Esto se hace con añadiendo el atributo a la etiqueta link. Ejemplo:
    Código HTML:
    <link type="text/css" rel="stylesheet" media="screen and ([max|min]-[width|height]: NNNpx)" href="archivo.css" />
    Esto haría que el archivo se incluyera sólo si la pantalla mide un máximo (max) o mínimo (min) NNNpx de altura (height) o anchura (width).

    Lo mismo se puede hacer dentro de los archivos CSS para agrupar las reglas:

    Código HTML:
    @media screen and (max-width: 300px) {
      body { width: 100%} 
      div#sidebar { width: 100px; }
      div#main { width: 190px; }
    }
    Por otra parte están las inclusiones específicas para Internet Explorer. Estas te permiten incluir archivos o código dependiendo de la versión de Internet Explorer que el cliente use.

    No conozco una forma automatizada de hacer un diseño responsive, puesto que se requiere mucho trabajo para que el diseño quede exactamente como estaba en la ilustración. La mejor forma es ir modificando el CSS y probando cómo se ve en los distintos navegadores y tamaños (agrandando y achicando el navegador y también en navegadores móviles).

    2.- Con esta herramienta puedes crear degrades fácilmente. Esto sirve sólo con navegadores que soporten CSS3, por lo que no funciona en IE8 (hay forma de hacerlos, pero es más complicado).

    3.- La diferencia es que Wordpress utiliza un lenguaje del lado del servidor para procesar información (leer una base de datos, guardar información en el servidor, etc.), mientras que HTML no hace nada, sólo formatea el texto. ¿Qué diferencia hay entre una extensión y otra (php|html)? Ninguna en términos de HTML y CSS (y Javascript), pero sí importa si necesitas interpretar el código PHP. Si el archivo no tiene la extensión .php, entonces el servidor no sabrá que deben interpretar el código antes de presentarlo al cliente. Obviamente, esto no es importante si no sabes programar.

    Cliente: el cliente es aquel que procesa el contenido web. Lo común es un navegador como Google Chrome, Firefox u otro.

  3. #3
    Esto empieza a ser un vicio... Habitante Avatar de Doodleo
    Fecha de Ingreso
    25 abr, 11
    Ubicación
    Galicia (España)
    Mensajes
    1,329
    Poder de Reputación
    17
    Las explicaciones de @skaparate siempre son de lo más completas y sencillas, es increíble xD.

    No quiero meterte muchos pájaros en la cabeza, pero cuando domines lo básico (HTML y CSS) y no quieres complicarte la vida con el responsive design, podrías utilizar frameworks o sistemas de grids ya diseñados. Yo empecé hace poco a utilizar Bootstrap en los proyectos que me iban surgiendo y la verdad es que me va bastante bien con él (aunque es cierto que le faltan algunas cosas - por ejemplo, más tamaños predefinidos para las media queries, ya que a partir de 480px lo considera ya un smartphone).

  4. #4
    Recien Llegado! Merodeador Avatar de ruthquin
    Fecha de Ingreso
    08 feb, 15
    Ubicación
    Madrid
    Mensajes
    8
    Poder de Reputación
    0
    Jo mil gracias de verdad.os agradezco muchiiiiiiisimo las respuestas.lo de frameworks y bootstrap fijate Que lo he visto por ahí, pero nunca me fije, A partir de ahora tomo nota de los expertos.Gracias A ambos de verdad.u perdón por mi ignorancia o si mis dudas son algo tontas.por algo hay Q empezar si uno es autodidacta...voy A seguir con mis dudas pero he descubierto un foro dedicado A wordpress y a el que voy A ir de cabeza...jejej

  5. #5
    Esto empieza a ser un vicio... Habitante Avatar de Doodleo
    Fecha de Ingreso
    25 abr, 11
    Ubicación
    Galicia (España)
    Mensajes
    1,329
    Poder de Reputación
    17
    Entonces sólo me queda decirte que ComoCrearTuWeb tiene una parte especializada en WordPress :p
    Puedes acceder a ella pinchando aquí: http://wordpress.comocreartuweb.com/

    Cualquier duda seguimos por aquí unos cuantos... :D

  6. #6
    Recien Llegado! Habitual
    Fecha de Ingreso
    18 abr, 16
    Ubicación
    Lanzarote
    Mensajes
    10
    Poder de Reputación
    3
    Hola, hola¡

    Para hacer degradados utilizo una herramienta muy sencilla on-line que genera el código css simplemente jugando con las colores, posición y demás.
    Luego sólo tienes que copiar el código y añadirlo a tu hoja de estilo.
    Además la web te permite generar otras cosas como sombras o bordes específicos. Este es el link: http://www.cssmatic.com

    Un saludo¡

  7. #7
    Me va gustando esto... Habitante
    Fecha de Ingreso
    25 mar, 16
    Mensajes
    31
    Poder de Reputación
    3
    interesante!!

Etiquetas para este Tema

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •