Estoy en la fase de diseño de una aplicación web PHP de tamaño mediano (no un sitio web estático). Como soy un programador con la creatividad de una berenjena, me gustaría contratar un profesional independiente para que diseñe la apariencia de la aplicación. ¿Qué producto debo solicitar al diseñador? Archivos HTML? Archivos PHP? ¿Cómo aplico la apariencia del diseñador a mi aplicación?Entregables para el diseñador web PHP
pregunta por:
Una vez ha llegado el momento de integrar el deisgn en su aplicación, desea separado el diseño de su lógica y la base de datos de acceso. Esto facilita el mantenimiento más adelante y también facilitará la realización de cambios a medida que desarrolle la aplicación.
- Aunque los detalles de cuáles debe usar están fuera del alcance de esta respuesta, tenga en cuenta que hay muchos marcos y paradigmas (marcos MVC, sistemas de gestión de contenidos, etc.) que facilitan la separación de la lógica.
Una manera simple de separar la lógica del diseño es simplemente configurar variables en archivos PHP, y luego incluir los archivos apropiados para el diseño (que también deberían ser archivos php o phtml como verá a continuación) Además, debe tomar cualquier sección de la página que se repite en muchas páginas y tenerlas como un archivo php separado que puede incluir en otras páginas. Por ejemplo ...
mala manera (No haga esto!):
//File: itemsPage.php:
<html>
<head>
<title>Our items</title>
</head>
<body>
<?php
echo "<ol>";
$itemsResult = mysql_query("SELECT * FROM items ORDER BY id LIMIT 10");
while ($item=mysql_fetch_array($itemsResult)){
echo "<li>".$item['name']." - ".$item['description']."</li>";
}
echo "</ol>";
?>
<br><br>
Affiliates: Microsoft | Bob's Home Furnishing Store | <a href="http://www.example.com/affiliates.php">become an affiliate</a>
</body>
</html>
mejor manera:
//File: itemsPage.php
<?php
$title='Our Items';
include('header.php');
include('items.php');
include('footer.php');
?>
...
//File: header.php
<html>
<head>
<title><?php echo $title?></title>
</head>
<body>
...
//File: items.php
<?php
$itemsResult = mysql_query("SELECT * FROM items ORDER BY id LIMIT 10");
$items=array();
while ($item=mysql_fetch_array($itemsResult))
$items[]=$item;
include('items.phtml');
?>
...
//File: items.phtml
<ol>
<?php foreach ($items as $item){?>
<li><?php echo $item['name']?> - <?php echo $item['description']?></li>
<? } ?>
</ol>
...
//File: footer.php
<br><br>
Affiliates: Microsoft | Bob's Home Furnishing Store | <a href="http://www.example.com/affiliates.php">become an affiliate</a>
</body>
</html>
mejor manera: Como insinuado anteriormente, la mejor manera de hacer esto es utilizar un marco (Zend, etc.), que estará diseñado para hacer las cosas lo más organizadas y fáciles posible para usted.
Debe proporcionarles el resultado HTML y dejar que trabajen con eso. Podrían pedirle que reestructure la salida/aplique los id o las clases a ciertas cosas.
"Entregables" serían cualquier archivo de imagen/archivo css.
Vas a tener que calibrar qué tan lejos en el sitio que les permites. Si es posible, bríndeles la vista de los archivos PHP (asumiendo un sistema MVC) para trabajar con/modificar.
Solo una nota al margen: sé exactamente cómo se siente. La creatividad de una berenjena sería demasiado amable para mí.
Normalmente, obtengo archivos HTML de mis diseñadores o PSD y los recorto yo mismo. Los archivos HTML deben contener todos los elementos básicos que necesita para ponerlos en PHP con archivos de encabezado incluidos por separado, etc. Por supuesto, también querrá el CSS y las imágenes.
Encuentro que es mejor dejar que el diseñador se concentre en lo que hace mejor que es el diseño en lugar de simplemente tratar de minimizar mi trabajo.
Un entregable de PSD es la solución más económica, pero puede tardar bastante tiempo en cortar y convertir en HTML/CSS. –
HTML, CSS y, probablemente, archivos de imagen. (Personalmente, también me gustaría el PSD - archivo de Photoshop - que usaron para crear el diseño. De esta manera, puede ver la visión del diseñador frente a lo que realmente se puede representar en HTML.)
Haciendo uso de esos los activos dependen de tu aplicación. Si está utilizando un marco MVC, por ejemplo, usaría esos activos para crear sus vistas.
Depende del tipo de diseñador con el que trabajará.
Mi diseñador produce PSD para el diseño y suministra imágenes jpg/gif/png para los elementos gráficos. Escribo todo el CSS y HTML, y así lo prefiero, ya que el JavaScript tiene que interactuar estrechamente con el CSS. Prefiero elegir mis propios ID de CSS, hacer todas las pruebas de diseño, etc. Es ilustradora y artista, y no tiene la primera pista sobre PHP, JS, CSS, etc. Eso funciona bastante bien para nosotros.
Si tiene un diseñador que maneja CSS y HTML, se beneficiaría de utilizar un sistema de plantillas como Smarty o h20. De esta forma, el diseñador puede hacer el trabajo sin interferir potencialmente con su base de datos y lógica de negocios (modelo/controlador).
El diseñador deberá comprender el flujo y la lógica de su aplicación para poder hacer diseños para todas las pantallas y estados diferentes.
En primer lugar, debe encontrar un diseñador que realmente entiende su proyecto y puede proporcionar un diseño que quepa. La respuesta a su pregunta debe depender completamente de la experiencia del diseñador.
Algunos diseñadores tienen excelentes habilidades de HTML, CSS y, a veces, PHP. Si este es el caso, sus entregas deberían ser solo eso. Si este es el caso, deberían proporcionarle HTML completo y funcional, CSS. Si sus habilidades de php son decentes, incluso podría pedirles que dividan elementos comunes en includes. Su kilometraje variará aquí. Como desarrollador de la aplicación, es su elección la forma de hacerlo, y hacer que un diseñador lo haga puede causar más daño que beneficio.
Si terminas con un diseñador que no tiene las habilidades técnicas, te recomendaría PSD detallados.Las capas deben estar claramente etiquetadas, y se deben hacer distinciones entre lo que se pretende que sea texto vs imágenes. En este punto, tienes otra opción. Siendo un desarrollador, puede construir las plantillas HTML usted mismo. Si no quiere tomarse el tiempo necesario para hacerlo, siempre puede usar un servicio como http://www.psd2html.com/. Me gusta usarlos porque se ocupan de todas las incompatibilidades entre navegadores, e incluso incluirán las cosas si incluye suficiente orientación. La única advertencia es asegurarse de que el PSD esté bien etiquetado.
De cualquier forma, lo más importante es asegurarse de que su diseñador obtenga lo que está haciendo, y descubrir cuál es la mejor solución para los productos que se deben entregar en función de sus habilidades.
Si su aplicación separa la lógica de la presentación, debe tener claro ahora para aplicar el trabajo del diseñador al suyo.
Mis diseñadores me suministran archivos PSD. Pero así es como me gusta. Charle con su diseñador y encontrará un terreno común.
Para el diseñador necesitará HTML, CSS e imágenes.
Es posible que otros diseñadores solo proporcionen una imagen de la página y te dejen de cortarla tú mismo.
Además, haga algunos arreglos sobre quién 'posee' el diseño después de que el diseñador haya finalizado. Si no lo hace, el diseño pertenece al diseñador, y legalmente no puede realizar cambios sin su consentimiento. Deje que el diseñador le transfiera los derechos del diseño.
Supongo que puede contar eso como entregable.
¡Bien pensado, gracias! – BenV
¡Las tablas y CSS no son mutuamente exclusivos! – Rimian
@Rimian: Eso es verdad. El diseño sin tabla significa solo usar tablas para organizar datos en un fasion tabular, y crear el diseño de la página por otros medios (a través de css). De hecho, la otra cara también es algo que debe evitarse: si tiene datos que deberían organizarse en una tabla, use una tabla. He visto algunos diseños tan interesados en evitar tablas que 'pure css' se utiliza para todo, lo que hace que html hinchado para la presentación de datos. He editado mi respuesta para aclarar esto. – Cam
Ah ... acabas de redefinir la palabra "sin tableta" para mí. ¡Excelente! He visto muchos diseños que van demasiado al agua en tableless también. Luego reclame que ahorra ancho de banda. Loco, te digo! – Rimian