Expresando TI

Otra vieja escuela complementaria de memoria ...

¿Por qué permitir windos.status?
Javascripts podía ser una pesadilla cuando usted tiene algo que depurar. Firefox tiene un addons útiles pocos, como eso es Firebug nos hace la vida fácil y también, el voto a favor de la técnica de depuración más popular en Javascript que ir a "alert ()". Anywaz! Hay pocos casos en que la adición de ALERTA se depura la mis-comportamiento, JavaScript es simplemente no es una buena idea. Por ejemplo! usted tiene el punto dragble cuya posición debe ser alertado .... NO NO NO! Dont do it! ... Usted acaba de recibir alertas infinitas o usted no será capaz realmente de su drap dragable. Bueno! Hay situaciones en las más buenas, en las que podría escribir los textos de depuración de la barra de estado, mucho más usful ... Créeme! Su experiencia!

IE por defecto a la izquierda que se escribe en la barra de estado del navegador utilizando la sintaxis "" algo para depurar 'window.status = ", pero Firefox no lo hace. Por lo tanto para permitir el cambio de estado de Windows, usted puede hacer cualquiera de las siguientes.

Abrir about: config en el navegador (tipo "about: config" esto en la barra de direcciones) y la búsqueda de
dom. disable_window_status_change. Cambiar a falso ... simplemente haga clic en la entrada para cambiar su estado.

O, alternativamente,

"Herramientas → Opciones → Contenido → Activar JavaScript / Avanzado → Cambiar el estado del texto de la barra"

Y también en cuenta que ... escribir en la barra de estado en el Javascript, el IE es sólo aceptable si se utiliza una sintaxis de estado a corto, es decir = 'un poco de texto de depuración ", pero en Firefox, usted tiene que utilizar en su totalidad es decir, la sintaxis window.status =' algo para depurar '

Ni yo soy muy nuevo en la interfaz de usuario (UI) de desarrollo, ni soy un veterano y como yo siempre lo ponía, me encajan en el perfil de la interfaz de usuario desarrollador más que el de un diseñador, sin remordimientos. Oh Well! ¿Qué estaba escribiendo? Durante un tiempo ... (debe ser en los años no por ello menos) Ahora, de vez en cuando, cuando me pongo en un poco de diseño de interfaz de usuario (cuando el diseñador profesional ha ido en un día de fiesta), me detengo siempre puedo pensar si mi diseño debe estar debidamente complient o no (sinceramente no, que yo podía achive 100% cumplimiento de las normas, si yo quería también). Entonces me digo, ¿qué mierda! ... El diseño debe ser sencillo, agradable y sobre todo parece útil, no debe hacer que los visitantes de huir ... o rebote (como técnico). ¿De qué serviría un bonito diseño sin tablas CSS es para el visitante, que es ajeno a todo el inteligente El hipertexto y la Hoja de estilo en cascada bajo la piel de su página web ... Zilch!
Debe tener un aspecto agradable y fácil de usar ... luego viene la materia todas las normas.

Yo stumbbled cruzando esta entrada del blog de ​​Jason Fried de 37 Signals (Para aquellos que no son conscientes de las señales de 37 son los onces que han creado algunas aplicaciones web como Basecamp impresionantes, etc Campfire) que escribieron algo similar en 2004 y, créeme, casi 5 años y no ha cambiado mucho desde que ... yo estaba feliz de leer su mensaje, ya que estoy totalmente de acuerdo con lo que tiene que decir y también el hecho, ella no está segura sobre lo que está diciendo acerca de su su solo instinto y por lo tanto es mío

Jason Fried: "No hay manera de habla demasiado de CSS y XHTML y Normas y de accesibilidad y no es suficiente hablar de la gente. CSS y el código de Cumplimiento de normas son sólo herramientas - usted tiene que saber qué construir con estas herramientas. Genial, me alegro de que la interfaz de usuario no utiliza tablas. Entonces, ¿qué? A quién le importa si es que todavía no permite que las personas a alcanzar sus metas. Los estándares web son grandes, pero las normas propias de la gente son las cosas se hagan (y que todavía es muy difícil de hacer en línea).

