CSS para todas las plataformas


HTML, CSS, PHP, JavaScript, Java... tus dudas por aquí...
   

CSS para todas las plataformas

Notapor Manolo » May 2009, 18:53

Hola a todos :)
Quisiera formular una pregunta, pero primero os pondré en situación. Imaginad que tenemos que hacer una página que se vea igual (hablando sobre CSS) en un Windows que en un Mac que en un iPhone... Al definir la fuente para el cuerpo, escribiríamos:
Código: Seleccionar todo
body {
font-family: Trebuchet MS;
}

Pero hay un problema, la fuente Trebuchet MS (por poner un ejemplo) puede no estar instalada en el iPhone o en el Mac. ¿Cómo haríamos para que en todas las plataformas se viera esta fuente? ¿Hay algún 'código universal' para que se vea igual?
Gracias a todos.
Avatar de Usuario
Manolo
Nivel 2
 
Mensajes: 67
Registrado: May 2009, 18:45
Ubicación: Jaén, España

Re: CSS para todas las plataformas

Notapor Alejandro » May 2009, 19:08

Hola Quitz, si no está instalada no sale... lo que se puede hacer es especificar más fuentes... si una no está pasa a la siguiente, algo así:

Código: Seleccionar todo
body {
font-family: Trebuchet MS, Arial, otra fuente, otra fuente;
}
Avatar de Usuario
Alejandro
Administrador
 
Mensajes: 3616
Registrado: May 2009, 18:28
Ubicación: Uruguay
Twitter: @spamloco

Re: CSS para todas las plataformas

Notapor elQuique » May 2009, 19:21

W3C o World Wide Web Consortium son quienes dictan las pautas y estándares de la Web, por tanto es interesante comenzar a aprender HTML y CSS desde esas paginas ya que de esa forma eliminamos las mañas y cosas mal aprendidas.

Para que el contenido sea Accesible debe respetar Estándares y esa fuente no es estándar ya que no existe en todas las plataformas.

Igualmente la solución para mitigar el problema es la que comenta spamloco.

Igualmente ya que mencionas iPhone, es entendible que no es lo mismo la pantalla de un iPhone que la de un PC o NoteBook, por tanto también es cierto que los contenidos no tienen porque verse igual en todos los dispositivos, se tienen que ver pero no ser pixel a pixel idénticos.

Recuerda que cualquier usuario puede ir a herramientas configuración y elegir times new roman tamaño 14 para ver toda la internet, y listo voló tu teoría y diseño :)
Avatar de Usuario
elQuique
Moderador
 
Mensajes: 2040
Registrado: May 2009, 18:43
Ubicación: Florida, Uruguay
Twitter: @elQuique

Aclaración

Notapor Manolo » May 2009, 19:53

elQuique, a lo que me refiero es que, si una fuente tiene que ser de 12 px y de color negro, que en todas las plataformas se vea con 12 px y de color negro. Muchas gracias a los dos por las respuestas. Por cierto: ¿cómo se puede saber si una fuente es estándar o no?
Avatar de Usuario
Manolo
Nivel 2
 
Mensajes: 67
Registrado: May 2009, 18:45
Ubicación: Jaén, España

Re: CSS para todas las plataformas

Notapor elQuique » May 2009, 20:36

Si a lo que comenta spamloco le agregas:
Código: Seleccionar todo
font-size: 12px;
color: #000;


va a ser negro de 12px, a menos que yo configure mi navegador para usar el tamaño y fuente que yo quiera.

Igualmente no se debe usar px se debe usar em u otras medidas estándares independiente del dispositivo, configuración, o navegador que utilicemos.

Donde aprender todo eso ??, quien marca los estándares ? pues donde dije :s en W3C => http://www.w3c.org/
W3C o World Wide Web Consortium son quienes dictan las pautas y estándares de la Web, por tanto es interesante comenzar a aprender HTML y CSS desde esas paginas ya que de esa forma eliminamos las mañas y cosas mal aprendidas.
Avatar de Usuario
elQuique
Moderador
 
Mensajes: 2040
Registrado: May 2009, 18:43
Ubicación: Florida, Uruguay
Twitter: @elQuique

Re: CSS para todas las plataformas

Notapor JMiur » May 2009, 20:56

Lo que dicen SpamLoco y elQuique es así. en este sitio, hay una lista de fuentes llamémoslas "seguras": http://vloox.com/92/fuentes-web-seguras/

En cuanto al tamaño, yo recomentaria usar pixeles y no puntos.

También hay que tener cuidado con los colores ya que hay diferencias importantes y es por eso que se definen una serie de colores como "seguros": http://es.html.net/tutorials/html/lesson7_216websafecolourchart.asp

El tema de los móviles es nuevo (por lo menos para mi) ¡Ya tengo bastante con los sistemas operativos y con los distintos navegadores! :mrgreen:
Última edición por JMiur el May 2009, 07:39, editado 1 vez en total
Avatar de Usuario
JMiur
Nivel 2
 
Mensajes: 20
Registrado: May 2009, 02:33
Ubicación: Buenos Aires, Argentina

Re: CSS para todas las plataformas

Notapor Nico » May 2009, 21:51

