Artículos con la etiqueta 'Safari'


Truco muy breve: registro de objetos JavaScript

Si usted va a desarrollar en un ambiente donde es imposible utilizar las herramientas de depuración, como Firebug , como el simulador de iPhone de Apple en Xcode, que puede llegar a ser frustrante para encontrar problemas, incluyendo el acceso incorrecto a todas las propiedades de un objeto. Aquí es que la utilización de obras alert() es fundamental!

Continuación ...

Firefox 3.5.7: cómo solucionar el defecto de los bordes redondeados de una imagen

A veces sólo hay que mover un elemento, cambiar el punto de vista, para resolver un problema parece insuperable. Cuando uno tiene que ver con la compatibilidad entre navegadores y CSS, inventando soluciones "espectaculares" (dobles diría) está en la agenda. , per Safari e Google Chrome. Lo que yo te mostraré una manera fácil de aplicar a las imágenes de esquinas redondeadas con -moz-border-radius , que está disponible para Mozilla Firefox y -webkit-border-radius Safari y Google Chrome.

Continuación ...

Truco muy corta: desactivar el cambio de tamaño de un área de texto en Safari

En cualquier navegador desarrollado a partir del motor de renderizado WebKit (con cita previa como Safari o Google Chrome ), los campos textarea show, abajo a la derecha, el rasgo característico del cambio de tamaño. Si esta peculiaridad puede resultar muy útil en algunos casos, en otros se convierte en un elemento molesto.

Continuación ...

jQuery: bordes redondeados en las imágenes se superponen

Debido a la prestación diferentes a través de navegadores, Microsoft Internet Explorer definitivamente veo eso en mente, siempre hay que recurrir a trucos para aplicar efectos especiales que ahora debería ser una norma. El premio discutido bordes redondeados son un ejemplo clásico de "desastre" producido por la total incapacidad para hacer una grave las normas de representación de páginas HTML / CSS. , etc… Hay muchas soluciones que permiten a la red para obtener los "efectos" (efectos de la exención de HTML existentes como los bordes redondeados y de sombras, reflejos, etc ...) con manchas en las hojas de estilos, trucos especiales con el uso de div injertados, las bibliotecas JavaScript, el uso de canvas , etc ...
En una enseñanza puramente técnico me gustaría explicar con más detalle (cross-browser) para aplicar los bordes redondeados de las imágenes:

Demostración y la fuente

Continuación ...

CSS3: ¿alguien ha visto el Internet Explorer?

Sólo que no ...

1
2
3
4
5
6
7
8
9
{P
/ * Esquinas redondeadas * /
; /* CSS 3 */ border-radius: 9px; / CSS * 3 * /
; /* Opera */ -O-border-radius: 9px; / * Opera * /
; /* iCab */ -ICAB-border-radius: 9px; / * iCab * /
; /* Konqueror */ -KHTML-border-radius: 9px; / * Konqueror * /
; /* Firefox */ -Moz-border-radius: 9px; / * Firefox * /
; /* Safari */ -Webkit-border-radius: 9px; / * Safari * /
}

Continuación ...

jQuery contra todos: un punto de referencia con 5 navegador

imagen Un buen desarrollador no tiene ningún problema para pasar de un lenguaje de programación a otro. La decisión de centrarse en un entorno particular idioma, marco o desarrollo, y obedece más a la disponibilidad de tiempo y el tipo de trabajo que se lleva a cabo. Sin embargo, un factor importante que puede influir en la elección de los "marcos" como es la simpatía y el afecto que pueden madurar con el tiempo.
En concreto, quería analizar algunos - ciertamente no todos - los marcos de JavaScript disponibles en la actualidad, ya que incluso le "aconsejó" a echar un vistazo sobre todo en jQuery .
Los creadores de mootools (uno de los frameworks de JavaScript más populares) han puesto a disposición una herramienta para ejecutar una prueba de velocidad y la validez de los cinco conocidos frameworks de JavaScript: Slickspeed . Esta prueba, el resultado no es descontado a todos, es importante para funcionar como marcos de Javascript del lado del cliente, que son ejecutados por el navegador. Es precisamente por esta razón que algunos encuentran Safari más rápido que Internet Explorer o Google Chrome más rápido que Firefox . Sin embargo, esto a menudo depende del tipo de página que está viendo. En efecto, bien puede ocurrir que un sitio en particular es realmente más "rápido" cuando se ve en Safari, pero esto no quiere decir que "todos los sitios" será más rápida con Safari! Obviamente esto es cierto para cualquier otro navegador.

El índice de referencia