Los diseñadores de la interfaz de usuario está haciendo la misma vieja fundamental "olvidando al ser humano en el otro lado" errores - excepto que esta vez su código se ve mejor. Los seres humanos-no validadores de código - interfaces de uso ".

Artículo completo Pedido Jason Fried

DISCALIMER: Esto no quiere decir que no hay que preocuparse por las normas en absoluto. Las normas son bien tener y se adhieren a ellos tanto como sea posible. Sólo tenemos que entender que el diseño de interfaz de usuario bien no siempre significa que el 100% complience normas o viceversa ....

Desde mi lista de mis lecciones aprendidas, que siguen un diseño de interfaz de usuario de unos pocos y Desarrollo Reglas de oro ... Heres el TOP 10 ... no es que usted tiene que seguir también ...

1. Tenga cuidado de sus usuarios. Los usuarios pueden hacer o deshacer a su sitio. DONOT hacer ver como un usuario idoit total, absolutamente incapaz de usar su sitio web. Eso es malo!

2. Mantenga la simplicidad y facilidad de uso de sus guidlines primarias. Demasiadas cosas en la pantalla, mayor será la probabilidad de que un usuario se confunde, o distraído de su tarea original.

3. Estar en los límites ... DONOT caer demasiado en Usabilidad, Accesibilidad y Estándares. El uso de una forma eficaz y hacer que entiende que el equipo. Esto asegurará consistencia adecuada en el producto

4. Prototype el requisito. Dado que, en estos días las interfaces de uso son ricos, Prototipos siempre es mejor que simplemente hacer wireframes sencillos y el segundo carece de interacciones decentes, que dejaría de proporcionar al cliente una imagen clara del producto final que se está desarrollando. Siempre es más fácil para convertir los prototipos en productos finales. También! con la creación de prototipos los problemas de interacción pueden ser subsanadas antes del ciclo de desarrollo.

5. La consistencia en el diseño y la interacción es muy importante. Hable de confundir al usuario con las interacciones impredecibles y artefactos.

6. Comprender su "Declaración de la Misión de diseño". Llevar centrarse en la acción principal de la beign página diseñada. Además, haga una lista de sus acciones seconday en la página, y dar prioridad a ellos.

7. Proporcionar retroalimentación adecuada a los usuarios del sitio. Con la mayoría de los sitios web diseñados en torno a AJAX, proporcionan pistas visuales para el usuario sobre los cambios en la página. El usuario tiene que dar un reconocimiento de la realización de cualquier tarea que realiza. Hable de que el usuario espera y supongo que, por ejemplo. establecer indicadores de progreso para uplaods de archivos.

8. Utilice los controles de forma adecuada. Para uso por ejemplo, seleccione la lista desplegable para listas pequeñas solamente, nose permitir al usuario elegir una de las 200 ciudades con cuadros de selección. Entender la diferencia entre un botón y un enlace. Un enlace y el botón tienen propósitos diferentes, nose usar uno para el otro. Proporcionar el control de la derecha para hacer la interacción con una página más fácil. Evite el uso de los menús, que son más que dos niveles de profundidad. No reinventar la rueda. Utilice los controles estándar, personalizarlos sólo si es muy necesario. Defina los controles personalizados necesarios para la mano el primer sitio, de modo que pudieran ser creado y probado de forma independiente, listo para el uso del sitio cruzando.

9. Donot ITERATE demasiado en el diseño. ¡Recuerde! El producto entero consiste más que el diseño solo. Construir líneas de tiempo apropiados en la programación del proyecto para las iteraciones de diseño y se adhieren a ella. Iteración nos ayuda a averiguar lo que funciona y lo que no, elegir los puntos más conflictivos. Como una buena interfaz requiere tiempo, dar tiempo para las iteraciones en el comienzo del ciclo de desarrollo, de modo que las iteraciones de diseño doesnot directa equivale a reelaborar. Demasiado reelaborar mucho podría jeopradize plazos.