Muy bueno el link de las fuentes seguras. Tengo una pregunta: influye en algo especificar "sans-serif"? O de todas formas, igual es lo mismo y se utilizará una fuente genérica?
Avatar de Usuario
Nico
Nivel 4
 
Mensajes: 121
Registrado: May 2009, 18:50
Ubicación: Montevideo

Re: CSS para todas las plataformas

Notapor JMiur » May 2009, 23:54

Es que, justamente, esa es la forma de indicar una fuente generica: monospace serif sans-serif cursive fantasy

Indicarla es "obligatorio" porque es el tipo que se usará en caso de no disponerse de ninguna de las otras indicadas.
Avatar de Usuario
JMiur
Nivel 2
 
Mensajes: 20
Registrado: May 2009, 02:33
Ubicación: Buenos Aires, Argentina

Pregunta a JMiur

Notapor Manolo » May 2009, 07:37

hmmm... eso de las fuentes genéricas parece interesante. ¿Quiere eso decir que si en un PC no está instalada la fuente 'Arial', por ejemplo, podemos usar 'sans-serif' y se seguiría viendo bien?
Avatar de Usuario
Manolo
Nivel 2
 
Mensajes: 67
Registrado: May 2009, 18:45
Ubicación: Jaén, España

Re: CSS para todas las plataformas

Notapor JMiur » May 2009, 16:21

Algo así. Si no está instalada la fuente 'Arial' y pones 'sans-serif', el navegador buscará la fuente que más se aproxime.

Difícil que no esté Arial pero ... sólo es un ejemplo, claro :D
Avatar de Usuario
JMiur
Nivel 2
 
Mensajes: 20
Registrado: May 2009, 02:33
Ubicación: Buenos Aires, Argentina

Re: CSS para todas las plataformas

Notapor Manolo » May 2009, 17:55

Claro, Arial es solo un ejemplo. Sé que es una fuente demasiado común, pero si estuviéramos hablando de fuentes más raras como Franklin Gothic (una fuente cualquiera que he visto un mi carpeta de fuentes) puede que los usuarios de Mac o Linux no viesen correctamente la página.
Gracias por la respuesta, JMiur :D
Avatar de Usuario
Manolo
Nivel 2
 
Mensajes: 67
Registrado: May 2009, 18:45
Ubicación: Jaén, España

Re: CSS para todas las plataformas

Notapor elQuique » May 2009, 16:34

En realidad no hay que usar fuentes raras, hay que usar las estandares. Es un tema de Accesibilidad, y en algunos casos Usabilidad ya que quedan ilegibles, pero todo eso esta bien explicado en la pagina de W3C.
Avatar de Usuario
elQuique
Moderador
 
Mensajes: 2040
Registrado: May 2009, 18:43
Ubicación: Florida, Uruguay
Twitter: @elQuique

Re: CSS para todas las plataformas

Notapor Manolo » May 2009, 12:42

Gracias elQuique por la aclaración, de todas formas no uso fuentes raras. Solo era un ejemplo :D
Muy bién, ya he aprendido unas cosillas con este post. Creo que todas mis dudas ya están despejadas, muchas gracias a todos los que habéis respondido y me habéis contestado mi pregunta. Este post se puede dar por cerrado
Avatar de Usuario
Manolo
Nivel 2
 
Mensajes: 67
Registrado: May 2009, 18:45
Ubicación: Jaén, España

Re: CSS para todas las plataformas

Notapor elQuique » May 2009, 00:40

De nada, y cualquier cosa pega el grito.
Avatar de Usuario
elQuique
Moderador
 
Mensajes: 2040
Registrado: May 2009, 18:43
Ubicación: Florida, Uruguay
Twitter: @elQuique

Re: CSS para todas las plataformas

Notapor tomasdev » May 2009, 12:06

Esta bien, se que no corresponde porque el titulo dice CSS... pero deberias probar sIFR, y usas la fuente que quieras. Solo apto para diseniadores que saben lo que hacen.
tomasdev
Nivel 2
 
Mensajes: 21
Registrado: May 2009, 16:45

Re: CSS para todas las plataformas

Notapor pablocasuriaga » Jun 2009, 00:58

Muy interesante el post, y como dice elQuique todo esta en la W3C, pero me gustaria compartir con todos un interesante blog que conoci hace poco y la verdad que tiene articulos realmente interesantes CSS Blog espero que les sirva de algo.

Saludos

PD: Por si alguno se le ocurre preguntar, el blog no es mio :D ni de ningun conocido
Avatar de Usuario
pablocasuriaga
Nivel 2
 
Mensajes: 27
Registrado: May 2009, 16:23
Ubicación: Montevideo
Twitter: @pablocasuriaga

Re: CSS para todas las plataformas

Notapor Manolo » Jul 2009, 22:31

Gracias por el aporte Pablo, la verdad es que es interesante. He estado mirando, creo que me bajaré los apuntes rápidos de CSS para tenerlos a mano :)
Avatar de Usuario
Manolo
Nivel 2
 
Mensajes: 67
Registrado: May 2009, 18:45
Ubicación: Jaén, España


¿Quién está conectado?

Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 0 invitados