En la prueba que hice con Slickspeed he comparado los navegadores disponibles en mi equipo (Windows Vista de 64 bits Utilmate - Intel Core 2 Quad 2,4 GHz con 8 GB de RAM).
Desafortunadamente, las pruebas no son capaces de correr con Internet Explorer 7, ya que el coche se estrelló, incluso yendo fuera de escala con los resultados! Una vez más, felicitaciones Microsoft.
Yo crercato para mantener el mismo estatus de la PC durante la prueba, abrir el navegador y no de forma individual mediante el envío de ningún otro proceso en marcha.

Nota: Si usted siente que también se ejecutan uno o más de estas pruebas, se puede comentar este post en el caso de los resultados de "curioso" y varios.

imagen

Google Chrome es muy rápido los resultados, con un valor de 68 (promedio) en el ensayo con jQuery . El más lento, sin embargo, fue Flock , a pesar de venir de la misma "madre" de Mozilla. Este pobre desempeño de Flock es realmente curioso como las redes sociales de corte, ya que es precisamente la web 2.0 redes sociales para tomar ventaja de los marcos de JavaScript disponibles, a fin de proporcionar una experiencia de navegación verdaderamente innovador y la interacción.
Sorprendentemente latidos Firefox y Opera también tiene un "pequeño y agradable, logrando incluso un 74 en el desempeño de Dojo ! FireFox y Safari, en general, son similares, con Safari más rápido en las pruebas con Mootools y jQuery.

¿Qué marco de elegir?

Si no te importa que prueba la velocidad de ejecución y no se preocupe por el tamaño normal en Kbytes del mismo marco, la respuesta podría ser "lo que te gusta" o, si se quiere, "lo que usted sabe mejor o es más armoniosa con su estilo de programación. "
En última instancia, estos marcos se verá un poco 'todos (véase por ejemplo el uso de $), a pesar de algunas diferencias importantes y sustanciales que pueden saltar a los ojos de un experto o realmente empujó el uso de una biblioteca en particular. En principio, de hecho, todo lo que se puede hacer con jQuery, por ejemplo, que usted puede hacer muy bien con mootools o prototipo! Si jQuery tiene una sintaxis muy compacto, ya que todos los métodos siempre devuelven el objeto jQuery base, creando así interminables filas de oggetto.metodo().metodo().metodo()... se dice que todo esto es los costos de una fortaleza, especialmente para aquellos que se han de depurar!
Las bibliotecas como prototype.js pecado, quizá en la ausencia de efectos, incluso simple, obligando a los desarrolladores a implementar como un spin-off scriptaculous.js , pesado y muy lejos de la elección de la primera biblioteca.

Un ejemplo

Esta última razón, por ejemplo, me llevó a sustituir el prototipo unido / Scriptaculous con jQuery para crear paneles interactivos / undolog.com animados aquí en la barra lateral. De hecho, incluso utilizando la API de Google para importar bibliotecas, que es un desperdicio para cargar todas las bibliotecas y scriptaculous un slideUp slideDown. Para más información y un ejemplo, aquí está el código Javascript, ya que fue junto con el prototipo / Scriptaculous:

1
2
3
4
5
6
7
8
9
10
11
12
13
/ / Prototipo / scriptaculous
) . each ( $ $ ('H2.dropdown "). Cada uno (
element ) { función (elemento) {
= "pointer" ; .. elemento de estilo cursor = "puntero";
'click' , elemento. observe ('click',
event ) { función (evento) {
this . next ( ) . style . display == "" ) new Effect. BlindUp ( this . next ( ) , { duration : .5 } ) ; si (.. this. next () el estilo de visualización == "") Efecto nuevo BlindUp (this. next (), {duration: 0.5});.
Effect. BlindDown ( this . next ( ) , { duration : .3 } ) ; . Efectos más nuevo BlindDown (this. next (), {duration: 0.3});
event ) ; Detener Evento (evento).;
}
)
}
);

y ahora con jQuery:

1
2
3
4
5
6
7
8
9
10
/ / JQuery
) . each ( $ ('H2.dropdown "). Cada uno (
i ) { función (s) {
) . css ( 'cursor' , 'pointer' ) . click ( $ (This). Css ('cursor', 'puntero'). Haga clic en (
function () {
$ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; si (.. $ (this) siguiente () es (:) "ocultos") slideDown $ (this) al lado de () (); más $ (this) siguiente () slideUp ();....
}
);
}
);

En definitiva, una mirada más cercana, no creo que hay una gran diferencia! Pero como he dicho antes ... la pregunta es "también" de gusto personal.

Continuación ...

Firebug Lite: Firebug para IE, Opera y Safari

Usando Firebug Lite . puede utilizar una versión simplificada de la nota sobre la extensión para los navegadores Microsoft Internet FireFox Exploer, Opera y Apple Safari Lite Firebug se puede utilizar de dos maneras: como una llamada de una línea de la biblioteca o Añadir a favoritos

Bookmark modas

La adición de esta "intervención especial" Firebug Lite para nuestros marcadores (arrastrar el enlace en mis favoritos) - el código es:

1

Puede activar Firebug Lite en cualquier sitio web desde cualquier navegador. Esta es quizás la opción más atractiva, aunque sus funciones son muy limitadas.

Fuera de línea

Por otra parte, si estamos desarrollando un sitio Web, usted puede descargar un JavaScript e instalar en nuestro sitio! De esta manera podemos usar Firebug Lite , incluso sin una conexión a Internet y local.

Firebug Lite es una forma de compensar la falta de esta extensión para otros navegadores, pero que era lento y muy limitado, sobre todo en CSS! Como se suele decir, mejor que nada ...

Continuación ...

Safari, eliminar el borde azul en los campos de entrada

Safari, el navegador de Apple, disponible para Windows, produce un borde azul (borde azul) al hacer clic en un campo input . Si en algunos casos, puede ser agradable, los demás se convierte realmente molesto! Para borrar sólo tiene que enchufar en nuestra hoja de estilo:

1
2
/ * ____________________________ Quitar borde azul * /
: 0 none } de entrada {outline: none} 0

O, alternativamente, directamente como un atributo en la etiqueta de input :

1
"outline: 0 none" ... / > < entrada style = "esquema: 0 ninguno" ... />

Continuación ...

Hecho en el cambio de tamaño de imagen en el navegador

En principio, cuando se inserta una imagen en un documento HTML se debe utilizar a su tamaño original. Sin embargo, el TAG IMG le permite forzar el ancho (ancho) y altura (la altura) de cualquier imagen, independientemente de su tamaño original. Esta ampliación se lleva a cabo - por supuesto - desde el navegador.
Utilice el tamaño original de una imagen es buena, aunque en algunos casos implica un doble trabajo para el Diseñador de Web y / o motores dinámicos (como CMS o bibliotecas de manipulación de gráficos) en el servidor Web. Una presentación de diapositivas clásico, por ejemplo, por lo general muestra las vistas previas o miniaturas (pequeñas imágenes) muestran que si se selecciona la imagen original más grande.

Continuación ...

Xopus: WYSIWYG editor de XML

Xopus es un editor de XML (HTML) en el modo de operación WYSIWYG dentro del navegador. Me había dado cuenta ya hace algún tiempo, gracias a un artículo publicado en Ajaxian . Lo menciono ahora porque sigue siendo una propuesta interesante en el web2.0/editor paisaje. Es una experiencia interesante! Xopus ha desarrollado muy bien (con el apoyo de Italia), con una excelente implementación del menú de contexto, aunque todavía no está completamente multi-navegador, la versión actual 3.1 sólo es compatible con Microsoft Internet Explorer (versión 6 y 7 ), sin embargo los desarrolladores han prometido tan pronto como sea por lo menos una versión compatible con Firefox (1 de febrero ha sido lanzado en versión alpha 3.1.1 es compatible con Firefox 2.0 +).

Como se discutió en otra parte, la cuestión de la compatibilidad (navegadores) a través del navegador, y que se castigue frena el desarrollo de herramientas, ni siquiera el uso de tecnologías especiales, como applets de Java o Flash de Adobe, podría aportar una contribución significativa a la Comunidad! Conttibuto impedido - finalmente - de innecesarias batallas internas de los productores actuales de los navegadores: IE, Firefox, Opera, Mozilla, Safari, ...!

Ver la demo también se verá algo más que sencillo editor HTML, para decirlo sin rodeos. Xopus propone es la estructura clásica del editor, el estilo y las características avanzadas de Microsoft Word. Puede, de hecho, entrar en la página real de los objetos inteligentes que cumplan con ciertas características, por lo que Xopus un caso particular.

Como se indica en la página web:

Xopus es una buena solución para cualquier negocio que tenga un sistema de contenido back-end de gestión y en los sistemas de front-end de publicación y dos sistemas que por lo tanto el uso de elementos de análisis. Que la estructura a la información, para que ambos extremos se encuentran, tanto es un deber.

Puedes ver un vídeo de demostración que se presentan las funciones de edición avanzada. También puede probar una demo directamente.

Continuación ...