10. Siéntese y pensar como un usuario veces.

Aquí está otro pedazo pequeño de engaño Javascript que tenía que cavar a su alrededor porque la situación lo commaned. En uno de mis sitios web, he tenido esta situación en la que tuve que poner en práctica "windows.onload" dos veces. La primera cosa que vino a la mente una experiencia como la mía (tengo que decir honestamente que, desde que he estado utilizando frameworks de JavaScript y las bibliotecas, he olvidado de hacer las cosas simples por mi cuenta ... triste pero cierto), es el siguiente método ...

 window.onload = onloadfn1;
 window.onload = onloadfn2;
 window.onload = onloadfn3;
 etc ..

Lo siento decirlo, pero, este trabajo costumbre ... no quiero hablar sobre la ciencia ejecución de Javascript mucho ... pero de acuerdo a mi experiencia reciente, sólo la última función (onloadfn3) la mala voluntad se ejecuta realmente.

En situaciones normales, a diferencia de la mía (que voy a hablar un poco más tarde) ... puedes hacer lo siguiente para ejecutar funciones mutliple onload ....

O algo como esto

 doOnLoad function () {
         onloadfn1 ();
         onloadfn2 ();
         onloadfn3 ();
 }
 window.onload = doOnLoad;

Por mi situación actual, no puede utilizar cualquiera de los anteriores ...
¿Por qué tengo que llamar a windows.onload dos veces, en lugar que llamar a dos funciones dentro de una función onload sola? Aquí es rápido vistazo a mi declaración del problema ...

"Mis páginas del sitio se estructura como el tema de WordPress .... es decir, hay un header.php y footer.php comunes que se incluyen en todas las páginas del sitio. Hay una función de la Implementación onload en los footer.php para hacer algunas funciones comunes onload. Y hay pocas páginas que necesitan algo de su propia ONLOAD, además de los realizados por la función onload común. Si asigno función de callback directamente al controlador window.onload, será pasar por encima de las devoluciones de llamada asignados previamente en los footer.php "

.... Se entiende mi problema ?

Bueno! existen pocas soluciones que se encontró. Todos ellos son muy similares y sobre todo implementions de una solución dada por Simon Willison ( http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Solución:

Basta con añadir el código javascript para el sitio ...

 función de addLoadEvent (func) {
     var oldonload = window.onload;
     if (typeof window.onload! = 'function') {
        window.onload = función
     Else {}
        window.onload = function () {
            if (oldonload) {
                   oldonload ()
           }
           func ()
        }
    }
 }

Y lo llaman en lugar del habitual "windows.onload"

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (function () {
 / * Más código se ejecute en carga de la página *
 }); 

Las ventajas de este fragmento de código ...
1. En primer lugar, que le permite disponer de múltiples eventos windows.onload, llamada a partir de piezas separadas de su código, sin anulando la definición anterior
2. Es muy discreto. Se puede colocar en un archivo con las secuencias de comandos de otros o en un archivo separado.
3. Funciona incluso si window.onload ya se ha establecido.

Pensé que éste será un garabato de encontrar en Google, como muchos escritores que nos interfaz de usuario y el guión tendría que hacer esto en el día a día, es decir son un poco pedazo de fragmento de código PHP (. Php) en un Plantilla Smarty (. TPL). Me di cuenta de que más fácil / popular a su consulta, aún más difícil encontrar la respuesta exacta ... un millón de resultados de la búsqueda, pero la mayoría de ellos reffered a "archivo" incluye en Smarty ... que tiene la siguiente sintaxis

{Include file = "include / header.php"}

En realidad, esto inlcuded el archivo bien, pero como el texto, lo que quería era el resultado de archivo incluido. (Tenga en cuenta lo anterior se utiliza la plantilla incluyen dentro de un archivo de plantilla). Por último, con un poco persiverance .... Me topé con una sintaxis levemente modificada, la cual era la respuesta a mi solicitud ... así que aquí está ... si todavía no se encuentra uno ya

{Include_php file = "include / header.php"}

Otro tut rápida. Aquí hay algo sencillo y agradable usar el poder del CSS ... pero era concibian difícil (y seguramente no era yo), para empezar. Adición de Sombra, podría ser un pedazo de pastel para muchos de nosotros, usando algunas herramientas de edición de imágenes como Photoshop ANF fuegos artificiales, etc
La razón por la cual, he optado por el uso de CSS sombra es que, por lo general, mientras que la creación de un diseño de página / HTML de una aplicación, los requisitos de mantener la iteración. Lo que quiero decir es, en un sitio web existente con muchas imágenes, como las que muestran la lista freinds o una galería de imágenes, que será difícil volver a procesar toda la carga de las imágenes que ya habían sido descargadas para agregar o quitar las sombras, para que materia.
Así que si usted ha hecho un poco de visión de futuro al crear los htmls para añadir estas divisiones adicionales o por lo general la situación es que usted tiene una lógica de bucle generación de estos iconos o imágenes en miniatura en XSL, PHP. Java o cualquier otro lenguaje de programación / scripting, se puede añadir en cualquier momento, entonces es sólo la cuestión de mostrar y ocultar las sombras mediante la propiedad CSS Display, de acuerdo con las cambiantes necesidades de los clientes cada vez ... yo no te has hecho este tipo de visión de futuro antes de esto ... pero ahev empieza ya!

En el siguiente ejemplo, la imagen original es libre de sombras y los dropshadows se aplican según sea necesario! Además, he ido un poco más, mediante el uso de los trucos de mi anterior Tut (bien! estos probablemente son las más cortas variedad de tutoriales, por lo que sólo se justifica que califica de "Tut" 's) sobre uso de la propiedad CSS clip para mostrar sólo

Imagen original

CSS Resultados DropShadow

Ver demo | Descargar SourceFiles

¿Por qué quiero entender esto?? Humm ...!!

La mayoría de los escritores CSS de acuerdo en que la propiedad CSS clip es probablemente uno de la mayoría de los productos no utilizados de las propiedades CSS. Era tan real para mí también, y era el más feliz de olvidar, hasta que empecé a modificar el MooTools DOS Perilla (Pin) de componente Slider (con indicador de la gama) .

Hubo una buena sugerencia de uno de los usuarios de los componentes para modificar el componente Slider utilizando imágenes recortadas backgroud (contra una división de ancho variable) para indicar el rango deslizador. Así llegó el tiempo para entrar en la diversión, pero inexplorado de (para mi por supuesto) a las aguas de la propiedad Clip CSS.

Bueno! lo difícil que puede ser? No mucho ... SI y NO. La sintaxis para usar la propiedad CSS clip es bastante vertical, pero el significado / usuage es un poco croocked. Con una memoria como la mía, cada vez que me siento a trabajar en el guión de mi deslizante ... tengo tokeep refiriéndose al uso de esta propiedad CLIP, para recordarme a mí mismo la lógica que he creado en mi guión .... POR LO TANTO! cree que la pluma hacia abajo, con la esperanza de recordar que el futuro (y también para el beneficio de aquellos que parecen aturdida por la propiedad CSS clip)

¿Qué Clip CSS hacer?

Clip es parte del módulo de efectos visuales de CSS 2.1. En pocas palabras, su trabajo consiste en colocar una ventana visible en la parte superior de un objeto que está siendo cortado, por lo tanto, recortar imágenes y crear miniaturas sin tener que crear archivos adicionales (ya he puesto esta función para un mejor aprovechamiento en el componente Slider )

Uso de la propiedad Clip de CSS, puede crear un recorte con la forma rect. Al igual que muchas otras propiedades CSS (como el relleno, etc margen), utilizando rect requiere cuatro coordenadas Superior, Inferior Derecha, Izquierda (FALLO). La naturaleza croocked de esta propiedad refleja el momento en que eche un vistazo más de cerca cómo se calcula clip de la región de recorte, el uso de estos cuatro coordenadas (envía el cerebro en un sorteo por un tiempo). Ahora, para confundir a la parte inferior se inicia desde la parte superior, y el derecho se inicia desde la izquierda. . ¿Ves lo que te dije? .... Por lo tanto este post ...

Este poco de confusión pueden desaparecer fácilmente, con esta explicación visual de la CSS Clip / rect propiedad como de abajo!!

CSS Requisitos Clip

La tarea que hemos comenzado es para recortar la imagen en miniatura siguiente en una imagen más cuadrada buscando (y también una imagen de gran angular)

Thumbnal original / imagen	Requisitos para el clip Sqaure Thumbmail

CSS Resultados Clip

Ver demo | Descargar SourceFiles

Esta pregunta cruzó por mi mente un par de veces antes, cuando estaba trabajando en los sitios antes también, que utiliza WordPress para mostrar blogs o nuevo tipo de contenido en alguna parte del sitio / portal.Being un novato en PHP y alrededor de WordPress, me mantuve procastinating, pensando "este no es mi pedazo de pastel". ¡Por fin! este requisito llegó hasta mi nariz, cuando se inicia cavando alrededor de un pedacito de solución.
Me sorprendí al descubrir que en realidad era más fácil de lo que realmente pensaba que era, para mostrar una lista de los titulares o el último mensaje en cualquier otra página fuera de la sección de WordPress potencia, simplemente usando un poco de PHP y la API de WordPress .

Esto es lo que debe hacer: -
Por razones de explicación, supongamos que su sitio es http://www.inchembur.com/ y usted tiene la sección de noticias de este sitio en http://news.inchembur.com/ (que se está ejecutando de WordPress). Ahora bien, el requisito es para mostrar el último puesto de http://news.inchembur.com/ en la página principal del sitio principal, es decir, http://www.inchembur.com/index.php

Paso 1: En el index.php agregar el pedazo de código siguiente, se incluya el archivo de WordPress API. Puedes añadir esto a la parte superior de la página que quieres que tu mensaje aparezca en.

<? Php
'WP_USE_THEMES' , false ) ; // Disbable use of WordPress Theme define ('WP_USE_THEMES', false); uso / / Disbable del Tema de WordPress
require ('/ var / news.inchembur.com / wp-header.php de blog de'); / / Incluir WordPress API
; // Get Latest Post query_posts ('showposts = 1'); / / Obtener Último mensaje
>

En el pedazo anterior de inclusión, que estamos recibiendo sólo el mensaje más reciente single. si quieres probar otras variaciones no dude en indagar en, query_posts() la documentación .

Paso 2: Ahora, en la parte de la página Índice / Casa en la que desea mostrar el último mensaje de WordPress http://news.inchembur.com , utilice el siguiente código. Huelga decir que, no dude en anuncio de sus divisiones de estilo, se extiende y las clases como por sus necesidades de diseño.

Paso 3: No hay paso 3 ... Eso es todo ... lo tienes hecho!

¿Cómo mostrar una página específica posterior / frente al último mensaje: -
Esta facilidad es capaz de crear mediante la alteración de los argumentos para query_posts() para incluir el ID de la página o la página de bala

) ; query_posts ('page_id = 7');
) ; query_posts ('= nombre de la página de');

o Se puede controlar el número de puestos:
) ; query_posts showposts (= 3);

A veces, para mantener el pageweight abajo ... hemos dividido nuestros scripts en fragmentos ... Estos fragmentos de JavaScript se pueden cargar cuando sea necesario (en un evento o hacer clic en un vínculo o un botón, etc.)

Javascripts carga dinámica es sencilla y bastante simple de la siguiente manera ...

= “text/javascript” > <Tipo de script = "text / javascript">
función de loadNewScript (fuente) {
var s = document.createElement ('script');
s.setAttribute ('tipo', 'text / javascript');
s.setAttribute ('src', fuente);
document.body.appendChild (s);
}
</ Script>

y usted puede tener el enlace siguiente en cualquier punto en el cuerpo, o puede hacer que este script "onLoad" del documento en sí ...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a > <A href = "javascript: loadNewScript ('myDynamicScript.js');"> Cargar el script dinámico </ a>

o

<body onload="loadNewScript('myDynamicScript.js');">

Si usted es una persona css, usted sabe que el dolor en conseguir los diseños de trabajo multi-navegador. IE8 es otro palo en la rueda para los desarrolladores de nosotros. Anywaz! si se golpea sobre este tema, como lo hice ayer, donde su perfecto estado de funcionamiento de CSS en Internet Explorer 7 (y anterior) y Firefox de repente ha empezado hacer berrinches en IE8, intente lo siguiente ... Se muy bien parecido para arreglar mis problemas por el momento ....

Uso de la declaración del Meta, se puede especificar el motor de renderizado de Internet Explorer 8 nos gustaría utilizar. Así pues, para obligar a Internet Explorer 8 para hacer que Internet Explorer 7 ... Inserte la siguiente etiqueta META en la cabeza de su documento: -

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Por defecto IE Meta sería la siguiente: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
lo que haría que IE8 representar la página utilizando el modo de nuevas normas.

Si es necesario, esta sintaxis podría ser utilizado para acomodar para otros navegadores como a continuación:

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />

Más Acerca de DOCTYPEs:

Si usted todavía no están familiarizados con el tipo de animal que se llama "Doctype" ... he aquí algo de lectura rápida
¿Cuáles son DOCTYPEs? ¿Qué son los Caprichos de navegador y de modo estricto?
Ajuste de la DOCTYPE en XSL

Para un análisis más profundo conocimiento acerca DOCTYPEs, intento que visita estos links ...
A List Apart: Fije su sitio con el DOCTYPE ¡Muy bien!
A List Apart: Más allá de DOCTYPE: Estándares Web, compatibilidad hacia adelante, y IE8

Nota: Aunque muchos de nosotros HTML / CSS gente ha estado descuidando la importancia de decleration DOCTYPE en nuestros documentos, Configuración de la DOCTYPE correcto, suele ser la respuesta a las cuestiones de navegación más transversal.

Un reajuste CSS / CSS son para establecer una serie de estilos de los elementos de una línea de base específica que crea consistencia a través de diferentes navegadores.

Todos hemos sido a través de las pesadillas de la escritura de cross-browser CSS. Así que cuando comenzamos a escribir el código CSS, es una práctica para restablecer en primer lugar, para eliminar / restaurar las incoherencias en cualquier navegador. Restablece CSS, son simples líneas de CSS que usted comienza su CSS, dándole una base limpia para empezar a construir su sobre.

Los reajustes de CSS que normalmente tienden a utilizar este aspecto

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
html {font-size: 76%;}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}

ul ol {
list-style: none;
}

h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}

Restablecer el tamaño de fuente del navegador
También tenga en cuenta el reajuste que se ha aplicado al tamaño del navegador de fuente en la siguiente línea ...

html {font-size: 76%;}

Lo anterior se restablece el código CSS del tamaño de la fuente del navegador de 10 píxeles, y esto hace que sea posible trabajar con tamaños de fuente relativos (que es todo importante desde el cumplimiento de prespectiva WAI)
Por ejemplo, en la siguiente definición, tamaño de fuente en un lapso es de 10 píxeles, y que en el paragarph se establece en 14 píxeles ...

span {font-size: 1em;}
p {font-size: 1.4em;}